radiant-docs 0.1.10 → 0.1.14

package/package.json

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

package/template/astro.config.mjs

@@ -9,6 +9,7 @@ import path from "path";
 import { getConfig, validateMdxContent } from "./src/lib/validation";
 import remarkCodeBlockComponent from "./src/lib/mdx/remark-code-block-component";
 import remarkDemoteH1 from "./src/lib/mdx/remark-demote-h1";
+import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 
@@ -266,7 +267,7 @@ export default defineConfig({
   },
   integrations: [
     mdx({
-      remarkPlugins: [remarkDemoteH1, remarkCodeBlockComponent],
+      remarkPlugins: [remarkGfm, remarkDemoteH1, remarkCodeBlockComponent],
       rehypePlugins: [
         rehypeSlug,
         [

package/template/package-lock.json

@@ -17,6 +17,8 @@
         "@fontsource/google-sans-flex": "^5.2.2",
         "@iconify-json/lucide": "^1.2.79",
         "@iconify-json/simple-icons": "^1.2.69",
+        "mdast-util-gfm": "^3.1.0",
+        "micromark-extension-gfm": "^3.0.0",
         "@readme/oas-to-snippet": "^29.3.0",
         "@resvg/resvg-js": "^2.6.2",
         "@stoplight/spectral-core": "^1.20.0",
@@ -34,6 +36,7 @@
         "prismjs": "^1.30.0",
         "rehype-autolink-headings": "^7.1.0",
         "rehype-slug": "^6.0.0",
+        "remark-gfm": "^4.0.1",
         "simple-git": "^3.30.0",
         "tailwindcss": "^4.1.17",
         "yaml": "^2.8.2",

package/template/package.json

@@ -21,6 +21,8 @@
     "@fontsource/google-sans-flex": "^5.2.2",
     "@iconify-json/lucide": "^1.2.79",
     "@iconify-json/simple-icons": "^1.2.69",
+    "mdast-util-gfm": "^3.1.0",
+    "micromark-extension-gfm": "^3.0.0",
     "@readme/oas-to-snippet": "^29.3.0",
     "@resvg/resvg-js": "^2.6.2",
     "@stoplight/spectral-core": "^1.20.0",
@@ -38,6 +40,7 @@
     "prismjs": "^1.30.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "simple-git": "^3.30.0",
     "tailwindcss": "^4.1.17",
     "yaml": "^2.8.2",

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

@@ -11,6 +11,7 @@ interface Props {
   highlightedLines?: string;
   collapsedLines?: string;
   previewVisibleLines?: number | string;
+  showAllCode?: boolean | string;
 }
 
 const {
@@ -23,8 +24,19 @@ const {
   highlightedLines = "",
   collapsedLines = "",
   previewVisibleLines = 5,
+  showAllCode = false,
 } = Astro.props as Props;
 
+function toBoolean(value: boolean | string | undefined, defaultValue = false) {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === "true") return true;
+    if (normalized === "false") return false;
+  }
+  return defaultValue;
+}
+
 function parsePositiveInteger(
   value: number | string | undefined,
   fallback: number,
@@ -43,6 +55,8 @@ function parsePositiveInteger(
 
 const visibleLines = parsePositiveInteger(previewVisibleLines, 5);
 const totalLineCount = Math.max(1, raw.split("\n").length);
+const shouldShowAllCode = toBoolean(showAllCode, false);
+const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 ---
 
 <div
@@ -56,7 +70,7 @@ const totalLineCount = Math.max(1, raw.split("\n").length);
   </div>
   <div
     class="rd-component-preview__code not-prose relative"
-    data-rd-preview-expanded="false"
+    data-rd-preview-expanded={isInitiallyExpanded ? "true" : "false"}
     style={{ "--rd-preview-visible-lines": String(visibleLines) }}
   >
     <CodeBlock
@@ -123,7 +137,14 @@ const totalLineCount = Math.max(1, raw.split("\n").length);
   }
 </style>
 
-<script is:inline define:vars={{ visibleLines, totalLineCount }}>
+<script
+  is:inline
+  define:vars={{
+    visibleLines,
+    totalLineCount,
+    shouldShowAllCode,
+  }}
+>
   (() => {
     const script = document.currentScript;
     if (!(script instanceof HTMLScriptElement)) return;
@@ -161,7 +182,7 @@ const totalLineCount = Math.max(1, raw.split("\n").length);
 
     syncExpandedHeight();
 
-    if (totalLineCount <= visibleLines) {
+    if (shouldShowAllCode || totalLineCount <= visibleLines) {
       codeWrapper.dataset.rdPreviewExpanded = "true";
       window.addEventListener("resize", syncExpandedHeight, { passive: true });
       return;

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

@@ -1,6 +1,8 @@
 import type { Root } from "mdast";
 import { fromMarkdown } from "mdast-util-from-markdown";
+import { gfmFromMarkdown } from "mdast-util-gfm";
 import { mdxFromMarkdown } from "mdast-util-mdx";
+import { gfm } from "micromark-extension-gfm";
 import { mdxjs } from "micromark-extension-mdxjs";
 import type { Plugin } from "unified";
 import { visitParents } from "unist-util-visit-parents";
@@ -24,10 +26,15 @@ type ParsedCodeMeta = {
   collapsedLines: string;
 };
 
+type MdxJsxAttributeValueExpressionNode = {
+  type: "mdxJsxAttributeValueExpression";
+  value?: string | null;
+};
+
 type MdxJsxAttributeNode = {
   type: "mdxJsxAttribute";
   name: string;
-  value: string;
+  value: string | null | MdxJsxAttributeValueExpressionNode;
 };
 
 type MdxJsxFlowElementNode = {
@@ -146,10 +153,49 @@ function createAttribute(name: string, value: string): MdxJsxAttributeNode {
   };
 }
 
+function parseBooleanAttributeValue(
+  value: MdxJsxAttributeNode["value"],
+): boolean {
+  if (value === null) return true;
+
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === "" || normalized === "true") return true;
+    if (normalized === "false") return false;
+    return false;
+  }
+
+  if (
+    value?.type === "mdxJsxAttributeValueExpression" &&
+    typeof value.value === "string"
+  ) {
+    const normalized = value.value.trim().toLowerCase();
+    if (normalized === "true") return true;
+    if (normalized === "false") return false;
+  }
+
+  return false;
+}
+
+function readBooleanAttribute(
+  attributes: MdxJsxAttributeNode[] | undefined,
+  attributeName: string,
+): boolean {
+  if (!Array.isArray(attributes)) return false;
+
+  const attribute = attributes.find(
+    (candidate) =>
+      candidate.type === "mdxJsxAttribute" && candidate.name === attributeName,
+  );
+  if (!attribute) return false;
+
+  return parseBooleanAttributeValue(attribute.value);
+}
+
 function parseComponentPreviewChildren(rawCode: string): unknown[] {
   const parsedTree = fromMarkdown(rawCode, {
-    extensions: [mdxjs()],
-    mdastExtensions: [mdxFromMarkdown()],
+    extensions: [gfm(), mdxjs()],
+    mdastExtensions: [gfmFromMarkdown(), mdxFromMarkdown()],
   }) as Root;
 
   const children = Array.isArray(parsedTree.children) ? parsedTree.children : [];
@@ -190,10 +236,7 @@ function getNearestMdxJsxFlowElementName(
   ancestors: unknown[],
 ): string | null {
   for (let index = ancestors.length - 1; index >= 0; index -= 1) {
-    const ancestor = ancestors[index] as {
-      type?: string;
-      name?: string | null;
-    };
+    const ancestor = ancestors[index] as MdxJsxFlowElementNode;
     if (ancestor?.type !== "mdxJsxFlowElement") continue;
     return typeof ancestor.name === "string" ? ancestor.name : null;
   }
@@ -201,6 +244,20 @@ function getNearestMdxJsxFlowElementName(
   return null;
 }
 
+function getNearestMdxJsxFlowElement(
+  ancestors: unknown[],
+  elementName: string,
+): MdxJsxFlowElementNode | null {
+  for (let index = ancestors.length - 1; index >= 0; index -= 1) {
+    const ancestor = ancestors[index] as MdxJsxFlowElementNode;
+    if (ancestor?.type !== "mdxJsxFlowElement") continue;
+    if (ancestor.name !== elementName) continue;
+    return ancestor;
+  }
+
+  return null;
+}
+
 function isInsideMdxJsxTextElement(ancestors: unknown[]): boolean {
   return ancestors.some((ancestor) => {
     const node = ancestor as { type?: string };
@@ -234,6 +291,9 @@ export const remarkCodeBlockComponent: Plugin<[], Root> = () => {
       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;
 
@@ -317,6 +377,13 @@ export const remarkCodeBlockComponent: Plugin<[], Root> = () => {
         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,

package/template/src/lib/validation.ts

@@ -1438,7 +1438,8 @@ function validateComponentUsage(content: string): void {
     .replace(/````[\s\S]*?````/g, "") // 4-backtick code blocks (check first, they're longer)
     .replace(/```[\s\S]*?```/g, "") // fenced code blocks
     .replace(/`[^`]+`/g, "") // inline code
-    .replace(/\{['"][^'"]*['"]\}/g, ""); // JSX string expressions like {'<Component />'}
+    // JSX string expressions like {'<Component title="Example" />'} or {"<Component />"}
+    .replace(/\{\s*(['"`])(?:\\.|(?!\1)[\s\S])*?\1\s*\}/g, "");
 
   // Find all JSX component tags (PascalCase tags)
   // Matches: <ComponentName, <ComponentName>, <ComponentName />, etc.