ardo 2.8.0 → 3.0.0

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

@@ -364,7 +364,7 @@ declare function CodeBlock({ code: codeProp, language, title, lineNumbers, highl
 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-YUGJQYEK.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
@@ -50,17 +49,29 @@ async function createShikiHighlighter(config) {
   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",
@@ -260,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";
@@ -582,6 +427,89 @@ function outdent(text) {
   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",
@@ -592,14 +520,12 @@ function ardoCodeBlockPlugin(markdownConfig) {
       if (id.includes("node_modules")) return;
       let result = code;
       let offset = 0;
-      const propRegex = /<CodeBlock\s+([^>]*?)\/>/g;
-      let match;
-      while ((match = propRegex.exec(code)) !== null) {
-        const fullMatch = match[0];
-        const propsStr = match[1];
-        const codeMatch = propsStr.match(/\bcode="((?:[^"\\]|\\.)*)"/s) || propsStr.match(/\bcode=\{"((?:[^"\\]|\\.)*)"\}/s);
+      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=\{"([^"]*)"\}/);
+        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, "\\");
@@ -618,11 +544,12 @@ function ardoCodeBlockPlugin(markdownConfig) {
       }
       const childrenRegex = /<CodeBlock\s+([^>]*?)>([\s\S]*?)<\/CodeBlock>/g;
       offset = result.length - code.length;
-      while ((match = childrenRegex.exec(code)) !== null) {
-        const fullMatch = match[0];
-        const propsStr = match[1];
-        let rawChildren = match[2];
-        const langMatch = propsStr.match(/\blanguage="([^"]*)"/) || propsStr.match(/\blanguage=\{"([^"]*)"\}/);
+      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*$/);
@@ -638,7 +565,7 @@ function ardoCodeBlockPlugin(markdownConfig) {
           const escapedHtml = JSON.stringify(html);
           const escapedCode = JSON.stringify(codeContent);
           const newTag = `<CodeBlock __html={${escapedHtml}} code={${escapedCode}} ${propsStr} />`;
-          result = result.slice(0, match.index + offset) + newTag + result.slice(match.index + offset + fullMatch.length);
+          result = result.slice(0, regexMatch.index + offset) + newTag + result.slice(regexMatch.index + offset + fullMatch.length);
           offset += newTag.length - fullMatch.length;
         } catch {
         }
@@ -928,8 +855,6 @@ export const meta = () => [${metaEntries.join(", ")}];
       remarkFrontmatter,
       [remarkMdxFrontmatter, { name: "frontmatter" }],
       remarkGfm,
-      remarkDirective,
-      remarkContainersMdx,
       remarkCodeMeta
     ],
     rehypePlugins: [[rehypeShiki, shikiOptions]],
@@ -1084,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;
       }
@@ -1163,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(/\/$/, "");
@@ -1171,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") {
@@ -1191,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);
@@ -1403,4 +1327,4 @@ export {
   getPageDataForRoute,
   generateSidebar2 as generateSidebar
 };
-//# sourceMappingURL=chunk-YUGJQYEK.js.map
+//# sourceMappingURL=chunk-DEHRVW7C.js.map