Use content as description if not provided

src/layouts/Base.astro

@@ -54,7 +54,13 @@ const {
     <meta property="og:description" content={description} />
     <meta property="og:image" content={thumbnail.src} />
     <meta property="og:url" content={Astro.request.url} />
+    <meta property="og:site_name" content={SITE_TITLE} />
+
     <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:site" content="@VocaDB" />
+    <meta name="twitter:creator" content="@VocaDB" />
     <ClientRouter />
     <script is:inline>
       const setTheme = () => {

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

@@ -1,6 +1,7 @@
 ---
 import { getCollection, type CollectionEntry } from "astro:content";
 import DocPageLayout from "../../layouts/DocPageLayout.astro";
+import { getAutoDescription } from "@/utils/getAutoDescription.ts";
 
 export async function getStaticPaths() {
   const blogEntries: CollectionEntry<"docs">[] = await getCollection("docs");
@@ -13,11 +14,25 @@ export async function getStaticPaths() {
 }
 
 const { entry } = Astro.props;
+
+let description = await getAutoDescription(entry.data.description || "");
+
+if (
+  !description ||
+  entry.data.title === description ||
+  entry.data.title === entry.data.description
+) {
+  description = (await getAutoDescription(entry.body, 300)) || description;
+}
+
 const { Content, headings } = await entry.render();
 ---
 
 <DocPageLayout
-  frontmatter={entry.data}
+  frontmatter={{
+    ...entry.data,
+    description,
+  }}
   headings={headings}
   filePath={"src/content/docs/" + entry.id}
   pagePath={"docs/" + entry.slug}

src/pages/rules/[slug].astro

@@ -3,15 +3,12 @@ import RuleEmbed from "@/components/markdown/RuleEmbed.astro";
 import { FormattedField } from "@/components/markdown/RuleFormattedField";
 import { getCollection, type CollectionEntry } from "astro:content";
 import DocPageLayout from "../../layouts/DocPageLayout.astro";
-import { unified } from "unified";
-import remarkParse from "remark-parse";
-import stripMarkdown from "strip-markdown";
-import remarkStringify from "remark-stringify";
 import {
   ruleDataKeyDetailsDictionary,
   ruleDataKeyDictionary,
   type RuleFields,
 } from "@/content/config";
+import { getAutoDescription } from "@/utils/getAutoDescription.ts";
 
 export async function getStaticPaths() {
   const ruleEntries: CollectionEntry<"rules">[] = await getCollection("rules");
@@ -34,28 +31,18 @@ const { headings } = await entry.render();
 
 headings.push({ depth: 2, slug: "metadata", text: "Metadata" });
 
-async function stripText(markdownInput: string) {
-  const file = await unified()
-    .use(remarkParse)
-    .use(stripMarkdown)
-    .use(remarkStringify)
-    .process(markdownInput);
-
-  return String(file);
-}
-
 let content;
 if (entry.data.excerpt) {
   content = await entry.render();
 }
-const description = await stripText(entry.data.excerpt || entry.body);
+const description = await getAutoDescription(entry.data.excerpt || entry.body);
 ---
 
 <DocPageLayout
   frontmatter={{
     ...entry.data,
     title: `Rule: ${entry.data.name}`,
-    description: description,
+    description,
   }}
   headings={headings}
   filePath={"src/content/rules/" + entry.id}

src/utils/getAutoDescription.ts

@@ -0,0 +1,65 @@
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkMdx from "remark-mdx";
+import stripMarkdown from "strip-markdown";
+import remarkStringify from "remark-stringify";
+import { visit } from "unist-util-visit";
+
+function removeMdx() {
+  return (tree: any) => {
+    tree.children = tree.children.filter(
+      (node: any) => node.type !== "mdxjsEsm",
+    );
+
+    visit(
+      tree,
+      ["mdxJsxFlowElement", "mdxJsxTextElement"],
+      (node, index, parent) => {
+        const children = node.children || [];
+
+        if (parent && index !== null) {
+          parent.children.splice(index, 1, ...children);
+        }
+
+        return index;
+      },
+    );
+  };
+}
+
+function filterLeadSection() {
+  return (tree: any) => {
+    const firstHeadingIndex = tree.children.findIndex(
+      (node: any) => node.type === "heading",
+    );
+
+    if (firstHeadingIndex !== -1) {
+      tree.children = tree.children.slice(0, firstHeadingIndex);
+    }
+  };
+}
+
+export async function getAutoDescription(
+  markdownInput: string,
+  limit: number = 0,
+) {
+  const file = await unified()
+    .use(remarkParse)
+    .use(remarkMdx)
+    .use(removeMdx)
+    .use(filterLeadSection)
+    .use(stripMarkdown)
+    .use(remarkStringify)
+    .process(markdownInput);
+
+  let text = String(file).trim();
+
+  if (limit && text.length > limit) {
+    const truncated = text.slice(0, limit);
+    const lastSpace = truncated.lastIndexOf(" ");
+
+    text = (lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated) + "...";
+  }
+
+  return text;
+}