build!: upgrade Astro to v5 and related packages

astro.config.ts

@@ -1,9 +1,9 @@
 import { defineConfig } from "astro/config";
-import tailwind from "@astrojs/tailwind";
 import react from "@astrojs/react";
+import sitemap from "@astrojs/sitemap";
+import tailwind from "@astrojs/tailwind";
 import remarkToc from "remark-toc";
 import remarkCollapse from "remark-collapse";
-import sitemap from "@astrojs/sitemap";
 import { SITE } from "./src/config";
 
 // https://astro.build/config
@@ -40,7 +40,4 @@ export default defineConfig({
     },
   },
   scopedStyleStrategy: "where",
-  experimental: {
-    contentLayer: true,
-  },
 });

package.json

@@ -14,36 +14,36 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.3",
+    "@astrojs/check": "^0.9.4",
-    "@astrojs/rss": "^4.0.7",
+    "@astrojs/rss": "^4.0.11",
     "@resvg/resvg-js": "^2.6.2",
-    "astro": "^4.16.18",
+    "astro": "^5.2.5",
-    "fuse.js": "^7.0.0",
+    "fuse.js": "^7.1.0",
     "lodash.kebabcase": "^4.1.1",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
-    "satori": "^0.11.0",
+    "satori": "^0.12.1",
     "tailwindcss": "^3.4.11",
-    "typescript": "^5.5.3"
+    "typescript": "^5.7.3"
   },
   "devDependencies": {
-    "@astrojs/react": "^3.6.2",
+    "@astrojs/react": "^4.2.0",
-    "@astrojs/sitemap": "^3.1.6",
+    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/tailwind": "^6.0.0",
-    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/github-slugger": "^1.3.0",
     "@types/lodash.kebabcase": "^4.1.9",
-    "@types/react": "^18.3.6",
+    "@types/react": "^19.0.8",
-    "@typescript-eslint/parser": "^8.5.0",
+    "@typescript-eslint/parser": "^8.23.0",
-    "astro-eslint-parser": "^1.0.3",
+    "astro-eslint-parser": "^1.2.1",
-    "eslint": "^9.10.0",
+    "eslint": "^9.20.0",
-    "eslint-plugin-astro": "^1.2.4",
+    "eslint-plugin-astro": "^1.3.1",
-    "globals": "^15.9.0",
+    "globals": "^15.14.0",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.6",
+    "prettier-plugin-tailwindcss": "^0.6.11",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
-    "typescript-eslint": "^8.5.0"
+    "typescript-eslint": "^8.23.0"
   }
 }

src/content.config.ts

@@ -1,9 +1,8 @@
-import { SITE } from "@config";
-import { glob } from "astro/loaders";
 import { defineCollection, z } from "astro:content";
