radiant-docs 0.1.21 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.21",
+  "version": "0.1.24",
   "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 rehypeExternalLinks from "./src/lib/mdx/rehype-external-links";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
@@ -273,6 +274,7 @@ export default defineConfig({
       remarkPlugins: [remarkGfm, remarkDemoteH1, remarkCodeBlockComponent],
       rehypePlugins: [
         rehypeSlug,
+        rehypeExternalLinks,
         [
           rehypeAutolinkHeadings,
           {

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

@@ -103,9 +103,15 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         const filename =
           itemElement.getAttribute("data-rd-tab-filename") ??
           `file-name-${index + 1}.txt`;
+        const hideTabIcon =
+          itemElement.getAttribute("data-rd-tab-hide-icon") === "true";
         const tabIconTemplate = itemElement.querySelector(
           "template[data-rd-code-group-tab-icon]",
         );
+        const hasTabIcon =
+          !hideTabIcon &&
+          !!tabIconTemplate &&
+          tabIconTemplate.innerHTML.trim().length > 0;
 
         const tabWrapper = document.createElement("div");
         tabWrapper.className = "relative z-10 text-xs font-medium";
@@ -113,25 +119,25 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
         const tabButton = document.createElement("button");
         tabButton.type = "button";
         tabButton.className =
-          "relative inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-neutral-600 transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer";
+          `relative inline-flex h-9 items-center border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-neutral-600 transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer ${hasTabIcon ? "gap-2" : ""}`;
         tabButton.setAttribute("aria-label", filename);
         tabButton.setAttribute("data-rd-code-group-tab", String(index));
 
-        const iconContainer = document.createElement("span");
-        iconContainer.className =
-          "pointer-events-none inline-flex shrink-0 items-center rounded-[4px] transition-opacity duration-150";
-
-        if (tabIconTemplate && tabIconTemplate.innerHTML.trim().length > 0) {
+        let iconContainer = null;
+        if (hasTabIcon) {
+          iconContainer = document.createElement("span");
+          iconContainer.className =
+            "pointer-events-none inline-flex shrink-0 items-center rounded-[4px] transition-opacity duration-150";
           iconContainer.innerHTML = tabIconTemplate.innerHTML;
-        } else {
-          iconContainer.classList.add("hidden");
         }
 
         const labelElement = document.createElement("span");
         labelElement.className = "whitespace-pre leading-none";
         labelElement.textContent = filename;
 
-        tabButton.appendChild(iconContainer);
+        if (iconContainer) {
+          tabButton.appendChild(iconContainer);
+        }
         tabButton.appendChild(labelElement);
         tabWrapper.appendChild(tabButton);
         tabsElement.appendChild(tabWrapper);
@@ -169,7 +175,7 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
           tabButton.classList.toggle("text-neutral-900", isActive);
           tabButton.classList.toggle("text-neutral-600", !isActive);
 
-          if (iconContainer.classList.contains("hidden")) return;
+          if (!iconContainer) return;
           iconContainer.classList.toggle("opacity-100", isActive);
           iconContainer.classList.toggle("opacity-80", !isActive);
         });

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

@@ -1,6 +1,7 @@
 ---
 import type { HTMLAttributes } from "astro/types";
 import { validateProps } from "../../lib/component-error";
+import { renderMarkdown } from "../../lib/utils";
 
 interface Props extends HTMLAttributes<"img"> {
   src: string;
@@ -8,6 +9,11 @@ interface Props extends HTMLAttributes<"img"> {
 
 const { title, ...attrs } = Astro.props;
 
+const captionHtml =
+  typeof title === "string" && title.trim().length > 0
+    ? (await renderMarkdown(title)).replace(/^<p>([\s\S]*)<\/p>\n?$/, "$1")
+    : "";
+
 validateProps(
   "Image",
   Astro.props as Record<string, any>,
@@ -96,7 +102,7 @@ validateProps(
   {
     title && (
       <figcaption class="mt-2 text-center text-sm text-neutral-500 dark:text-neutral-400 font-medium whitespace-pre-line leading-relaxed px-2">
-        {title}
+        <span set:html={captionHtml} />
       </figcaption>
     )
   }

package/template/src/lib/mdx/rehype-external-links.ts

@@ -0,0 +1,57 @@
+import type { Plugin } from "unified";
+
+type HastNode = {
+  type?: string;
+  tagName?: string;
+  properties?: Record<string, unknown>;
+  children?: HastNode[];
+};
+
+function isExternalHttpLink(href: unknown): href is string {
+  return typeof href === "string" && /^https?:\/\//i.test(href);
+}
+
+function normalizeRelTokens(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value
+      .flatMap((entry) =>
+        typeof entry === "string" ? entry.split(/\s+/) : [],
+      )
+      .filter(Boolean);
+  }
+
+  if (typeof value === "string") {
+    return value.split(/\s+/).filter(Boolean);
+  }
+
+  return [];
+}
+
+function visitNodes(node: HastNode, visitor: (node: HastNode) => void): void {
+  visitor(node);
+  if (!Array.isArray(node.children)) return;
+  for (const child of node.children) {
+    visitNodes(child, visitor);
+  }
+}
+
+export const rehypeExternalLinks: Plugin<[], HastNode> = () => {
+  return (tree) => {
+    visitNodes(tree, (node) => {
+      if (node.type !== "element" || node.tagName !== "a") return;
+
+      const props = (node.properties ??= {});
+      const href = props.href;
+      if (!isExternalHttpLink(href)) return;
+
+      props.target = "_blank";
+
+      const relTokens = normalizeRelTokens(props.rel);
+      if (!relTokens.includes("noopener")) relTokens.push("noopener");
+      if (!relTokens.includes("noreferrer")) relTokens.push("noreferrer");
+      props.rel = relTokens.join(" ");
+    });
+  };
+};
+
+export default rehypeExternalLinks;

package/template/src/lib/utils.ts

@@ -3,6 +3,7 @@ import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
+import rehypeExternalLinks from "./mdx/rehype-external-links";
 import path from "node:path";
 
 export function slugify(text: string): string {
@@ -25,6 +26,7 @@ export async function renderMarkdown(markdown: string): Promise<string> {
     .use(remarkParse)
     .use(remarkGfm) // GitHub Flavored Markdown (for lists, etc.)
     .use(remarkRehype, { allowDangerousHtml: false })
+    .use(rehypeExternalLinks)
     .use(rehypeStringify)
     .process(markdown);