reallysimpledocs 1.0.0-beta.4 → 1.0.0-beta.5

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

@@ -2,6 +2,6 @@
 const { class: className = "" } = Astro.props;
 ---
 
-<div class:list={["my-6 grid w-full gap-4 sm:grid-cols-2 [&>*]:my-0", className]}>
+<div class:list={["grid w-full gap-4 sm:grid-cols-2", className]}>
   <slot />
 </div>

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

@@ -5,10 +5,6 @@ const { lang = "text", title, class: className = "" } = Astro.props;
 const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
 const rawCode = decodeSlotText(slotHtml);
 const html = await highlightCode(rawCode, lang);
-const classes = [
-  "relative my-6 w-full max-w-full overflow-hidden rounded-lg",
-  className,
-];
 
 function decodeSlotText(value) {
   return String(value || "")
@@ -23,17 +19,7 @@ function decodeSlotText(value) {
 }
 ---
 
-<div
-  data-code-block
-  data-code-title={title || undefined}
-  class:list={classes}
->
-  {
-    title && (
-      <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
-        <span class="mr-auto">{title}</span>
-      </header>
-    )
-  }
+<div class:list={["code-block", className]} data-code-title={title || undefined}>
+  {title && <header><span>{title}</span></header>}
   <Fragment set:html={html} />
 </div>

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

@@ -1,18 +1,14 @@
 ---
-const { defaultTab, class: className = "" } = Astro.props;
+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") : "";
 const normalizedTabs = parseCodeTabs(slotHtml);
-const defaultValue = defaultTab || normalizedTabs[0]?.value;
-const classes = [
-  "relative my-6 w-full max-w-full overflow-hidden rounded-lg [&>[role=tabpanel]]:border-t-0 [&_[data-code-block]]:my-0 [&_[data-code-block]]:min-w-0 [&_[data-code-block]]:rounded-none [&_[data-code-block]>header]:hidden",
-  className,
-];
+const defaultValue = normalizedTabs[0]?.value;
 
 function parseCodeTabs(html) {
   const blocks = [];
   const pattern =
-    /<div\b(?=[^>]*\bdata-code-block\b)(?=[^>]*\bdata-code-title="([^"]*)")[^>]*>([\s\S]*?)<\/div>/g;
+    /<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();
@@ -36,10 +32,10 @@ function decodeHtml(value) {
 }
 ---
 
-<div class:list={classes} data-code-group>
-  <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
-    <div class="tabs my-0 min-w-0 max-w-full gap-0">
-      <nav class="h-full justify-start rounded-none bg-transparent p-0" role="tablist" aria-orientation="horizontal" data-variant="line">
+<div class:list={["code-group", className]}>
+  <header>
+    <div class="tabs">
+      <nav role="tablist" aria-orientation="horizontal" data-variant="line">
         {
           normalizedTabs.map((tab, index) => {
             const selected = tab.value === defaultValue;

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

@@ -4,15 +4,13 @@ import { highlightCode } from "../../lib/highlight.js";
 const { code = "", lang = "html", title = "Preview", class: className = "" } = Astro.props;
 const id = `preview-${Math.random().toString(36).slice(2)}`;
 const html = await highlightCode(code, lang);
+const previewClassName = className || "w-fit";
 ---
 
-<section
-  class="relative my-6 max-w-full overflow-visible rounded-lg border [&>[role=tabpanel]]:border-t-0 [&>[data-code-panel]_[data-code-block]]:my-0 [&>[data-code-panel]_[data-code-block]]:min-w-0 [&>[data-code-panel]_[data-code-block]]:rounded-none"
-  data-preview
->
-  <header class="flex h-10 items-center gap-2 border-b border-border/50 bg-muted/50 px-3 text-sm font-medium">
-    <div class="tabs my-0 min-w-0 max-w-full gap-0">
-      <nav class="h-full justify-start rounded-none bg-transparent p-0" role="tablist" aria-orientation="horizontal" data-variant="line">
+<section class="preview">
+  <header>
+    <div class="tabs">
+      <nav role="tablist" aria-orientation="horizontal" data-variant="line">
         <button
           type="button"
           role="tab"
@@ -43,9 +41,8 @@ const html = await highlightCode(code, lang);
     aria-labelledby={`${id}-preview-tab`}
     tabindex="-1"
     aria-selected="true"
-    class="flex min-h-64 w-full items-center justify-center p-6"
   >
-    <div class={className}>
+    <div class={previewClassName}>
       <slot />
     </div>
   </section>
@@ -58,10 +55,7 @@ const html = await highlightCode(code, lang);
     aria-selected="false"
     hidden
   >
-    <div
-      class="relative my-6 w-full max-w-full overflow-hidden rounded-lg"
-      data-code-block
-    >
+    <div class="code-block">
       <Fragment set:html={html} />
     </div>
   </section>

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

@@ -1,11 +1,7 @@
 ---
 const { class: className = "" } = Astro.props;
-const classes = [
-  "mb-12 mt-6 [counter-reset:step] md:ml-4 md:border-l md:pl-8 [&>section]:mb-10 [&>section]:[counter-increment:step] [&>section:last-child]:mb-0 [&>section>*+*]:mt-6 [&>section>*]:leading-relaxed [&>section>*:first-child]:mt-0 [&>section>*:last-child]:mb-0 [&>section>h3+*]:mt-4 [&>section>h3]:relative [&>section>h3]:scroll-m-28 [&>section>h3]:text-lg [&>section>h3]:font-medium [&>section>h3]:tracking-tight [&>section>h3]:before:mr-4 [&>section>h3]:before:inline-flex [&>section>h3]:before:size-7 [&>section>h3]:before:items-center [&>section>h3]:before:justify-center [&>section>h3]:before:rounded-full [&>section>h3]:before:bg-muted [&>section>h3]:before:text-sm [&>section>h3]:before:font-medium [&>section>h3]:before:text-muted-foreground [&>section>h3]:before:content-[counter(step)] md:[&>section>h3]:before:absolute md:[&>section>h3]:before:left-0 md:[&>section>h3]:before:top-0 md:[&>section>h3]:before:mr-0 md:[&>section>h3]:before:-translate-x-[2.875rem]",
-  className,
-];
 ---
 
-<div role="list" class:list={classes}>
+<div role="list" class:list={["steps", className]}>
   <slot />
 </div>

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

@@ -0,0 +1,6 @@
+---
+const { title } = Astro.props;
+void title;
+---
+
+<slot />

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

@@ -1,16 +1,17 @@
 ---
-const { tabs = [], defaultTab, orientation = "horizontal", variant, class: className = "" } = Astro.props;
+const { tabs = [], variant, class: className = "" } = Astro.props;
 const id = `tabs-${Math.random().toString(36).slice(2)}`;
-const normalizedTabs = tabs.map((tab, index) => ({
+const configuredTabs = typeof tabs === "string" ? JSON.parse(tabs) : tabs;
+const normalizedTabs = configuredTabs.map((tab, index) => ({
   ...tab,
   slot: tab.slot || String(index),
   value: tab.value || tab.slot || String(index),
 }));
-const defaultValue = defaultTab || normalizedTabs.find((tab) => !tab.disabled)?.value || normalizedTabs[0]?.value;
+const defaultValue = normalizedTabs[0]?.value;
 ---
 
-<div class:list={["tabs my-6", className]}>
-  <nav role="tablist" aria-orientation={orientation} data-variant={variant}>
+<div class:list={["tabs", className]}>
+  <nav role="tablist" aria-orientation="horizontal" data-variant={variant}>
     {
       normalizedTabs.map((tab, index) => {
         const selected = tab.value === defaultValue;
@@ -21,8 +22,7 @@ const defaultValue = defaultTab || normalizedTabs.find((tab) => !tab.disabled)?.
             id={`${id}-tab-${index + 1}`}
             aria-controls={`${id}-panel-${index + 1}`}
             aria-selected={selected ? "true" : "false"}
-            tabindex={selected && !tab.disabled ? "0" : "-1"}
-            disabled={tab.disabled}
+            tabindex={selected ? "0" : "-1"}
           >
             {tab.label}
           </button>

package/src/runtime/lib/docs.js

@@ -2,9 +2,9 @@ import fs from "node:fs";
 import path from "node:path";
 import { marked } from "marked";
 import GithubSlugger from "github-slugger";
+import { codeToHtml } from "shiki";
 import * as lucideIcons from "lucide-static";
-import { highlightCode as renderHighlightedCode } from "./highlight.js";
-import { mdxToMarkdown } from "./markdown-export.js";
+import { normalizeDocMarkdown } from "./markdown-export.js";
 import { markdownPath, routePath } from "./paths.js";
 
 export function getManifest(config) {
@@ -83,14 +83,8 @@ export function getDocMarkdown(config, page) {
   return fs.readFileSync(filePath, "utf8");
 }
 
-export async function getMarkdownExport(config, page) {
-  const source = getDocMarkdown(config, page);
-  if (page.extension === ".mdx") return await mdxToMarkdown(source, config);
-  return `${source.trim()}\n`;
-}
-
-export async function getMarkdownBodyExport(config, page) {
-  return parseDocMarkdown(await getMarkdownExport(config, page), page.title).body.trim();
+export function getMarkdownExport(config, page) {
+  return `${getNormalizedDocMarkdown(config, page).trim()}\n`;
 }
 
 export async function renderDoc(config, page) {
@@ -124,7 +118,7 @@ export async function renderDoc(config, page) {
   };
 
   const tokens = marked.lexer(content);
-  await highlightMarkdownCode(tokens);
+  await highlightCode(tokens);
   const html = marked.parser(tokens, { renderer });
   return { page, html, headings };
 }
@@ -159,46 +153,6 @@ export function getNavigation(config, page) {
   };
 }
 
-export function getBreadcrumbs(config, page) {
-  const pages = getPages(config);
-  const bySlug = new Map(pages.map((entry) => [entry.slug, entry]));
-  const trail = [];
-
-  const walk = (items = [], ancestors = []) => {
-    for (const item of items) {
-      if (item?.type === "group") {
-        const result = walk(item.items || [], ancestors);
-        if (result) return result;
-        continue;
-      }
-
-      if (item?.type === "submenu") {
-        const result = walk(item.items || [], item.label ? [...ancestors, { label: item.label }] : ancestors);
-        if (result) return result;
-        continue;
-      }
-
-      const slug = typeof item === "string" ? item : getPageItemSlug(item);
-      if (slug !== page.slug) continue;
-      const matchedPage = bySlug.get(slug);
-      if (!matchedPage) return ancestors;
-      return [
-        ...ancestors,
-        {
-          label: item.label || matchedPage.title,
-          url: matchedPage.path,
-        },
-      ];
-    }
-    return null;
-  };
-
-  const manifest = getManifest(config);
-  const found = walk(manifest.menu || []);
-  if (found) trail.push(...found);
-  return trail;
-}
-
 export function resolveIcon(icon) {
   if (!icon || typeof icon !== "string") return "";
   const trimmed = icon.trim();
@@ -229,35 +183,28 @@ export function buildMenus(config, currentSlug) {
       icon,
       url: page.path,
       label: item.label || page.title,
+      badge: item.badge,
       current: page.slug === currentSlug,
       keywords: page.title,
-    };
-  };
-
-  const processExternalLink = (item) => {
-    if (!item?.url || !item?.label) return null;
-    const external = isExternalUrl(item.url);
-    const attrs = {
-      ...item.attrs,
-      target: external ? item.attrs?.target || "_blank" : item.attrs?.target,
-      rel: external ? item.attrs?.rel || "noopener" : item.attrs?.rel,
-    };
-    return {
-      type: "item",
-      icon: resolveIcon(item.icon),
-      url: item.url,
-      label: item.label,
-      external,
-      attrs,
-      keywords: item.label,
+      attrs: item.attrs,
     };
   };
 
   const processItem = (item) => {
     if (typeof item === "string") return processSlug(item);
+    if (item?.url && item?.label) {
+      return {
+        type: "item",
+        icon: resolveIcon(item.icon),
+        url: item.url,
+        label: item.label,
+        badge: item.badge,
+        external: /^https?:\/\//.test(item.url),
+        attrs: item.attrs,
+      };
+    }
     const slug = getPageItemSlug(item);
     if (slug) return processSlug(slug, item);
-    if (item?.url) return processExternalLink(item);
     if (item?.type === "submenu") {
       const items = (item.items || []).map(processItem).filter(Boolean);
       return {
@@ -287,37 +234,90 @@ export function buildMenus(config, currentSlug) {
       icon: item.icon,
       url: item.url,
       label: item.label,
-      external: item.external,
-      attrs: item.attrs,
       keywords: item.keywords,
+      attrs: item.attrs,
     })),
   }));
 
   return { sidebar, command };
 }
 
-export async function getLlmDocs(config) {
-  const docs = [];
-  for (const page of getPages(config)) {
-    docs.push({
-      ...page,
-      content: await getMarkdownBodyExport(config, page),
-    });
-  }
-  return docs;
+export function getLlmDocs(config) {
+  return getPages(config).map((page) => ({
+    ...page,
+    content: getNormalizedDocMarkdown(config, page, { includeTitle: false }).trim(),
+  }));
 }
 
-export async function getSearchDocs(config) {
-  const docs = [];
-  for (const page of getPages(config)) {
-    docs.push({
+export function getSearchDocs(config) {
+  const pages = getPages(config);
+  const trails = getPageTrails(config, pages);
+
+  return pages.map((page) => {
+    const markdown = getNormalizedDocMarkdown(config, page, { includeTitle: false });
+    const { prose, code } = splitFencedMarkdown(markdown);
+    const trail = trails.get(page.slug) || [page.title];
+
+    return {
       slug: page.slug,
       title: page.title,
+      breadcrumb: trail.length > 1 ? trail.join(" › ") : "",
       path: page.path,
-      body: markdownPlainText(await getMarkdownBodyExport(config, page)),
+      body: markdownPlainText(prose),
+      code: markdownPlainText(code),
+    };
+  });
+}
+
+function getPageTrails(config, pages) {
+  const manifest = getManifest(config);
+  const pagesBySlug = new Map(pages.map((page) => [page.slug, page]));
+  const trails = new Map();
+
+  const pageLabel = (item, slug) => {
+    if (typeof item === "object" && item?.label) return item.label;
+    return pagesBySlug.get(slug)?.title || fallbackLabelFromSlug(slug);
+  };
+
+  const walk = (items = [], parents = []) => {
+    items.forEach((item) => {
+      if (typeof item === "string") {
+        trails.set(item, [...parents, pageLabel(item, item)]);
+        return;
+      }
+
+      if (item?.type === "submenu") {
+        walk(item.items || [], [...parents, item.label].filter(Boolean));
+        return;
+      }
+
+      const slug = getPageItemSlug(item);
+      if (slug) trails.set(slug, [...parents, pageLabel(item, slug)]);
     });
-  }
-  return docs;
+  };
+
+  (manifest.menu || []).forEach((group) => {
+    if (group?.type === "group") walk(group.items || []);
+  });
+
+  return trails;
+}
+
+function splitFencedMarkdown(markdown) {
+  const code = [];
+  const prose = String(markdown || "").replace(/```[^\n]*\n([\s\S]*?)```/g, (_, block) => {
+    code.push(block);
+    return "\n";
+  });
+
+  return { prose, code: code.join("\n\n") };
+}
+
+function getNormalizedDocMarkdown(config, page, { includeTitle = true } = {}) {
+  const source = getDocMarkdown(config, page);
+  const parsed = parseDocMarkdown(source, page.title);
+  const body = normalizeDocMarkdown(renderNunjucksCompat(parsed.body), collectMdxExports(source));
+  return includeTitle ? `# ${parsed.title}\n\n${body}` : body;
 }
 
 function flattenSidebarItems(items = []) {
@@ -329,10 +329,6 @@ export function getPageItemSlug(item) {
   return item.slug || item.page || "";
 }
 
-function isExternalUrl(url) {
-  return /^[a-z][a-z0-9+.-]*:/i.test(String(url || ""));
-}
-
 function parseDocMarkdown(source, fallbackTitle) {
   const content = normalizeDocSource(source);
   const tokens = marked.lexer(content);
@@ -355,6 +351,15 @@ function markdownPlainText(markdown) {
   return tokensText(marked.lexer(renderNunjucksCompat(normalizeDocSource(markdown))));
 }
 
+function collectMdxExports(source) {
+  const values = new Map();
+  const pattern = /export\s+const\s+([A-Za-z_$][\w$]*)\s*=\s*`([\s\S]*?)`;/g;
+  for (const match of String(source || "").matchAll(pattern)) {
+    values.set(match[1], match[2].replace(/\\n/g, "\n").replace(/\\`/g, "`"));
+  }
+  return values;
+}
+
 function normalizeDocSource(source) {
   const withoutFrontmatter = String(source || "")
     .trimStart()
@@ -366,7 +371,7 @@ function normalizeDocSource(source) {
     .trimStart();
 }
 
-async function highlightMarkdownCode(tokens) {
+async function highlightCode(tokens) {
   for (const token of tokens) {
     if (token.type === "code") {
       const html = await highlightToken(token);
@@ -380,24 +385,33 @@ async function highlightMarkdownCode(tokens) {
     }
 
     for (const childTokens of nestedTokenLists(token)) {
-      await highlightMarkdownCode(childTokens);
+      await highlightCode(childTokens);
     }
   }
 }
 
 async function highlightToken(token) {
-  const lang = normalizeLanguage(token.lang);
   try {
-    return wrapCodeBlock(await renderHighlightedCode(token.text, lang));
+    return await codeToHtml(token.text, {
+      lang: normalizeLanguage(token.lang),
+      themes: {
+        light: "github-light",
+        dark: "github-dark",
+      },
+      defaultColor: false,
+    });
   } catch {
-    return wrapCodeBlock(await renderHighlightedCode(token.text, "text"));
+    return codeToHtml(token.text, {
+      lang: "text",
+      themes: {
+        light: "github-light",
+        dark: "github-dark",
+      },
+      defaultColor: false,
+    });
   }
 }
 
-function wrapCodeBlock(html) {
-  return `<div class="relative my-6 w-full max-w-full overflow-hidden rounded-lg" data-code-block>${html}</div>`;
-}
-
 function normalizeLanguage(lang) {
   const value = lang?.trim().split(/\s+/)[0].toLowerCase() || "text";
   if (value === "njk") return "html";
@@ -427,6 +441,7 @@ function plainText(tokens) {
 function tokensText(tokens) {
   return tokens
     .map((token) => {
+      if (token.type === "html") return htmlText(token.raw || token.text || "");
       const childTokens = [];
       if (token.tokens) childTokens.push(token.tokens);
       if (token.items) childTokens.push(...token.items.flatMap((item) => (item.tokens ? [item.tokens] : [])));
@@ -438,3 +453,16 @@ function tokensText(tokens) {
     .replace(/\s+/g, " ")
     .trim();
 }
+
+function htmlText(html) {
+  return String(html || "")
+    .replace(/<script\b[\s\S]*?<\/script>/gi, " ")
+    .replace(/<style\b[\s\S]*?<\/style>/gi, " ")
+    .replace(/<[^>]+>/g, " ")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'");
+}

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");
-  const html = await codeToHtml(value, {
+  return codeToHtml(value, {
     lang: language,
     themes: {
       light: "github-light",
@@ -11,17 +11,4 @@ export async function highlightCode(code, lang = "text") {
     },
     defaultColor: false,
   });
-  return addCodeLayoutClasses(html);
-}
-
-function addCodeLayoutClasses(html) {
-  return String(html)
-    .replace(
-      /<pre class="/,
-      '<pre class="!my-0 max-w-full overflow-x-auto !rounded-none !border-0 ',
-    )
-    .replace(
-      /<code>/,
-      '<code class="block min-w-full w-max px-4 py-3 text-[13px]">',
-    );
 }

package/src/runtime/lib/macros.js

@@ -1,8 +1,6 @@
-import ArrowUpRight from "lucide-static/icons/arrow-up-right.svg?raw";
 import Search from "lucide-static/icons/search.svg?raw";
-import { attrs, escapeHtml } from "./html.js";
-
-const externalLinkIcon = ArrowUpRight.replace('class="lucide', 'class="lucide ml-auto size-3.5 shrink-0');
+import ArrowUpRight from "lucide-static/icons/arrow-up-right.svg?raw";
+import { addSvgClass, attrs, escapeHtml } from "./html.js";
 
 export function renderSidebar({
   id = "sidebar",
@@ -61,13 +59,20 @@ export function renderSidebarContent(items = [], parentIdPrefix = "content") {
   <a${attrs({ href: item.url, "aria-current": item.current ? "page" : undefined, ...without(item.attrs, ["href", "aria-current"]) })}>
     ${item.icon || ""}
     <span>${escapeHtml(item.label)}</span>
-    ${item.external ? externalLinkIcon : ""}
+    ${renderSidebarMeta(item)}
   </a>
 </li>`;
     })
     .join("");
 }
 
+function renderSidebarMeta(item) {
+  const badge = item.badge ? `<span class="badge" data-variant="outline">${escapeHtml(item.badge)}</span>` : "";
+  const external = item.external ? addSvgClass(ArrowUpRight, "size-3 opacity-50") : "";
+  if (!badge && !external) return "";
+  return `<span class="ml-auto inline-flex items-center gap-1">${badge}${external}</span>`;
+}
+
 export function renderCommandDialog({
   id = "command-search",
   items = [],