astro v5

flake.nix

@@ -24,7 +24,7 @@
             # uncomment this and let the build fail, then get the current hash
             # very scuffed but endorsed!
             #npmDepsHash = "sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";
-            npmDepsHash = "sha256-aPRFARC1WJsH1NIrm9OmBv/bH9ME1K4apfWqbA+VPf4=";
+            npmDepsHash = "sha256-XCGUKgLZxW7MonHswkp7mbvgeUlRCgBE3WnRjElf44Q=";
 
             installPhase = ''
               mkdir -p $out

package.json

@@ -15,7 +15,7 @@
     "dependencies": {
         "@astrojs/check": "^0.7.0",
         "@astrojs/sitemap": "^3.1.5",
-        "astro": "^4.9.3",
+        "astro": "^5.0.4",
         "astro-compress": "^2.2.28",
         "astro-vtbot": "^1.7.23",
         "figlet": "^1.7.0",

src/components/Badges.astro

@@ -1,25 +1,25 @@
 ---
-import { getEntry } from "astro:content";
+import { getCollection } from "astro:content";
 
-const badges = await getEntry("badges", "badges");
+const badges = await getCollection("badges");
 ---
 
 <div class="badges">
-    {badges.data.map((badge) => {
+    {badges.map((badge) => {
-        const hasHref = badge.href !== undefined;
+        const hasHref = badge.data.href !== undefined;
 
         // ugh.
         // i wish we could dedupe this, but im not sure how
         return <>
-            {hasHref ? <a href={badge.href} target="_blank" rel="noreferrer noopener">
+            {hasHref ? <a href={badge.data.href} target="_blank" rel="noreferrer noopener">
-                {typeof badge.path !== "string"
+                {typeof badge.data.path !== "string"
-                    ? <img src={badge.path.src} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
+                    ? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
-                    : <img src={badge.path} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
+                    : <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
                 }
             </a> : <>
-                {typeof badge.path !== "string"
+                {typeof badge.data.path !== "string"
-                    ? <img src={badge.path.src} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
+                    ? <img src={badge.data.path.src} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
-                    : <img src={badge.path} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
+                    : <img src={badge.data.path} alt={badge.data.alt} title={badge.data.title} loading="lazy" decoding="async" width="88" height="31"/>
                 }
             </>}
         </>;

src/components/Projects.astro

@@ -1,27 +1,27 @@
 ---
-import { getEntry } from "astro:content";
+import { getCollection } from "astro:content";
 
-const projects = await getEntry("projects", "projects");
+const projects = await getCollection("projects");
 
 let lastYear = 0;
 ---
 
 <div>
-    {projects.data.sort((a, b) => b.date.getTime() - a.date.getTime()).map((project) => {
+    {projects.sort((a, b) => b.data.date.getTime() - a.data.date.getTime()).map((project) => {
-        const isNewYear = project.date.getFullYear() !== lastYear;
+        const isNewYear = project.data.date.getFullYear() !== lastYear;
-        lastYear = project.date.getFullYear();
+        lastYear = project.data.date.getFullYear();
 
         return <>
-            {isNewYear && <div class="seperator"><span class="year">{project.date.getFullYear()}</span></div>}
+            {isNewYear && <div class="seperator"><span class="year">{project.data.date.getFullYear()}</span></div>}
             <details>
                 <summary>
-                    <span class="name">{project.name}</span>
+                    <span class="name">{project.data.name}</span>
-                    <time class="date" datetime={project.date.toISOString().split("T")[0]}>{project.dateVisual || project.date.toLocaleString("default", { month: "long" })}</time>
+                    <time class="date" datetime={project.data.date.toISOString().split("T")[0]}>{project.data.dateVisual || project.data.date.toLocaleString("default", { month: "long" })}</time>
                 </summary>
                 <div class="open">
-                    <p>{project.description}</p>
+                    <p>{project.data.description}</p>
                     <div class="links">
-                        {project.links.map((link) => {
+                        {project.data.links.map((link) => {
                             return <a target="_blank" rel="noopener" href={link}>{link}</a>;
                         })}
                     </div>

src/content.config.ts

@@ -0,0 +1,30 @@
+import { z, defineCollection } from "astro:content";
+import { file } from "astro/loaders";
+
+// yeah, its not the best to have arrays
+const projects = defineCollection({
+    loader: file("src/content/projects/projects.yml"),
+    schema: z.object({
+        slug: z.string(),
+        name: z.string(),
+        description: z.string(),
+        date: z.date(),
+        dateVisual: z.string().optional(),
+        links: z.string().array()
+    })
+});
+
+const badges = defineCollection({
+    loader: file("src/content/badges/badges.yml"),
+    schema: ({ image }) => z.object({
+        slug: z.string(),
+        // oh my god lol
+        // most scuffed way to do this
+        path: z.string().startsWith("/").or(image()),
+        alt: z.string(),
+        href: z.string().optional(),
+        title: z.string().optional()
+    })
+});
+
+export const collections = { projects, badges };

src/content/badges/badges.yml

@@ -1,70 +1,93 @@
-- path: "/88x31.gif"
+- slug: "88x31"
+  path: "/88x31.gif"
   alt: "CLI prompt displaying 'reidlab'"
   title: "my button! feel free to use or hotlink"
   href: "/"
-- path: "./img/blinchik.gif"
+- slug: "blinchik"
+  path: "./img/blinchik.gif"
   alt: "blinchik"
   title: "best site on the internet!"
   href: "https://yugoslavia.best"
-- path: "./img/poweredbybob.gif"
+- slug: "poweredbybob"
+  path: "./img/poweredbybob.gif"
   alt: "powered by bob"
-- path: "./img/miku.gif"
+- slug: "miku"
+  path: "./img/miku.gif"
   alt: "this site is miku approved"
-- path: "./img/paws.gif"
+- slug: "paws"
+  path: "./img/paws.gif"
   alt: "made with my own two paws"
-- path: "./img/nixos.png"
+- slug: "nixos"
+  path: "./img/nixos.png"
   alt: "powered by nixos"
   title: "free me from this prison"
   href: "https://nixos.org"
-- path: "./img/notitg.png"
+- slug: "notitg"
+  path: "./img/notitg.png"
   alt: "notitg"
   title: "play notitg!"
   href: "https://noti.tg"
-- path: "./img/kriswheretfarewe.png"
+- slug: "kriswheretfarewe"
+  path: "./img/kriswheretfarewe.png"
   alt: "kris where tf are we"
-- path: "./img/showmeyourheart.gif"
+- slug: "showmeyourheart"
+  path: "./img/showmeyourheart.gif"
   alt: "final fantasy geometry dash"
   title: "▼▼  ▼▼  »  ▲▲▲▲   ▲▲▲▲  ‹  ▼▼  ▼▼  ›  ▲▲▲  ▲▲▲"
   href: "https://gdbrowser.com/76767195"
-- path: "./img/acab.gif"
+- slug: "acab"
-  alt: "all cops are bastards"
+  path: "./img/acab.gif"
-- path: "./img/w3cbad.gif"
+  alt: "acab"
+- slug: "w3cbad"
+  path: "./img/w3cbad.gif"
   alt: "w3c approved bad html markup"
-- path: "./img/internetarchive.gif"
+- slug: "internetarchive"
+  path: "./img/internetarchive.gif"
   alt: "internet archive"
   href: "https://archive.org"
-- path: "./img/animeisgay.gif"
+- slug: "animeisgay"
+  path: "./img/animeisgay.gif"
   alt: "anime is gay as hell but i approve"
-- path: "./img/halflife.gif"
+- slug: "halflife"
+  path: "./img/halflife.gif"
   alt: "half life"
   title: "gorgon freeman...."
-- path: "./img/vscode.png"
+- slug: "vscode"
+  path: "./img/vscode.png"
   alt: "made with with vscode"
   href: "https://code.visualstudio.com/"
-- path: "./img/oat100.gif"
+- slug: "oat100"
+  path: "./img/oat100.gif"
   alt: "i got 100% on.zone"
   href: "https://oat.zone"
-- path: "./img/oat.gif"
+- slug: "oat"
+  path: "./img/oat.gif"
   alt: "oat.zone"
   title: "cool person!"
   href: "https://oat.zone"
-- path: "./img/tidalwave.gif"
+- slug: "tidalwave"
+  path: "./img/tidalwave.gif"
   alt: "tidal wave geometry dash"
   title: "<<<TIDAL<<<<<<\n>>>>>>>WAVE>>>"
   href: "https://gdbrowser.com/86407629"
-- path: "./img/singasongaboutlife.gif"
+- slug: "singasongaboutlife"
+  path: "./img/singasongaboutlife.gif"
   alt: "sing a song about life"
   title: "sing a song about life"
   href: "https://vyletpony.com/music"
-- path: "./img/slugcat.png"
+- slug: "slugcat"
+  path: "./img/slugcat.png"
   alt: "slug cat"
   title: "Slug ca"
   href: "https://rainworldgame.com/"
-- path: "./img/mayf.gif"
+- slug: "mayf"
+  path: "./img/mayf.gif"
   alt: "mayf.pink"
   href: "https://mayf.pink"
-- path: "./img/rainbow.gif"
+- slug: "rainbow"
+  path: "./img/rainbow.gif"
   alt: "pride flag"
-- path: "./img/spax.gif"
+- slug: "spax"
+  path: "./img/spax.gif"
   alt: "spax dot zone"
   href: "https://spax.zone"

src/content/config.ts

@@ -1,30 +0,0 @@
-import { z, defineCollection } from "astro:content";
-
-// some of these schemas are a bit Weird but,
-// i find it easier to have it in one array instead of several files
-
-const projectsCollection = defineCollection({
-    type: "data",
-    schema: z.array(z.object({
-        name: z.string(),
-        description: z.string(),
-        date: z.date(),
-        dateVisual: z.string().optional(),
-        links: z.string().array()
-    }))
-});
-
-const badgesCollection = defineCollection({
-    type: "data",
-    schema: ({ image }) => z.array(z.object({
-        path: image().or(z.string()),
-        alt: z.string(),
-        href: z.string().optional(),
-        title: z.string().optional()
-    }))
-});
-
-export const collections = {
-    projects: projectsCollection,
-    badges: badgesCollection
-};

src/content/projects/projects.yml

@@ -1,9 +1,11 @@
-- name: "lastfmpris"
+- slug: "lastfmpris"
+  name: "lastfmpris"
   description: "a rust application to scrobble your currently playing song on last.fm with mpris"
   date: 2024-08-22
   links:
     - "https://git.reidlab.pink/reidlab/lastfmpris"
-- name: "reidlab.pink"
+- slug: "reidlab-pink"
+  name: "reidlab.pink"
   description: "this website!"
   date: 2024-07-04
   links:

src/layouts/Layout.astro

@@ -6,7 +6,7 @@ interface Props {
 
 const { title, description } = Astro.props;
 
-import { ViewTransitions } from "astro:transitions";
+import { ClientRouter } from "astro:transitions";
 import ReplacementSwap from "astro-vtbot/components/ReplacementSwap.astro";
 
 import Sidebar from "../components/Sidebar.astro";
@@ -35,7 +35,7 @@ import "../styles/main.css";
 
         <!-- view transitions. actually fucking magical! -->
         <!-- doesn't work without js, maybe add noscript element? -->
-        <ViewTransitions />
+        <ClientRouter />
         <ReplacementSwap />
     </head>
     <body>

src/pages/about.astro

@@ -8,7 +8,7 @@ import Card from "../components/Card.astro";
     <Card title="about me">
         <p>hai! i'm <strong>reid</strong> <i>(any pronouns)</i>, known online as reidlab. i'm a programmer, system administrator, amateur  artist, and terminally online totally-not-a-furry thing</p>
         <p>my favorite programming languages include <em>rust</em>, <em>lua</em>, <em>nix</em>, and <em>typescript</em>. i don't specialize in creating anything specific, it all just comes into my head as really dumb ideas that i later on execute in the most evil way i can imagine. :3c</p>
-        <p>my favorite games include: oneshot, celeste, omori, undertale, deltarune, rain world, and roblox</p>
+        <p>my favorite games include: oneshot, celeste, omori, undertale, deltarune, rain world, yakuza, and roblox</p>
         <p>my favorite music genres include: shoegaze, rock, and hyperpop</p>
     </Card>
 </Layout>