Button group to switch languages.

Localized pathname function for links.

inlang/paraglide-astro package

Signed-off-by: Martin Berg Alstad <git@martials.no>

src/components/Footer.astro

@@ -2,6 +2,7 @@
 import GiteaLink from "./links/GiteaLink.astro"
 import ExternalLink from "./links/ExternalLink.astro"
 import PajamasIcon from "./icons/PajamasIcon.astro"
+import LanguageButtonGroup from "./LanguageButtonGroup.svelte"
 import * as m from "@/paraglide/messages"
 
 const gitUrl = import.meta.env.GIT_URL
@@ -10,6 +11,7 @@ const statusUrl = import.meta.env.STATUS_URL
 
 <div class="divider"></div>
 <div class="mx-auto py-5 flex flex-col gap-1 items-center">
+  <LanguageButtonGroup client:load />
   <GiteaLink href={`${gitUrl}/martials/martials.no`} />
   <ExternalLink href={statusUrl} class="flex items-center" title="Status">
     <PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />

src/components/LanguageButtonGroup.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+
+  import { setLanguageTag } from "@/paraglide/runtime"
+
+  function setLanguage(lang: "en" | "nb") {
+    // TODO do do do!
+    setLanguageTag(lang)
+    console.debug("Language set to", lang)
+  }
+
+</script>
+
+<div class="join">
+  <button class="btn join-item">Auto</button>
+  <button class="btn join-item" on:click={() => setLanguage("nb")}>Norsk</button>
+  <button class="btn join-item" on:click={() => setLanguage("en")}>English</button>
+</div>

src/components/Navbar.astro

@@ -1,11 +1,13 @@
 ---
-import Links from "../links"
+import { localizePathname } from "@/utils/linking"
+import { languageTag } from "@/paraglide/runtime"
+import Links from "@/links"
 ---
 
 <div class="flex justify-end">
   {
     Links.map(({ to, label }) => (
-      <a href={to} class="m-2 hover:underline">
+      <a href={localizePathname(to, languageTag())} class="m-2 hover:underline">
         {label}
       </a>
     ))