+import { glob } from "astro/loaders";
+import { SITE } from "@config";
 
 const blog = defineCollection({
-  type: "content_layer",
   loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
   schema: ({ image }) =>
     z.object({

src/layouts/PostDetails.astro

@@ -4,7 +4,7 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Tag from "@components/Tag.astro";
 import Datetime from "@components/Datetime";
-import type { CollectionEntry } from "astro:content";
+import { render, type CollectionEntry } from "astro:content";
 import { slugifyStr } from "@utils/slugify";
 import ShareLinks from "@components/ShareLinks.astro";
 import { SITE } from "@config";
@@ -28,7 +28,7 @@ const {
   editPost,
 } = post.data;
 
-const { Content } = await post.render();
+const { Content } = await render(post);
 
 const ogImageUrl = typeof ogImage === "string" ? ogImage : ogImage?.src;
 const ogUrl = new URL(
@@ -49,12 +49,12 @@ const layoutProps = {
 
 /* ========== Prev/Next Posts ========== */
 
-const allPosts = posts.map(({ data: { title }, slug }) => ({
+const allPosts = posts.map(({ data: { title }, id }) => ({
-  slug,
+  slug: id,
   title,
 }));
 
-const currentPostIndex = allPosts.findIndex(a => a.slug === post.slug);
+const currentPostIndex = allPosts.findIndex(a => a.slug === post.id);
 
 const prevPost = currentPostIndex !== 0 ? allPosts[currentPostIndex - 1] : null;
 const nextPost =

src/layouts/Posts.astro

@@ -21,8 +21,8 @@ const { page } = Astro.props;
   <Main pageTitle="Posts" pageDesc="All the articles I've posted.">
     <ul>
       {
-        page.data.map(({ data, slug }) => (
+        page.data.map(({ data, id }) => (
-          <Card href={`/posts/${slug}/`} frontmatter={data} />
+          <Card href={`/posts/${id}/`} frontmatter={data} />
         ))
       }
     </ul>

src/layouts/TagPosts.astro

@@ -28,8 +28,8 @@ const { page, tag, tagName } = Astro.props;
     <h1 slot="title" transition:name={tag}>{`Tag:${tag}`}</h1>
     <ul>
       {
-        page.data.map(({ data, slug }) => (
+        page.data.map(({ data, id }) => (
-          <Card href={`/posts/${slug}/`} frontmatter={data} />
+          <Card href={`/posts/${id}/`} frontmatter={data} />
         ))
       }
     </ul>

src/pages/archives/index.astro

@@ -69,8 +69,8 @@ const MonthMap: Record<string, string> = {
                             new Date(a.data.pubDatetime).getTime() / 1000
                           )
                       )
-                      .map(({ data, slug }) => (
+                      .map(({ data, id }) => (
-                        <Card href={`/posts/${slug}`} frontmatter={data} />
+                        <Card href={`/posts/${id}`} frontmatter={data} />
                       ))}
                   </ul>
                 </div>

src/pages/index.astro

@@ -75,9 +75,9 @@ const socialCount = SOCIALS.filter(social => social.active).length;
           <section id="featured">
             <h2>Featured</h2>
             <ul>
-              {featuredPosts.map(({ data, slug }) => (
+              {featuredPosts.map(({ data, id }) => (
                 <Card
-                  href={`/posts/${slug}/`}
+                  href={`/posts/${id}/`}
                   frontmatter={data}
                   secHeading={false}
                 />
@@ -95,10 +95,10 @@ const socialCount = SOCIALS.filter(social => social.active).length;
           <h2>Recent Posts</h2>
           <ul>
             {recentPosts.map(
-              ({ data, slug }, index) =>
+              ({ data, id }, index) =>
                 index < SITE.postPerIndex && (
                   <Card
-                    href={`/posts/${slug}/`}
+                    href={`/posts/${id}/`}
                     frontmatter={data}
                     secHeading={false}
                   />

src/pages/posts/[slug]/index.astro

@@ -11,7 +11,7 @@ export async function getStaticPaths() {
   const posts = await getCollection("blog", ({ data }) => !data.draft);
 
   const postResult = posts.map(post => ({
-    params: { slug: post.slug },
+    params: { slug: post.id },
     props: { post },
   }));
 

src/pages/rss.xml.ts

@@ -10,8 +10,8 @@ export async function GET() {
     title: SITE.title,
     description: SITE.desc,
     site: SITE.website,
-    items: sortedPosts.map(({ data, slug }) => ({
+    items: sortedPosts.map(({ data, id }) => ({
-      link: `posts/${slug}/`,
+      link: `posts/${id}/`,
       title: data.title,
       description: data.description,
       pubDate: new Date(data.modDatetime ?? data.pubDatetime),

src/pages/search.astro

@@ -13,11 +13,11 @@ const posts = await getCollection("blog", ({ data }) => !data.draft);
 const sortedPosts = getSortedPosts(posts);
 
 // List of items to search in
-const searchList = sortedPosts.map(({ data, slug }) => ({
+const searchList = sortedPosts.map(({ data, id }) => ({
   title: data.title,
   description: data.description,
   data,
-  slug,
+  slug: id,
 }));
 ---