astro.config.mjs

@@ -1,5 +1,4 @@
 // @ts-check
-import { defineConfig, envField } from "astro/config"
 import paraglide from "@inlang/paraglide-astro"
 import tailwind from "@astrojs/tailwind"
 import sitemap from "@astrojs/sitemap"
@@ -8,6 +7,7 @@ import node from "@astrojs/node"
 import mdx from "@astrojs/mdx"
 import icon from "astro-icon"
 
+import { defineConfig } from "astro/config"
 import { loadEnv } from "vite"
 
 const { url } = process.env.URL
@@ -36,13 +36,5 @@ export default defineConfig({
   ],
   adapter: node({
     mode: "standalone"
-  }),
+  })
-  env: {
-    schema: {
-      DOMAIN: envField.string({ context: "client", access: "public" }),
-      URL: envField.string({ context: "client", access: "public" }),
-      GIT_URL: envField.string({ context: "client", access: "public" }),
-      STATUS_URL: envField.string({ context: "client", access: "public" })
-    }
-  }
 })

docker-compose.yml

@@ -1,6 +1,5 @@
 services:
   web:
-    container_name: martials.no
     restart: always
     build:
       context: .

package.json

@@ -14,16 +14,16 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "4.0.0-beta.2",
+    "@astrojs/mdx": "^3.1.8",
-    "@astrojs/node": "9.0.0-beta.2",
+    "@astrojs/node": "^8.3.4",
-    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/sitemap": "^3.2.0",
-    "@astrojs/svelte": "6.0.0-beta.1",
+    "@astrojs/svelte": "^5.7.2",
     "@astrojs/tailwind": "^5.1.2",
     "@iconify-json/pajamas": "^1.2.3",
     "@inlang/paraglide-astro": "^0.2.2",
     "@inlang/paraglide-js": "1.11.2",
     "@tailwindcss/typography": "^0.5.15",
-    "astro": "5.0.0-beta.5",
+    "astro": "^4.16.2",
     "astro-icon": "^1.1.1",
     "sharp": "^0.33.5",
     "svelte": "^4.2.19",

src/components/Footer.astro

@@ -3,16 +3,15 @@ import GiteaLink from "./links/GiteaLink.astro"
 import PajamasIcon from "./icons/PajamasIcon.astro"
 import ExternalLink from "./links/ExternalLink.astro"
 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 { GIT_URL, STATUS_URL } = import.meta.env
 ---
 
 <div class="divider" />
 <div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
   <div>
-    <GiteaLink href={giteaLink} />
+    <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()}

src/components/HardwarePage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Select from "./Select.svelte"
   import * as m from "@/paraglide/messages"
-  import CollapseList from "@/components/collapse/CollapseList.svelte"
+  import Collapse from "@/components/Collapse.svelte"
 
   export let hardware: any[] = []
 
@@ -13,7 +13,6 @@
   let selectedHardwareKey: string = hardware[0].id
   $: selectedHardware = hardware.find((item) => item.id === selectedHardwareKey)!
 
-  // TODO bind to component
   function onChange({ detail }: CustomEvent<string>) {
     selectedHardwareKey = detail
   }
@@ -26,9 +25,20 @@
   </div>
   <br />
 
