Start updating paraglide to v2

.gitea/workflows/deploy.yaml

@@ -4,7 +4,9 @@ on:
   push:
     branches:
       - master
-      - develop
+  pull_request:
+    branches:
+      - master
 
 jobs:
   build:
@@ -13,9 +15,5 @@ jobs:
     steps:
       - name: Check out repository code
         uses: actions/checkout@v4
-      - name: Build production
-        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'
+      - name: Run docker-compose
+        run: docker compose up -d --build

TODO.md

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

docker-compose.yml

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

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/components/Footer.astro

@@ -2,12 +2,11 @@
 import GiteaLink from "./links/GiteaLink.astro"
 import PajamasIcon from "./icons/PajamasIcon.astro"
 import ExternalLink from "./links/ExternalLink.astro"
-import LanguageButtonGroup from "./LanguageButtonGroup.svelte"
+import LanguageButtonGroup from "./LanguageButtonGroup.astro"
 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>
@@ -29,5 +28,5 @@ const pathname = Astro.url.pathname
       {m.status()}
     </ExternalLink>
   </div>
-  <LanguageButtonGroup client:load />
+  <LanguageButtonGroup />
 </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",
-    ]} client:load>Norsk</LocaleLink
+    ]}>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",
-    ]} client:load>English</LocaleLink
+    ]}>English</LocaleLink
   >
 </div>

src/components/LanguageButtonGroup.svelte

@@ -1,29 +0,0 @@
-<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,7 +11,6 @@ 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

@@ -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/pages/en/projects/[project].astro

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

src/pages/projects/[project].astro

@@ -1,11 +1,19 @@
 ---
 import ProjectPage from "@/components/projects/ProjectPage.astro"
+import { type GetStaticPathsResult } from "astro"
 import "@/styles/global.css"
 
-// Prerender must be false for paraglide js
-export const prerender = false
+// Prerender the page as static HTML during build
+export const prerender = true
+
+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} />