refactor: use content layer api

Author: milan-codes

src/components/BlogPost.astro

@@ -1,12 +1,13 @@
 ---
 import type { CollectionEntry } from "astro:content";
 import { formatDate } from "../utils";
+import { render } from "astro:content";
 
 interface Props {
   post: CollectionEntry<"blog">;
 }
 const { post } = Astro.props;
-const { remarkPluginFrontmatter } = await post.render();
+const { remarkPluginFrontmatter } = await render(post);
 ---
 
 <div>
@@ -21,7 +22,7 @@ const { remarkPluginFrontmatter } = await post.render();
     {remarkPluginFrontmatter.readingTime}
   </h1>
   <div
-    class="prose my-8 max-w-none text-gray-600 dark:prose-invert dark:text-gray-400"
+    class="prose dark:prose-invert my-8 max-w-none text-gray-600 dark:text-gray-400"
   >
     <slot />
   </div>
@@ -36,7 +37,7 @@ const { remarkPluginFrontmatter } = await post.render();
   </ul>
   <hr />
   <div
-    class="prose my-8 max-w-none text-gray-600 dark:prose-invert dark:text-gray-400"
+    class="prose dark:prose-invert my-8 max-w-none text-gray-600 dark:text-gray-400"
   >
     If you have any questions or comments, or you would like to point out any
     errors in any of the blog posts, please reach out to me at <a

src/components/BlogPostCard.astro

@@ -11,7 +11,7 @@ const { post } = Astro.props;
 <div
   class="my-2 flex items-center justify-between text-gray-600 dark:text-gray-400"
 >
-  <a class="hover:underline" href={`/blog/${post.slug}`}>
+  <a class="hover:underline" href={`/blog/${post.id}`}>
     {post.data.title}
   </a>
   {formatDate(post.data.pubDate)}

src/content/config.ts src/content.config.tssrc/content/config.ts renamed to src/content.config.ts

@@ -1,7 +1,8 @@
+import { glob } from "astro/loaders";
 import { defineCollection, z } from "astro:content";
 
 const blogCollection = defineCollection({
-  type: "content",
+  loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/content/blog" }),
   schema: z.object({
     title: z.string().min(1),
     description: z.string().min(1),
@@ -12,7 +13,10 @@ const blogCollection = defineCollection({
 });
 
 const announcementCollection = defineCollection({
-  type: "content",
+  loader: glob({
+    pattern: "**/[^_]*.{md,mdx}",
+    base: "./src/content/announcements",
+  }),
   schema: z.object({
     title: z.string().min(1),
     description: z.string().min(1),

src/content/announcements/internships.md

@@ -2,6 +2,7 @@
 title: "Internships and entry level positions"
 description: "Seeking challenging internships and entry-level positions to apply and enhance my coding skills"
 show: false
+slug: internships
 ---
 
 Hi! My name is Milan, I'm a motivated and ambitious second-year CS student with a strong desire to gain practical experience in the field. Seeking challenging internships and entry-level positions to apply and enhance my coding skills, contribute to real-world projects, and learn from industry professionals. Committed to delivering high-quality work, collaborating effectively in team environments, and continuously expanding my knowledge. If you think I'd be a good fit in your team, contact me at milanherke@protonmail.com!

src/content/blog/introduction-to-big-o.md

@@ -4,6 +4,7 @@ pubDate: 2023-07-04
 description: "What do we mean by efficient algorithms? How does the runtime of an algorithm grow as its input size grows?"
 tags: ["big-o", "complexity-analysis"]
 draft: false
+slug: a-brief-introduction-to-big-o
 ---
 
 # Table Of Contents

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

@@ -1,17 +1,18 @@
 ---
 import { getCollection } from "astro:content";
 import AnnouncementLayout from "../../layouts/AnnouncementLayout.astro";
+import { render } from "astro:content";
 
 export async function getStaticPaths() {
   const announcements = await getCollection("announcements");
   return announcements.map((entry) => ({
-    params: { slug: entry.slug },
+    params: { slug: entry.id },
     props: { entry },
   }));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 
 <AnnouncementLayout announcement={entry}>

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

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

src/pages/index.astro

@@ -29,7 +29,7 @@ const announcements = await getCollection(
       announcements.map((announcement) => (
         <Popup
           text={announcement.data.description}
-          href={`/announcement/${announcement.slug}`}
+          href={`/announcement/${announcement.id}`}
         />
       ))
   }