Add 404 page

Fixes #452

Author: openscript

src/layouts/groups/Contact.astro

@@ -21,7 +21,7 @@ const locale = currentLocale.get();
     <Email />
   </li>
   {
-    withoutLanguageSwitcher ? null : (
+    withoutLanguageSwitcher || !translations ? null : (
       <li>
         <LanguageSwitcher locale={locale} translations={translations} />
       </li>

src/pages/404.astro

@@ -0,0 +1,61 @@
+---
+import Button from "../components/Button.astro";
+import Shell from "../layouts/Shell.astro";
+import Article from "../layouts/templates/Article.astro";
+---
+
+<style>
+  [data-translation] {
+    display: none;
+  }
+
+  .active[data-translation] {
+    display: block;
+  }
+</style>
+
+<Shell>
+  <div data-translation="en">
+    <Article title="Page not found">
+      <section>
+        <p>Sorry, the page you are looking for does not exist.</p>
+        <Button href="/en" withArrow>Go to home page</Button>
+      </section>
+    </Article>
+  </div>
+  <div data-translation="de">
+    <Article title="Seite nicht gefunden">
+      <section>
+        <p>Entschuldigung, die von Ihnen gesuchte Seite existiert nicht.</p>
+        <Button href="/" withArrow>Startseite aufrufen</Button>
+      </section>
+    </Article>
+  </div>
+
+  <script>
+    function register() {
+      const localeElements = document.querySelectorAll("[data-translation]");
+
+      for (const element of localeElements) {
+        if (!(element instanceof HTMLElement)) continue;
+        const { translation } = element.dataset;
+        if (!translation) continue;
+
+        if (window.location.pathname.startsWith(`/${translation}/`)) {
+          element.classList.add("active");
+          break;
+        }
+      }
+
+      if (!Array.from(localeElements).some((el) => el instanceof HTMLElement && el.classList.contains("active"))) {
+        const defaultElement = document.querySelector(`[data-translation="de"]`);
+        if (defaultElement instanceof HTMLElement) {
+          defaultElement.classList.add("active");
+        }
+      }
+    }
+
+    register();
+    document.addEventListener("astro:after-swap", register);
+  </script>
+</Shell>