wip: more improved anchor links

src/utils/parseSpecContent.ts

@@ -6,6 +6,8 @@ import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
+import { getIconData, iconToSVG, iconToHTML } from "@iconify/utils";
+import heroicons from "@iconify-json/heroicons/icons.json";
 import type {
   Root,
   RootContent,
@@ -61,6 +63,23 @@ function slugify(text: string): string {
     .trim();
 }
 
+/**
+ * Generate link icon SVG from heroicons icon set
+ */
+function generateLinkIconSvg(): string {
+  const iconData = getIconData(heroicons, "link");
+  if (!iconData) {
+    return "";
+  }
+  const result = iconToSVG(iconData);
+  return iconToHTML(result.body, {
+    ...result.attributes,
+    class: "clause-link-icon",
+    stroke: "currentColor",
+    "stroke-width": "2",
+  });
+}
+
 type MdastNode = Root | RootContent;
 
 /**
@@ -229,10 +248,11 @@ function addClauseAnchors(list: List, prefix: string = ""): void {
     // Find the first paragraph in the item and prepend an anchor link
     for (const child of item.children) {
       if (child.type === "paragraph") {
-        // Create anchor link HTML with clause number text
+        // Create anchor link HTML with clause number text and link icon
+        const linkIcon = generateLinkIconSvg();
         const anchorHtml: Html = {
           type: "html",
-          value: `<a href="#${clauseId}" class="clause-link" aria-hidden="true">${clauseNum}.</a>`,
+          value: `<a href="#${clauseId}" class="clause-link" aria-hidden="true">${linkIcon}${clauseNum}.</a>`,
         };
         // Prepend anchor to paragraph children
         (child as { children: RootContent[] }).children.unshift(