reallysimpledocs 1.0.0-beta.5 → 1.0.1

package/src/runtime/components/DocsLayout.astro

@@ -4,7 +4,6 @@ import ArrowLeft from "lucide-static/icons/arrow-left.svg?raw";
 import ArrowRight from "lucide-static/icons/arrow-right.svg?raw";
 import Check from "lucide-static/icons/check.svg?raw";
 import Copy from "lucide-static/icons/copy.svg?raw";
-import Menu from "lucide-static/icons/menu.svg?raw";
 import PanelLeft from "lucide-static/icons/panel-left.svg?raw";
 import Search from "lucide-static/icons/search.svg?raw";
 import ClaudeLogo from "../../icons/logos/claude.svg?raw";
@@ -62,7 +61,11 @@ const actionItems = [
 ];
 ---
 
-<BaseLayout title={page.title} description={site.description} pagePath={page.path}>
+<BaseLayout
+  title={page.title}
+  description={site.description}
+  pagePath={page.path}
+>
   <CommandDialog />
   <Sidebar menu={sidebar} />
 
@@ -86,35 +89,30 @@ const actionItems = [
         </button>
 
         <div
-          class="input-group h-8 w-full min-w-0 max-w-72 cursor-text sm:ml-auto"
+          class="input-group h-8 w-full min-w-0 max-w-72 cursor-text ml-auto"
           role="button"
           tabindex="0"
           aria-label="Search docs"
           onclick="window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal()"
           onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.rsdOpenCommandSearch ? window.rsdOpenCommandSearch() : document.getElementById('command-search')?.showModal(); }"
         >
-          <input type="text" placeholder="Search..." readonly tabindex="-1" aria-hidden="true" />
-          <span data-align="start" aria-hidden="true"><Fragment set:html={searchIcon} /></span>
-          <span data-align="end" aria-hidden="true"><kbd class="kbd">⌘K</kbd></span>
+          <input
+            type="text"
+            placeholder="Search..."
+            readonly
+            tabindex="-1"
+            aria-hidden="true"
+          />
+          <span data-align="start" aria-hidden="true"
+            ><Fragment set:html={searchIcon} /></span
+          >
+          <span data-align="end" aria-hidden="true"
+            ><kbd class="kbd">⌘K</kbd></span
+          >
         </div>
 
         <ContentHeader site={site} page={page} />
         <ThemeToggle />
-
-        <div class="sm:hidden">
-          <button
-            type="button"
-            class="btn peer group"
-            data-variant="ghost"
-            data-size="icon-sm"
-            aria-label="Toggle sidebar"
-            aria-expanded="false"
-            aria-controls="sidebar"
-            onclick="document.getElementById('sidebar')?.toggle()"
-          >
-            <Fragment set:html={Menu} />
-          </button>
-        </div>
       </div>
     </header>
 
