radiant-docs 0.1.19 → 0.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/src/components/user/CodeBlock.astro

@@ -340,61 +340,60 @@ const renderedCodeLinesHtml = normalizedTokenLines
       </div>
     </div>
   </div>
-</div>
-
-<script is:inline>
-  (() => {
-    const script = document.currentScript;
-    if (!(script instanceof HTMLScriptElement)) return;
-
-    const root = script.previousElementSibling;
-    if (!(root instanceof HTMLElement)) return;
-
-    const copyButtons = root.querySelectorAll("[data-rd-copy-trigger='true']");
-    if (copyButtons.length === 0) return;
-
-    const setCopiedState = (button, copied) => {
-      const copyIcon = button.querySelector("[data-rd-copy-icon]");
-      const checkIcon = button.querySelector("[data-rd-copy-check]");
+  <script is:inline>
+    (() => {
+      const script = document.currentScript;
+      if (!(script instanceof HTMLScriptElement)) return;
 
-      if (!copyIcon || !checkIcon) return;
+      const root = script.closest("[data-rd-code-block-root='true']");
+      if (!(root instanceof HTMLElement)) return;
 
-      if (copied) {
-        copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
-        copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
+      const copyButtons = root.querySelectorAll("[data-rd-copy-trigger='true']");
+      if (copyButtons.length === 0) return;
 
-        checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
-        checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
-        return;
-      }
-
-      copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
-      copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
+      const setCopiedState = (button, copied) => {
+        const copyIcon = button.querySelector("[data-rd-copy-icon]");
+        const checkIcon = button.querySelector("[data-rd-copy-check]");
 
-      checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
-      checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
-    };
+        if (!copyIcon || !checkIcon) return;
 
-    copyButtons.forEach((button) => {
-      let timeoutId = null;
-      button.addEventListener("click", async () => {
-        const encodedCopyValue =
-          button.getAttribute("data-rd-copy-content") ?? "";
-        const copyValue = decodeURIComponent(encodedCopyValue);
+        if (copied) {
+          copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
+          copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
 
-        try {
-          await navigator.clipboard.writeText(copyValue);
-          setCopiedState(button, true);
+          checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
+          checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
+          return;
+        }
 
-          if (timeoutId) window.clearTimeout(timeoutId);
-          timeoutId = window.setTimeout(() => {
+        copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
+        copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
+
+        checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
+        checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
+      };
+
+      copyButtons.forEach((button) => {
+        let timeoutId = null;
+        button.addEventListener("click", async () => {
+          const encodedCopyValue =
+            button.getAttribute("data-rd-copy-content") ?? "";
+          const copyValue = decodeURIComponent(encodedCopyValue);
+
+          try {
+            await navigator.clipboard.writeText(copyValue);
+            setCopiedState(button, true);
+
+            if (timeoutId) window.clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(() => {
+              setCopiedState(button, false);
+              timeoutId = null;
+            }, 1200);
+          } catch {
             setCopiedState(button, false);
-            timeoutId = null;
-          }, 1200);
-        } catch {
-          setCopiedState(button, false);
-        }
+          }
+        });
       });
-    });
-  })();
-</script>
+    })();
+  </script>
+</div>

package/template/src/components/user/ComponentPreviewBlock.astro

@@ -134,19 +134,19 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
     margin-bottom: 0.5714286em;
   }
 
-  .rd-component-preview :global(.group\/prose-code) {
+  .rd-component-preview__code :global(.group\/prose-code) {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
   }
 
-  .rd-component-preview :global(.group\/prose-code > div) {
+  .rd-component-preview__code :global(.group\/prose-code > div) {
     background-color: var(--color-neutral-50) !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
   }
 
-  .rd-component-preview :global(.group\/prose-code pre),
-  .rd-component-preview :global(.group\/prose-code code) {
+  .rd-component-preview__code :global(.group\/prose-code pre),
+  .rd-component-preview__code :global(.group\/prose-code code) {
     background-color: var(--color-neutral-50) !important;
   }
 

package/template/src/lib/mdx/remark-code-block-component.ts

@@ -275,6 +275,8 @@ function parseComponentPreviewChildren(rawCode: string): unknown[] {
     mdastExtensions: [gfmFromMarkdown(), mdxFromMarkdown()],
   }) as Root;
 
+  transformCodeBlockNodes(parsedTree);
+
   return transformPreviewChildren(
     Array.isArray(parsedTree.children) ? parsedTree.children : [],
   );
@@ -322,135 +324,139 @@ function buildDefaultCodeGroupFileName(
   return `file-name-${codeIndexInGroup + 1}.${extension}`;
 }
 
-export const remarkCodeBlockComponent: Plugin<[], Root> = () => {
-  return (tree) => {
-    visitParents(tree, "code", (node, ancestors) => {
-      const codeNode = node as CodeNode;
-      const parent = ancestors[ancestors.length - 1] as ParentNode | undefined;
-      const siblings = parent?.children;
-      if (!siblings) return;
+function transformCodeBlockNodes(tree: Root): void {
+  visitParents(tree, "code", (node, ancestors) => {
+    const codeNode = node as CodeNode;
+    const parent = ancestors[ancestors.length - 1] as ParentNode | undefined;
+    const siblings = parent?.children;
+    if (!siblings) return;
+
+    const currentIndex = siblings.indexOf(node);
+    if (currentIndex < 0) return;
+
+    const nearestMdxFlowElementName = getNearestMdxJsxFlowElementName(
+      ancestors,
+    );
+    const isInsideCodeGroup = nearestMdxFlowElementName === "CodeGroup";
+    const isInsideComponentPreview =
+      nearestMdxFlowElementName === COMPONENT_PREVIEW_NAME;
+    const componentPreviewNode = isInsideComponentPreview
+      ? getNearestMdxJsxFlowElement(ancestors, COMPONENT_PREVIEW_NAME)
+      : null;
+    const isInsideInlineMdx = isInsideMdxJsxTextElement(ancestors);
+    if (isInsideInlineMdx) return;
+
+    const meta = readMetaString(codeNode.meta);
+    const parsedMeta = parseParsedCodeMeta(meta);
+    const language =
+      typeof codeNode.lang === "string" && codeNode.lang.trim().length > 0
+        ? codeNode.lang.trim()
+        : "plaintext";
+    const normalizedLanguage = language.trim().toLowerCase();
+    const rawCode = typeof codeNode.value === "string" ? codeNode.value : "";
+    const codeIndexInGroup = isInsideCodeGroup
+      ? siblings
+          .slice(0, currentIndex)
+          .filter(
+            (sibling) => (sibling as { type?: string }).type === "code",
+          ).length
+      : 0;
+    const fileName =
+      parsedMeta.filename.length > 0
+        ? parsedMeta.filename
+        : isInsideCodeGroup
+          ? buildDefaultCodeGroupFileName(language, codeIndexInGroup)
+          : "";
+    const showFilename = isInsideCodeGroup || fileName.length > 0;
+
+    const attributes: MdxJsxAttributeNode[] = [
+      createAttribute("language", language),
+      createAttribute("raw", rawCode),
+      createAttribute("showFilename", showFilename ? "true" : "false"),
+      createAttribute(
+        "showLineNumbers",
+        parsedMeta.showLineNumbers ? "true" : "false",
+      ),
+    ];
+
+    if (parsedMeta.hideLanguageIcon) {
+      attributes.push(createAttribute("hideLanguageIcon", "true"));
+    }
 
-      const currentIndex = siblings.indexOf(node);
-      if (currentIndex < 0) return;
+    if (showFilename) {
+      attributes.push(createAttribute("filename", fileName));
+    }
 
-      const nearestMdxFlowElementName = getNearestMdxJsxFlowElementName(
-        ancestors,
-      );
-      const isInsideCodeGroup = nearestMdxFlowElementName === "CodeGroup";
-      const isInsideComponentPreview =
-        nearestMdxFlowElementName === COMPONENT_PREVIEW_NAME;
-      const componentPreviewNode = isInsideComponentPreview
-        ? getNearestMdxJsxFlowElement(ancestors, COMPONENT_PREVIEW_NAME)
-        : null;
-      const isInsideInlineMdx = isInsideMdxJsxTextElement(ancestors);
-      if (isInsideInlineMdx) return;
-
-      const meta = readMetaString(codeNode.meta);
-      const parsedMeta = parseParsedCodeMeta(meta);
-      const language =
-        typeof codeNode.lang === "string" && codeNode.lang.trim().length > 0
-          ? codeNode.lang.trim()
-          : "plaintext";
-      const normalizedLanguage = language.trim().toLowerCase();
-      const rawCode = typeof codeNode.value === "string" ? codeNode.value : "";
-      const codeIndexInGroup = isInsideCodeGroup
-        ? siblings
-            .slice(0, currentIndex)
-            .filter(
-              (sibling) => (sibling as { type?: string }).type === "code",
-            ).length
-        : 0;
-      const fileName =
-        parsedMeta.filename.length > 0
-          ? parsedMeta.filename
-          : isInsideCodeGroup
-            ? buildDefaultCodeGroupFileName(language, codeIndexInGroup)
-            : "";
-      const showFilename = isInsideCodeGroup || fileName.length > 0;
-
-      const attributes: MdxJsxAttributeNode[] = [
-        createAttribute("language", language),
-        createAttribute("raw", rawCode),
-        createAttribute("showFilename", showFilename ? "true" : "false"),
-        createAttribute(
-          "showLineNumbers",
-          parsedMeta.showLineNumbers ? "true" : "false",
-        ),
-      ];
-
-      if (parsedMeta.hideLanguageIcon) {
-        attributes.push(createAttribute("hideLanguageIcon", "true"));
-      }
+    if (isInsideCodeGroup) {
+      attributes.push(createAttribute("inCodeGroup", "true"));
+    }
 
-      if (showFilename) {
-        attributes.push(createAttribute("filename", fileName));
-      }
+    if (parsedMeta.highlightedLines.length > 0) {
+      attributes.push(
+        createAttribute("highlightedLines", parsedMeta.highlightedLines),
+      );
+    }
 
-      if (isInsideCodeGroup) {
-        attributes.push(createAttribute("inCodeGroup", "true"));
-      }
+    if (parsedMeta.collapsedLines.length > 0) {
+      attributes.push(
+        createAttribute("collapsedLines", parsedMeta.collapsedLines),
+      );
+    }
 
-      if (parsedMeta.highlightedLines.length > 0) {
-        attributes.push(
-          createAttribute("highlightedLines", parsedMeta.highlightedLines),
+    if (isInsideComponentPreview) {
+      if (!COMPONENT_PREVIEW_LANGUAGES.has(normalizedLanguage)) {
+        throw new Error(
+          `[USER_ERROR]: <${COMPONENT_PREVIEW_NAME}>: Fenced code blocks must use jsx, tsx, or mdx language (received "${language}")`,
         );
       }
 
-      if (parsedMeta.collapsedLines.length > 0) {
-        attributes.push(
-          createAttribute("collapsedLines", parsedMeta.collapsedLines),
+      let previewChildren: unknown[] = [];
+      try {
+        previewChildren = parseComponentPreviewChildren(rawCode);
+      } catch (error) {
+        const reason =
+          error instanceof Error && error.message.trim().length > 0
+            ? ` -> ${error.message}`
+            : "";
+        throw new Error(
+          `[USER_ERROR]: <${COMPONENT_PREVIEW_NAME}>: Failed to parse fenced code block as MDX content${reason}`,
         );
       }
 
-      if (isInsideComponentPreview) {
-        if (!COMPONENT_PREVIEW_LANGUAGES.has(normalizedLanguage)) {
-          throw new Error(
-            `[USER_ERROR]: <${COMPONENT_PREVIEW_NAME}>: Fenced code blocks must use jsx, tsx, or mdx language (received "${language}")`,
-          );
-        }
-
-        let previewChildren: unknown[] = [];
-        try {
-          previewChildren = parseComponentPreviewChildren(rawCode);
-        } catch (error) {
-          const reason =
-            error instanceof Error && error.message.trim().length > 0
-              ? ` -> ${error.message}`
-              : "";
-          throw new Error(
-            `[USER_ERROR]: <${COMPONENT_PREVIEW_NAME}>: Failed to parse fenced code block as MDX content${reason}`,
-          );
-        }
-
-        const previewAttributes = attributes.filter(
-          (attribute) => attribute.name !== "inCodeGroup",
-        );
-        const showAllCode = readBooleanAttribute(
-          componentPreviewNode?.attributes,
-          "showAllCode",
-        );
-        if (showAllCode) {
-          previewAttributes.push(createAttribute("showAllCode", "true"));
-        }
-        const previewNode: MdxJsxFlowElementNode = {
-          type: "mdxJsxFlowElement",
-          name: COMPONENT_PREVIEW_BLOCK_NAME,
-          attributes: previewAttributes,
-          children: previewChildren,
-        };
-        siblings[currentIndex] = previewNode;
-        return;
+      const previewAttributes = attributes.filter(
+        (attribute) => attribute.name !== "inCodeGroup",
+      );
+      const showAllCode = readBooleanAttribute(
+        componentPreviewNode?.attributes,
+        "showAllCode",
+      );
+      if (showAllCode) {
+        previewAttributes.push(createAttribute("showAllCode", "true"));
       }
-
-      const replacementNode: MdxJsxFlowElementNode = {
+      const previewNode: MdxJsxFlowElementNode = {
         type: "mdxJsxFlowElement",
-        name: INTERNAL_CODE_BLOCK_NAME,
-        attributes,
-        children: [],
+        name: COMPONENT_PREVIEW_BLOCK_NAME,
+        attributes: previewAttributes,
+        children: previewChildren,
       };
+      siblings[currentIndex] = previewNode;
+      return;
+    }
 
-      siblings[currentIndex] = replacementNode;
-    });
+    const replacementNode: MdxJsxFlowElementNode = {
+      type: "mdxJsxFlowElement",
+      name: INTERNAL_CODE_BLOCK_NAME,
+      attributes,
+      children: [],
+    };
+
+    siblings[currentIndex] = replacementNode;
+  });
+}
+
+export const remarkCodeBlockComponent: Plugin<[], Root> = () => {
+  return (tree) => {
+    transformCodeBlockNodes(tree);
   };
 };