radiant-docs 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "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 remarkStandaloneImageComponent from "./src/lib/mdx/remark-standalone-image-component";
 import rehypeExternalLinks from "./src/lib/mdx/rehype-external-links";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
@@ -271,7 +272,12 @@ export default defineConfig({
   },
   integrations: [
     mdx({
-      remarkPlugins: [remarkGfm, remarkDemoteH1, remarkCodeBlockComponent],
+      remarkPlugins: [
+        remarkGfm,
+        remarkDemoteH1,
+        remarkStandaloneImageComponent,
+        remarkCodeBlockComponent,
+      ],
       rehypePlugins: [
         rehypeSlug,
         rehypeExternalLinks,

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

@@ -5,9 +5,77 @@ import { renderMarkdown } from "../../lib/utils";
 
 interface Props extends HTMLAttributes<"img"> {
   src: string;
+  zoom?: boolean;
 }
 
-const { title, ...attrs } = Astro.props;
+const { title, zoom = true, ...attrs } = Astro.props as Props;
+const zoomEnabled = zoom !== false;
+const attrsRecord = attrs as Record<string, unknown>;
+const rawStyle = attrsRecord.style;
+const rawWidth = attrsRecord.width;
+const zoomAttrs: Record<string, unknown> = { ...attrsRecord };
+delete zoomAttrs.style;
+delete zoomAttrs.width;
+delete zoomAttrs.height;
+delete zoomAttrs.class;
+delete zoomAttrs.className;
+
+function isConstrainedWidthValue(value: unknown): boolean {
+  if (typeof value === "number") {
+    return Number.isFinite(value) && value > 0;
+  }
+
+  if (typeof value !== "string") return false;
+  const normalized = value.trim().toLowerCase();
+  if (normalized.length === 0) return false;
+
+  if (
+    normalized === "auto" ||
+    normalized === "none" ||
+    normalized === "inherit" ||
+    normalized === "initial" ||
+    normalized === "unset" ||
+    normalized === "revert" ||
+    normalized === "revert-layer"
+  ) {
+    return false;
+  }
+
+  if (normalized.endsWith("%")) {
+    const percent = Number.parseFloat(normalized);
+    if (Number.isFinite(percent) && percent >= 100) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function hasStyleWidthConstraint(styleValue: unknown): boolean {
+  if (typeof styleValue === "string") {
+    const widthMatch = styleValue.match(/(?:^|;)\s*width\s*:\s*([^;]+)/i);
+    const maxWidthMatch = styleValue.match(
+      /(?:^|;)\s*max-width\s*:\s*([^;]+)/i,
+    );
+
+    return (
+      isConstrainedWidthValue(widthMatch?.[1]) ||
+      isConstrainedWidthValue(maxWidthMatch?.[1])
+    );
+  }
+
+  if (!styleValue || typeof styleValue !== "object") return false;
+  const styleObject = styleValue as Record<string, unknown>;
+
+  return (
+    isConstrainedWidthValue(styleObject.width) ||
+    isConstrainedWidthValue(styleObject.maxWidth) ||
+    isConstrainedWidthValue(styleObject["max-width"])
+  );
+}
+
+const hasCustomImageWidth =
+  isConstrainedWidthValue(rawWidth) || hasStyleWidthConstraint(rawStyle);
 
 const captionHtml =
   typeof title === "string" && title.trim().length > 0
@@ -21,19 +89,60 @@ validateProps(
     src: { required: true, type: "string" },
     alt: { type: "string" },
     title: { type: "string" },
+    zoom: { type: "boolean" },
   },
   Astro.url.pathname,
 );
 ---
 
 <figure
-  class="p-1.5 pb-2 my-8 group border border-neutral-200/80 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-neutral-900 rounded-2xl"
+  class:list={[
+    "p-1.5 pb-1 xs:pb-1.5 group border border-neutral-200/80 dark:border-neutral-800 shadow-xs bg-neutral-50 dark:bg-neutral-900 rounded-2xl",
+    hasCustomImageWidth ? "w-fit max-w-full" : "w-full",
+  ]}
   x-data="{ 
     open: false, 
     showZoomed: false,
+    zoomMaxWidth: 1400,
+    zoomSize: '',
     style: 'visibility: hidden;',
     fullShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
     noShadow: '0 0 0 rgba(0, 0, 0, 0)',
+    computeZoomSize() {
+      const img = this.$refs.img;
+      const zoomContainer = this.$refs.zoomViewport;
+      if (!img || !zoomContainer) {
+        this.zoomSize = `width: min(92vw, ${this.zoomMaxWidth}px);`;
+        return this.zoomSize;
+      }
+
+      const renderedRect = img.getBoundingClientRect();
+      const naturalWidth =
+        Number(img.naturalWidth) || Number(renderedRect.width) || 1;
+      const naturalHeight =
+        Number(img.naturalHeight) || Number(renderedRect.height) || 1;
+      const containerRect = zoomContainer.getBoundingClientRect();
+      const containerStyles = window.getComputedStyle(zoomContainer);
+      const horizontalPadding =
+        Number.parseFloat(containerStyles.paddingLeft || '0') +
+        Number.parseFloat(containerStyles.paddingRight || '0');
+      const verticalPadding =
+        Number.parseFloat(containerStyles.paddingTop || '0') +
+        Number.parseFloat(containerStyles.paddingBottom || '0');
+
+      const availableWidth = Math.max(1, containerRect.width - horizontalPadding);
+      const availableHeight = Math.max(1, containerRect.height - verticalPadding);
+      const imageAspectRatio = naturalWidth / naturalHeight;
+      const maxWidthByHeight = availableHeight * imageAspectRatio;
+
+      const targetWidth = Math.max(
+        1,
+        Math.min(availableWidth, this.zoomMaxWidth, maxWidthByHeight),
+      );
+
+      this.zoomSize = `width: ${targetWidth}px;`;
+      return this.zoomSize;
+    },
     async zoom() {
       // 1. Lock scroll and measure
       document.body.style.overflow = 'hidden';
@@ -44,6 +153,9 @@ validateProps(
       this.open = true;
       this.showZoomed = false;
       
+      await this.$nextTick();
+      this.computeZoomSize();
+      this.style = `${this.zoomSize} opacity: 0; transition: none;`;
       await this.$nextTick();
       const zoomed = this.$refs.zoomedImg;
       const zRect = zoomed.getBoundingClientRect();
@@ -54,17 +166,17 @@ validateProps(
       const ty = (rect.top + rect.height/2) - (zRect.top + zRect.height/2);
       
       // 4. Snap to initial position (still invisible)
-      this.style = `transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 0; transition: none;`;
+      this.style = `${this.zoomSize} transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 0; transition: none;`;
       
       // 5. Triple-frame buffer to ensure paint completion
       requestAnimationFrame(() => {
         // Reveal zoomed image exactly over the thumbnail
-        this.style = `transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 1; transition: none;`;
+        this.style = `${this.zoomSize} transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 1; transition: none;`;
         
         requestAnimationFrame(() => {
           // Now start the animation and hide the thumbnail simultaneously
           this.showZoomed = true;
-          this.style = `transform: translate(0,0) scale(1); box-shadow: ${this.fullShadow}; opacity: 1; transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 450ms cubic-bezier(0.4, 0, 0.2, 1);`;
+          this.style = `${this.zoomSize} transform: translate(0,0) scale(1); box-shadow: ${this.fullShadow}; opacity: 1; transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 450ms cubic-bezier(0.4, 0, 0.2, 1);`;
         });
       });
     },
@@ -77,7 +189,7 @@ validateProps(
       const tx = (rect.left + rect.width/2) - (zRect.left + zRect.width/2);
       const ty = (rect.top + rect.height/2) - (zRect.top + zRect.height/2);
       
-      this.style = `transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 1; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);`;
+      this.style = `${this.zoomSize} transform: translate(${tx}px, ${ty}px) scale(${scale}); box-shadow: ${this.noShadow}; opacity: 1; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);`;
       this.showZoomed = false;
       
       setTimeout(() => {
@@ -94,45 +206,54 @@ validateProps(
       {...attrs}
       x-ref="img"
       title={title}
-      class="w-full h-auto my-0! block cursor-zoom-in transition-opacity"
+      class:list={[
+        "h-auto my-0! block transition-opacity",
+        zoomEnabled && "cursor-zoom-in",
+        hasCustomImageWidth ? "max-w-full" : "w-full",
+      ]}
       :class="showZoomed ? 'opacity-0 duration-0' : 'opacity-100 duration-300'"
-      @click="zoom()"
+      @click={zoomEnabled ? "zoom()" : undefined}
     />
   </div>
   {
     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">
+      <figcaption class="mt-1! xs:mt-1.5! text-center text-xs! xs:text-sm! text-neutral-500 dark:text-neutral-400 font-medium whitespace-pre-line leading-relaxed px-2">
         <span set:html={captionHtml} />
       </figcaption>
     )
   }
 
-  <template x-teleport="body">
-    <div
-      x-show="open"
-      class="fixed bottom-0 top-1 inset-x-1 rounded-t-2xl z-20 flex items-center justify-center pt-20 pb-4 px-4 md:pt-28 md:pb-12 md:px-12 overflow-hidden"
-      @keydown.escape.window="close()"
-      style="display: none;"
-    >
-      <div
-        x-show="showZoomed"
-        x-transition:enter="transition ease-out duration-300"
-        x-transition:enter-start="opacity-0"
-        x-transition:enter-end="opacity-100"
-        x-transition:leave="transition ease-in duration-400"
-        x-transition:leave-start="opacity-100"
-        x-transition:leave-end="opacity-0"
-        class="absolute inset-0 bg-white/90 dark:bg-black/90 backdrop-blur-xl cursor-zoom-out"
-        @click="close()"
-      >
-      </div>
-
-      <img
-        {...attrs}
-        x-ref="zoomedImg"
-        class="relative z-10 max-w-full max-h-full object-contain rounded-2xl shadow-none will-change-transform pointer-events-none"
-        :style="style"
-      />
-    </div>
-  </template>
+  {
+    zoomEnabled && (
+      <template x-teleport="body">
+        <div
+          x-show="open"
+          x-ref="zoomViewport"
+          class="fixed bottom-0 top-1 inset-x-1 rounded-t-2xl z-20 flex items-center justify-center pt-20 pb-4 px-4 md:pt-28 md:pb-12 md:px-12 overflow-hidden"
+          @keydown.escape.window="close()"
+          style="display: none;"
+        >
+          <div
+            x-show="showZoomed"
+            x-transition:enter="transition ease-out duration-300"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="transition ease-in duration-400"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+            class="absolute inset-0 bg-white/90 dark:bg-black/90 backdrop-blur-xl cursor-zoom-out"
+            @click="close()"
+          >
+          </div>
+
+          <img
+            {...zoomAttrs}
+            x-ref="zoomedImg"
+            class="relative z-10 max-w-full max-h-full object-contain rounded-2xl shadow-none will-change-transform pointer-events-none"
+            :style="style"
+          />
+        </div>
+      </template>
+    )
+  }
 </figure>

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

@@ -6,6 +6,7 @@ import { gfm } from "micromark-extension-gfm";
 import { mdxjs } from "micromark-extension-mdxjs";
 import type { Plugin } from "unified";
 import { visitParents } from "unist-util-visit-parents";
+import { transformStandaloneImageParagraphs } from "./remark-standalone-image-component";
 
 type CodeNode = {
   type: "code";
@@ -275,6 +276,7 @@ function parseComponentPreviewChildren(rawCode: string): unknown[] {
     mdastExtensions: [gfmFromMarkdown(), mdxFromMarkdown()],
   }) as Root;
 
+  transformStandaloneImageParagraphs(parsedTree);
   transformCodeBlockNodes(parsedTree);
 
   return transformPreviewChildren(

package/template/src/lib/mdx/remark-standalone-image-component.ts

@@ -0,0 +1,89 @@
+import type { Root } from "mdast";
+import type { Plugin } from "unified";
+import { visitParents } from "unist-util-visit-parents";
+
+type ParagraphNode = {
+  type: "paragraph";
+  children?: unknown[];
+};
+
+type ImageNode = {
+  type: "image";
+  url?: string | null;
+  alt?: string | null;
+  title?: string | null;
+};
+
+type ParentNode = {
+  children?: unknown[];
+};
+
+type MdxJsxAttributeNode = {
+  type: "mdxJsxAttribute";
+  name: string;
+  value: string | null;
+};
+
+type MdxJsxFlowElementNode = {
+  type: "mdxJsxFlowElement";
+  name: string;
+  attributes: MdxJsxAttributeNode[];
+  children: unknown[];
+};
+
+function createAttribute(name: string, value: string): MdxJsxAttributeNode {
+  return {
+    type: "mdxJsxAttribute",
+    name,
+    value,
+  };
+}
+
+export function transformStandaloneImageParagraphs(tree: Root): void {
+  visitParents(tree, "paragraph", (node, ancestors) => {
+    const paragraph = node as ParagraphNode;
+    if (!Array.isArray(paragraph.children) || paragraph.children.length !== 1) {
+      return;
+    }
+
+    const onlyChild = paragraph.children[0] as ImageNode;
+    if (onlyChild.type !== "image") return;
+    if (typeof onlyChild.url !== "string" || onlyChild.url.trim().length === 0) {
+      return;
+    }
+
+    const parent = ancestors[ancestors.length - 1] as ParentNode | undefined;
+    if (!Array.isArray(parent?.children)) return;
+
+    const currentIndex = parent.children.indexOf(node);
+    if (currentIndex < 0) return;
+
+    const attributes: MdxJsxAttributeNode[] = [
+      createAttribute("src", onlyChild.url),
+    ];
+
+    if (typeof onlyChild.alt === "string") {
+      attributes.push(createAttribute("alt", onlyChild.alt));
+    }
+    if (typeof onlyChild.title === "string") {
+      attributes.push(createAttribute("title", onlyChild.title));
+    }
+
+    const replacementNode: MdxJsxFlowElementNode = {
+      type: "mdxJsxFlowElement",
+      name: "Image",
+      attributes,
+      children: [],
+    };
+
+    parent.children[currentIndex] = replacementNode;
+  });
+}
+
+export const remarkStandaloneImageComponent: Plugin<[], Root> = () => {
+  return (tree) => {
+    transformStandaloneImageParagraphs(tree);
+  };
+};
+
+export default remarkStandaloneImageComponent;