From 4a03a76348f2b59072643aca15b323f2c426a9f1 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Fri, 1 Sep 2023 07:59:21 -0500
Subject: [PATCH] more opengraph metadata

---
 astro.config.ts                 |  8 +++++++-
 package-lock.json               | 22 ++++++++++++++++++++++
 package.json                    |  1 +
 src/pages/posts/[...slug].astro |  9 ++++++---
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index 52cb67a..8671440 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -6,6 +6,7 @@ import { astroImageTools } from "astro-imagetools";
 import { remarkReadingTime } from "./plugin/remark-reading-time";
 import emoji from "remark-emoji";
 import remarkMermaid from "astro-diagram/remark-mermaid";
+import remarkDescription from "astro-remark-description";
 
 // https://astro.build/config
 export default defineConfig({
@@ -13,6 +14,11 @@ export default defineConfig({
   integrations: [mdx(), sitemap(), astroImageTools],
   markdown: {
     syntaxHighlight: false,
-    remarkPlugins: [remarkReadingTime, remarkMermaid, emoji],
+    remarkPlugins: [
+      remarkReadingTime,
+      remarkMermaid,
+      emoji,
+      [remarkDescription, { name: "excerpt" }],
+    ],
   },
 });
diff --git a/package-lock.json b/package-lock.json
index 573a4ae..980cfac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "astro": "^3.0.3",
         "astro-diagram": "^0.7.0",
         "astro-imagetools": "^0.9.0",
+        "astro-remark-description": "^1.0.1",
         "fork-awesome": "^1.2.0",
         "lodash-es": "^4.17.21",
         "mdast-util-to-string": "^4.0.0",
@@ -1870,6 +1871,27 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/astro-remark-description": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/astro-remark-description/-/astro-remark-description-1.0.1.tgz",
+      "integrity": "sha512-ZbpK6pxlgMNfxeTaDgM081WW8toKn5G/j94TgYr8B6RwaCR8Os31Gp7ahdsLhXbXqhXcUi65Ehz8x2O83h8apw==",
+      "dependencies": {
+        "mdast-util-to-string": "^3.1.0",
+        "unist-util-visit": "^4.1.1"
+      }
+    },
+    "node_modules/astro-remark-description/node_modules/mdast-util-to-string": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
+      "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/b4a": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
diff --git a/package.json b/package.json
index cb1aaff..22baf37 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "astro": "^3.0.3",
     "astro-diagram": "^0.7.0",
     "astro-imagetools": "^0.9.0",
+    "astro-remark-description": "^1.0.1",
     "fork-awesome": "^1.2.0",
     "lodash-es": "^4.17.21",
     "mdast-util-to-string": "^4.0.0",
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 4cdec51..187faa1 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -31,12 +31,15 @@ const datestamp = post.data.date.toLocaleDateString(undefined, {
 ---
 
 <BaseLayout>
-  <!-- <meta slot="head" name="description" content="{{ .Summary }}" /> -->
   <meta slot="head" property="og:title" content={post.data.title} />
-  <!-- <meta slot="head" property="og:url" content="{{ .Permalink }}" /> -->
-  <!-- <meta slot="head" property="og:description" content="{{ .Summary }}" /> -->
+  <meta slot="head" property="og:url" content={Astro.url} />
+  <meta slot="head" property="og:description" content={remarkPluginFrontmatter.excerpt} />
   <meta slot="head" property="og:type" content="article" />
+  <meta slot="head" property="og:locale" content="en_US" />
   {heroImage && <meta slot="head" property="og:image" content={heroImage.src} />}
+  {heroAlt && <meta slot="head" property="og:image:alt" content={heroAlt} />}
+
+  <meta slot="head" property="description" content={remarkPluginFrontmatter.excerpt} />
   <meta slot="head" property="article:published_time" content={datestamp} />
 
   <div class="post-container">