radiant-docs 0.1.42 → 0.1.43

package/package.json

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

package/template/astro.config.mjs

@@ -14,6 +14,7 @@ import remarkDemoteH1 from "./src/lib/mdx/remark-demote-h1";
 import remarkResolveInternalLinks from "./src/lib/mdx/remark-resolve-internal-links";
 import remarkStandaloneImageComponent from "./src/lib/mdx/remark-standalone-image-component";
 import rehypeExternalLinks from "./src/lib/mdx/rehype-external-links";
+import rehypePrefixPreviewHeadingIds from "./src/lib/mdx/rehype-prefix-preview-heading-ids";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
@@ -344,6 +345,7 @@ export default defineConfig({
       ],
       rehypePlugins: [
         rehypeSlug,
+        rehypePrefixPreviewHeadingIds,
         rehypeExternalLinks,
         [
           rehypeAutolinkHeadings,

package/template/src/components/MdxPage.astro

@@ -19,6 +19,7 @@ import ComponentPreview from "./user/ComponentPreview.astro";
 import ComponentPreviewBlock from "./user/ComponentPreviewBlock.astro";
 import type { MdxRoute, Route } from "../lib/routes";
 import PagePagination from "./PagePagination.astro";
+import { PREVIEW_HEADING_ID_PREFIX } from "../lib/mdx/rehype-prefix-preview-heading-ids";
 
 interface Props {
   entry: any;
@@ -56,7 +57,11 @@ const description =
     ? entry.data.description.trim()
     : undefined;
 
-const tocHeadings = headings.filter(({ depth }) => depth === 2 || depth === 3);
+const tocHeadings = headings.filter(
+  ({ depth, slug }) =>
+    (depth === 2 || depth === 3) &&
+    !slug.startsWith(PREVIEW_HEADING_ID_PREFIX),
+);
 ---
 
 <Layout pageTitle={title} pageDescription={description}>

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

@@ -136,6 +136,16 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
     margin-bottom: 0.5714286em;
   }
 
+  .rd-component-preview
+    :global(.prose-rules > [data-rd-preview-heading="true"]:first-child) {
+    margin-top: 0;
+  }
+
+  .rd-component-preview
+    :global(.prose-rules > [data-rd-preview-heading="true"]:last-child) {
+    margin-bottom: 0;
+  }
+
   .rd-component-preview__code :global(.group\/prose-code) {
     margin-top: 0 !important;
     margin-bottom: 0 !important;

package/template/src/lib/mdx/rehype-prefix-preview-heading-ids.ts

@@ -0,0 +1,52 @@
+import type { Root } from "hast";
+import type { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+
+export const PREVIEW_HEADING_ID_PREFIX = "rd-preview-";
+
+type ElementNode = {
+  type: "element";
+  tagName?: string;
+  properties?: Record<string, unknown>;
+};
+
+function isHeadingTagName(tagName: string | undefined): boolean {
+  return typeof tagName === "string" && /^h[1-6]$/.test(tagName);
+}
+
+function isPreviewHeading(properties: Record<string, unknown>): boolean {
+  return (
+    properties["data-rd-preview-heading"] === "true" ||
+    properties.dataRdPreviewHeading === "true" ||
+    properties["data-rd-preview-heading"] === true ||
+    properties.dataRdPreviewHeading === true
+  );
+}
+
+function readStringId(value: unknown): string | null {
+  return typeof value === "string" && value.trim().length > 0 ? value : null;
+}
+
+const rehypePrefixPreviewHeadingIds: Plugin<[], Root> = () => {
+  return (tree) => {
+    let fallbackIndex = 0;
+
+    visit(tree, "element", (node: ElementNode) => {
+      if (!isHeadingTagName(node.tagName)) return;
+
+      const properties = node.properties ?? {};
+      if (!isPreviewHeading(properties)) return;
+
+      const currentId = readStringId(properties.id);
+      fallbackIndex += 1;
+      const baseId = currentId ?? `heading-${fallbackIndex}`;
+
+      properties.id = baseId.startsWith(PREVIEW_HEADING_ID_PREFIX)
+        ? baseId
+        : `${PREVIEW_HEADING_ID_PREFIX}${baseId}`;
+      node.properties = properties;
+    });
+  };
+};
+
+export default rehypePrefixPreviewHeadingIds;

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

@@ -61,6 +61,10 @@ type HeadingNode = {
   type: "heading";
   depth?: number;
   children?: unknown[];
+  data?: {
+    hProperties?: Record<string, unknown>;
+    [key: string]: unknown;
+  };
 };
 
 type NodeWithChildren = {
@@ -224,14 +228,16 @@ function transformPreviewNode(node: unknown): unknown {
   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)),
-      ],
+      ...headingNode,
+      depth,
+      data: {
+        ...(headingNode.data ?? {}),
+        hProperties: {
+          ...(headingNode.data?.hProperties ?? {}),
+          "data-rd-preview-heading": "true",
+          "data-rd-preview-heading-level": String(depth),
+        },
+      },
       children: transformPreviewChildren(headingNode.children),
     };
   }