@umami/shiso 1.1.8 → 1.1.10

package/mdx.config.ts

@@ -101,6 +101,43 @@ function rehypeRemoveHighlightingFragments() {
   };
 }
 
+function rehypeZoomableImages() {
+  return (tree: MdNode) => {
+    const visit = (node: MdNode, insideLink = false) => {
+      const isMdxElement = node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement';
+      const isLink = node.tagName === 'a' || (isMdxElement && node.name === 'a');
+      const linked = insideLink || isLink;
+
+      if (isMdxElement && node.name === 'img') {
+        node.name = 'ZoomableImage';
+
+        if (linked) {
+          const attributes = Array.isArray(node.attributes) ? node.attributes : [];
+          const hasNoZoom = attributes.some(
+            attribute =>
+              typeof attribute === 'object' && attribute !== null && attribute.name === 'noZoom',
+          );
+
+          if (!hasNoZoom) {
+            node.attributes = [
+              ...attributes,
+              { type: 'mdxJsxAttribute', name: 'noZoom', value: null },
+            ];
+          }
+        }
+      } else if (node.tagName === 'img' && linked) {
+        node.properties = { ...(node.properties as Record<string, unknown>), noZoom: true };
+      }
+
+      node.children?.forEach(child => {
+        visit(child, linked);
+      });
+    };
+
+    visit(tree);
+  };
+}
+
 /**
  * The MDX compilation pipeline, shared by the app build and the test runner so
  * tests exercise the same transforms the site ships with.
@@ -122,6 +159,7 @@ export function shisoMdx(): Plugin {
         rehypeWrapJsxForHighlighting,
         rehypeHighlight,
         rehypeRemoveHighlightingFragments,
+        rehypeZoomableImages,
         rehypeSlug,
         [
           // Must follow rehypeSlug: the anchor href points at the id it sets.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/shiso",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "Open-source documentation framework for Markdown and MDX sites.",
   "type": "module",
   "bin": {

package/src/App.tsx

@@ -16,6 +16,7 @@ import { DocPage } from '@/pages/DocPage';
 
 const mdxComponents = {
   ...docsComponents,
+  img: docsComponents.ZoomableImage,
   pre: CodeBlock,
 };
 

package/src/components/Header.tsx

@@ -53,11 +53,7 @@ export function Header({ site }: { site: SiteModel }) {
                 <img src={logo.light} alt="" className="h-6 w-auto dark:hidden" />
               ) : null}
               {logo?.dark ? (
-                <img
-                  src={logo.dark}
-                  alt=""
-                  className={`hidden h-6 w-auto dark:block ${logo.light === logo.dark ? 'dark:invert' : ''}`}
-                />
+                <img src={logo.dark} alt="" className="hidden h-6 w-auto dark:block" />
               ) : null}
               {name ? <span>{name}</span> : null}
             </a>

package/src/components/docs/Frame.tsx

@@ -46,7 +46,9 @@ export function Frame({ caption, hint, children }: FrameProps) {
         </div>
       ) : null}
       <figure className={styles.frame}>
-        <div className={styles.frameContent}>{enhanceAutoplayVideos(children)}</div>
+        <div data-slot="frame-content" className={styles.frameContent}>
+          {enhanceAutoplayVideos(children)}
+        </div>
         {caption ? (
           <figcaption className={styles.frameCaption}>{renderFrameText(caption)}</figcaption>
         ) : null}

package/src/components/docs/ZoomableImage.tsx

@@ -0,0 +1,79 @@
+import { XIcon } from 'lucide-react';
+import type { ImgHTMLAttributes } from 'react';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+
+export interface ZoomableImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  noZoom?: boolean;
+}
+
+export function ZoomableImage({
+  noZoom = false,
+  className,
+  alt,
+  src,
+  ...props
+}: ZoomableImageProps) {
+  const image = (
+    <img
+      {...props}
+      src={src}
+      alt={alt}
+      className={cn('block h-auto max-w-full rounded-lg', noZoom && 'my-6', className)}
+    />
+  );
+
+  if (noZoom || !src) {
+    return image;
+  }
+
+  const label = alt ? `View “${alt}” full size` : 'View image full size';
+
+  return (
+    <Dialog>
+      <DialogTrigger
+        render={
+          <button
+            type="button"
+            data-slot="zoomable-image"
+            className="my-6 block w-fit max-w-full cursor-zoom-in rounded-lg text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
+            aria-label={label}
+          />
+        }
+      >
+        {image}
+      </DialogTrigger>
+      <DialogContent
+        showCloseButton={false}
+        overlayClassName="bg-black/80 supports-backdrop-filter:backdrop-blur-sm"
+        className="flex max-h-[calc(100vh-2rem)] w-auto max-w-[calc(100vw-2rem)] items-center justify-center bg-transparent p-0 ring-0 shadow-none sm:max-w-[calc(100vw-2rem)]"
+      >
+        <DialogTitle className="sr-only">{alt || 'Full-size image'}</DialogTitle>
+        <img
+          src={src}
+          srcSet={props.srcSet}
+          sizes={props.sizes}
+          alt={alt || ''}
+          className="max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] rounded-lg object-contain"
+        />
+        <DialogClose
+          render={
+            <button
+              type="button"
+              className="fixed top-4 right-4 inline-flex size-9 items-center justify-center rounded-full bg-black/60 text-white outline-none backdrop-blur-sm hover:bg-black/80 focus-visible:ring-3 focus-visible:ring-white/60"
+              aria-label="Close full-size image"
+            />
+          }
+        >
+          <XIcon className="size-5" />
+        </DialogClose>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/docs/index.ts

@@ -13,3 +13,4 @@ export * from './ResponseField';
 export * from './Steps';
 export * from './Tabs';
 export * from './Tooltip';
+export * from './ZoomableImage';

package/src/components/docs/styles.ts

@@ -58,7 +58,7 @@ export const styles = {
     'flex h-5 shrink-0 items-center text-muted-foreground [&_svg]:size-4 [&_svg]:fill-current',
   frame: 'relative overflow-hidden rounded-2xl border border-border bg-muted/25 p-2',
   frameContent:
-    'relative flex justify-center overflow-hidden rounded-xl [&_p]:m-0 [&_img]:w-full [&_video]:w-full',
+    'relative flex justify-center overflow-hidden rounded-xl [&_p]:m-0 [&_img]:m-0 [&_img]:w-full [&_video]:w-full [&_[data-slot=zoomable-image]]:m-0 [&_[data-slot=zoomable-image]]:w-full',
   frameCaption:
     'relative mt-3 px-4 pb-1 text-center text-sm leading-5 text-muted-foreground [&_p]:m-0 [&_a]:font-semibold',