Add markdown heading anchors to rendered content

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: ruibaby

package.json

@@ -60,6 +60,7 @@
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.1",
     "markdown-it": "^14.1.1",
+    "markdown-it-anchor": "^9.2.0",
     "mime-types": "^3.0.2",
     "ora": "^9.3.0",
     "pretty-bytes": "^7.1.0",

pnpm-lock.yaml

@@ -4,6 +4,7 @@ import { join } from "node:path";
 
 import { expect, test } from "vitest";
 
+import { renderContentByRawType } from "../../../utils/content.js";
 import {
   buildPostMarkdownFrontMatter,
   parsePostMarkdownDocument,
@@ -69,7 +70,10 @@ test("resolvePostMarkdownImportPayload derives title, slug, and rendered markdow
     expect(payload.mutationInput.slug).toBe("hello-world");
     expect(payload.mutationInput.rawType).toBe("markdown");
     expect(payload.mutationInput.content).toBe("# Hello World\n\nParagraph.");
-    expect(payload.mutationInput.renderedContent).toContain("<h1>Hello World</h1>");
+    expect(payload.mutationInput.renderedContent).toBe(
+      renderContentByRawType("# Hello World\n\nParagraph.", "markdown"),
+    );
+    expect(payload.mutationInput.renderedContent).toContain('id="hello-world"');
   } finally {
     await rm(tempDir, { recursive: true, force: true });
   }

src/commands/post/__test__/markdown.spec.ts

@@ -132,7 +132,7 @@ halo:
     expect(promptState.checkbox).not.toHaveBeenCalled();
     expect(
       createMyPost.mock.calls[0]?.[0]?.post?.metadata?.annotations?.[CONTENT_JSON_ANNOTATION],
-    ).toContain("<h1>Hello Halo</h1>");
+    ).toContain('id=\\"hello-halo\\"');
 
     const fileContent = await readFile(filePath, "utf8");
     expect(fileContent).toContain("title: Hello Halo");

src/commands/post/__test__/post-markdown-entry.spec.ts

@@ -58,14 +58,18 @@ test("withSerializedContentAnnotation preserves existing annotations", () => {
     },
     {
       raw: "# Halo",
-      content: "<h1>Halo</h1>",
+      content: renderContentByRawType("# Halo", "markdown"),
       rawType: "markdown",
     },
   );
 
   expect(metadata.annotations).toMatchObject({
     existing: "value",
-    [CONTENT_JSON_ANNOTATION]: '{"raw":"# Halo","content":"<h1>Halo</h1>","rawType":"markdown"}',
+    [CONTENT_JSON_ANNOTATION]: JSON.stringify({
+      raw: "# Halo",
+      content: renderContentByRawType("# Halo", "markdown"),
+      rawType: "markdown",
+    }),
   });
 });
 

src/commands/post/__test__/post.spec.ts

@@ -1,5 +1,6 @@
 import { afterEach, expect, test, vi } from "vitest";
 
+import { renderContentByRawType } from "../../../utils/content.js";
 import { tryRunSinglePageCommand } from "../index.js";
 
 afterEach(() => {
@@ -87,7 +88,7 @@ test("tryRunSinglePageCommand imports json as a new single page when it does not
       },
       content: {
         raw: "# About",
-        content: "<h1>About</h1>\n",
+        content: renderContentByRawType("# About", "markdown"),
         rawType: "markdown",
       },
     },
@@ -169,7 +170,7 @@ test("tryRunSinglePageCommand imports json by updating an existing single page",
       },
       content: {
         raw: "# About",
-        content: "<h1>About</h1>\n",
+        content: renderContentByRawType("# About", "markdown"),
         rawType: "markdown",
       },
     },

src/commands/single-page/__test__/single-page-json-entry.spec.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+
+import { renderContentByRawType } from "../content.js";
+
+test("renderContentByRawType adds heading anchors for markdown headings", () => {
+  const rendered = renderContentByRawType("# Hello Halo", "markdown");
+
+  expect(rendered).toContain('id="hello-halo"');
+  expect(rendered).toContain(">Hello Halo</h1>");
+});
+
+test("renderContentByRawType leaves html raw content unchanged", () => {
+  expect(renderContentByRawType("<h1>Hello Halo</h1>", "html")).toBe("<h1>Hello Halo</h1>");
+});

src/utils/__test__/content.spec.ts

@@ -1,4 +1,5 @@
 import MarkdownIt from "markdown-it";
+import MarkdownItAnchor from "markdown-it-anchor";
 
 export const DEFAULT_CONTENT_RAW_TYPE = "markdown";
 
@@ -10,6 +11,8 @@ const markdownIt = new MarkdownIt({
   typographer: true,
 });
 
+markdownIt.use(MarkdownItAnchor);
+
 export function normalizeContentRawType(rawType?: string): string {
   const normalized = rawType?.trim();
   return normalized && normalized.length > 0 ? normalized : DEFAULT_CONTENT_RAW_TYPE;