feat: use rehype-infer-description-meta to get excerpt

showcase.json

@@ -56,5 +56,6 @@
   "henryq",
   "duoyu",
   "candinya",
-  "shang"
+  "shang",
+  "v1984"
 ]

src/components/site/SiteHome.tsx

@@ -81,7 +81,7 @@ export const SiteHome: React.FC<{
                       </span>
                     </div>
                     <div
-                      className="xlog-post-excerpt mt-3 text-zinc-500"
+                      className="xlog-post-excerpt mt-3 text-zinc-500 line-clamp-2"
                       style={{
                         wordBreak: "break-word",
                       }}

src/markdown/index.ts

@@ -9,7 +9,6 @@ import rehypeRaw from "rehype-raw"
 import { refractor } from "refractor"
 import rehypePrismGenerator from "rehype-prism-plus/generator"
 import { rehypeImage } from "./rehype-image"
-import { remarkExcerpt } from "./remark-excerpt"
 import { rehypeTable } from "./rehype-table"
 import { remarkCallout } from "./remark-callout"
 import { rehypeExternalLink } from "./rehyper-external-link"
@@ -30,6 +29,7 @@ import type { Root } from "hast"
 import { Mention } from "~/components/ui/Mention"
 import remarkMath from "remark-math"
 import rehypeKatex from "rehype-katex"
+import rehypeInferDescriptionMeta from "rehype-infer-description-meta"
 
 export type MarkdownEnv = {
   excerpt: string
@@ -88,7 +88,6 @@ export const renderPageContent = (
         env.toc = toc(tree, { tight: true, ordered: true })
       })
       .use(remarkGfm, {})
-      .use(remarkExcerpt, { env })
       .use(remarkCallout)
       .use(remarkDirective)
       .use(remarkDirectiveRehype)
@@ -107,6 +106,7 @@ export const renderPageContent = (
       .use(rehypeTable)
       .use(rehypeExternalLink)
       .use(rehypeWrapCode)
+      .use(rehypeInferDescriptionMeta)
       .use(rehypeSlug)
       .use(rehypeAutolinkHeadings, {
         properties: {
@@ -155,7 +155,7 @@ export const renderPageContent = (
   return {
     contentHTML,
     element: result?.result,
-    excerpt: env.excerpt,
+    excerpt: result?.data.meta.description,
     frontMatter: env.frontMatter,
     cover: env.cover,
     toc: env.toc,

src/markdown/remark-excerpt.ts

@@ -1,19 +0,0 @@
-import { Plugin } from "unified"
-import { MarkdownEnv } from "."
-import { Root } from "remark-gfm"
-import { toString as mdAstToString } from "mdast-util-to-string"
-
-export const remarkExcerpt: Plugin<Array<{ env: MarkdownEnv }>, Root> =
-  ({ env }) =>
-  (tree) => {
-    for (const node of tree.children) {
-      if (node.type === "paragraph") {
-        env.excerpt = mdAstToString(node, {
-          includeImageAlt: false,
-        }).slice(0, 140)
-        if (env.excerpt) {
-          break
-        }
-      }
-    }
-  }

tailwind.config.js

@@ -22,5 +22,5 @@ module.exports = {
     },
   },
   variants: {},
-  plugins: [],
+  plugins: [require("@tailwindcss/line-clamp")],
 }