refactor: move blog posts to content collection

Author: lucsmachado

package-lock.json

@@ -10,15 +10,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.2",
-    "@astrojs/tailwind": "^5.0.0",
+    "@astrojs/react": "^3.0.10",
+    "@astrojs/tailwind": "^5.1.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "astro": "^3.1.0",
+    "astro": "^4.4.6",
     "astro-icon": "^0.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",

package.json

@@ -0,0 +1,22 @@
+import { z, defineCollection } from "astro:content";
+
+const posts = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    pubDate: z.date(),
+    description: z.string(),
+    author: z.string(),
+    image: z
+      .object({
+        url: z.string(),
+        alt: z.string(),
+      })
+      .optional(),
+    tags: z.array(z.string()),
+  }),
+});
+
+export const collections = {
+  posts,
+};

src/content/config.ts

@@ -1,7 +1,6 @@
 ---
-layout: "../../layouts/BlogLayout.astro"
 title: "Why Astro?"
-pubDate: "2023/12/21"
+pubDate: 2023-12-21
 description: "My first blog post, which explains my reasoning for choosing Astro to build my personal website"
 author: "Lucas Machado"
 tags: ["astro", "blogging", "learning in public"]

src/pages/blog/why-astro.md src/content/posts/why-astro.md

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/env.d.ts

@@ -22,7 +22,7 @@ const formatDate = (date: Date): string => {
     day: "numeric",
     month: "long",
     year: "numeric",
-  }).formatToParts(date.setHours(0, 0, 0, 0));
+  }).formatToParts(date);
 
   return parts
     .map((part) => {
@@ -42,7 +42,7 @@ const formatDate = (date: Date): string => {
     <h1 class="leading-tight font-bold text-3xl text-slate-200">
       {frontmatter.title}
     </h1>
-    <p class="pt-2 pb-8">{formatDate(new Date(frontmatter.pubDate))}</p>
+    <p class="pt-2 pb-8">{formatDate(frontmatter.pubDate)}</p>
     <slot />
     <p class="pt-8 font-medium text-slate-200">
       Written by {frontmatter.author}

src/layouts/BlogLayout.astro

@@ -1,12 +1,13 @@
 ---
+import { getCollection } from "astro:content";
 import Layout from "../layouts/Layout.astro";
 
 const metadata = {
   title: "The Lucas Machado Blog",
   description: "Lucas Machado's personal blog.",
 };
 
-const postList = await Astro.glob("../pages/blog/*.md");
+const postCollection = await getCollection("posts");
 ---
 
 <Layout {...metadata}>
@@ -23,9 +24,9 @@ const postList = await Astro.glob("../pages/blog/*.md");
       </h2>
       <ul>
         {
-          postList.map((post) => (
+          postCollection.map((post) => (
             <li>
-              <a href={post.url}>{post.frontmatter.title}</a>
+              <a href={`/posts/${post.slug}`}>{post.data.title}</a>
             </li>
           ))
         }

src/pages/blog.astro

@@ -0,0 +1,19 @@
+---
+import { getCollection } from "astro:content";
+import BlogLayout from "../../layouts/BlogLayout.astro";
+
+export async function getStaticPaths() {
+  const blogPosts = await getCollection("posts");
+  return blogPosts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content } = await post.render();
+---
+
+<BlogLayout frontmatter={post.data}>
+  <Content />
+</BlogLayout>