Add 404 page

src/main.js

@@ -8,7 +8,7 @@ import App from './App.vue'
 import Home from './views/Home.vue'
 import Help from './views/Help'
 import Instances from './views/Instances'
-import FAQ from './views/FAQ'
+import NotFound from './views/NotFound'
 import AllContentSelections from './views/All-Content-Selections'
 
 import './scss/main.scss'
@@ -75,6 +75,7 @@ p.catch(err => {
 
   const HallOfFame = () => import('./views/Hall-Of-Fame')
   const News = () => import('./views/News')
+  const FAQ = () => import('./views/FAQ')
 
   const routes = [
     {
@@ -104,6 +105,14 @@ p.catch(err => {
     {
       path: '/content-selections',
       component: AllContentSelections
+    },
+    {
+      path: '/404',
+      component: NotFound
+    },
+    {
+      path: '*',
+      redirect: '/404'
     }
   ]
 

src/views/NotFound.vue

@@ -0,0 +1,52 @@
+<template>
+  <main id="not-found">
+
+    <img :src="buildImgUrl('mascot/defeated.png')" alt="mascot" />
+
+    <div class="not-found-text" v-translate>
+      Page not found
+    </div>
+
+    <p class="link-block">
+      <router-link to="/" v-translate>
+        Go back to the homepage
+      </router-link>
+    </p>
+  </main>
+</template>
+
+<style lang="scss">
+  @import '../scss/_variables.scss';
+
+  #not-found {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 50px 0;
+
+    img {
+      margin-bottom: 50px;
+    }
+
+    .not-found-text {
+      font-size: 25px;
+    }
+
+    .link-block {
+      margin-top: 30px;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    components: { },
+
+    metaInfo: function () {
+      return {
+        title: this.$gettext('Page not found')
+      }
+    }
+  }
+</script>