SSR and i18n

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

src/components/Footer.astro

@@ -1,20 +1,21 @@
 ---
 import GiteaLink from "./links/GiteaLink.astro"
-import ExternalLink from "./links/ExternalLink.astro"
 import PajamasIcon from "./icons/PajamasIcon.astro"
-import LanguageButtonGroup from "./LanguageButtonGroup.svelte"
+import ExternalLink from "./links/ExternalLink.astro"
+import LanguageButtonGroup from "./LanguageButtonGroup.astro"
 import * as m from "@/paraglide/messages"
 
-const gitUrl = import.meta.env.GIT_URL
-const statusUrl = import.meta.env.STATUS_URL
+const { GIT_URL, STATUS_URL } = import.meta.env
 ---
 
-<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" />
-    {m.status()}
-  </ExternalLink>
+<div class="divider" />
+<div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
+  <div>
+    <GiteaLink href={`${GIT_URL}/martials/martials.no`} />
+    <ExternalLink href={STATUS_URL} class="flex items-center" title="Status">
+      <PajamasIcon name="pajamas:status-health" class="w-6 h-6 mr-2" />
+      {m.status()}
+    </ExternalLink>
+  </div>
+  <LanguageButtonGroup />
 </div>

src/components/LanguageButtonGroup.astro

@@ -0,0 +1,11 @@
+---
+import LocaleLink from "./links/LocaleLink.astro"
+import { type NavLink, resolvePathname } from "@/utils/linking"
+
+const currentPath = resolvePathname(Astro.url.pathname)
+---
+
+<div class="join">
+  <LocaleLink to={currentPath as NavLink} lang="nb" class="btn join-item">Norsk</LocaleLink>
+  <LocaleLink to={currentPath as NavLink} lang="en" class="btn join-item">English</LocaleLink>
+</div>

src/components/LanguageButtonGroup.svelte

@@ -1,17 +0,0 @@
-<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,15 +1,14 @@
 ---
-import { localizePathname } from "@/utils/linking"
-import { languageTag } from "@/paraglide/runtime"
+import LocaleLink from "./links/LocaleLink.astro"
 import Links from "@/links"
 ---
 
 <div class="flex justify-end">
   {
     Links.map(({ to, label }) => (
-      <a href={localizePathname(to, languageTag())} class="m-2 hover:underline">
-        {label}
-      </a>
+      <LocaleLink to={to} class="m-2 hover:underline">
+        {label()}
+      </LocaleLink>
     ))
   }
 </div>

src/components/links/LocaleLink.astro

@@ -0,0 +1,16 @@
+---
+import { languageTag, type AvailableLanguageTag } from "@/paraglide/runtime"
+import { localizePathname, type NavLink } from "@/utils/linking"
+import type { ComponentProps } from "@/types/props"
+
+interface Props extends ComponentProps {
+  to: NavLink
+  lang?: AvailableLanguageTag
+}
+
+const { to, class: clazz, lang = languageTag() } = Astro.props
+---
+
+<a href={localizePathname(to, lang)} class={clazz}>
+  <slot />
+</a>