Update blog posts to support content collections from astro 2.0

luigieai · Jan 31, 2023 · 9f52301 · 9f52301
1 parent 8119688
commit 9f52301
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 37 deletions.
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
@@ -62,7 +62,30 @@ declare module 'astro:content' {
 	};
 
 	const entryMap: {
-		"test": {
+		"blog": {
+"post1.md": {
+  id: "post1.md",
+  slug: "post1",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"post2.md": {
+  id: "post2.md",
+  slug: "post2",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+"post3.md": {
+  id: "post3.md",
+  slug: "post3",
+  body: string,
+  collection: "blog",
+  data: InferEntrySchema<"blog">
+},
+},
+"test": {
 "1-test.md": {
   id: "1-test.md",
   slug: "1",

diff --git a/src/pages/blog/post1.md → src/content/blog/post1.md b/src/pages/blog/post1.md → src/content/blog/post1.md
@@ -1,5 +1,4 @@
 ---
-layout: "../../layouts/PostLayout.astro"
 title: "Demo Post 1"
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 pubDate: "Sep 10 2022"

diff --git a/src/pages/blog/post2.md → src/content/blog/post2.md b/src/pages/blog/post2.md → src/content/blog/post2.md
@@ -1,5 +1,4 @@
 ---
-layout: "../../layouts/PostLayout.astro"
 title: "Demo Post 2"
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 pubDate: "Sep 11 2022"

diff --git a/src/pages/blog/post3.md → src/content/blog/post3.md b/src/pages/blog/post3.md → src/content/blog/post3.md
@@ -1,5 +1,4 @@
 ---
-layout: "../../layouts/PostLayout.astro"
 title: "Demo Post 3"
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 pubDate: "Sep 12 2022"

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -1,13 +1,25 @@
 import { z, defineCollection } from "astro:content";
 
+const blogSchema = z.object({
+    title: z.string(),
+    description: z.string(), 
+    pubDate: z.coerce.date(),
+    updatedDate : z.string().optional(),
+    heroImage: z.string().optional(),
+});
 const testSchema = z.object({
         nome: z.string(),
         lista: z.array(z.string()),
         data: z.string().transform(str => new Date(str)),
-    }); 
+    });
+
+export type SchemaTest = z.infer<typeof testSchema>;
+export type BlogSchema = z.infer<typeof blogSchema>;
 
 const testCollection = defineCollection( { schema : testSchema } ) ;
+const blogCollection = defineCollection( { schema : blogSchema } ) ;
 
 export const collections = {
+    'blog' : blogCollection,
     'test' : testCollection,
 }
diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
@@ -1,20 +1,10 @@
 ---
-import BaseHead from "../components/BaseHead.astro";
+import { BlogSchema } from "../content/config";
 import BaseLayout from "./BaseLayout.astro";
 
-export interface Props {
-  content: {
-    title: string;
-    description: string;
-    pubDate?: string;
-    updatedDate?: string;
-    heroImage?: string;
-  };
-}
+export interface Props extends BlogSchema {}
 
-const {
-  content: { title, description, pubDate, updatedDate, heroImage }
-} = Astro.props;
+const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 ---
 
 <BaseLayout title={title} description={description} image={heroImage}>

diff --git a/src/layouts/TestContentLayout.astro b/src/layouts/TestContentLayout.astro
@@ -1,12 +1,11 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
+import { SchemaTest } from "../content/config";
+
+interface Props extends SchemaTest {}
 
-interface Props {
-  nome: string;
-  lista: string[];
-  data: Date;
-}
 const {nome, lista, data} = Astro.props;
+
 ---
 
 <BaseLayout title={nome}>

diff --git a/src/pages/blog/[page].astro → src/pages/blog/[...page].astro b/src/pages/blog/[page].astro → src/pages/blog/[...page].astro
@@ -1,14 +1,15 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import HorizontalCard from "../../components/HorizontalCard.astro";
+import { getCollection } from "astro:content";
 
 export async function getStaticPaths({ paginate }) {
-  const posts = (await Astro.glob("./*.{md,mdx}")).sort(
-    (a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf()
-  );
+  
+  const posts = (await getCollection('blog'));
 
   return paginate(posts, { pageSize: 10 });
 }
+
 const { page } = Astro.props;
 ---
 
@@ -17,10 +18,10 @@ const { page } = Astro.props;
     <!--List the array of astronaut info-->
     {page.data.map(( post ) => (
      <HorizontalCard
-        title={post.frontmatter.title}
-        img={post.frontmatter.heroImage}
-        desc={post.frontmatter.description}
-        url={post.url}
+        title={post.data.title}
+        img={post.data.heroImage}
+        desc={post.data.description}
+        url={post.slug}
 		target="_self"
       />
 	  <div class="divider my-0"></div>

diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -0,0 +1,24 @@
+---
+import { CollectionEntry, getCollection } from 'astro:content';
+import { BlogSchema } from '../../content/config';
+import PostLayout from '../../layouts/PostLayout.astro';
+
+export async function getStaticPaths() {
+    const postEntries = await getCollection('blog');
+    return postEntries.map(entry => ( { 
+        params: { slug: entry.slug }, props: { entry },
+    } ));
+}
+
+interface Props {
+    entry: CollectionEntry<"blog">;
+}
+
+const { entry } = Astro.props;
+const post : BlogSchema = entry.data;
+const { Content } = await entry.render();
+---
+
+<PostLayout title={post.title} description={post.description} pubDate={post.pubDate} heroImage={post.heroImage} updatedDate={post.updatedDate}>
+    <Content/>
+</PostLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,11 +1,11 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
 import HorizontalCard from "../components/HorizontalCard.astro";
+import { getCollection } from "astro:content";
 
-const posts = (await Astro.glob("./blog/*.{md,mdx}")).sort(
-  (a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf()
+const posts = (await getCollection('blog')).sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
 );
-
 const last_posts = posts.slice(0, 3);
 ---
 
@@ -36,10 +36,10 @@ const last_posts = posts.slice(0, 3);
     {
       last_posts.map((post) => (
         <HorizontalCard
-          title={post.frontmatter.title}
-          img={post.frontmatter.heroImage}
-          desc={post.frontmatter.description}
-          url={post.url}
+          title={post.data.title}
+          img={post.data.heroImage}
+          desc={post.data.description}
+          url={post.slug}
           target="_self"
         />
         <div class="divider my-0"></div>