Lang detect/redirect

astro.config.mjs

@@ -1,4 +1,5 @@
 // @ts-check
+import fs from "node:fs";
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import sitemap from "@astrojs/sitemap";
@@ -7,6 +8,12 @@ import starlightLlmsTxt from "starlight-llms-txt";
 import starlightOpenAPI, { openAPISidebarGroups } from "starlight-openapi";
 import mermaid from "astro-mermaid";
 import remarkHeadingId from "remark-heading-id";
+
+const langRedirectScript = fs.readFileSync(
+  new URL("./src/scripts/lang-redirect.js", import.meta.url),
+  "utf8",
+);
+
 export default defineConfig({
   site: "https://docs.evcc.io",
   trailingSlash: "never",
@@ -59,6 +66,7 @@ export default defineConfig({
         en: { label: "English", lang: "en" },
         de: { label: "Deutsch", lang: "de" },
       },
+      head: [{ tag: "script", content: langRedirectScript }],
       social: [
         {
           icon: "github",

src/components/LanguageSelect.astro

@@ -23,6 +23,7 @@ function localizedPathname(targetLocale: string): string {
           {i > 0 && <span class="lang-sep"> | </span>}
           <a
             href={localizedPathname(code)}
+            data-set-locale={code}
             class:list={["lang-link", { active: code === currentLocale }]}
           >
             {code.toUpperCase()}
@@ -33,6 +34,13 @@ function localizedPathname(targetLocale: string): string {
   )
 }
 
+<script is:inline>
+  document.addEventListener("click", function (e) {
+    var a = e.target.closest("[data-set-locale]");
+    if (a) localStorage.setItem("preferredLang", a.dataset.setLocale);
+  });
+</script>
+
 <style>
   .lang-switcher {
     display: inline-flex;

src/scripts/lang-redirect.js

@@ -0,0 +1,27 @@
+(function () {
+  var m = location.pathname.match(/^\/(en|de)(\/|$)/);
+  if (!m) return;
+  var current = m[1];
+  var stored = localStorage.getItem("preferredLang");
+  var desired;
+  if (stored === "en" || stored === "de") {
+    desired = stored;
+  } else if (sessionStorage.getItem("langAutoRedirected")) {
+    return;
+  } else {
+    var langs = navigator.languages || [navigator.language || ""];
+    var match = langs.find(function (l) {
+      return /^(de|en)/i.test(l);
+    });
+    desired = /^de/i.test(match || "") ? "de" : "en";
+    sessionStorage.setItem("langAutoRedirected", "1");
+  }
+  if (current === desired) return;
+  location.replace(
+    "/" +
+      desired +
+      location.pathname.slice(3) +
+      location.search +
+      location.hash,
+  );
+})();