-  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
+  <Collapse title={m.hardware()}>
-  <div class="my-2" />
+    <ul>
+      {#each selectedHardware.data.hardware as item}
+        <li class="list-disc ml-5">{item}</li>
+      {/each}
+    </ul>
+  </Collapse>
   {#if (selectedHardware.data.accessories)}
-    <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />
+    <Collapse title={m.accessories()}>
+      <ul>
+        {#each selectedHardware.data.accessories as item}
+          <li class="list-disc ml-5">{item}</li>
+        {/each}
+      </ul>
+    </Collapse>
   {/if}
 </div>

src/components/collapse/CollapseList.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import Collapse from "@/components/collapse/Collapse.svelte"
-
-  export let items: string[] = []
-  export let title: string = ""
-
-</script>
-
-<Collapse title={title}>
-  <ul>
-    {#each items as item}
-      <li class="list-disc ml-5">{item}</li>
-    {/each}
-  </ul>
-</Collapse>

src/components/myLinks/myLinks.ts

@@ -1,7 +1,8 @@
 import type { PajamasIcon } from "@/types/icons.ts"
-import { GIT_URL } from "astro:env/client"
 import * as m from "@/paraglide/messages"
 
+const gitUrl = import.meta.env.GIT_URL
+
 export interface MyLink {
   title: string;
   url: string;
@@ -17,7 +18,7 @@ export default [
   },
   {
     title: "Gitea",
-    url: `${GIT_URL}/martials`,
+    url: `${gitUrl}/martials`,
     message: m.forPersonalProjects(),
     icon: "pajamas:gitea"
   },

src/components/projects/MyProjectsPage.astro

@@ -1,16 +1,12 @@
 ---
 import ProjectCard from "./ProjectCard.astro"
 import * as m from "@/paraglide/messages"
-import { type CollectionEntry } from "astro:content"
-import { type NavLink } from "@/utils/linking"
 
 interface Props {
-  projects: CollectionEntry<"projects">[]
+  projects: any[] // TODO Type this
 }
 
 const { projects } = Astro.props
-
-const baseUrl: NavLink = "/projects"
 ---
 
 <h1 class="text-4xl font-bold text-center sm:my-10 mt-2">{m.myProjects()}</h1>
@@ -19,12 +15,12 @@ const baseUrl: NavLink = "/projects"
     projects.map(
       ({
          data: { title, description, tags, heroImage, heroImageAlt },
-         id
+         slug
        }) => (
         <div class="my-5 px-2">
           <ProjectCard
             title={title}
-            linkTo={`${baseUrl}/${id}`}
+            linkTo={`/project/${slug}`}
             description={description}
             tags={tags}
             image={heroImage}

src/components/projects/ProjectPage.astro

@@ -1,7 +1,7 @@
 ---
 import Layout from "@/layouts/Layout.astro"
 import { Image } from "astro:assets"
-import { getEntry, render } from "astro:content"
+import { getEntry } from "astro:content"
 import BadgeList from "../badge/BadgeList.astro"
 import * as m from "@/paraglide/messages"
 import { languageTag } from "@/paraglide/runtime"
@@ -15,7 +15,7 @@ interface Props {
 const { project } = Astro.props
 
 const entry = await getEntry("projects", project)
-const { Content } = await render(entry)
+const { Content } = await entry!.render()
 const {
   title,
   description,

src/content/config.ts

@@ -1,8 +1,7 @@
 import { defineCollection, z } from "astro:content"
-import { glob } from "astro/loaders"
 
 const projectCollection = defineCollection({
-  loader: glob({ pattern: "**\/*.mdx", base: "./src/content/projects" }),
+  type: "content",
   schema: ({ image }) =>
     z.object({
       title: z.string(),
@@ -17,7 +16,7 @@ const projectCollection = defineCollection({
 })
 
 const hardwareCollection = defineCollection({
-  loader: glob({ pattern: "**\/*.yaml", base: "./src/content/hardware" }),
+  type: "data",
   schema: z.object({
     title: z.string(),
     accessories: z.optional(z.array(z.string())),

src/env.d.ts

@@ -0,0 +1,13 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
+
+interface ImportMetaEnv {
+  readonly DOMAIN: string
+  readonly URL: string
+  readonly GIT_URL: string
+  readonly STATUS_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

src/pages/en/hardware.astro

@@ -8,5 +8,5 @@ const hardware = await getCollection("hardware")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <HardwarePage server:defer hardware={hardware} />
+  <HardwarePage client:load hardware={hardware} />
 </Layout>

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

@@ -2,7 +2,6 @@
 import ProjectPage from "../../../components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
 
-// Prerender the page as static HTML during build
 export const prerender = true
 
 export function getStaticPaths(): GetStaticPathsResult {

src/pages/hardware.astro

@@ -8,5 +8,5 @@ const hardware = await getCollection("hardware")
 ---
 
 <Layout title="Hardware" class="mx-auto max-w-[750px]">
-  <HardwarePage server:defer hardware={hardware} />
+  <HardwarePage client:load hardware={hardware} />
 </Layout>

src/pages/projects/[project].astro

@@ -1,8 +1,7 @@
 ---
-import ProjectPage from "@/components/projects/ProjectPage.astro"
+import ProjectPage from "../../components/projects/ProjectPage.astro"
 import { type GetStaticPathsResult } from "astro"
 
-// Prerender the page as static HTML during build
 export const prerender = true
 
 export function getStaticPaths(): GetStaticPathsResult {

src/utils/linking.ts

@@ -3,18 +3,18 @@ import type { AbsolutePathname } from "@/types/types.ts"
 
 interface TranslatedPathnames {
   nb: AbsolutePathname
-  en: `/en${AbsolutePathname}`
+  en: `/en${string}`
 }
 
 export type NavLink = "/" | "/contact" | "/projects" | "/links" | "/hardware"
 
-const paths: Set<NavLink> = new Set([
+const paths: NavLink[] = [
   "/",
   "/contact",
   "/projects",
   "/links",
   "/hardware"
-])
+]
 
 /**
  * Defines the localized pathnames for the site.

tsconfig.json

@@ -1,14 +1,10 @@
 {
   "extends": "astro/tsconfigs/strict",
   "include": [
-    ".astro/types.d.ts",
     "src/**/*.ts",
     "src/**/*.astro",
     "src/**/*.svelte"
   ],
-  "exclude": [
-    "dist"
-  ],
   "compilerOptions": {
     "strictNullChecks": true,
     "allowJs": true,