Implement custom error page

We need styling and additional translation for other
HTTP error codes.

CC @appinteractive

cypress/integration/moderation/HidePosts.feature

@@ -22,5 +22,5 @@ Feature: Hide Posts
     Given I am logged in with a "user" role
     Then the page "/post/this-post-is-disabled" returns a 404 error with a message:
     """
-    We cannot find that post :(
+    Sorry, the page you're looking for cannot be found.
     """

layouts/error.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="layout-blank">
+    <ds-container>
+      <div class="error">
+        <h1>
+          {{ header }}
+        </h1>
+        <h3>
+          {{ subHeader }}
+        </h3>
+        <p>
+          {{ message }}
+        </p>
+      </div>
+    </ds-container>
+    <div id="overlay" />
+  </div>
+</template>
+
+<script>
+import seo from '~/components/mixins/seo'
+
+export default {
+  mixins: [seo],
+  props: {
+    error: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    statusCode() {
+      const mapping = {
+        '500': '500',
+        '404': '404'
+      }
+      return mapping[this.error.statusCode] || '500'
+    },
+    header() {
+      return this.$t(`error.header.${this.statusCode}`)
+    },
+    subHeader() {
+      return this.$t(`error.subHeader.${this.statusCode}`)
+    },
+    message() {
+      return this.$t(`error.message.${this.statusCode}`)
+    },
+    suggestion() {
+      console.log(this.$t(`error.suggestion.${this.statusCode}`))
+      return this.$t(`error.suggestion.${this.statusCode}`)
+    }
+  },
+  mounted() {
+    console.log(this.error)
+  }
+}
+</script>

locales/de.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "header": {
+      "404": "Seite nicht gefunden"
+    },
+    "subHeader": {
+      "404": "Ups, ich wars nicht"
+    },
+    "message": {
+      "404": "Tut uns leid, wir haben diese Seite nicht gefunden."
+    }
+  },
   "actions": {
     "loading": "lade",
     "loadMore": "mehr laden",

locales/en.json

@@ -1,4 +1,15 @@
 {
+  "error": {
+    "header": {
+      "404": "Page not found"
+    },
+    "subHeader": {
+      "404": "Ups, not my fault"
+    },
+    "message": {
+      "404": "Sorry, the page you're looking for cannot be found."
+    }
+  },
   "actions": {
     "loading": "loading",
     "loadMore": "load more",

pages/post/_slug/index.vue

@@ -236,7 +236,7 @@ export default {
       data: { Post }
     } = await client.query({ query, variables })
     if (Post.length <= 0) {
-      return error({ statusCode: 404, message: 'We cannot find that post :(' })
+      return error({ statusCode: 404 })
     }
     const [post] = Post
     return {