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>

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()}>
-    <ul>
-      {#each selectedHardware.data.hardware as item}
-        <li class="list-disc ml-5">{item}</li>
-      {/each}
-    </ul>
-  </Collapse>
+  <CollapseList items={selectedHardware.data.hardware} title={m.hardware()} />
+  <div class="my-2" />
   {#if (selectedHardware.data.accessories)}
-    <Collapse title={m.accessories()}>
-      <ul>
-        {#each selectedHardware.data.accessories as item}
-          <li class="list-disc ml-5">{item}</li>
-        {/each}
-      </ul>
-    </Collapse>
+    <CollapseList items={selectedHardware.data.accessories} title={m.accessories()} />
   {/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,