reallysimpledocs 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reallysimpledocs",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "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/components/mdx/Callout.astro

@@ -2,9 +2,11 @@
 import * as lucideIcons from "lucide-static";
 import { addSvgClass } from "../../lib/html.js";
 
-const { type, title = "Note", icon: iconName, class: className = "" } = Astro.props;
+const { type, title = "Note", icon: iconName, action, class: className = "" } = Astro.props;
 const normalizedType = String(type || "").toLowerCase();
 const calloutType = normalizedType === "warning" || normalizedType === "destructive" ? normalizedType : "";
+const actionLabel = typeof action?.label === "string" ? action.label.trim() : "";
+const actionHref = typeof action?.href === "string" ? action.href.trim() : "";
 
 function resolveNamedIcon(name) {
   if (!name || typeof name !== "string") return "";
@@ -31,4 +33,13 @@ const heading = title;
   <section>
     <slot />
   </section>
+  {
+    actionLabel && actionHref && (
+      <footer>
+        <a class="btn" data-variant="outline" data-size="sm" href={actionHref}>
+          {actionLabel}
+        </a>
+      </footer>
+    )
+  }
 </div>

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]}`);
+  });
 }

package/src/runtime/lib/markdown-export.js

@@ -94,12 +94,14 @@ function serializePreview(attrs, children, context = new Map()) {
 
 function serializeCallout(attrs, children, context = new Map()) {
   const title = getStringAttr(attrs, "title") || calloutTitle(getStringAttr(attrs, "type"));
+  const action = getObjectAttr(attrs, "action");
   const body = normalizeMdxComponents(children, context)
     .trim()
     .split("\n")
     .map((line) => `> ${line}`)
     .join("\n");
-  return `\n\n> **${title}**\n${body ? `${body}\n` : ""}\n`;
+  const footer = action?.label && action?.href ? `> [${action.label}](${action.href})\n` : "";
+  return `\n\n> **${title}**\n${body ? `${body}\n` : ""}${footer}`;
 }
 
 function serializeSteps(_attrs, children, context = new Map()) {
@@ -137,6 +139,14 @@ function getExpressionAttr(attrs, name) {
   return String(attrs || "").match(new RegExp(`${name}=\\{([A-Za-z_$][\\w$]*)\\}`))?.[1] || "";
 }
 
+function getObjectAttr(attrs, name) {
+  const value = String(attrs || "").match(new RegExp(`${name}=\\{\\{([\\s\\S]*?)\\}\\}`))?.[1] || "";
+  if (!value) return null;
+  return Object.fromEntries(
+    [...value.matchAll(/([A-Za-z_$][\w$]*)\s*:\s*["']([^"']*)["']/g)].map(([, key, item]) => [key, item]),
+  );
+}
+
 function getCodeAttr(attrs, context = new Map()) {
   const direct = String(attrs || "").match(/\bcode=\{`([\s\S]*?)`\}/)?.[1] || "";
   if (direct) return direct.replace(/\\n/g, "\n").replace(/\\`/g, "`");