fix building

web/package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^6.10.0",
+    "bun-types": "^1.0.13",
     "eslint": "^8.53.0",
     "eslint-plugin-astro": "^0.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0"

web/src/components/BlogPostItem.astro

@@ -1,27 +1,27 @@
 ---
-import type { MDXInstance } from 'astro'
+import type { CollectionEntry } from 'astro:content'
 import { format } from 'date-fns'
 
 export interface Props {
-	posts: MDXInstance<Record<any, any>>[]
+	posts: CollectionEntry<'blog'>[]
 }
 
 const { posts } = Astro.props
-const getUrl = (url: string | undefined) => url ? url.split("/").slice(2).join("/").split(".").shift() :"/"
+
 ---
 
 <ul>
 	{
 		posts.map((post) => (
 			<li>
-				<a href={getUrl(post.url)}>
+				<a href={`/blog/${post.slug}`}>
 					<article class="text-foreground hover:text-brand-7">
-						<h3 class="mt-4 text-xl text-inherit transition-colors">{post.frontmatter.title}</h3>
+						<h3 class="mt-4 text-xl text-inherit transition-colors">{post.data.title}</h3>
 						<p class="flex items-center justify-between">
 							<span class="text-gray-11">
-								{format(new Date(post.frontmatter.pubDate), 'LLLL dd, y')}
+								{format(new Date(post.data.pubDate), 'LLLL dd, y')}
 							</span>
-							<span class="text-gray-11">{post.frontmatter.minutesRead}</span>
+							<span class="text-gray-11">2 min</span>
 						</p>
 					</article>
 				</a>

web/src/content/blog/rewriting-my-blog.mdx

@@ -3,7 +3,11 @@ layout: ../../layouts/BlogLayout.astro
 title: 'Rewriting my blog from SvelteKit to Astro'
 pubDate: 2022-11-20
 description: 'This is a post about a rewrite of my sveltekit blog into astro'
-tags: ['astro', 'sveltekit', 'blog', 'typescript', 'building in public']
+draft: false
+tags: 
+- astro
+- sveltekit
+- blog
 ---
 
 import { Image } from 'astro:assets'

web/src/content/config.ts

@@ -1,15 +1,16 @@
 import { defineCollection, z } from 'astro:content';
 
 const blog = defineCollection({
-	// Type-check frontmatter using a schema
-	schema: z.object({
-		title: z.string(),
-		description: z.string(),
-		// Transform string to Date object
-		pubDate: z.coerce.date(),
-		updatedDate: z.coerce.date().optional(),
-		heroImage: z.string().optional(),
-	}),
+  // Type-check frontmatter using a schema
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.coerce.date(),
+    updatedDate: z.coerce.date().optional(),
+    tags: z.array(z.string()),
+	draft: z.boolean().optional().default(false)
+  }),
 });
 
 export const collections = { blog };

web/src/pages/blog/[slug].astro

@@ -1,18 +1,23 @@
 ---
-export async function getStaticPaths() {
+import { getCollection } from 'astro:content';
 
-const allPosts = await Astro.glob('../../content/blog/*.mdx') // returns an array of posts that live at ./src/pages/post/*.md
-const posts = allPosts.filter((post) => !post.frontmatter.draft)
+export async function getStaticPaths() {
+  const posts = await getCollection('blog', ({ data }) => {
+    return data.draft !== true;
+  });
 
   return posts.map((post) => {
     return {
-      params: { slug: post.file.split("/").pop()?.split(".").shift() },
+      params: { slug: post.slug },
       props: { post },
     };
   });
 }
 
-const { Content } = Astro.props.post;
+const { slug } = Astro.params;
+import { getEntry } from 'astro:content';
+const entry = await getEntry('blog', slug!);
+const { Content } = await entry!.render();
 ---
 
-<Content/>
+<Content />

web/src/pages/blog/index.astro

@@ -1,21 +1,23 @@
 ---
-import BlogPostItem from '../../components/BlogPostItem.astro'
-import Section from '../../components/Section.astro'
-import Layout from '../../layouts/Layout.astro'
+import { getCollection } from 'astro:content';
+import BlogPostItem from '../../components/BlogPostItem.astro';
+import Section from '../../components/Section.astro';
+import Layout from '../../layouts/Layout.astro';
 
-const allPosts = await Astro.glob('../../content/blog/*.mdx') // returns an array of posts that live at ./src/pages/post/*.md
-const posts = allPosts.filter((post) => !post.frontmatter.draft)
+const posts = await getCollection('blog', ({ data }) => {
+  return data.draft !== true;
+});
 ---
 
 <Layout title="Kharann • All posts">
-	<section>
-		<h1 class="text-4xl font-bold text-primary-9">Blog</h1>
-		<p class="my-4">
-			Here you can find all the posts I've written. I write about web development, technology, and
-			other things I find interesting.
-		</p>
-		<Section name="All posts.">
-			<BlogPostItem posts={posts} />
-		</Section>
-	</section>
+  <section>
+    <h1 class="text-4xl font-bold text-primary-9">Blog</h1>
+    <p class="my-4">
+      Here you can find all the posts I've written. I write about web development, technology, and other things I find
+      interesting.
+    </p>
+    <Section name="All posts.">
+      <BlogPostItem posts={posts} />
+    </Section>
+  </section>
 </Layout>

web/src/pages/index.astro

@@ -1,12 +1,12 @@
 ---
+import { getCollection } from 'astro:content';
 import FrontPagePost from '../components/BlogPostItem.astro';
 import Link from '../components/Link.astro';
 import Section from '../components/Section.astro';
 import Layout from '../layouts/Layout.astro';
 
 
-const allPosts = await Astro.glob('../content/blog/*.mdx') 
-const posts = allPosts.filter((post) => !post.frontmatter.draft)
+const posts = await getCollection("blog", ({data}) => data.draft !== false)
 ---
 
 <Layout title="Kharann • Homepage" description="Anhkha's developer portfolio">

web/src/types.ts

@@ -0,0 +1,7 @@
+export type Frontmatter = {
+  title: string;
+  pubDate: string;
+  description: string;
+  tags: string[];
+  minutesRead: number;
+};

web/tsconfig.json

@@ -1,6 +1,8 @@
 {
-  "extends": "astro/tsconfigs/strictest",
+  "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "strictNullChecks": true
-  }
+    "strictNullChecks": true,
+    "types": ["bun-types"]
+  },
+
 }