Add error template, route and controller

closes #2851

- adds asset paths to ghostPaths as we don't have an asset helper
- sends any invalid routes to 404

core/client/controllers/error.js

@@ -0,0 +1,15 @@
+var ErrorController = Ember.Controller.extend({
+    code: function () {
+        return this.get('content.status') > 200 ? this.get('content.status') : 500;
+    }.property('content.status'),
+    message: function () {
+        if (this.get('code') === 404) {
+            return 'No Ghost Found';
+        }
+
+        return this.get('content.statusText') !== 'error' ? this.get('content.statusText') : 'Internal Server Error';
+    }.property('content.statusText'),
+    stack: false
+});
+
+export default ErrorController;

core/client/router.js

@@ -36,6 +36,9 @@ Router.map(function () {
     this.route('debug');
     //Redirect legacy content to posts
     this.route('content');
+
+    this.route('error404', { path: '/*path' });
+
 });
 
 export default Router;

core/client/routes/editor/edit.js

@@ -12,7 +12,7 @@ var EditorEditRoute = AuthenticatedRoute.extend(base, {
         postId = Number(params.post_id);
 
         if (!Number.isInteger(postId) || !Number.isFinite(postId) || postId <= 0) {
-            this.transitionTo('posts.index');
+            this.transitionTo('error404', 'editor/' + params.post_id);
         }
 
         post = this.store.getById('post', postId);

core/client/routes/error404.js

@@ -0,0 +1,12 @@
+var Error404Route = Ember.Route.extend({
+    controllerName: 'error',
+    templateName: 'error',
+
+    model: function () {
+        return {
+            status: 404
+        };
+    }
+});
+
+export default Error404Route;

core/client/routes/posts/post.js

@@ -11,7 +11,7 @@ var PostsPostRoute = AuthenticatedRoute.extend(loadingIndicator, ShortcutsRoute,
         postId = Number(params.post_id);
 
         if (!Number.isInteger(postId) || !Number.isFinite(postId) || postId <= 0) {
-            this.transitionTo('posts.index');
+            this.transitionTo('error404', params.post_id);
         }
 
         post = this.store.getById('post', postId);

core/client/templates/error.hbs

@@ -1,5 +1,28 @@
-<h1>Sorry, Something went wrong</h1>
+<section class="error-content error-404 js-error-container">
-{{message}}
+    <section class="error-details">
-<pre>
+         <figure class="error-image">
-    {{stack}}
+             <img class="error-ghost" {{bind-attr src=ghostPaths.errorImageSrc srcset=ghostPaths.errorImageSrcSet}} />
-</pre>
+         </figure>
+         <section class="error-message">
+             <h1 class="error-code">{{code}}</h1>
+             <h2 class="error-description">{{message}}</h2>
+             <a class="error-link" {{bind-attr href=ghostPaths.blogRoot}}>Go to the front page →</a>
+         </section>
+    </section>
+</section>
+
+{{#if stack}}
+    <section class="error-stack">
+        <h3>Stack Trace</h3>
+        <p><strong>{{message}}</strong></p>
+        <ul class="error-stack-list">
+            {{#foreach stack}}
+                <li>
+                    at
+                    {{#if function}}<em class="error-stack-function">{{function}}</em>{{/if}}
+                    <span class="error-stack-file">({{at}})</span>
+                </li>
+            {{/foreach}}
+        </ul>
+    </section>
+{{/if}}

core/client/utils/ghost-paths.js

@@ -18,6 +18,9 @@ function ghostPaths() {
         blogRoot: subdir + '/',
         adminRoot: subdir + '/ghost',
         apiRoot: subdir + '/ghost/api/v0.1',
+        userImage: subdir + '/assets/img/user-image.png',
+        errorImageSrc: subdir + '/ghost/img/404-ghost@2x.png',
+        errorImageSrcSet: subdir + '/ghost/img/404-ghost.png 1x, ' + subdir + '/ghost/img/404-ghost@2x.png 2x',
 
         adminUrl: function () {
             return makeRoute(this.adminRoot, arguments);