Implement 404 page as in the API docs

app/router.js

@@ -16,4 +16,6 @@ Router.map(function () {
   });
 
   this.route('id', { path: 'id/:id' });
+  this.route('not-found');
+  this.route('new-test');
 });

app/routes/ember.js

@@ -1,9 +1,11 @@
 import Route from '@ember/routing/route';
 import processResults from '../utils/process-results';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class EmberRoute extends Route {
   @service store;
+  @service router;
 
   controllerName = 'show';
   templateName = 'show';
@@ -19,4 +21,9 @@ export default class EmberRoute extends Route {
       sorted: processResults(query),
     };
   }
+
+  @action
+  error() {
+    this.router.transitionTo('not-found');
+  }
 }

app/routes/id.js

@@ -1,10 +1,16 @@
 import Route from '@ember/routing/route';
 import { inject as service } from '@ember/service';
-
+import { action } from '@ember/object';
 export default class IdPRoute extends Route {
   @service store;
+  @service router;
 
   model(params) {
     return this.store.findRecord('content', params.id);
   }
+
+  @action
+  error() {
+    this.router.transitionTo('not-found');
+  }
 }

app/routes/not-found.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class NotFoundRoute extends Route {}

app/routes/show.js

@@ -1,9 +1,11 @@
 import Route from '@ember/routing/route';
 import processResults from '../utils/process-results';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
 
 export default class ShowRoute extends Route {
   @service store;
+  @service router;
 
   async model(params) {
     let query = await this.store.query('content', {
@@ -16,4 +18,9 @@ export default class ShowRoute extends Route {
       sorted: processResults(query),
     };
   }
+
+  @action
+  error() {
+    this.router.transitionTo('not-found');
+  }
 }

app/styles/app.scss

@@ -23,6 +23,36 @@ table {
   padding: 2rem;
 }
 
+// 404 styling
+.whoops {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--spacing-6)
+}
+
+.whoops img {
+    width: 240px;
+    margin: var(--spacing-2);
+}
+
+@media (max-width: 450px) {
+  .whoops {
+    flex-direction: column;
+    padding: var(--spacing-3);
+  }
+
+  .whoops img {
+    width: 80%;
+    margin: var(--spacing-4);
+  }
+
+  .whoops__message {
+    margin: var(--spacing-2);
+    text-align: center;
+  }
+}
+
 // override ember-styleguide. Needed to contain code blocks.
 .main {
   grid-area: main;

app/templates/not-found.hbs

@@ -0,0 +1,9 @@
+{{page-title "Page Not Found"}}
+
+<article class="whoops">
+  <img src="/images/stinky-fish.png" alt="tomster stinky fish"/>
+  <div class="whoops__message">
+    <h2>Ack! 404 friend, you're in the wrong place</h2>
+    <LinkTo @route='index'>Click here to go home</LinkTo>
+  </div>
+</article>