From b7d9e71259da531221c76be9ab5a5fc3a9067d14 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Sun, 7 Nov 2021 18:54:13 +0000
Subject: [PATCH] Localize 404 page

---
 locales/de/translation.json |  5 +++++
 locales/en/translation.json |  5 +++++
 src/pages/404.js            | 29 ++++++++++++++++++++++++-----
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/locales/de/translation.json b/locales/de/translation.json
index 2d3295e..24f3248 100644
--- a/locales/de/translation.json
+++ b/locales/de/translation.json
@@ -84,5 +84,10 @@
     },
     "sections": "Rubriken",
     "posts": "Beiträge"
+  },
+  "not_found": {
+      "title": "Nicht Gefunden",
+      "titleExt": "Seite Nicht Gefunden",
+      "text": "Ups... Diese Seite existiert nicht, also gehen wir am besten <1>zurück zur Startseite</1> und probieren es nochmal."
   }
 }
diff --git a/locales/en/translation.json b/locales/en/translation.json
index b0dbb84..b507ec8 100644
--- a/locales/en/translation.json
+++ b/locales/en/translation.json
@@ -84,5 +84,10 @@
     },
     "sections": "Sections",
     "posts": "Posts"
+  },
+  "not_found": {
+      "title": "Not Found",
+      "titleExt": "Page Not Found",
+      "text": "Whoops... That page doesn't exist, so you may as well <1>go home</1>."
   }
 }
diff --git a/src/pages/404.js b/src/pages/404.js
index 756fcbe..7e0305f 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,16 +1,21 @@
 import * as React from "react";
-import { Link } from "gatsby-plugin-react-i18next";
+import { Link, useTranslation, Trans } from "gatsby-plugin-react-i18next";
 import Layout from "../layouts/default";
+import { graphql } from "gatsby";
 
 const NotFoundPage = () => {
+    const { t } = useTranslation();
+
     return (
-        <Layout title="Not found">
+        <Layout title={t("not_found.title")}>
             <section>
                 <article>
-                    <h1>Page not found</h1>
+                    <h1>{t("not_found.titleExt")}</h1>
                     <p>
-                        Whoops... That page doesn&apos;t exist, so you may as
-                        well <Link to="/">go home</Link>.
+                        <Trans
+                            i18nKey="not_found.text"
+                            components={{ 1: <Link to="/" /> }}
+                        />
                     </p>
                 </article>
             </section>
@@ -18,4 +23,18 @@ const NotFoundPage = () => {
     );
 };
 
+export const query = graphql`
+    query ($language: String) {
+        locales: allLocale(filter: { language: { eq: $language } }) {
+            edges {
+                node {
+                    ns
+                    data
+                    language
+                }
+            }
+        }
+    }
+`;
+
 export default NotFoundPage;