feat: add multi-language 404

.github/workflows/deploy.yaml

@@ -67,8 +67,6 @@ jobs:
             --minify \
             --panicOnWarning \
             --baseURL "${{ steps.pages.outputs.base_url }}/"
-      - name: Create custom 404 page
-        run: cp public/en/404.html public/404.html
       - name: Initialize search index
         run: npx -y pagefind --site public
       - name: Upload artifact

.github/workflows/pullrequest.yaml

@@ -54,7 +54,5 @@ jobs:
             --gc \
             --minify \
             --baseURL "${{ steps.pages.outputs.base_url }}/"
-      - name: Create custom 404 page
-        run: cp public/en/404.html public/404.html
       - name: Initialize search index
         run: npx -y pagefind --site public

content/404/_index.de.md

@@ -0,0 +1,14 @@
+---
+title: "404 – Seite nicht gefunden"
+---
+
+Hoppla! Die gesuchte Seite ist nicht verfügbar oder wurde verschoben.
+
+Probiere folgende Dinge:
+
+- **URL überprüfen:** Stelle sicher, dass die Adresse keine Tippfehler enthält.
+- **Zur Startseite:** Kehre zur Startseite zurück und navigiere von dort aus.
+- **Navigation nutzen:** Nutze das Menü oder die Suchfunktion.
+- **Kontaktiere uns:** Bei Fragen oder Problemen kannst du dich gerne an uns wenden: [[email protected]](mailto:[email protected])
+
+Wir helfen dir gerne!

content/404/_index.en.md

@@ -0,0 +1,16 @@
+---
+title: "404 – Page not found"
+aliases:
+  - /404.html
+---
+
+Oops! The page you’re looking for is unavailable or has been moved.
+
+Here's what you can do next:
+
+- **Double-check the URL:** Make sure there are no typos in the address.
+- **Go to the homepage:** Return to the home page and navigate from there.
+- **Use the navigation:** Try browsing via the menu or using the search function.
+- **Contact us:** If you need assistance, feel free to reach out: [[email protected]](mailto:[email protected])
+
+We're happy to help!

content/404/_index.fr.md

@@ -0,0 +1,14 @@
+---
+title: "404 – Page introuvable"
+---
+
+Oups ! La page que vous recherchez est indisponible ou a été déplacée.
+
+Voici ce que vous pouvez faire ensuite :
+
+- **Vérifiez l’URL :** Assurez-vous qu’il n’y a pas de faute de frappe dans l’adresse.
+- **Accédez à la page d’accueil :** Retournez à la page d’accueil et naviguez à partir de là.
+- **Utilisez la navigation :** Essayez de naviguer via le menu ou d’utiliser la fonction de recherche.
+- **Contactez-nous :** Si vous avez besoin d’aide, n’hésitez pas à nous contacter : [[email protected]](mailto:[email protected])
+
+Nous sommes là pour vous aider !

layouts/404.html

@@ -1,31 +1,10 @@
 {{ define "main" }}
   <article class="o-single" data-pagefind-ignore="all">
     <div class="o-single__header">
-      <h2>404 - Page Not Found</h2>
+      <h2>{{ .Title }}</h2>
     </div>
     <div class="o-single__content">
-      <p>Oops! The page you’re looking for is unavailable or has been moved.</p>
-      <p>Here's what you can do next:</p>
-      <ul>
-        <li>
-          <strong>Double-check the URL:</strong> Make sure there are no typos in
-          the address.
-        </li>
-        <li>
-          <strong>Go to the homepage:</strong>
-          <a href="/">Return to the home page</a> and navigate from there.
-        </li>
-        <li>
-          <strong>Use the navigation:</strong> Try browsing via the menu or
-          using the search function.
-        </li>
-        <li>
-          <strong>Contact us:</strong> If you need assistance, feel free to
-          reach out.
-          <a href="mailto:[email protected]">[email protected]</a>
-        </li>
-      </ul>
-      <p>We're happy to help!</p>
+      {{ .Content }}
     </div>
   </article>
 {{ end }}

layouts/alias.html

@@ -8,48 +8,36 @@
       <meta http-equiv="refresh" content="0; url={{ .Permalink }}" />
     </noscript>
     <script>
-      ;(function () {
-        // Only do i18n at root,
-        // otherwise, redirect immediately
-        if (window.location.pathname !== '/') {
-          window.location.replace('{{ .Permalink }}')
-          return
-        }
-
-        var getFirstBrowserLanguage = function () {
-          var nav = window.navigator,
-          browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
-          i,
-          language
+      (() => {
+        const supportedLanguages = [{{ range site.Languages }}"{{ .Lang }}",{{ end }}];
+        const defaultLanguage = "en";
 
-          if (Array.isArray(nav.languages)) {
-            for (i = 0; i < nav.languages.length; i++) {
-              language = nav.languages[i]
-              if (language && language.length) {
-                return language
-              }
-            }
+        const getTargetLanguage = () => {
+          const nav = window.navigator;
+          if (!Array.isArray(nav.languages)) {
+            return defaultLanguage;
           }
 
-          // support for other well known properties in browsers
-          for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
-            language = nav[browserLanguagePropertyKeys[i]]
-            if (language && language.length) {
-              return language
+          for (const language of nav.languages) {
+            for (const lang of supportedLanguages) {
+              if (language.toLowerCase().includes(lang)) {
+                return lang;
+              }
             }
           }
-          return 'en'
-        }
+          return defaultLanguage;
+        };
 
-        var preferLang = getFirstBrowserLanguage()
-        if (preferLang.indexOf('de') !== -1) {
-          // visitor prefers german
-          window.location.replace('/de/')
-        } else {
-          // fallback to english
-          window.location.replace('/en/')
+        let targetLocation = '{{ .Permalink }}'
+        if (window.location.pathname === '/') {
+          // On root, redirect to the target language root
+          targetLocation = `/${getTargetLanguage()}/`
+        } else if ('{{ relURL .Permalink }}' === '/en/404/'){
+          // On 404, redirect to the 404 page of the target language
+          targetLocation = `/${getTargetLanguage()}/404/`
         }
-      })()
+        window.location.replace(targetLocation);
+      })();
     </script>
   </head>
   <body>