🐛 Fix language not switching on dynamic pages

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

.gitea/workflows/deploy.yaml

@@ -4,9 +4,7 @@ on:
   push:
     branches:
       - master
-  pull_request:
+      - develop
-    branches:
-      - master
 
 jobs:
   build:
@@ -15,5 +13,9 @@ jobs:
     steps:
       - name: Check out repository code
         uses: actions/checkout@v4
-      - name: Run docker-compose
+      - name: Build production
-        run: docker compose up -d --build
+        run: docker compose up -d --build prod
+        if: gitea.ref == 'refs/heads/master'
+      - name: Build develop
+        run: docker compose up -d --build dev
+        if: gitea.ref == 'refs/heads/develop'

TODO.md

@@ -9,9 +9,10 @@
 - [ ] Type slug of project
 
 ## CI/CD
-- [ ] Staging environment
+- [x] Staging environment
-- [ ] Deploy to staging environment on push to master
+- [x] Deploy to staging environment on push to develop
-- [ ] Deploy to production environment on push tag to master
+- [x] Deploy to production environment on push to master
+- [ ] Staging environment .env file
 
 ## SEO
 - [ ] Meta tags on each page

docker-compose.yml

@@ -1,9 +1,20 @@
 services:
-  web:
+  prod:
-    container_name: martials.no
+    hostname: martials.no
+    container_name: "martials.no"
     restart: always
     build:
       context: .
       dockerfile: Dockerfile
     ports:
-      - "4321:4321"
+      - "4321:4321"
+
+  dev:
+    hostname: dev.martials.no
+    container_name: "dev.martials.no"
+    restart: always
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "4322:4321"

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());
+});

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

@@ -1,17 +1,9 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
-import { type GetStaticPathsResult } from "astro"
 import "@/styles/global.css"
 
-// Prerender the page as static HTML during build
+// Prerender must be false for paraglide js
-export const prerender = true
+export const prerender = false
-
-export function getStaticPaths(): GetStaticPathsResult {
-  return [
-    { params: { project: "homepage" } },
-    { params: { project: "sb1budget" } },
-  ]
-}
 
 const { project } = Astro.params
 ---

src/pages/projects/[project].astro

@@ -1,19 +1,11 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
-import { type GetStaticPathsResult } from "astro"
 import "@/styles/global.css"
 
-// Prerender the page as static HTML during build
+// Prerender must be false for paraglide js
-export const prerender = true
+export const prerender = false
-
-export function getStaticPaths(): GetStaticPathsResult {
-  return [
-    { params: { project: "homepage" } },
-    { params: { project: "sb1budget" } },
-  ]
-}
 
 const { project } = Astro.params
 ---
 
-<ProjectPage project={project as string} />
+<ProjectPage project={ project as string } />