refactor: update for new content collection api

src/pages/index.astro

@@ -1,22 +1,20 @@
 ---
+import { getCollection } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
+import Socials from "@components/Socials.astro";
 import getSortedPosts from "@utils/getSortedPosts";
 import slugify from "@utils/slugify";
-import type { Frontmatter } from "src/types";
-import Socials from "@components/Socials.astro";
 import { SOCIALS } from "@config";
 
-const posts = await Astro.glob<Frontmatter>("../contents/**/*.md");
+const posts = await getCollection("blog");
 
 const sortedPosts = getSortedPosts(posts);
-const featuredPosts = sortedPosts.filter(
+const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
-  ({ frontmatter }) => frontmatter.featured
-);
 
 const socialCount = SOCIALS.filter(social => social.active).length;
 ---
@@ -76,10 +74,10 @@ const socialCount = SOCIALS.filter(social => social.active).length;
           <section id="featured">
             <h2>Featured</h2>
             <ul>
-              {featuredPosts.map(({ frontmatter }) => (
+              {featuredPosts.map(({ data }) => (
                 <Card
-                  href={`/posts/${slugify(frontmatter)}`}
+                  href={`/posts/${slugify(data)}`}
-                  post={frontmatter}
+                  frontmatter={data}
                   secHeading={false}
                 />
               ))}
@@ -95,11 +93,11 @@ const socialCount = SOCIALS.filter(social => social.active).length;
       <ul>
         {
           sortedPosts.map(
-            ({ frontmatter }, index) =>
+            ({ data }, index) =>
               index < 4 && (
                 <Card
-                  href={`/posts/${slugify(frontmatter)}`}
+                  href={`/posts/${slugify(data)}`}
-                  post={frontmatter}
+                  frontmatter={data}
                   secHeading={false}
                 />
               )

src/pages/posts/[slug].astro

@@ -1,15 +1,14 @@
 ---
-import { SITE } from "src/config";
+import { CollectionEntry, getCollection } from "astro:content";
 import Posts from "@layouts/Posts.astro";
 import PostDetails from "@layouts/PostDetails.astro";
 import getSortedPosts from "@utils/getSortedPosts";
 import getPageNumbers from "@utils/getPageNumbers";
-import type { MarkdownInstance } from "astro";
-import type { Frontmatter } from "src/types";
 import slugify from "@utils/slugify";
+import { SITE } from "@config";
 
 export interface Props {
-  post: MarkdownInstance<Frontmatter>;
+  post: CollectionEntry<"blog">;
 }
 
 type PostResult = {
@@ -17,7 +16,7 @@ type PostResult = {
     slug: string | number;
   };
   props?: {
-    post: MarkdownInstance<Record<string, any>>;
+    post: CollectionEntry<"blog">;
   };
 }[];
 
@@ -28,14 +27,14 @@ type PagePaths = {
 }[];
 
 export async function getStaticPaths() {
-  const posts = await Astro.glob<Frontmatter>("../../contents/**/*.md");
+  const posts = await getCollection("blog");
 
-  const filteredPosts = posts.filter(({ frontmatter }) => !frontmatter.draft);
+  const filteredPosts = posts.filter(({ data }) => !data.draft);
 
   let postResult: PostResult = filteredPosts.map(post => {
     return {
       params: {
-        slug: slugify(post.frontmatter),
+        slug: slugify(post.data),
       },
       props: {
         post,
@@ -55,7 +54,7 @@ export async function getStaticPaths() {
 const { slug } = Astro.params;
 const { post } = Astro.props;
 
-const posts = await Astro.glob<Frontmatter>("../../contents/**/*.md");
+const posts = await getCollection("blog");
 
 const sortedPosts = getSortedPosts(posts);
 

src/pages/tags/[tag].astro

@@ -1,5 +1,5 @@
 ---
-import { SITE } from "src/config";
+import { CollectionEntry, getCollection } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
@@ -7,19 +7,16 @@ import Footer from "@components/Footer.astro";
 import Card from "@components/Card";
 import getUniqueTags from "@utils/getUniqueTags";
 import getPostsByTag from "@utils/getPostsByTag";
-import type { MarkdownInstance } from "astro";
-import type { Frontmatter } from "src/types";
 import slugify from "@utils/slugify";
+import { SITE } from "@config";
 
 export interface Props {
-  post: MarkdownInstance<Frontmatter>;
+  post: CollectionEntry<"blog">;
   tag: string;
 }
 
 export async function getStaticPaths() {
-  const posts: MarkdownInstance<Frontmatter>[] = await Astro.glob(
+  const posts: CollectionEntry<"blog">[] = await getCollection("blog");
-    "../../contents/**/*.md"
-  );
 
   const tags = getUniqueTags(posts);
 
@@ -37,9 +34,7 @@ export async function getStaticPaths() {
 
 const { tag } = Astro.props;
 
-const posts: MarkdownInstance<Frontmatter>[] = await Astro.glob(
+const posts: CollectionEntry<"blog">[] = await getCollection("blog");
-  "../../contents/**/*.md"
-);
 
 const tagPosts = getPostsByTag(posts, tag);
 ---
@@ -52,8 +47,8 @@ const tagPosts = getPostsByTag(posts, tag);
   >
     <ul>
       {
-        tagPosts.map(({ frontmatter }) => (
+        tagPosts.map(({ data }) => (
-          <Card href={`/posts/${slugify(frontmatter)}`} post={frontmatter} />
+          <Card href={`/posts/${slugify(data)}`} frontmatter={data} />
         ))
       }
     </ul>

src/pages/tags/index.astro

@@ -1,14 +1,14 @@
 ---
-import { SITE } from "src/config";
+import { getCollection } from "astro:content";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Tag from "@components/Tag.astro";
 import getUniqueTags from "@utils/getUniqueTags";
-import type { Frontmatter } from "src/types";
+import { SITE } from "@config";
 
-const posts = await Astro.glob<Frontmatter>("../../contents/**/*.md");
+const posts = await getCollection("blog");
 
 let tags = getUniqueTags(posts);
 ---