FF designer quickstart images

src/theme/MDXComponents/Img/index.tsx

@@ -0,0 +1,99 @@
+import React, {useEffect, useState} from 'react';
+import clsx from 'clsx';
+import type {Props} from '@theme/MDXComponents/Img';
+
+import styles from './styles.module.css';
+
+function transformImgClassName(className?: string): string {
+  return clsx(className, styles.img);
+}
+
+export default function MDXImg(props: Props): JSX.Element {
+  const {alt, className, src} = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const lastActiveElementRef = React.useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+
+    lastActiveElementRef.current = document.activeElement as HTMLElement | null;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.body.classList.add(styles.fullscreenOpen);
+    window.addEventListener('keydown', handleKeyDown);
+
+    // Ensure keyboard focus enters the modal.
+    requestAnimationFrame(() => {
+      document
+        .querySelector<HTMLButtonElement>(`.${styles.closeButton}`)
+        ?.focus();
+    });
+
+    return () => {
+      document.body.classList.remove(styles.fullscreenOpen);
+      window.removeEventListener('keydown', handleKeyDown);
+      lastActiveElementRef.current?.focus();
+      lastActiveElementRef.current = null;
+    };
+  }, [isOpen]);
+
+  if (!alt?.trim() && !props.title?.trim()) {
+    return (
+      <img
+        decoding="async"
+        loading="lazy"
+        {...props}
+        className={transformImgClassName(className)}
+      />
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className={styles.trigger}
+        aria-label={alt ? `Open image: ${alt}` : 'Open image fullscreen'}
+        onClick={() => setIsOpen(true)}>
+        <img
+          decoding="async"
+          loading="lazy"
+          {...props}
+          alt={alt ?? ''}
+          className={transformImgClassName(className)}
+        />
+      </button>
+
+      {isOpen && (
+        <div
+          className={styles.overlay}
+          role="dialog"
+          aria-modal="true"
+          aria-label={alt ? `Fullscreen image: ${alt}` : 'Fullscreen image'}
+          onClick={() => setIsOpen(false)}>
+          <button
+            type="button"
+            className={styles.closeButton}
+            aria-label="Close fullscreen image"
+            onClick={() => setIsOpen(false)}>
+            ×
+          </button>
+          <img
+            src={src}
+            alt={alt ?? ''}
+            className={styles.fullscreenImage}
+            onClick={(event) => event.stopPropagation()}
+          />
+          />
+        </div>
+      )}
+    </>
+  );
+}

src/theme/MDXComponents/Img/styles.module.css

@@ -0,0 +1,65 @@
+.trigger {
+  display: inline-block;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: zoom-in;
+  text-align: inherit;
+}
+
+.img {
+  height: auto;
+}
+
+.trigger .img {
+  display: block;
+  max-width: 100%;
+}
+
+.fullscreenOpen {
+  overflow: hidden;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  padding: 32px 24px;
+  background: rgba(0, 0, 0, 0.88);
+  cursor: zoom-out;
+  overscroll-behavior: none;
+}
+
+.fullscreenImage {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+  cursor: default;
+}
+
+.closeButton {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: 44px;
+  height: 44px;
+  border: 1px solid rgba(255, 255, 255, 0.32);
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.48);
+  color: #fff;
+  cursor: pointer;
+  font-size: 32px;
+  line-height: 38px;
+}
+
+.closeButton:hover,
+.closeButton:focus-visible {
+  background: rgba(255, 255, 255, 0.18);
+}