ardo 2.7.2 → 3.0.0

package/dist/{FileTree-gHRnoz7O.d.ts → FileTree-K0YVFXhg.d.ts}

@@ -333,8 +333,8 @@ declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
 declare function Search(): react_jsx_runtime.JSX.Element;
 
 interface CodeBlockProps {
-    /** The code to display */
-    code: string;
+    /** The code to display (as prop or as children string) */
+    code?: string;
     /** Programming language for syntax highlighting */
     language?: string;
     /** Optional title shown above the code */
@@ -343,17 +343,28 @@ interface CodeBlockProps {
     lineNumbers?: boolean;
     /** Line numbers to highlight */
     highlightLines?: number[];
-    /** Optional custom content to render instead of the code */
+    /** Code as children — supports template literals with auto-outdent */
     children?: React.ReactNode;
+    /** Pre-rendered Shiki HTML (injected by ardo:codeblock-highlight plugin) */
+    __html?: string;
 }
 /**
  * Syntax-highlighted code block with copy button.
+ *
+ * Code can be provided via the `code` prop or as children:
+ * ```tsx
+ * <CodeBlock language="typescript">{`
+ *   const x = 42
+ * `}</CodeBlock>
+ * ```
+ * When children is a string, leading/trailing blank lines and common
+ * indentation are stripped automatically.
  */
-declare function CodeBlock({ code, language, title, lineNumbers, highlightLines, children, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+declare function CodeBlock({ code: codeProp, language, title, lineNumbers, highlightLines, children, __html, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
 interface CodeGroupProps {
     /** CodeBlock components to display as tabs */
     children: React.ReactNode;
-    /** Comma-separated tab labels (set by remarkContainersMdx from code block meta) */
+    /** Comma-separated tab labels */
     labels?: string;
 }
 /**

package/dist/{chunk-WSEWAHW3.js → chunk-DEHRVW7C.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-NBRHGTR2.js";
 import {
   generateApiDocs
-} from "./chunk-CYZLI4AU.js";
+} from "./chunk-PGHUPTGL.js";
 
 // src/vite/plugin.ts
 import { reactRouter } from "@react-router/dev/vite";
@@ -12,7 +12,6 @@ import mdx from "@mdx-js/rollup";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import remarkGfm from "remark-gfm";
-import remarkDirective from "remark-directive";
 import rehypeShiki from "@shikijs/rehype";
 
 // src/markdown/shiki.ts
@@ -20,23 +19,59 @@ import {
   createHighlighter
 } from "shiki";
 import { visit } from "unist-util-visit";
+var DEFAULT_THEMES = {
+  light: "github-light-default",
+  dark: "github-dark-default"
+};
+var cachedHighlighter;
+async function highlightCode(code, language, options) {
+  const themeConfig = options?.theme ?? DEFAULT_THEMES;
+  if (!cachedHighlighter) {
+    cachedHighlighter = await createShikiHighlighter({
+      theme: themeConfig,
+      lineNumbers: false,
+      anchor: false,
+      toc: { level: [2, 3] }
+    });
+  }
+  if (typeof themeConfig === "string") {
+    return cachedHighlighter.codeToHtml(code, { lang: language, theme: themeConfig });
+  }
+  return cachedHighlighter.codeToHtml(code, {
+    lang: language,
+    themes: { light: themeConfig.light, dark: themeConfig.dark },
+    defaultColor: false
+  });
+}
 async function createShikiHighlighter(config) {
   const themeConfig = config.theme;
   const themes = typeof themeConfig === "string" ? [themeConfig] : [themeConfig.light, themeConfig.dark];
   const highlighter = await createHighlighter({
     themes,
     langs: [
+      // Web fundamentals
       "javascript",
       "typescript",
       "jsx",
       "tsx",
-      "json",
       "html",
       "css",
+      "scss",
+      // Data & config formats
+      "json",
+      "jsonc",
+      "yaml",
+      "toml",
+      "xml",
+      "graphql",
+      // Markdown & docs
       "markdown",
+      "mdx",
+      // Shell & DevOps
       "bash",
       "shell",
-      "yaml",
+      "dockerfile",
+      // General purpose
       "python",
       "rust",
       "go",
@@ -236,172 +271,6 @@ function ardoLineTransformer(options = {}) {
   };
 }
 
-// src/markdown/containers.ts
-import { visit as visit2 } from "unist-util-visit";
-var containerTypes = [
-  "tip",
-  "warning",
-  "danger",
-  "info",
-  "note",
-  "details",
-  "code-group"
-];
-var defaultTitles = {
-  tip: "TIP",
-  warning: "WARNING",
-  danger: "DANGER",
-  info: "INFO",
-  note: "NOTE",
-  details: "Details",
-  "code-group": ""
-};
-function remarkContainers() {
-  return function(tree) {
-    visit2(tree, "containerDirective", (node) => {
-      const type = node.name;
-      if (!containerTypes.includes(type)) {
-        return;
-      }
-      const data = node.data || (node.data = {});
-      const titleNode = node.children[0];
-      let customTitle;
-      if (titleNode && titleNode.type === "paragraph" && titleNode.children[0]?.type === "text" && titleNode.data?.directiveLabel) {
-        customTitle = titleNode.children[0].value;
-        node.children.shift();
-      }
-      const title = customTitle || defaultTitles[type];
-      if (type === "code-group") {
-        data.hName = "div";
-        data.hProperties = {
-          className: ["ardo-code-group"]
-        };
-        const tabs = [];
-        for (const child of node.children) {
-          if (child.type === "code") {
-            const codeNode = child;
-            const meta = codeNode.meta || "";
-            const labelMatch = meta.match(/\[([^\]]+)\]/);
-            const label = labelMatch ? labelMatch[1] : codeNode.lang || "Code";
-            tabs.push({ label, content: child });
-          }
-        }
-        const tabsHtml = tabs.map(
-          (tab, i) => `<button class="ardo-code-group-tab${i === 0 ? " active" : ""}" data-index="${i}">${escapeHtml2(tab.label)}</button>`
-        ).join("");
-        node.children = [
-          {
-            type: "html",
-            value: `<div class="ardo-code-group-tabs">${tabsHtml}</div>`
-          },
-          {
-            type: "html",
-            value: '<div class="ardo-code-group-panels">'
-          },
-          ...tabs.map(
-            (tab, i) => ({
-              type: "html",
-              value: `<div class="ardo-code-group-panel${i === 0 ? " active" : ""}" data-index="${i}">`
-            })
-          ),
-          ...node.children.flatMap((child, _i) => [
-            child,
-            {
-              type: "html",
-              value: "</div>"
-            }
-          ]),
-          {
-            type: "html",
-            value: "</div>"
-          }
-        ];
-        return;
-      }
-      if (type === "details") {
-        data.hName = "details";
-        data.hProperties = {
-          className: ["ardo-details"]
-        };
-        node.children.unshift({
-          type: "html",
-          value: `<summary class="ardo-details-summary">${escapeHtml2(title)}</summary>`
-        });
-        return;
-      }
-      data.hName = "div";
-      data.hProperties = {
-        className: ["ardo-container", `ardo-container-${type}`]
-      };
-      node.children.unshift({
-        type: "html",
-        value: `<p class="ardo-container-title">${escapeHtml2(title)}</p>`
-      });
-    });
-  };
-}
-function escapeHtml2(text) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-var containerToComponent = {
-  tip: "Tip",
-  warning: "Warning",
-  danger: "Danger",
-  info: "Info",
-  note: "Note"
-};
-function remarkContainersMdx() {
-  return function(tree) {
-    visit2(tree, "containerDirective", (node, index, parent) => {
-      if (!parent || typeof index !== "number") return;
-      if (node.name === "code-group") {
-        const labels = node.children.filter((child) => child.type === "code").map((child) => {
-          const meta = child.meta || "";
-          const match = meta.match(/\[([^\]]+)\]/);
-          return match ? match[1] : child.lang || "Code";
-        });
-        const jsxNode2 = {
-          type: "mdxJsxFlowElement",
-          name: "CodeGroup",
-          attributes: [
-            {
-              type: "mdxJsxAttribute",
-              name: "labels",
-              value: labels.join(",")
-            }
-          ],
-          children: node.children
-        };
-        parent.children[index] = jsxNode2;
-        return;
-      }
-      const componentName = containerToComponent[node.name];
-      if (!componentName) return;
-      const titleNode = node.children[0];
-      let customTitle;
-      if (titleNode && titleNode.type === "paragraph" && titleNode.children[0]?.type === "text" && titleNode.data?.directiveLabel) {
-        customTitle = titleNode.children[0].value;
-        node.children.shift();
-      }
-      const attributes = [];
-      if (customTitle) {
-        attributes.push({
-          type: "mdxJsxAttribute",
-          name: "title",
-          value: customTitle
-        });
-      }
-      const jsxNode = {
-        type: "mdxJsxFlowElement",
-        name: componentName,
-        attributes,
-        children: node.children
-      };
-      parent.children[index] = jsxNode;
-    });
-  };
-}
-
 // src/vite/plugin.ts
 import fs2 from "fs/promises";
 import fsSync2 from "fs";
@@ -546,6 +415,168 @@ ${entries.join("\n")}
   };
 }
 
+// src/vite/codeblock-plugin.ts
+function outdent(text) {
+  const trimmed = text.replace(/^\n+/, "").replace(/\n\s*$/, "");
+  const lines = trimmed.split("\n");
+  const indent = lines.reduce((min, line) => {
+    if (line.trim().length === 0) return min;
+    const match = line.match(/^(\s*)/);
+    return match ? Math.min(min, match[1].length) : min;
+  }, Infinity);
+  if (indent === 0 || indent === Infinity) return trimmed;
+  return lines.map((line) => line.slice(indent)).join("\n");
+}
+function findSelfClosingCodeBlocks(source) {
+  const results = [];
+  const tag = "<CodeBlock";
+  let searchFrom = 0;
+  while (true) {
+    const start = source.indexOf(tag, searchFrom);
+    if (start === -1) break;
+    const afterTag = start + tag.length;
+    if (afterTag >= source.length || !/\s/.test(source[afterTag])) {
+      searchFrom = afterTag;
+      continue;
+    }
+    let i = afterTag;
+    let depth = 0;
+    let inSingle = false;
+    let inDouble = false;
+    let inTemplate = false;
+    let found = false;
+    while (i < source.length) {
+      const ch = source[i];
+      if ((inSingle || inDouble || inTemplate) && ch === "\\") {
+        i += 2;
+        continue;
+      }
+      if (inSingle) {
+        if (ch === "'") inSingle = false;
+        i++;
+        continue;
+      }
+      if (inDouble) {
+        if (ch === '"') inDouble = false;
+        i++;
+        continue;
+      }
+      if (inTemplate) {
+        if (ch === "`") inTemplate = false;
+        i++;
+        continue;
+      }
+      if (ch === "'") {
+        inSingle = true;
+        i++;
+        continue;
+      }
+      if (ch === '"') {
+        inDouble = true;
+        i++;
+        continue;
+      }
+      if (ch === "`") {
+        inTemplate = true;
+        i++;
+        continue;
+      }
+      if (ch === "{") {
+        depth++;
+        i++;
+        continue;
+      }
+      if (ch === "}") {
+        depth--;
+        i++;
+        continue;
+      }
+      if (depth === 0 && ch === "/" && i + 1 < source.length && source[i + 1] === ">") {
+        const fullMatch = source.substring(start, i + 2);
+        const propsStr = source.substring(afterTag, i).trim();
+        results.push({ fullMatch, propsStr, index: start });
+        found = true;
+        searchFrom = i + 2;
+        break;
+      }
+      if (depth === 0 && ch === ">") {
+        searchFrom = i + 1;
+        found = true;
+        break;
+      }
+      i++;
+    }
+    if (!found) break;
+  }
+  return results;
+}
+function ardoCodeBlockPlugin(markdownConfig) {
+  return {
+    name: "ardo:codeblock-highlight",
+    enforce: "pre",
+    async transform(code, id) {
+      if (!/\.[jt]sx$/.test(id)) return;
+      if (!code.includes("CodeBlock")) return;
+      if (id.includes("node_modules")) return;
+      let result = code;
+      let offset = 0;
+      const propMatches = findSelfClosingCodeBlocks(code);
+      for (const match of propMatches) {
+        const { fullMatch, propsStr } = match;
+        const codeMatch = propsStr.match(/\bcode="((?:[^"\\]|\\.)*)"/s) || propsStr.match(/\bcode=\{\s*"((?:[^"\\]|\\.)*)"\s*\}/s) || propsStr.match(/\bcode=\{\s*'((?:[^'\\]|\\.)*)'\s*\}/s);
+        if (!codeMatch) continue;
+        const langMatch = propsStr.match(/\blanguage="([^"]*)"/) || propsStr.match(/\blanguage=\{"([^"]*)"\}/) || propsStr.match(/\blanguage=\{'([^']*)'\}/);
+        if (!langMatch) continue;
+        if (propsStr.includes("__html")) continue;
+        const codeContent = codeMatch[1].replace(/\\n/g, "\n").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+        const language = langMatch[1];
+        try {
+          const html = await highlightCode(codeContent, language, {
+            theme: markdownConfig?.theme
+          });
+          const escapedHtml = JSON.stringify(html);
+          const newPropsStr = `__html={${escapedHtml}} ` + propsStr;
+          const newFullMatch = fullMatch.replace(propsStr, newPropsStr);
+          result = result.slice(0, match.index + offset) + newFullMatch + result.slice(match.index + offset + fullMatch.length);
+          offset += newFullMatch.length - fullMatch.length;
+        } catch {
+        }
+      }
+      const childrenRegex = /<CodeBlock\s+([^>]*?)>([\s\S]*?)<\/CodeBlock>/g;
+      offset = result.length - code.length;
+      let regexMatch;
+      while ((regexMatch = childrenRegex.exec(code)) !== null) {
+        const fullMatch = regexMatch[0];
+        const propsStr = regexMatch[1];
+        let rawChildren = regexMatch[2];
+        const langMatch = propsStr.match(/\blanguage="([^"]*)"/) || propsStr.match(/\blanguage=\{"([^"]*)"\}/) || propsStr.match(/\blanguage=\{'([^']*)'\}/);
+        if (!langMatch) continue;
+        if (propsStr.includes("__html")) continue;
+        const templateMatch = rawChildren.match(/^\s*\{`([\s\S]*)`\}\s*$/);
+        if (templateMatch) {
+          rawChildren = templateMatch[1];
+        }
+        const codeContent = outdent(rawChildren);
+        const language = langMatch[1];
+        try {
+          const html = await highlightCode(codeContent, language, {
+            theme: markdownConfig?.theme
+          });
+          const escapedHtml = JSON.stringify(html);
+          const escapedCode = JSON.stringify(codeContent);
+          const newTag = `<CodeBlock __html={${escapedHtml}} code={${escapedCode}} ${propsStr} />`;
+          result = result.slice(0, regexMatch.index + offset) + newTag + result.slice(regexMatch.index + offset + fullMatch.length);
+          offset += newTag.length - fullMatch.length;
+        } catch {
+        }
+      }
+      if (result !== code) {
+        return { code: result, map: null };
+      }
+    }
+  };
+}
+
 // src/vite/plugin.ts
 function findPackageRoot(cwd) {
   let dir = path2.resolve(cwd);
@@ -803,6 +834,7 @@ export const meta = () => [${metaEntries.join(", ")}];
     };
     plugins.unshift(typedocPlugin);
   }
+  plugins.push(ardoCodeBlockPlugin(pressConfig.markdown));
   const themeConfig = pressConfig.markdown?.theme ?? defaultMarkdownConfig.theme;
   const hasThemeObject = themeConfig && typeof themeConfig === "object" && "light" in themeConfig;
   const lineNumbers = pressConfig.markdown?.lineNumbers || false;
@@ -823,8 +855,6 @@ export const meta = () => [${metaEntries.join(", ")}];
       remarkFrontmatter,
       [remarkMdxFrontmatter, { name: "frontmatter" }],
       remarkGfm,
-      remarkDirective,
-      remarkContainersMdx,
       remarkCodeMeta
     ],
     rehypePlugins: [[rehypeShiki, shikiOptions]],
@@ -979,20 +1009,19 @@ import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm2 from "remark-gfm";
 import remarkFrontmatter2 from "remark-frontmatter";
-import remarkDirective2 from "remark-directive";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
 import matter2 from "gray-matter";
 
 // src/markdown/toc.ts
-import { visit as visit3 } from "unist-util-visit";
+import { visit as visit2 } from "unist-util-visit";
 function remarkExtractToc(options) {
   const { tocExtraction, levels } = options;
   const [minLevel, maxLevel] = levels;
   return function(tree) {
     const headings = [];
     let headingIndex = 0;
-    visit3(tree, "heading", (node) => {
+    visit2(tree, "heading", (node) => {
       if (node.depth < minLevel || node.depth > maxLevel) {
         return;
       }
@@ -1058,7 +1087,7 @@ function buildTocTree(headings, _minLevel) {
 }
 
 // src/markdown/links.ts
-import { visit as visit4 } from "unist-util-visit";
+import { visit as visit3 } from "unist-util-visit";
 function rehypeLinks(options) {
   const { basePath } = options;
   const normalizedBase = basePath === "/" ? "" : basePath.replace(/\/$/, "");
@@ -1066,7 +1095,7 @@ function rehypeLinks(options) {
     if (!normalizedBase) {
       return;
     }
-    visit4(tree, "element", (node) => {
+    visit3(tree, "element", (node) => {
       if (node.tagName === "a") {
         const href = node.properties?.href;
         if (typeof href === "string") {
@@ -1086,7 +1115,7 @@ async function transformMarkdown(content, config, options = {}) {
   const { basePath = "/", highlighter: providedHighlighter } = options;
   const tocExtraction = { toc: [] };
   const highlighter = providedHighlighter ?? await createShikiHighlighter(config);
-  const processor = unified().use(remarkParse).use(remarkFrontmatter2, ["yaml"]).use(remarkGfm2).use(remarkDirective2).use(remarkContainers).use(remarkExtractToc, { tocExtraction, levels: config.toc?.level ?? [2, 3] }).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeShikiFromHighlighter, { highlighter, config }).use(rehypeLinks, { basePath }).use(rehypeStringify, { allowDangerousHtml: true });
+  const processor = unified().use(remarkParse).use(remarkFrontmatter2, ["yaml"]).use(remarkGfm2).use(remarkExtractToc, { tocExtraction, levels: config.toc?.level ?? [2, 3] }).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeShikiFromHighlighter, { highlighter, config }).use(rehypeLinks, { basePath }).use(rehypeStringify, { allowDangerousHtml: true });
   if (config.remarkPlugins) {
     for (const plugin of config.remarkPlugins) {
       processor.use(plugin);
@@ -1285,6 +1314,7 @@ function normalizePath(p) {
 }
 
 export {
+  highlightCode,
   createShikiHighlighter,
   ardoRoutesPlugin,
   detectGitHubBasename,
@@ -1297,4 +1327,4 @@ export {
   getPageDataForRoute,
   generateSidebar2 as generateSidebar
 };
-//# sourceMappingURL=chunk-WSEWAHW3.js.map
+//# sourceMappingURL=chunk-DEHRVW7C.js.map