stupid astro content collections not supporting remark plugins well.

src/components/BlogPost.astro

@@ -1,8 +1,9 @@
 ---
-const { title, url, minutesRead, pubDate } = Astro.props
+const { title, url, pubDate, renderPromise } = Astro.props
+const { remarkPluginFrontmatter } = await renderPromise
 ---
 
 <li>
 	<a href={url}>{title}</a> <br />
-	Approximately {minutesRead}, published {pubDate.toISOString().slice(0,10)}
+	Approximately {remarkPluginFrontmatter.minutesRead}, published {pubDate.toISOString().slice(0,10)}
 </li>

src/content/config.ts

@@ -7,7 +7,7 @@ const blogCollection = defineCollection({
 		pubDate: z.date(),
 		description: z.string(),
 		author: z.string(),
-		minutesRead: z.string()
+		minutesRead: z.string().optional()
 	})
 })
 

src/layouts/MarkdownPostLayout.astro

@@ -1,13 +1,13 @@
 ---
 import Layout from "./Layout.astro"
-const { frontmatter } = Astro.props
+const { frontmatter, remarkPluginFrontmatter } = Astro.props
 ---
 <Layout title={frontmatter.title}>
 	<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.toISOString().slice(0,10)}</p>
-		<p>Approximately {frontmatter.minutesRead}</p>
+		<p>Approximately {remarkPluginFrontmatter.minutesRead}</p>
 		<slot />
 	</main>
 </Layout>

src/pages/blog.astro

@@ -9,7 +9,7 @@ const pageTitle = "bitbloxhub's blog"
 	<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={`/posts/${post.slug}/`} title={post.data.title} minutesRead={post.data.minutesRead} pubDate={post.data.pubDate} />)}
-		</ul>
+			{allPosts.map((post) => <BlogPost url={`/posts/${post.slug}/`} title={post.data.title} pubDate={post.data.pubDate} renderPromise={post.render()} />)}
+		</ul> 
 	</main>
 </Layout>

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

@@ -10,8 +10,8 @@ export async function getStaticPaths() {
 }
 // 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()
+const { Content, remarkPluginFrontmatter } = await entry.render()
 ---
-<MarkdownPostLayout frontmatter={entry.data}>
+<MarkdownPostLayout frontmatter={entry.data} remarkPluginFrontmatter={remarkPluginFrontmatter}>
 	<Content />
 </MarkdownPostLayout>