content collections!

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
 	"yaml.schemas": {
 		"https://json.schemastore.org/github-workflow.json": "file:///mnt/wd-blue-2tb/home/jonahgam/bitbloxhub.github.io/.github/workflows/deploy.yaml"
+	},
+	"files.associations": {
+		"*.mdx": "markdown"
 	}
 }

src/components/BlogPost.astro

@@ -4,5 +4,5 @@ const { title, url, minutesRead, pubDate } = Astro.props
 
 <li>
 	<a href={url}>{title}</a> <br />
-	Approximately {minutesRead}, published {pubDate.slice(0,10)}
+	Approximately {minutesRead}, published {pubDate.toISOString().slice(0,10)}
 </li>

src/pages/posts/first-post.mdx → src/content/blog/first-post.mdx

@@ -1,5 +1,4 @@
 ---
-layout: ../../layouts/MarkdownPostLayout.astro
 title: "I have a new blog!"
 pubDate: 2023-07-22
 description: "This is the first post of my new blog."

src/content/config.ts

@@ -0,0 +1,16 @@
+import { z, defineCollection } from "astro:content"
+
+const blogCollection = defineCollection({
+	type: "content",
+	schema: z.object({
+		title: z.string(),
+		pubDate: z.date(),
+		description: z.string(),
+		author: z.string(),
+		minutesRead: z.string()
+	})
+})
+
+export const collections = {
+	"blog": blogCollection
+}

src/env.d.ts

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

src/layouts/MarkdownPostLayout.astro

@@ -6,7 +6,7 @@ const { frontmatter } = Astro.props
 	<main class="m-auto p-6 max-w-6xl text-left">
 		<h1>{frontmatter.title}</h1>
 		<p>Written by {frontmatter.author}</p>
-		<p>Published on {frontmatter.pubDate.slice(0,10)}</p>
+		<p>Published on {frontmatter.pubDate.toISOString().slice(0,10)}</p>
 		<p>Approximately {frontmatter.minutesRead}</p>
 		<slot />
 	</main>

src/pages/blog.astro

@@ -1,14 +1,15 @@
 ---
+import { getCollection } from "astro:content"
 import Layout from "../layouts/Layout.astro"
 import BlogPost from "../components/BlogPost.astro"
-const allPosts = await Astro.glob("../pages/posts/*.mdx")
+const allPosts = await getCollection("blog")
 const pageTitle = "bitbloxhub's blog"
 ---
 <Layout title={pageTitle}>
 	<main class="m-auto p-6 max-w-6xl text-left">
 		<h1>bitbloxhub's blog!</h1>
 		<ul class="text-base">
-			{allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} minutesRead={post.frontmatter.minutesRead} pubDate={post.frontmatter.pubDate} />)}
+			{allPosts.map((post) => <BlogPost url={`/posts/${post.slug}/`} title={post.data.title} minutesRead={post.data.minutesRead} pubDate={post.data.pubDate} />)}
 		</ul>
 	</main>
 </Layout>

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

@@ -0,0 +1,17 @@
+---
+import { getCollection } from "astro:content"
+import MarkdownPostLayout from "../../layouts/MarkdownPostLayout.astro"
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+	const blogEntries = await getCollection("blog")
+	return blogEntries.map(entry => ({
+		params: { slug: entry.slug }, props: { entry }
+	}))
+}
+// 2. When it's time to render, you can get the entry directly from the prop
+const { entry } = Astro.props
+const { Content } = await entry.render()
+---
+<MarkdownPostLayout frontmatter={entry.data}>
+	<Content />
+</MarkdownPostLayout>