Img

MDX <img> override — resolves /images/p/ paths and bare pipeline slugs to a responsive ResponsiveImage with the click-to-zoom enlarge affordance, falling back to a plain <img> for external URLs.

Article Media & Embeds

Pipeline image (enlargeable)

Enlarge opt-out

External image (fallback)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for Img — new coverage (epic #1647, wave 6, #1662). // // The mock slug below (`oxi-cap-ep1-front-panel`) doesn't exist on R2, so its // `/images/p/<slug>/*.webp` requests resolve to the styleguide's // image-placeholder plugin (see `article-image/article-image.stories.tsx`). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { Img } from './img'; const meta: StoryMeta = { title: 'Img', category: 'Article Media & Embeds', description: 'MDX <img> override — resolves /images/p/ paths and bare pipeline slugs to a responsive ResponsiveImage with the click-to-zoom enlarge affordance, falling back to a plain <img> for external URLs.', usage: `import { Img } from '@/components/mdx/img';\n\n<Img src="/images/p/oxi-cap-ep1-front-panel" alt="Front panel" />`, }; export default meta; export const PipelineImage = defineStory({ name: 'Pipeline image (enlargeable)', render: () => <Img src="/images/p/oxi-cap-ep1-front-panel" alt="OXI Coral front panel" />, }); // title="no-enlarge" is the opt-out sentinel — no zd-enlargeable wrapper / button. export const NoEnlargeOptOut = defineStory({ name: 'Enlarge opt-out', render: () => ( <Img src="/images/p/oxi-cap-ep1-grid-notes" alt="Grid power notes" title="no-enlarge" /> ), }); // Non-pipeline URLs (no protocol match to /images/p/, no bare-slug hit in // metadataDb) fall back to a plain <img> — external images are rendered as-is. export const ExternalImage = defineStory({ name: 'External image (fallback)', render: () => <Img src="https://placehold.co/400x300/333/ccc?text=External" alt="External" />, });