refactor: use a content collection for blog posts

src/pages/blog/[slug].astro

@@ -2,23 +2,21 @@
 import AboutMe from "~/components/AboutMe.astro";
 import Layout from "~/layouts/Layout.astro";
 import Markdown from "~/components/Markdown.astro";
-import { getSlugFromFile } from "~/utils.ts";
+import { getCollection } from 'astro:content';
 
 export async function getStaticPaths() {
-  const posts = await Astro.glob("../../posts/*.md");
+  const posts = await getCollection('blog');
 
   return posts.map((post) => {
-    const slug = getSlugFromFile(post.file);
-
     return {
-      params: { slug },
+      params: { slug: post.slug },
       props: { post },
     };
   });
 }
 
-const { Content } = Astro.props.post;
-const { title } = Astro.props.post.frontmatter;
+const { Content } = await Astro.props.post.render();
+const { title } = Astro.props.post.data;
 ---
 
 <Layout title={title}>

src/pages/blog/index.astro

@@ -1,25 +1,25 @@
 ---
 import ListingPage from "~/components/ListingPage.astro";
 import PageLayout from "~/layouts/PageLayout.astro";
-import { getSlugFromFile } from "~/utils.ts";
+import { getCollection } from 'astro:content';
 
-const posts = await Astro.glob("../../posts/*.md");
+const posts = await getCollection('blog');
 
 // TODO: show all posts when running locally.
 const filteredPosts = posts
-  .filter((post) => !post.frontmatter.draft)
-  .filter((post) => post.frontmatter.date);
+  .filter((post) => !post.data.draft)
+  .filter((post) => post.data.date);
 
 const sortedPosts = filteredPosts
   .map((post) => {
-    const slug = `/blog/${getSlugFromFile(post.file)}`;
+    const slug = `/blog/${post.slug}`;
 
     return { item: post, slug };
   })
   .sort(
     (a, b) =>
-      new Date(b.item.frontmatter.date).valueOf() -
-      new Date(a.item.frontmatter.date).valueOf()
+      new Date(b.item.data.date).valueOf() -
+      new Date(a.item.data.date).valueOf()
   );
 ---