PtImage.astro

---
import { stegaClean } from "@sanity/client/stega";
import type { Props as PtProps } from "astro-portabletext/types";
import type { SanityImageSource } from "@sanity/image-url";

type ImageNode = SanityImageSource & {
	_type: "image";
	alt?: string;
	caption?: string;
};

type Props = PtProps<ImageNode>;

const { node } = Astro.props;

// Parse intrinsic dimensions from Sanity asset _ref ("image-<hash>-<width>x<height>-<ext>")
// so we never pass a forced 16:9 .height(1080) to @sanity/image-url (which causes
// @sanity/image-url to inject ?rect=... and crop tall/square images like memes or diagrams).
const assetRef = stegaClean(
	(node as { asset?: { _ref?: string } })?.asset?._ref,
);
const dimMatch = assetRef?.match(/-(\d+)x(\d+)-[a-z0-9]+$/i);
const intrinsicWidth = dimMatch ? Number(dimMatch[1]) : 1200;
const intrinsicHeight = dimMatch ? Number(dimMatch[2]) : 675;

const builder = Astro.locals.sanity.urlForImage(node);
const maxWidth = Math.min(intrinsicWidth, 1600);
const src = builder?.width(maxWidth).quality(82).url();

const responsiveWidths = [480, 640, 800, 960, 1200, 1600].filter(
	(w) => w <= maxWidth,
);
if (!responsiveWidths.includes(maxWidth)) {
	responsiveWidths.push(maxWidth);
}
const srcset = builder
	? responsiveWidths
			.map((w) => `${builder.width(w).quality(82).url()} ${w}w`)
			.join(", ")
	: undefined;

const alt = stegaClean(node.alt) ?? "";
const caption = node.caption;
---

{
	src && (
		<figure class="not-prose my-8 flex flex-col items-center">
			<img
				class="h-auto w-auto max-w-full max-h-[80dvh] rounded-md shadow-md"
				src={src}
				srcset={srcset}
				width={intrinsicWidth}
				height={intrinsicHeight}
				sizes="(max-width: 896px) 100vw, 896px"
				alt={alt}
				loading="lazy"
				decoding="async"
			/>
			{caption && (
				<figcaption class="mt-2 text-center text-sm text-muted-foreground">
					{caption}
				</figcaption>
			)}
		</figure>
	)
}