@@ -122,9 +120,17 @@ const actionItems = [
       <article class="min-w-0 flex-1 wrap-break-word">
         <div class="mx-auto w-full max-w-2xl flex-1 space-y-10">
           <header class="space-y-2">
-            <div class="flex flex-col-reverse items-start gap-3 sm:flex-row sm:gap-x-2">
-              <h1 class="mr-auto text-3xl font-semibold tracking-tight sm:text-4xl">{page.title}</h1>
-              <div class="flex w-full items-center justify-end gap-x-2 sm:mt-1 sm:w-auto">
+            <div
+              class="flex flex-col-reverse items-start gap-3 sm:flex-row sm:gap-x-2"
+            >
+              <h1
+                class="mr-auto text-3xl font-semibold tracking-tight sm:text-4xl"
+              >
+                {page.title}
+              </h1>
+              <div
+                class="flex w-full items-center justify-end gap-x-2 sm:mt-1 sm:w-auto"
+              >
                 <div role="group" class="button-group">
                   <button
                     type="button"
@@ -143,16 +149,30 @@ const actionItems = [
                 <div role="group" class="button-group">
                   {
                     navigation.prev && (
-                      <a href={navigation.prev.path} class="btn" data-variant="secondary" data-size="icon-sm">
+                      <a
+                        href={navigation.prev.path}
+                        class="btn"
+                        data-variant="secondary"
+                        data-size="icon-sm"
+                      >
                         <span class="sr-only">{navigation.prev.title}</span>
                         <Fragment set:html={ArrowLeft} />
                       </a>
                     )
                   }
-                  {navigation.prev && navigation.next && <hr role="separator" />}
+                  {
+                    navigation.prev && navigation.next && (
+                      <hr role="separator" />
+                    )
+                  }
                   {
                     navigation.next && (
-                      <a href={navigation.next.path} class="btn" data-variant="secondary" data-size="icon-sm">
+                      <a
+                        href={navigation.next.path}
+                        class="btn"
+                        data-variant="secondary"
+                        data-size="icon-sm"
+                      >
                         <span class="sr-only">{navigation.next.title}</span>
                         <Fragment set:html={ArrowRight} />
                       </a>
@@ -168,7 +188,12 @@ const actionItems = [
           <footer class="mt-12 flex items-center">
             {
               navigation.prev && (
-                <a href={navigation.prev.path} class="btn mr-auto" data-variant="secondary" data-size="sm">
+                <a
+                  href={navigation.prev.path}
+                  class="btn mr-auto"
+                  data-variant="secondary"
+                  data-size="sm"
+                >
                   <Fragment set:html={ArrowLeft} />
                   {navigation.prev.title}
                 </a>
@@ -176,7 +201,12 @@ const actionItems = [
             }
             {
               navigation.next && (
-                <a href={navigation.next.path} class="btn ml-auto" data-variant="secondary" data-size="sm">
+                <a
+                  href={navigation.next.path}
+                  class="btn ml-auto"
+                  data-variant="secondary"
+                  data-size="sm"
+                >
                   {navigation.next.title}
                   <Fragment set:html={ArrowRight} />
                 </a>
@@ -186,15 +216,18 @@ const actionItems = [
         </div>
       </article>
       <aside class="hidden w-56 xl:block">
-        <div class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[aria-current='location']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3" data-docs-toc>
-          <h2 class="flex items-center gap-1 font-medium">
-            On this page
-          </h2>
+        <div
+          class="docs-toc sticky top-20 space-y-2 text-sm [&_a]:text-muted-foreground [&_a]:hover:text-foreground [&_a[aria-current='location']]:text-foreground [&_ol]:space-y-2 [&_ol_ol]:mt-2 [&_ol_ol]:pl-3"
+          data-docs-toc
+        >
+          <h2 class="flex items-center gap-1 font-medium">On this page</h2>
           <ol>
             {
               headings.map((heading) => (
                 <li class={heading.depth === 3 ? "pl-3" : ""}>
-                  <a href={`#${heading.id}`} data-toc-link>{heading.text}</a>
+                  <a href={`#${heading.id}`} data-toc-link>
+                    {heading.text}
+                  </a>
                 </li>
               ))
             }
@@ -212,7 +245,10 @@ const actionItems = [
       const originalIcon = icon?.outerHTML || "";
 
       try {
-        const response = await fetch(markdownUrl, { credentials: "same-origin", cache: "no-store" });
+        const response = await fetch(markdownUrl, {
+          credentials: "same-origin",
+          cache: "no-store",
+        });
         if (!response.ok) throw new Error("Failed to fetch markdown");
         const markdown = await response.text();
         await writeToClipboard(markdown);
@@ -220,11 +256,16 @@ const actionItems = [
           icon.outerHTML = checkIcon;
           window.setTimeout(() => {
             const currentIcon = button.querySelector("svg");
-            if (currentIcon && originalIcon) currentIcon.outerHTML = originalIcon;
+            if (currentIcon && originalIcon)
+              currentIcon.outerHTML = originalIcon;
           }, 1200);
         }
       } catch (_) {
-        window.open(new URL(markdownUrl, window.location.href).toString(), "_blank", "noopener");
+        window.open(
+          new URL(markdownUrl, window.location.href).toString(),
+          "_blank",
+          "noopener",
+        );
       }
     };
 
@@ -275,7 +316,8 @@ const actionItems = [
         let current = entries[0];
 
         for (const entry of entries) {
-          if (entry.heading.getBoundingClientRect().top <= marker) current = entry;
+          if (entry.heading.getBoundingClientRect().top <= marker)
+            current = entry;
           else break;
         }
 
@@ -302,7 +344,9 @@ const actionItems = [
       activeFromScroll();
       window.addEventListener("scroll", queueActiveUpdate, { passive: true });
       window.addEventListener("resize", queueActiveUpdate);
-      window.addEventListener("hashchange", () => window.setTimeout(activeFromScroll, 0));
+      window.addEventListener("hashchange", () =>
+        window.setTimeout(activeFromScroll, 0),
+      );
     }
 
     initDocsToc();

package/src/runtime/components/ThemeToggle.astro

@@ -3,7 +3,7 @@ import Moon from "lucide-static/icons/moon.svg?raw";
 import Sun from "lucide-static/icons/sun.svg?raw";
 ---
 
-<nav class="hidden items-center gap-2 sm:flex">
+<nav class="flex items-center gap-2">
   <button
     type="button"
     aria-label="Toggle dark mode"

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

@@ -1,25 +1,33 @@
 ---
 import { highlightCode } from "../../lib/highlight.js";
+import { decodeHtml } from "../../lib/html.js";
 
-const { lang = "text", title, class: className = "" } = Astro.props;
+const { lang = "text", title, code, class: className = "" } = Astro.props;
 const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
-const rawCode = decodeSlotText(slotHtml);
+const rawCode = typeof code === "string" ? code.trim() : decodeSlotText(slotHtml);
 const html = await highlightCode(rawCode, lang);
 
 function decodeSlotText(value) {
-  return String(value || "")
+  const text = String(value || "")
     .replace(/^<p>/, "")
-    .replace(/<\/p>$/, "")
-    .replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&amp;/g, "&")
-    .replace(/&quot;/g, '"')
-    .replace(/&#39;/g, "'")
-    .trim();
+    .replace(/<\/p>$/, "");
+  return decodeHtml(text).trim();
 }
 ---
 
-<div class:list={["code-block", className]} data-code-title={title || undefined}>
-  {title && <header><span>{title}</span></header>}
-  <Fragment set:html={html} />
-</div>
+{
+  title ? (
+    <div class:list={["code-frame", className]} data-code-title={title}>
+      <header>
+        <span>{title}</span>
+      </header>
+      <div class="code-block">
+        <Fragment set:html={html} />
+      </div>
+    </div>
+  ) : (
+    <div class:list={["code-block", className]}>
+      <Fragment set:html={html} />
+    </div>
+  )
+}

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);