Fixed language not switching

middleware.ts

@@ -1,6 +0,0 @@
-import { paraglideMiddleware } from "@/paraglide/server";
-import { defineMiddleware } from "astro/middleware"
-
-export const onRequest = defineMiddleware((context, next) => {
-  	return paraglideMiddleware(context.request, () => next());
-});

src/components/Footer.astro

@@ -2,11 +2,12 @@
 import GiteaLink from "./links/GiteaLink.astro"
 import PajamasIcon from "./icons/PajamasIcon.astro"
 import ExternalLink from "./links/ExternalLink.astro"
-import LanguageButtonGroup from "./LanguageButtonGroup.astro"
+import LanguageButtonGroup from "./LanguageButtonGroup.svelte"
 import { GIT_URL, STATUS_URL } from "astro:env/client"
 import * as m from "@/paraglide/messages"
 
 const giteaLink = `${GIT_URL}/martials/martials.no`
+const pathname = Astro.url.pathname
 ---
 
 <div class="divider bg-inherit"></div>
@@ -28,5 +29,5 @@ const giteaLink = `${GIT_URL}/martials/martials.no`
       {m.status()}
     </ExternalLink>
   </div>
-  <LanguageButtonGroup />
+  <LanguageButtonGroup client:load />
 </div>

src/components/LanguageButtonGroup.astro

@@ -15,7 +15,7 @@ const isEnglish = pathname.startsWith("/en")
     class:list={[
       "btn join-item !text-cat-text border-cat-surface0",
       !isEnglish ? "bg-cat-mantle" : "bg-cat-base",
-    ]}>Norsk</LocaleLink
+    ]} client:load>Norsk</LocaleLink
   >
   <LocaleLink
     to={currentPath as NavLink}
@@ -23,6 +23,6 @@ const isEnglish = pathname.startsWith("/en")
     class:list={[
       "btn join-item !text-cat-text border-cat-surface0",
       isEnglish ? "bg-cat-mantle" : "bg-cat-base",
-    ]}>English</LocaleLink
+    ]} client:load>English</LocaleLink
   >
 </div>

src/components/LanguageButtonGroup.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { getLocale, type Locale, setLocale } from "@/paraglide/runtime"
+
+  const isEnglish = getLocale() === "en"
+
+  function updateLocale(lang: Locale) {
+    setLocale(lang)
+  }
+
+</script>
+
+<div class="join">
+  <button
+    onclick={() => updateLocale("nb")}
+    class={[
+      "btn join-item !text-cat-text border-cat-surface0",
+      !isEnglish ? "bg-cat-mantle" : "bg-cat-base",
+    ]}>Norsk
+  </button
+  >
+  <button
+    onclick={() => updateLocale("en")}
+    class={[
+      "btn join-item !text-cat-text border-cat-surface0",
+      isEnglish ? "bg-cat-mantle" : "bg-cat-base",
+    ]}>English
+  </button
+  >
+</div>

src/components/links/LocaleLink.astro

@@ -11,6 +11,7 @@ interface Props extends ComponentProps {
 const { to, class: clazz, lang = getLocale() } = Astro.props
 ---
 
+<!-- TODO currently not working on Paraglide 2 https://github.com/opral/inlang-paraglide-js/issues/472 -->
 <a href={localizeHref(to, { locale: lang })} class={clazz}>
   <slot />
 </a>

src/middleware.ts

@@ -0,0 +1,6 @@
+import { paraglideMiddleware } from "@/paraglide/server"
+import { defineMiddleware } from "astro/middleware"
+
+export const onRequest = defineMiddleware((context, next) => {
+	return paraglideMiddleware(context.request, () => next());
+});