Button group to switch languages.

Localized pathname function for links.

inlang/paraglide-astro package

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

astro.config.mjs

@@ -2,6 +2,7 @@
 import { defineConfig } from "astro/config"
 import tailwind from "@astrojs/tailwind"
 import sitemap from "@astrojs/sitemap"
+import paraglide from "@inlang/paraglide-astro"
 import { loadEnv } from "vite"
 import mdx from "@astrojs/mdx"
 import svelte from "@astrojs/svelte"
@@ -20,5 +21,16 @@ export default defineConfig({
     defaultLocale: "nb",
     locales: ["nb", "en"]
   },
-  integrations: [tailwind(), sitemap(), mdx(), svelte(), icon()]
+  integrations: [
+    tailwind(),
+    sitemap(),
+    mdx(),
+    svelte(),
+    icon(),
+    paraglide({
+      // recommended settings
+      project: "./project.inlang",
+      outdir: "./src/paraglide" //where your files should be
+    })
+  ]
 })

package.json

@@ -19,6 +19,7 @@
     "@astrojs/svelte": "^5.7.1",
     "@astrojs/tailwind": "^5.1.1",
     "@iconify-json/pajamas": "^1.2.2",
+    "@inlang/paraglide-astro": "^0.2.2",
     "@tailwindcss/typography": "^0.5.15",
     "astro": "^4.15.9",
     "astro-icon": "^1.1.1",

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>
     ))

src/links.ts

@@ -2,22 +2,22 @@ import * as m from "./paraglide/messages.js"
 
 interface Link {
   label: string
-  to: string
+  to: `/${string}`
 }
 
 const Links: Link[] = [
   {
     label: m.home(),
-    to: "/",
+    to: "/"
   },
   {
     label: m.myProjects(),
-    to: "/project",
+    to: "/project"
   },
   {
     label: m.contactMe(),
-    to: "/contact-me",
-  },
+    to: "/contact-me"
+  }
 ]
 
 export default Links

src/utils/linking.ts

@@ -0,0 +1,24 @@
+import type { AvailableLanguageTag } from "@/paraglide/runtime.js"
+
+type AbsolutePathname = `/${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 function localizePathname(
+  pathname: AbsolutePathname,
+  locale: AvailableLanguageTag
+) {
+  if (pathnames[pathname]) {
+    return pathnames[pathname][locale]
+  }
+  return pathname
+}