Migrate to astro 5

Author: Wykks

astro.config.mjs

@@ -5,10 +5,6 @@ import { defineConfig } from "astro/config";
 
 // https://astro.build/config
 export default defineConfig({
-  prefetch: {
-    prefetchAll: true,
-    defaultStrategy: "viewport",
-  },
   site: "http://www.monkeytechdays.com",
   integrations: [tailwind(), icon(), react()],
 });

package.json

@@ -11,29 +11,29 @@
   },
   "dependencies": {
     "@astrojs/check": "0.9.4",
-    "@astrojs/react": "3.6.2",
-    "@astrojs/tailwind": "5.1.2",
+    "@astrojs/react": "4.1.0",
+    "@astrojs/tailwind": "5.1.3",
     "@fontsource/saira": "5.1.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "astro": "4.16.9",
-    "astro-icon": "1.1.2",
+    "astro": "5.0.5",
+    "astro-icon": "1.1.4",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
-    "framer-motion": "11.11.11",
-    "prettier-plugin-tailwindcss": "0.6.8",
+    "framer-motion": "11.14.4",
+    "prettier-plugin-tailwindcss": "0.6.9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "sharp": "0.33.5",
-    "tailwind-merge": "2.5.4",
-    "tailwindcss": "3.4.14",
-    "typescript": "5.6.3"
+    "tailwind-merge": "2.5.5",
+    "tailwindcss": "3.4.16",
+    "typescript": "5.7.2"
   },
   "devDependencies": {
-    "prettier": "3.3.3",
+    "prettier": "3.4.2",
     "prettier-plugin-astro": "0.14.1"
   },
-  "packageManager": "pnpm@8.15.5+sha256.4b4efa12490e5055d59b9b9fc9438b7d581a6b7af3b5675eb5c5f447cee1a589",
+  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c",
   "engines": {
     "node": ">=20"
   }

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 ---
 import "@fontsource/saira";
-import { ViewTransitions } from "astro:transitions";
+import { ClientRouter } from 'astro:transitions';
 import { SITE_TITLE } from "../consts";
 
 interface Props {
@@ -58,4 +58,4 @@ const { title, description, image = "/logo.jpg" } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
-<ViewTransitions />
+<ClientRouter />

src/components/BaseHead.astro

@@ -4,21 +4,21 @@ import { Image } from "astro:assets";
 interface Props {
   type: "mktd";
   img: string;
-  slug: string;
+  id: string;
   name: string;
   size?: "small" | "large";
   eagerLoading?: boolean;
 }
 
-const { img, slug, name, type, size = "small", eagerLoading } = Astro.props;
+const { img, id, name, type, size = "small", eagerLoading } = Astro.props;
 
 const images = import.meta.glob<{ default: ImageMetadata }>(
   "/src/assets/events/*.{jpeg,jpg,png,gif}",
 );
 const imgSrc = images[`/src/assets/events/${img}`];
 ---
 
-<a href={`${type}/${slug}/`} class="block aspect-video">
+<a href={`${type}/${id}/`} class="block aspect-video">
   <Image
     src={imgSrc()}
     loading="lazy"

src/components/index/EventCard.astro

@@ -17,7 +17,7 @@ const events = (await getCollection("mktds"))
         events.map((evt) => (
           <EventCard
             img={evt.data.thumbnail}
-            slug={evt.slug}
+            id={evt.id}
             name={evt.data.name}
             type="mktd"
           />

src/components/index/PreviousSessions.astro

@@ -22,7 +22,7 @@ const events = (await getCollection("mktds"))
             <GlowingEffect client:idle>
               <EventCard
                 img={evt.data.thumbnail}
-                slug={evt.slug}
+                id={evt.id}
                 name={evt.data.name}
                 type="mktd"
                 size="large"

src/components/index/UpcomingSessions.astro

@@ -1,7 +1,8 @@
 import { defineCollection, z } from "astro:content";
+import { glob } from 'astro/loaders';
 
 const mktds = defineCollection({
-  type: "content",
+  loader: glob({ pattern: '**/[^_]*.md', base: "./src/content/mktds" }),
   schema: z.object({
     date: z.coerce.date(),
     name: z.string(),

src/content/config.ts src/content.config.ts

@@ -11,7 +11,7 @@ import Planning from "../../components/mktd/Planning.astro";
 export async function getStaticPaths() {
   const mktds = await getCollection("mktds");
   return mktds.map((mktd) => ({
-    params: { slug: mktd.slug },
+    params: { id: mktd.id },
     props: mktd,
   }));
 }

src/env.d.ts

@@ -3,5 +3,7 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react"
-  }
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
 }