radiant-docs 0.1.9 → 0.1.12

package/package.json

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

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

@@ -24,10 +24,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,6 +151,45 @@ 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()],
@@ -190,10 +234,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 +242,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 +289,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 +375,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,