Update Astro 5 and dependencies

astro.config.ts

@@ -40,7 +40,4 @@ export default defineConfig({
     },
   },
   scopedStyleStrategy: "where",
-  experimental: {
-    contentLayer: true,
-  },
 });

package.json

@@ -14,10 +14,10 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/rss": "^4.0.7",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/rss": "^4.0.11",
     "@resvg/resvg-js": "^2.6.2",
-    "astro": "^4.16.18",
+    "astro": "^5.2.2",
     "fuse.js": "^7.0.0",
     "lodash.kebabcase": "^4.1.1",
     "remark-collapse": "^0.1.2",
@@ -27,9 +27,9 @@
     "typescript": "^5.5.3"
   },
   "devDependencies": {
-    "@astrojs/react": "^3.6.2",
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/react": "^4.2.0",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/tailwind": "^6.0.0",
     "@tailwindcss/typography": "^0.5.15",
     "@types/github-slugger": "^1.3.0",
     "@types/lodash.kebabcase": "^4.1.9",

src/components/Search.tsx

@@ -7,7 +7,6 @@ export type SearchItem = {
   title: string;
   description: string;
   data: CollectionEntry<"blog">["data"];
-  slug: string;
 };
 
 interface Props {
@@ -116,9 +115,9 @@ export default function SearchBar({ searchList }: Props) {
         {searchResults &&
           searchResults.map(({ item, refIndex }) => (
             <Card
-              href={`/posts/${item.slug}/`}
+              href={`/posts/${item.data.slug}/`}
               frontmatter={item.data}
-              key={`${refIndex}-${item.slug}`}
+              key={`${refIndex}-${item.data.slug}`}
             />
           ))}
       </ul>

src/content/blog/customizing-astropaper-theme-color-schemes.md

@@ -2,6 +2,7 @@
 author: Sat Naing
 pubDatetime: 2022-09-25T15:20:35Z
 title: Customizing AstroPaper theme color schemes
+slug: customizing-astropaper-theme-color-schemes
 featured: false
 draft: false
 tags:

src/content/blog/how-to-add-a-new-social-icon.md

@@ -3,6 +3,7 @@ author: Simon Smale
 pubDatetime: 2024-01-08T18:16:00.000Z
 modDatetime:
 title: How to add a new Social Icon to AstroPaper
+slug: how-to-add-a-new-social-icon
 featured: false
 draft: false
 tags:

src/content/blog/how-to-add-an-estimated-reading-time.md

@@ -150,7 +150,7 @@ export async function getStaticPaths() {
   const postsWithRT = await getPostsWithRT(posts); // replace reading time logic with this func
 
    const postResult = postsWithRT.map(post => ({ // make sure to replace posts with postsWithRT
-    params: { slug: post.slug },
+    params: { slug: post.data.slug },
     props: { post },
   }));
 

src/content/blog/how-to-add-latex-equations-in-blog-posts.md

@@ -2,6 +2,7 @@
 author: Alberto Perdomo
 pubDatetime: 2024-09-08T20:58:52.737Z
 title: Adding LaTeX Equations in AstroPaper blog posts
+slug: adding-latex-equations-in-astropaper-blog-posts
 featured: false
 tags:
   - rendering

src/content/blog/setting-dates-via-git-hooks.md

@@ -3,6 +3,7 @@ author: Simon Smale
 pubDatetime: 2024-01-03T20:40:08Z
 modDatetime: 2024-01-08T18:59:05Z
 title: How to use Git Hooks to set Created and Modified Dates
+slug: setting-dates-via-git-hooks
 featured: false
 draft: false
 tags:

src/content/blog/tailwind-typography.md

@@ -1,5 +1,6 @@
 ---
 title: Tailwind Typography Plugin
+slug: tailwind-typography
 author: Sat Naing
 pubDatetime: 2022-07-05T02:05:51Z
 featured: false

src/content/config.ts

@@ -11,6 +11,7 @@ const blog = defineCollection({
       pubDatetime: z.date(),
       modDatetime: z.date().optional().nullable(),
       title: z.string(),
+      slug: z.string(),
       featured: z.boolean().optional(),
       draft: z.boolean().optional(),
       tags: z.array(z.string()).default(["others"]),

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, slug } }) => ({
   slug,
   title,
 }));
 
-const currentPostIndex = allPosts.findIndex(a => a.slug === post.slug);
+const currentPostIndex = allPosts.findIndex(a => a.slug === post.data.slug);
 
 const prevPost = currentPostIndex !== 0 ? allPosts[currentPostIndex - 1] : null;
 const nextPost =
@@ -77,7 +77,9 @@ const nextPost =
     </button>
   </div>
   <main id="main-content">
-    <h1 transition:name={slugifyStr(title)} class="post-title inline-block">{title}</h1>
+    <h1 transition:name={slugifyStr(title)} class="post-title inline-block">
+      {title}
+    </h1>
     <Datetime
       pubDatetime={pubDatetime}
       modDatetime={modDatetime}

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 }) => (
-          <Card href={`/posts/${slug}/`} frontmatter={data} />
+        page.data.map(({ data }) => (
+          <Card href={`/posts/${data.slug}/`} 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 }) => (
-          <Card href={`/posts/${slug}/`} frontmatter={data} />
+        page.data.map(({ data }) => (
+          <Card href={`/posts/${data.slug}/`} 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 }) => (
-                        <Card href={`/posts/${slug}`} frontmatter={data} />
+                      .map(({ data }) => (
+                        <Card href={`/posts/${data.slug}`} 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 }) => (
                 <Card
-                  href={`/posts/${slug}/`}
+                  href={`/posts/${data.slug}/`}
                   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 }, index) =>
                 index < SITE.postPerIndex && (
                   <Card
-                    href={`/posts/${slug}/`}
+                    href={`/posts/${data.slug}/`}
                     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.data.slug },
     props: { post },
   }));