update og description for blog posts

Author: huijing

.gitignore

@@ -22,3 +22,6 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+# Local Netlify folder
+.netlify

src/content.config.ts

@@ -1,6 +1,5 @@
 import { defineCollection, z } from "astro:content";
 import { glob } from "astro/loaders";
-import { has } from "markdown-it/lib/common/utils.mjs";
 
 const blog = defineCollection({
   loader: glob({ base: "./src/content/blog", pattern: "**/*.{md,mdx}" }),

src/layouts/BlogLayout.astro

@@ -1,17 +1,28 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
 import FormattedDate from "@/components/FormattedDate.astro";
-import { slugify } from "@/utils";
+import { slugify, createExcerpt } from "@/utils";
 import "@/styles/posts.css";
 
-const { title, date, tags, noindex, og_image, external_url, hastweet, hascaniuse, hascodepen } =
-  Astro.props;
+const {
+  title,
+  date,
+  tags,
+  noindex,
+  og_image,
+  external_url,
+  hastweet,
+  hascaniuse,
+  hascodepen,
+  description,
+} = Astro.props;
 const dateObj = new Date(date);
 const canonicalURL = external_url ? external_url : new URL(Astro.url.pathname, Astro.site).href;
 ---
 
 <BaseLayout
   title={title}
+  description={description}
   ogImageUrl={og_image}
   noindex={noindex}
   ogType="article"

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

@@ -1,6 +1,7 @@
 ---
 import { type CollectionEntry, getCollection, render } from "astro:content";
 import BlogLayout from "@/layouts/BlogLayout.astro";
+import { createExcerpt } from "@/utils";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
@@ -13,8 +14,9 @@ type Props = CollectionEntry<"blog">;
 
 const post = Astro.props;
 const { Content } = await render(post);
+const ogDescription = post.data.description ? post.data.description : createExcerpt(post.body, 160);
 ---
 
-<BlogLayout {...post.data}>
+<BlogLayout {...post.data} description={ogDescription}>
   <Content />
 </BlogLayout>