reallysimpledocs 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reallysimpledocs",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "exports": {
     ".": "./src/index.js",

package/src/astro/rehype-basecoat-tables.js

@@ -1,12 +1,14 @@
 import rehypeParse from "rehype-parse";
 import rehypeStringify from "rehype-stringify";
 import { unified } from "unified";
+import GithubSlugger from "github-slugger";
 
 const containerClass = ["table-container", "scrollbar", "my-6"];
 const tableClass = ["table"];
 
 export function rehypeBasecoatTables() {
   return (tree) => {
+    transformHeadings(tree);
     transformTables(tree);
     transformCodeBlocks(tree);
   };
@@ -41,6 +43,42 @@ function transformTables(parent) {
   }
 }
 
+function transformHeadings(parent, slugger = new GithubSlugger()) {
+  if (!Array.isArray(parent?.children)) return;
+
+  for (const child of parent.children) {
+    if (isHeading(child)) {
+      addHeadingAnchor(child, slugger);
+      continue;
+    }
+    transformHeadings(child, slugger);
+  }
+}
+
+function addHeadingAnchor(node, slugger) {
+  if (node.children?.some((child) => isElement(child, "a") && classList(child).includes("header-anchor"))) {
+    return;
+  }
+
+  node.properties ||= {};
+  const id = String(node.properties.id || "") || slugger.slug(nodeText(node));
+  if (!id) return;
+  node.properties.id = id;
+  node.properties.tabIndex ??= -1;
+  node.children = [
+    {
+      type: "element",
+      tagName: "a",
+      properties: { className: ["header-anchor"], href: `#${id}` },
+      children: node.children || [],
+    },
+  ];
+}
+
+function isHeading(node) {
+  return /^h[1-6]$/.test(node?.tagName || "");
+}
+
 function transformCodeBlocks(parent) {
   if (!Array.isArray(parent?.children)) return;
 
@@ -53,6 +91,12 @@ function transformCodeBlocks(parent) {
   }
 }
 
+function nodeText(node) {
+  if (node?.type === "text") return node.value || "";
+  if (!Array.isArray(node?.children)) return "";
+  return node.children.map(nodeText).join("");
+}
+
 function isElement(node, tagName) {
   return node?.type === "element" && node.tagName === tagName;
 }

package/src/css/custom.css

@@ -12,7 +12,7 @@
   > h4 {
     @apply sm:text-lg my-6 scroll-m-18 font-semibold tracking-tight;
 
-    a {
+    > a.header-anchor {
       @apply no-underline;
     }
   }

package/src/runtime/lib/highlight.js

@@ -3,7 +3,7 @@ import { codeToHtml } from "shiki";
 export async function highlightCode(code, lang = "text") {
   const value = String(code || "");
   const language = String(lang || "text").toLowerCase() === "mdx" ? "tsx" : String(lang || "text");
-  return codeToHtml(value, {
+  const html = await codeToHtml(value, {
     lang: language,
     themes: {
       light: "github-light",
@@ -11,4 +11,15 @@ export async function highlightCode(code, lang = "text") {
     },
     defaultColor: false,
   });
+  return addPreClass(html, "scrollbar");
+}
+
+function addPreClass(html, className) {
+  return String(html).replace(/<pre(\s[^>]*)?>/, (match, attrs = "") => {
+    const classMatch = attrs.match(/\sclass=(["'])(.*?)\1/s);
+    if (!classMatch) return `<pre class="${className}"${attrs}>`;
+    const classes = new Set(classMatch[2].split(/\s+/).filter(Boolean));
+    classes.add(className);
+    return match.replace(classMatch[0], ` class=${classMatch[1]}${[...classes].join(" ")}${classMatch[1]}`);
+  });
 }