radiant-docs 0.1.16 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.16",
+  "version": "0.1.19",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {
@@ -10,8 +10,8 @@
     "bundle-template": "node scripts/bundle-template.js",
     "build": "tsup src/index.ts --format esm --clean && npm run bundle-template",
     "dev": "tsup src/index.ts --format esm --watch",
-    "prepublishOnly": "npm run build && npm version patch",
-    "publish": "npm publish"
+    "prepublishOnly": "npm run build",
+    "release": "npm version patch && npm publish"
   },
   "dependencies": {
     "chokidar": "^4.0.3",

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

@@ -100,6 +100,40 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
 </div>
 
 <style>
+  .rd-component-preview :global([data-rd-preview-heading="true"]) {
+    color: var(--tw-prose-headings, currentColor);
+    font-weight: 600;
+  }
+
+  .rd-component-preview :global([data-rd-preview-heading-level="2"]) {
+    font-size: 1.5em;
+    line-height: 1.3333333;
+    margin-top: 2em;
+    margin-bottom: 1em;
+  }
+
+  .rd-component-preview :global([data-rd-preview-heading-level="3"]) {
+    font-size: 1.25em;
+    line-height: 1.6;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+  }
+
+  .rd-component-preview :global([data-rd-preview-heading-level="4"]) {
+    font-size: 1em;
+    line-height: 1.5;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+  }
+
+  .rd-component-preview :global([data-rd-preview-heading-level="5"]),
+  .rd-component-preview :global([data-rd-preview-heading-level="6"]) {
+    font-size: 0.875em;
+    line-height: 1.5714286;
+    margin-top: 1.4285714em;
+    margin-bottom: 0.5714286em;
+  }
+
   .rd-component-preview :global(.group\/prose-code) {
     margin-top: 0 !important;
     margin-bottom: 0 !important;

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

@@ -56,6 +56,17 @@ type MdxJsxTextElementNode = {
   children?: unknown[];
 };
 
+type HeadingNode = {
+  type: "heading";
+  depth?: number;
+  children?: unknown[];
+};
+
+type NodeWithChildren = {
+  type?: string;
+  children?: unknown[];
+};
+
 const COMPONENT_PREVIEW_NAME = "ComponentPreview";
 const COMPONENT_PREVIEW_BLOCK_NAME = "ComponentPreviewBlock";
 const COMPONENT_PREVIEW_LANGUAGES = new Set(["jsx", "tsx", "mdx"]);
@@ -192,44 +203,81 @@ function readBooleanAttribute(
   return parseBooleanAttributeValue(attribute.value);
 }
 
-function parseComponentPreviewChildren(rawCode: string): unknown[] {
-  const parsedTree = fromMarkdown(rawCode, {
-    extensions: [gfm(), mdxjs()],
-    mdastExtensions: [gfmFromMarkdown(), mdxFromMarkdown()],
-  }) as Root;
+function normalizePreviewHeadingDepth(depth: number | undefined): number {
+  if (depth === 1) return 2;
+  if (depth === 2 || depth === 3 || depth === 4 || depth === 5 || depth === 6) {
+    return depth;
+  }
+  return 2;
+}
 
-  const children = Array.isArray(parsedTree.children) ? parsedTree.children : [];
+function transformPreviewChildren(children: unknown[] | undefined): unknown[] {
+  if (!Array.isArray(children)) return [];
+  return children.map((child) => transformPreviewNode(child));
+}
 
+function transformPreviewNode(node: unknown): unknown {
   // Promote a single inline MDX JSX node into flow-level JSX so the preview
   // renders block components (e.g. <Callout />) as expected.
-  return children.map((node) => {
-    const paragraphNode = node as ParagraphNode;
-    if (
-      paragraphNode.type !== "paragraph" ||
-      !Array.isArray(paragraphNode.children) ||
-      paragraphNode.children.length !== 1
-    ) {
-      return node;
-    }
+  const headingNode = node as HeadingNode;
+  if (headingNode.type === "heading") {
+    const depth = normalizePreviewHeadingDepth(headingNode.depth);
+    return {
+      type: "mdxJsxFlowElement",
+      name: "div",
+      attributes: [
+        createAttribute("data-rd-preview-heading", "true"),
+        createAttribute("data-rd-preview-heading-level", String(depth)),
+        createAttribute("role", "heading"),
+        createAttribute("aria-level", String(depth)),
+      ],
+      children: transformPreviewChildren(headingNode.children),
+    };
+  }
 
+  const paragraphNode = node as ParagraphNode;
+  if (
+    paragraphNode.type === "paragraph" &&
+    Array.isArray(paragraphNode.children) &&
+    paragraphNode.children.length === 1
+  ) {
     const onlyChild = paragraphNode.children[0] as MdxJsxTextElementNode;
     if (
-      onlyChild.type !== "mdxJsxTextElement" ||
-      typeof onlyChild.name !== "string" ||
-      onlyChild.name.trim().length === 0
+      onlyChild.type === "mdxJsxTextElement" &&
+      typeof onlyChild.name === "string" &&
+      onlyChild.name.trim().length > 0
     ) {
-      return node;
+      return {
+        type: "mdxJsxFlowElement",
+        name: onlyChild.name,
+        attributes: Array.isArray(onlyChild.attributes)
+          ? onlyChild.attributes
+          : [],
+        children: transformPreviewChildren(onlyChild.children),
+      };
     }
+  }
 
+  const nodeWithChildren = node as NodeWithChildren;
+  if (Array.isArray(nodeWithChildren.children)) {
     return {
-      type: "mdxJsxFlowElement",
-      name: onlyChild.name,
-      attributes: Array.isArray(onlyChild.attributes)
-        ? onlyChild.attributes
-        : [],
-      children: Array.isArray(onlyChild.children) ? onlyChild.children : [],
+      ...nodeWithChildren,
+      children: transformPreviewChildren(nodeWithChildren.children),
     };
-  });
+  }
+
+  return node;
+}
+
+function parseComponentPreviewChildren(rawCode: string): unknown[] {
+  const parsedTree = fromMarkdown(rawCode, {
+    extensions: [gfm(), mdxjs()],
+    mdastExtensions: [gfmFromMarkdown(), mdxFromMarkdown()],
+  }) as Root;
+
+  return transformPreviewChildren(
+    Array.isArray(parsedTree.children) ? parsedTree.children : [],
+  );
 }
 
 function getNearestMdxJsxFlowElementName(

package/template/src/styles/global.css

@@ -145,6 +145,15 @@
   @apply px-1 py-px bg-neutral-100/90 text-neutral-600 rounded-md font-mono font-medium border border-neutral-200/80 after:hidden before:hidden;
 }
 
+/* Keep nested blockquote content flush with the quote container edges */
+:is(.prose, .prose-rules) blockquote > :first-child {
+  margin-top: 0;
+}
+
+:is(.prose, .prose-rules) blockquote > :last-child {
+  margin-bottom: 0;
+}
+
 /* <ol> numbers */
 .prose :where(ol > li)::marker {
   @apply font-medium;