CoverImage.astro

---
import { stegaClean } from "@sanity/client/stega";
import type { SanityImageSource } from "@sanity/image-url";

interface Props {
	image?: (SanityImageSource & { alt?: string }) | null;
	fallbackAlt?: string;
	width?: number;
	height?: number;
	quality?: number;
	sizes?: string;
	/** Above-the-fold images opt out of lazy loading. */
	priority?: boolean;
	class?: string;
}

const {
	image,
	fallbackAlt = "CodingCat.dev tutorial cover image",
	width = 1920,
	height = 1080,
	quality = 82,
	sizes = "(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 960px",
	priority = false,
	class: className = "w-full h-auto aspect-video rounded-md",
} = Astro.props;

const builder = Astro.locals.sanity.urlForImage(image ?? undefined);
const aspect = height / width;

const src = builder
	?.width(width)
	.height(height)
	.quality(quality)
	.url();

const responsiveWidths = [320, 480, 640, 960, 1280, 1600, 1920].filter(
	(w) => w <= width,
);
if (!responsiveWidths.includes(width)) {
	responsiveWidths.push(width);
}
const srcset = builder
	? responsiveWidths
			.map((w) => {
				const h = Math.round(w * aspect);
				const u = builder.width(w).height(h).quality(quality).url();
				return `${u} ${w}w`;
			})
			.join(", ")
	: undefined;

// stegaClean: alt lands in an attribute, where stega's zero-width characters
// would be read out verbatim by screen readers.
const rawAlt = stegaClean((image as { alt?: string } | null)?.alt);
const alt = rawAlt && rawAlt.trim().length > 0 ? rawAlt : fallbackAlt;
---

<div class="transition-shadow duration-200 shadow-md group-hover:shadow-lg sm:mx-0">
	{
		src ? (
			<img
				class={className}
				src={src}
				srcset={srcset}
				width={width}
				height={height}
				alt={alt}
				loading={priority ? "eager" : "lazy"}
				fetchpriority={priority ? "high" : "auto"}
				decoding={priority ? "sync" : "async"}
				sizes={sizes}
			/>
		) : (
			<div class="bg-muted rounded-md" style="padding-top: 50%" />
		)
	}
</div>