Add generated schema based off schema.org blogpost type

Author: jeremy-clearlabs

src/layouts/BlogPost.astro

@@ -27,6 +27,7 @@ const {
   tags,
   title,
   updatedDate,
+  schema,
 } = Astro.props;
 const hasUpdatedDate = updatedDate && updatedDate !== pubDate;
 const isNewsletter = tags.includes("newsletter");
@@ -51,6 +52,11 @@ const newsletterSeriesTitle = newsletterSeriesData?.title ?? "";
       srcImage={coverImage?.src}
       title={title}
     />
+    {
+      schema && (
+        <script type="application/ld+json" set:html={JSON.stringify(schema)} />
+      )
+    }
   </head>
 
   <BaseBody>

src/layouts/Writing.astro

@@ -7,6 +7,7 @@ import Footer from "../components/Footer.astro";
 import Header from "../components/Header.astro";
 import TitleHeading from "../components/TitleHeading.astro";
 import writingImage from "../images/writing.png";
+import { generateWritingListSchema } from "../utils/schemas";
 
 type Props = {
   title?: string;
@@ -60,6 +61,8 @@ const toPascalCase = (tag: string): string => {
     .join(" ");
 };
 
+const schema = posts.length > 0 ? generateWritingListSchema(posts) : null;
+
 const { title = "Writing", currentTag } = Astro.props;
 ---
 
@@ -72,6 +75,11 @@ const { title = "Writing", currentTag } = Astro.props;
       srcImage={writingImage.src}
       title={title || SITE_TITLE}
     />
+    {
+      schema && (
+        <script type="application/ld+json" set:html={JSON.stringify(schema)} />
+      )
+    }
   </head>
   <BaseBody>
     <Header />
@@ -82,9 +90,7 @@ const { title = "Writing", currentTag } = Astro.props;
           <slot />
         </div>
         <div class="col-span-12 md:block md:col-span-3">
-          <ul
-            class="flex flex-wrap gap-2 list-none m-0 p-0 print:hidden mb-4"
-          >
+          <ul class="flex flex-wrap gap-2 list-none m-0 p-0 print:hidden mb-4">
             {
               isActive("/blog") && (
                 <li class="text-green-700 dark:text-green-300  border-blue-800 dark:border-blue-500 border-solid border-b-2">

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

@@ -2,25 +2,28 @@
 import { getCollection, getEntry } from "astro:content";
 import BlogPost from "../../layouts/BlogPost.astro";
 import type { CollectionEntry } from "astro:content";
+import { generateWritingPieceSchema } from '../../utils/schemas';
+
+type Props = CollectionEntry<"writing">;
 
 export async function getStaticPaths() {
   const posts = await getCollection("writing");
-  return posts.map((post) => ({
+  return posts.map((post: Props) => ({
     params: { slug: post.slug },
     props: post,
   }));
 }
-type Props = CollectionEntry<"writing">;
 
 const post = Astro.props;
 const { Content } = await post.render();
+const schema = post ? generateWritingPieceSchema(post) : null;
 
 const blogPost = await getEntry("writing", post.slug);
 const { remarkPluginFrontmatter } = await blogPost.render();
 const { minutesRead } = remarkPluginFrontmatter ?? {};
 ---
 
-<BlogPost {...post.data} minutesRead={minutesRead}>
+<BlogPost {...post.data} minutesRead={minutesRead} schema={schema}>
   <h1>{post.data.title}</h1>
   <Content />
 </BlogPost>

src/utils/schemas.ts

@@ -0,0 +1,56 @@
+import type { CollectionEntry } from "astro:content";
+
+type WritingPiece = CollectionEntry<"writing">;
+
+export function generateWritingPieceSchema(post: WritingPiece) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    headline: post.data.title,
+    description: post.data.description,
+    author: {
+      "@type": "Person",
+      name: "Jeremy Wong",
+      url: "https://craftbyzen.com/",
+    },
+    datePublished: post.data.pubDate,
+    dateModified: post.data.updatedDate || post.data.pubDate,
+    keywords: post.data.tags?.join(", "),
+    url: `https://craftbyzen.com/blog/${post.slug}`,
+    image: post.data.heroImage || "",
+    mainEntityOfPage: {
+      "@type": "WebPage",
+      "@id": `https://craftbyzen.com/blog/${post.slug}`,
+    },
+  };
+}
+
+export function generateWritingListSchema(posts: any[]) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "CollectionPage",
+    "mainEntity": {
+      "@type": "ItemList",
+      "itemListElement": posts.map((post, index) => ({
+        "@type": "ListItem",
+        "position": index + 1,
+        "item": {
+          "@type": "BlogPosting",
+          "headline": post.data.title,
+          "description": post.data.description,
+          "author": {
+            "@type": "Person",
+            "name": "Jeremy Wong",
+            "url": "https://craftbyzen.com/"
+          },
+          "datePublished": post.data.pubDate,
+          "url": `https://craftbyzen.com/blog/${post.slug}`
+        }
+      }))
+    }
+  };
+}
+
+export default {
+  generateWritingPieceSchema,
+};