Updated to Astro v5 beta.

Created a new component for a collapsable list

Implemented some of the new features.
- astro:env
- New astro content layer

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

astro.config.mjs

@@ -1,4 +1,5 @@
 // @ts-check
+import { defineConfig, envField } from "astro/config"
 import paraglide from "@inlang/paraglide-astro"
 import tailwind from "@astrojs/tailwind"
 import sitemap from "@astrojs/sitemap"
@@ -7,7 +8,6 @@ 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,5 +36,13 @@ 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" })
+    }
+  }
 })

package.json

@@ -14,16 +14,16 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/mdx": "4.0.0-beta.2",
-    "@astrojs/node": "^8.3.4",
+    "@astrojs/node": "9.0.0-beta.2",
-    "@astrojs/sitemap": "^3.2.0",
+    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "^5.7.2",
+    "@astrojs/svelte": "6.0.0-beta.1",
     "@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": "^4.16.2",
+    "astro": "5.0.0-beta.5",
     "astro-icon": "^1.1.1",
     "sharp": "^0.33.5",
     "svelte": "^4.2.19",

src/components/Footer.astro

@@ -3,15 +3,16 @@ 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 { GIT_URL, STATUS_URL } = import.meta.env
+const giteaLink = `${GIT_URL}/martials/martials.no`
 ---
 
 <div class="divider" />
 <div class="py-5 flex flex-row gap-1 justify-around w-full items-center">
   <div>
-    <GiteaLink href={`${GIT_URL}/martials/martials.no`} />
+    <GiteaLink href={giteaLink} />
     <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 Collapse from "@/components/Collapse.svelte"
+  import CollapseList from "@/components/collapse/CollapseList.svelte"
 
   export let hardware: any[] = []
 
@@ -13,6 +13,7 @@
   let selectedHardwareKey: string = hardware[0].id
   $: selectedHardware = hardware.find((item) => item.id === selectedHardwareKey)!
 
+  // TODO bind to component
   function onChange({ detail }: CustomEvent<string>) {
     selectedHardwareKey = detail
   }
@@ -25,20 +26,9 @@
   </div>
   <br />
 
-  <Collapse title={m.hardware()}>
+  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
-    <ul>
+  <div class="my-2" />
-      {#each selectedHardware.data.hardware as item}
-        <li class="list-disc ml-5">{item}</li>
-      {/each}
-    </ul>
-  </Collapse>
   {#if (selectedHardware.data.accessories)}
-    <Collapse title={m.accessories()}>
+    <CollapseList items={selectedHardware.data.accessories} 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

@@ -0,0 +1,15 @@
+<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,8 +1,7 @@
 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;
@@ -18,7 +17,7 @@ export default [
   },
   {
     title: "Gitea",
-    url: `${gitUrl}/martials`,
+    url: `${GIT_URL}/martials`,
     message: m.forPersonalProjects(),
     icon: "pajamas:gitea"
   },

src/components/projects/MyProjectsPage.astro

@@ -1,12 +1,16 @@
 ---
 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: any[] // TODO Type this
+  projects: CollectionEntry<"projects">[]
 }
 
 const { projects } = Astro.props
+
+const baseUrl: NavLink = "/projects"
 ---
 
 <h1 class="text-4xl font-bold text-center sm:my-10 mt-2">{m.myProjects()}</h1>
@@ -15,12 +19,12 @@ const { projects } = Astro.props
     projects.map(
       ({
          data: { title, description, tags, heroImage, heroImageAlt },
-         slug
+         id
        }) => (
         <div class="my-5 px-2">
           <ProjectCard
             title={title}
-            linkTo={`/project/${slug}`}
+            linkTo={`${baseUrl}/${id}`}
             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 } from "astro:content"
+import { getEntry, render } 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 entry!.render()
+const { Content } = await render(entry)
 const {
   title,
   description,

src/content/config.ts

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

src/env.d.ts

@@ -1,13 +0,0 @@
-/// <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 client:load hardware={hardware} />
+  <HardwarePage server:defer hardware={hardware} />
 </Layout>

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

@@ -2,6 +2,7 @@
 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 client:load hardware={hardware} />
+  <HardwarePage server:defer hardware={hardware} />
 </Layout>

src/pages/projects/[project].astro

@@ -1,7 +1,8 @@
 ---
-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 {

tsconfig.json

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