refactor: move blogs to astro collections

tools-nodejs/vighnesh153-astro/website/src/content.config.ts

@@ -0,0 +1,18 @@
+import { defineCollection, z } from "astro:content";
+
+import { glob } from "astro/loaders";
+
+const blog = defineCollection({
+  loader: glob({ base: "./src/content/blog", pattern: "**/*.mdx" }),
+  schema: z.object({
+    title: z.coerce.string(),
+    creationDate: z.coerce.date(),
+    description: z.coerce.string(),
+    tags: z.enum(["software engineering", "best practices", "philosophy"])
+      .array(),
+    slug: z.coerce.string(),
+    live: z.coerce.boolean().default(false),
+  }),
+});
+
+export const collections = { blog };

tools-nodejs/vighnesh153-astro/website/src/pages/blog/how-to-pull-requests/index.mdx → tools-nodejs/vighnesh153-astro/website/src/content/blog/how-to-pull-requests.mdx

@@ -1,11 +1,10 @@
 ---
-layout: '@/layouts/BlogLayout.astro'
-
 title: How to create good pull requests?
 creationDate: 2024-09-29
 description:
   Turns out creating a pull request requires a lot more effort than just commiting your changes and uploading to a VCS.
 tags: ['software engineering', 'best practices']
+slug: how-to-pull-requests
 live: true
 ---
 

tools-nodejs/vighnesh153-astro/website/src/pages/blog/playground/index.mdx → tools-nodejs/vighnesh153-astro/website/src/content/blog/playground.mdx

@@ -1,10 +1,9 @@
 ---
-layout: '@/layouts/BlogLayout.astro'
-
 title: 'Playground Blog post'
 creationDate: 2022-07-01
 description: 'This is the first post of my new Astro blog.'
-tags: ['astro', 'blogging', 'learning in public']
+tags: ['software engineering']
+slug: playground
 live: false
 ---
 

tools-nodejs/vighnesh153-astro/website/src/pages/blog/reinvent-the-wheel/index.mdx → tools-nodejs/vighnesh153-astro/website/src/content/blog/reinvent-the-wheel/index.mdx

@@ -1,10 +1,9 @@
 ---
-layout: '@/layouts/BlogLayout.astro'
-
 title: I hate the "Don't reinvent the wheel" advice
 creationDate: 2024-09-16
 description: I hate it when people tell me to not do something that has already been done before.
 tags: ['philosophy', 'software engineering']
+slug: reinvent-the-wheel
 live: true
 ---
 

tools-nodejs/vighnesh153-astro/website/src/layouts/BlogLayout.astro

@@ -1,24 +1,23 @@
 ---
+import type { CollectionEntry } from "astro:content";
 import ContentLayout from "./ContentLayout.astro";
 
-import { classes, type BlogFrontmatter } from "@/utils/index.ts";
+import { classes } from "@/utils/index.ts";
 
 interface Props {
-  frontmatter: BlogFrontmatter & {
-    // path to blog post
-    url: string;
-  };
+  post?: CollectionEntry<"blog">;
 }
 
-const { frontmatter } = Astro.props;
+const { post } = Astro.props;
 
-const date = new Date(
-  frontmatter.creationDate ?? Date.now(),
-).toLocaleDateString("en-us", {
-  year: "numeric",
-  month: "long",
-  day: "numeric",
-});
+const date = new Date(post?.data.creationDate ?? Date.now()).toLocaleDateString(
+  "en-us",
+  {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }
+);
 ---
 
 <ContentLayout>
@@ -32,7 +31,7 @@ const date = new Date(
   >
     {/* Heading */}
     <h1>
-      {frontmatter.title ?? "Heading 1"}
+      {post?.data.title ?? "Heading 1"}
     </h1>
 
     {/* Creation date */}

tools-nodejs/vighnesh153-astro/website/src/pages/blog/[id].astro

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

tools-nodejs/vighnesh153-astro/website/src/pages/blog/index.astro

@@ -1,23 +1,22 @@
 ---
-import { type BlogFrontmatter } from "@/utils/index.ts";
+import { getCollection } from "astro:content";
 
 import ContentLayout from "@/layouts/ContentLayout.astro";
 
-const posts = Object.values(import.meta.glob("./*/*.mdx", { eager: true }));
+const posts = await getCollection("blog");
 const frontmatterList = posts
-  .map((_blog) => {
-    const blog = _blog as { frontmatter: BlogFrontmatter; url: string };
+  .map((post) => {
     return {
-      ...blog.frontmatter,
-      url: blog.url,
+      ...post.data,
+      url: `/blog/${post.data.slug}`,
     };
   })
   .filter((it) => import.meta.env.DEV || it.live)
   .sort((a, b) =>
     new Date(a.creationDate ?? Date.now()) >
     new Date(b.creationDate ?? Date.now())
       ? -1
-      : 1,
+      : 1
   );
 ---
 
@@ -36,7 +35,7 @@ const frontmatterList = posts
     {
       frontmatterList.map((frontmatter) => {
         const date = new Date(
-          frontmatter.creationDate ?? Date.now(),
+          frontmatter.creationDate ?? Date.now()
         ).toLocaleDateString("en-us", {
           year: "numeric",
           month: "long",

tools-nodejs/vighnesh153-astro/website/src/utils/index.ts

@@ -1,6 +1,5 @@
 export * from "./content/index.ts";
 export * from "./auth.ts";
-export * from "./BlogFrontmatter.ts";
 export * from "./classes.ts";
 export * from "./computeInitialsFromName.ts";
 export * from "./copy_to_clipboard.ts";