reallysimpledocs 1.0.0-beta.5 → 1.0.0

package/src/runtime/components/mdx/CodeGroup.astro

@@ -1,4 +1,6 @@
 ---
+import { decodeHtml } from "../../lib/html.js";
+
 const { class: className = "" } = Astro.props;
 const id = `code-group-${Math.random().toString(36).slice(2)}`;
 const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
@@ -7,32 +9,123 @@ const defaultValue = normalizedTabs[0]?.value;
 
 function parseCodeTabs(html) {
   const blocks = [];
-  const pattern =
-    /<div\b(?=[^>]*\bclass="[^"]*\bcode-block\b[^"]*")(?=[^>]*\bdata-code-title="([^"]*)")[^>]*>([\s\S]*?)<\/div>/g;
-  let match;
-  while ((match = pattern.exec(html))) {
-    const label = decodeHtml(match[1]).trim();
-    if (!label) continue;
+  for (const block of findCodeFrames(html)) {
+    const label = decodeHtml(block.title).trim();
+    const code = findCodeBlock(block.html);
+    if (!label || !code) continue;
     blocks.push({
       label,
       value: label,
-      html: match[0],
+      html: code.html,
     });
   }
   return blocks;
 }
 
-function decodeHtml(value) {
-  return String(value || "")
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&amp;/g, "&")
-    .replace(/&quot;/g, '"')
-    .replace(/&#39;/g, "'");
+function findCodeFrames(html) {
+  const blocks = [];
+  let cursor = 0;
+
+  while (cursor < html.length) {
+    const open = findNextDiv(html, cursor);
+    if (!open) break;
+    const title = attrValue(open.source, "data-code-title");
+    if (hasClass(open.source, "code-frame") && title) {
+      const close = findMatchingDivClose(html, open.end);
+      if (!close) break;
+      blocks.push({ title, html: html.slice(open.start, close.end) });
+      cursor = close.end;
+      continue;
+    }
+    cursor = open.end;
+  }
+
+  return blocks;
 }
+
+function findCodeBlock(html) {
+  let cursor = 0;
+
+  while (cursor < html.length) {
+    const open = findNextDiv(html, cursor);
+    if (!open) break;
+    if (hasClass(open.source, "code-block")) {
+      const close = findMatchingDivClose(html, open.end);
+      if (!close) return null;
+      return { html: html.slice(open.start, close.end) };
+    }
+    cursor = open.end;
+  }
+
+  return null;
+}
+
+function findMatchingDivClose(html, fromIndex) {
+  let depth = 1;
+  let cursor = fromIndex;
+
+  while (cursor < html.length) {
+    const tag = findNextDiv(html, cursor);
+    if (!tag) return null;
+    depth += tag.closing ? -1 : 1;
+    if (depth === 0) return tag;
+    cursor = tag.end;
+  }
+
+  return null;
+}
+
+function findNextDiv(html, fromIndex) {
+  let cursor = fromIndex;
+  while (cursor < html.length) {
+    const start = html.indexOf("<div", cursor);
+    const closeStart = html.indexOf("</div", cursor);
+    const isClose = closeStart !== -1 && (start === -1 || closeStart < start);
+    const tagStart = isClose ? closeStart : start;
+    if (tagStart === -1) return null;
+
+    const end = findTagEnd(html, tagStart);
+    if (end === -1) return null;
+    return {
+      start: tagStart,
+      end: end + 1,
+      closing: isClose,
+      source: html.slice(tagStart, end + 1),
+    };
+  }
+
+  return null;
+}
+
+function findTagEnd(html, start) {
+  let quote = "";
+  for (let index = start; index < html.length; index += 1) {
+    const char = html[index];
+    if (quote) {
+      if (char === quote) quote = "";
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+    if (char === ">") return index;
+  }
+  return -1;
+}
+
+function attrValue(tag, name) {
+  const pattern = new RegExp(`\\s${name}=(["'])(.*?)\\1`, "s");
+  return tag.match(pattern)?.[2] || "";
+}
+
+function hasClass(tag, name) {
+  return attrValue(tag, "class").split(/\s+/).includes(name);
+}
+
 ---
 
-<div class:list={["code-group", className]}>
+<div class:list={["tabs-frame", className]}>
   <header>
     <div class="tabs">
       <nav role="tablist" aria-orientation="horizontal" data-variant="line">
@@ -62,6 +155,7 @@ function decodeHtml(value) {
       return (
         <div
           role="tabpanel"
+          data-code-panel
           id={`${id}-panel-${index + 1}`}
           aria-labelledby={`${id}-tab-${index + 1}`}
           tabindex="-1"

package/src/runtime/components/mdx/Preview.astro

@@ -7,7 +7,7 @@ const html = await highlightCode(code, lang);
 const previewClassName = className || "w-fit";
 ---
 
-<section class="preview">
+<section class="tabs-frame">
   <header>
     <div class="tabs">
       <nav role="tablist" aria-orientation="horizontal" data-variant="line">

package/src/runtime/lib/code-meta.js

@@ -0,0 +1,8 @@
+export function parseCodeMeta(meta) {
+  const value = String(meta || "");
+  const title = value.match(/(?:^|\s)title=(?:"([^"]*)"|'([^']*)'|([^\s]+))/);
+
+  return {
+    title: title?.[1] ?? title?.[2] ?? title?.[3] ?? "",
+  };
+}

package/src/runtime/lib/docs.js

@@ -4,6 +4,9 @@ import { marked } from "marked";
 import GithubSlugger from "github-slugger";
 import { codeToHtml } from "shiki";
 import * as lucideIcons from "lucide-static";
+import { transformBasecoatTablesHtml } from "../../astro/rehype-basecoat-tables.js";
+import { parseCodeMeta } from "./code-meta.js";
+import { escapeHtml } from "./html.js";
 import { normalizeDocMarkdown } from "./markdown-export.js";
 import { markdownPath, routePath } from "./paths.js";
 
@@ -102,25 +105,10 @@ export async function renderDoc(config, page) {
     return `<h${depth} id="${id}" tabindex="-1"><a class="header-anchor" href="#${id}">${text}</a></h${depth}>`;
   };
 
-  renderer.table = (token) => {
-    const header = renderer.tablerow({
-      text: token.header.map((cell) => renderer.tablecell(cell)).join(""),
-    });
-    const body = token.rows
-      .map((row) =>
-        renderer.tablerow({
-          text: row.map((cell) => renderer.tablecell(cell)).join(""),
-        }),
-      )
-      .join("");
-    const tbody = body ? `<tbody>${body}</tbody>` : "";
-    return `<div class="relative my-6 w-full overflow-auto"><table><thead>${header}</thead>${tbody}</table></div>`;
-  };
-
   const tokens = marked.lexer(content);
   await highlightCode(tokens);
   const html = marked.parser(tokens, { renderer });
-  return { page, html, headings };
+  return { page, html: await transformBasecoatTablesHtml(html), headings };
 }
 
 export function getDocHeadings(config, page) {
@@ -374,7 +362,7 @@ function normalizeDocSource(source) {
 async function highlightCode(tokens) {
   for (const token of tokens) {
     if (token.type === "code") {
-      const html = await highlightToken(token);
+      const html = codeBlockHtml(token, await highlightToken(token));
       Object.assign(token, {
         type: "html",
         raw: html,
@@ -390,6 +378,12 @@ async function highlightCode(tokens) {
   }
 }
 
+function codeBlockHtml(token, html) {
+  const title = parseCodeMeta(token.lang).title;
+  if (!title) return html;
+  return `<div class="code-frame" data-code-title="${escapeHtml(title)}"><header><span>${escapeHtml(title)}</span></header><div class="code-block">${html}</div></div>`;
+}
+
 async function highlightToken(token) {
   try {
     return await codeToHtml(token.text, {

package/src/runtime/lib/html.js

@@ -6,6 +6,15 @@ export function escapeHtml(value) {
     .replace(/"/g, """);
 }
 
+export function decodeHtml(value) {
+  return String(value ?? "")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, "&");
+}
+
 export function attrs(values = {}) {
   return Object.entries(values)
     .filter(([, value]) => value !== undefined && value !== null && value !== false)

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

@@ -56,9 +56,29 @@ export function normalizeMdxComponents(content, context = new Map()) {
 }
 
 function replacePairedComponent(content, name, serialize) {
-  return content.replace(new RegExp(`<${name}\\b([^>]*)>([\\s\\S]*?)<\\/${name}>`, "g"), (_, attrs, children) =>
-    serialize(attrs, children),
-  );
+  let output = "";
+  let cursor = 0;
+  const source = String(content || "");
+
+  while (cursor < source.length) {
+    const open = findNextTag(source, name, cursor);
+    if (!open) {
+      output += source.slice(cursor);
+      break;
+    }
+
+    const close = findMatchingCloseTag(source, open);
+    if (!close) {
+      output += source.slice(cursor);
+      break;
+    }
+
+    output += source.slice(cursor, open.start);
+    output += serialize(open.attrs, source.slice(open.end, close.start));
+    cursor = close.end;
+  }
+
+  return output;
 }
 
 function serializeChildren(_attrs, children, context = new Map()) {
@@ -155,6 +175,94 @@ function longestBacktickRun(value) {
   return Math.max(0, ...String(value || "").matchAll(/`+/g).map((match) => match[0].length));
 }
 
+function findMatchingCloseTag(source, open) {
+  let depth = 1;
+  let cursor = open.end;
+
+  while (cursor < source.length) {
+    const tag = findNextTag(source, open.name, cursor);
+    if (!tag) return null;
+    if (tag.closing) depth -= 1;
+    else if (!tag.selfClosing) depth += 1;
+    if (depth === 0) return tag;
+    cursor = tag.end;
+  }
+
+  return null;
+}
+
+function findNextTag(source, name, fromIndex) {
+  let cursor = fromIndex;
+
+  while (cursor < source.length) {
+    const start = source.indexOf("<", cursor);
+    if (start === -1) return null;
+    const tag = readTag(source, start);
+    if (!tag) {
+      cursor = start + 1;
+      continue;
+    }
+    if (tag.name === name) return tag;
+    if (!tag.closing && !tag.selfClosing && tag.name.toLowerCase() === "script") {
+      const scriptEnd = source.toLowerCase().indexOf("</script>", tag.end);
+      cursor = scriptEnd === -1 ? source.length : scriptEnd + "</script>".length;
+      continue;
+    }
+    cursor = tag.end;
+  }
+
+  return null;
+}
+
+function readTag(source, start) {
+  let cursor = start + 1;
+  let closing = false;
+
+  if (source[cursor] === "/") {
+    closing = true;
+    cursor += 1;
+  }
+
+  const nameStart = cursor;
+  while (/[$A-Z_a-z0-9-]/.test(source[cursor] || "")) cursor += 1;
+  const name = source.slice(nameStart, cursor);
+  if (!name) return null;
+
+  let quote = "";
+  while (cursor < source.length) {
+    const char = source[cursor];
+    if (quote) {
+      if (char === "\\" && source[cursor + 1]) {
+        cursor += 2;
+        continue;
+      }
+      if (char === quote) quote = "";
+      cursor += 1;
+      continue;
+    }
+    if (char === '"' || char === "'" || char === "`") {
+      quote = char;
+      cursor += 1;
+      continue;
+    }
+    if (char === ">") {
+      const sourceTag = source.slice(start, cursor + 1);
+      const beforeEnd = sourceTag.trimEnd();
+      return {
+        start,
+        end: cursor + 1,
+        name,
+        closing,
+        selfClosing: beforeEnd.endsWith("/>"),
+        attrs: closing ? "" : sourceTag.slice(name.length + 1, -1).replace(/\/$/, ""),
+      };
+    }
+    cursor += 1;
+  }
+
+  return null;
+}
+
 function stripCommonIndent(value) {
   const lines = String(value || "").replace(/^\n+|\n+$/g, "").split("\n");
   const indents = lines.filter((line) => line.trim()).map((line) => line.match(/^[ \t]*/)[0].length);