feat: basic post structured data for SEO

src/layouts/Layout.astro

@@ -106,6 +106,8 @@ const favicons: Favicon[] = siteConfig.favicon.length > 0 ? siteConfig.favicon :
 			}
 		</script>
 
+		<slot name="head"></slot>
+
 		<link rel="stylesheet" href="https://cdn.staticfile.org/KaTeX/0.16.9/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
 
 		<link rel="alternate" type="application/rss+xml" title={profileConfig.name} href={`${Astro.site}rss.xml`}/>

src/layouts/MainGridLayout.astro

@@ -20,6 +20,7 @@ const enableBanner = siteConfig.banner.enable
 ---
 
 <Layout title={title} banner={banner} description={description}>
+<slot slot="head" name="head"></slot>
 <div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
     mx-auto gap-4 relative px-0 md:px-4"
 >

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

@@ -11,6 +11,8 @@ import License from "@components/misc/License.astro";
 import {licenseConfig} from "src/config";
 import Markdown from "@components/misc/Markdown.astro";
 import path from "path";
+import {profileConfig} from "../../config";
+import {formatDateToYYYYMMDD} from "../../utils/date-utils";
 
 export async function getStaticPaths() {
     const blogEntries = await getCollection('posts', ({ data }) => {
@@ -26,8 +28,24 @@ const { Content } = await entry.render();
 
 const { remarkPluginFrontmatter } = await entry.render();
 
+const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    "headline": entry.data.title,
+    "description": entry.data.description || entry.data.title,
+    "keywords": entry.data.tags,
+    "author": {
+        "@type": "Person",
+        "name": profileConfig.name,
+        "url": Astro.site
+    },
+    "datePublished": formatDateToYYYYMMDD(entry.data.published),
+    // TODO include cover image here
+}
+
 ---
 <MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description}>
+    <script slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
         <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
             {}

src/utils/date-utils.ts

@@ -1,7 +1,3 @@
 export function formatDateToYYYYMMDD(date: Date): string {
-  const year = date.getFullYear()
-  const month = (date.getMonth() + 1).toString().padStart(2, '0')
-  const day = date.getDate().toString().padStart(2, '0')
-
-  return `${year}-${month}-${day}`
+  return date.toISOString().substring(0, 10)
 }