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>

src/links.ts

@@ -1,22 +1,31 @@
-import * as m from "./paraglide/messages.js"
+import * as m from "@/paraglide/messages.js"
+import type { NavLink } from "@/utils/linking.ts"
 
 interface Link {
-  label: string
-  to: `/${string}`
+  label: () => string
+  to: NavLink
 }
 
 const Links: Link[] = [
   {
-    label: m.home(),
+    label: m.home,
     to: "/"
   },
   {
-    label: m.myProjects(),
-    to: "/project"
+    label: m.myProjects,
+    to: "/projects"
   },
   {
-    label: m.contactMe(),
-    to: "/contact-me"
+    label: m.myLinks,
+    to: "/links"
+  },
+  {
+    label: m.hardware,
+    to: "/hardware"
+  },
+  {
+    label: m.contactMe,
+    to: "/contact"
   }
 ]
 

src/pages/en/projects/[project].astro

@@ -2,6 +2,8 @@
 import ProjectPage from "../../../components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
 
+export const prerender = true
+
 export function getStaticPaths(): GetStaticPathsResult {
   return [
     { params: { project: "hotelservice" } },

src/pages/projects/[project].astro

@@ -2,6 +2,8 @@
 import ProjectPage from "../../components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
 
+export const prerender = true
+
 export function getStaticPaths(): GetStaticPathsResult {
   return [
     { params: { project: "hotelservice" } },

src/types/types.ts

@@ -0,0 +1 @@
+export type AbsolutePathname = `/${string}`

src/utils/linking.ts

@@ -1,20 +1,38 @@
 import type { AvailableLanguageTag } from "@/paraglide/runtime.js"
+import type { AbsolutePathname } from "@/types/types.ts"
 
-type AbsolutePathname = `/${string}`
+interface TranslatedPathnames {
+  nb: AbsolutePathname
+  en: `/en${string}`
+}
 
-// TODO what?
-// https://inlang.com/m/iljlwzfs/paraglide-astro-i18n
-const pathnames: Record<AbsolutePathname,
-  Record<AvailableLanguageTag, AbsolutePathname>
-> = {
-  "/contact-me": {
-    nb: "/contact-me",
-    en: "/en/contact-me"
+export type NavLink = "/" | "/contact" | "/projects" | "/links" | "/hardware"
+
+const paths: NavLink[] = [
+  "/",
+  "/contact",
+  "/projects",
+  "/links",
+  "/hardware"
+]
+
+/**
+ * Defines the localized pathnames for the site.
+ * The key must be used to navigate to the correct path.
+ * The value is the path that will be used for the given locale.
+ *
+ * @see https://inlang.com/m/iljlwzfs/paraglide-astro-i18n
+ */
+const pathnames: Record<AbsolutePathname, TranslatedPathnames> = {}
+for (const path of paths) {
+  pathnames[path] = {
+    nb: path,
+    en: `/en${path}`
   }
 }
 
 export function localizePathname(
-  pathname: AbsolutePathname,
+  pathname: NavLink,
   locale: AvailableLanguageTag
 ) {
   if (pathnames[pathname]) {
@@ -22,3 +40,10 @@ export function localizePathname(
   }
   return pathname
 }
+
+export function resolvePathname(pathname: string): AbsolutePathname {
+  if (pathname.startsWith("/en")) {
+    return pathname.slice(3) as AbsolutePathname
+  }
+  return pathname as AbsolutePathname
+}