fix(site): prevent 16:9 rect cropping on inline Portable Text images and constrain prose width (#781)

Author: codercatdev

apps/site/src/components/CoverMedia.astro

@@ -12,10 +12,21 @@ interface Props {
 	image?: (SanityImageSource & { alt?: string }) | null;
 	video?: { asset?: { _ref?: string } } | null;
 	youtube?: string | null;
+	width?: number;
+	height?: number;
+	sizes?: string;
 	class?: string;
 }
 
-const { image, video, youtube, class: className } = Astro.props;
+const {
+	image,
+	video,
+	youtube,
+	width,
+	height,
+	sizes = "(max-width: 1280px) 100vw, 1280px",
+	class: className,
+} = Astro.props;
 
 /**
  * Sanity file refs are `file-{hash}-{ext}`. The Next version read the project
@@ -62,6 +73,13 @@ const youtubeUrl = stegaClean(youtube);
 			isInline={false}
 		/>
 	) : (
-		<CoverImage image={image} priority sizes="(max-width: 1280px) 100vw, 1280px" class={className} />
+		<CoverImage
+			image={image}
+			width={width}
+			height={height}
+			priority
+			sizes={sizes}
+			class={className}
+		/>
 	)
 }

apps/site/src/components/portable-text/PortableTextContent.astro

@@ -62,7 +62,7 @@ const components = {
 
 {
 	value && value.length > 0 && (
-		<div class:list={["prose dark:prose-invert max-w-none", className]}>
+		<div class:list={["prose dark:prose-invert max-w-4xl", className]}>
 			<PortableText value={value} components={components} />
 		</div>
 	)

apps/site/src/components/portable-text/PtImage.astro

@@ -13,25 +13,46 @@ type Props = PtProps<ImageNode>;
 
 const { node } = Astro.props;
 
-const src = Astro.locals.sanity
-	.urlForImage(node)
-	?.width(1920)
-	.height(1080)
-	.url();
+// 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">
+		<figure class="not-prose my-8 flex flex-col items-center">
 			<img
-				class="w-full h-auto rounded-md shadow-md"
+				class="h-auto w-auto max-w-full max-h-[80dvh] rounded-md shadow-md"
 				src={src}
-				width={1920}
-				height={1080}
-				sizes="100vw"
+				srcset={srcset}
+				width={intrinsicWidth}
+				height={intrinsicHeight}
+				sizes="(max-width: 896px) 100vw, 896px"
 				alt={alt}
 				loading="lazy"
 				decoding="async"

apps/site/src/pages/author/[slug].astro

@@ -75,6 +75,9 @@ const relatedPodcasts = (person.related?.podcast ?? []) as ContentListItem[];
 			<div class="shrink-0">
 				<CoverMedia
 					image={person.coverImage}
+					width={256}
+					height={256}
+					sizes="128px"
 					class="size-24 rounded-md object-cover md:size-32"
 				/>
 			</div>

apps/site/src/pages/guest/[slug].astro

@@ -75,6 +75,9 @@ const relatedPodcasts = (person.related?.podcast ?? []) as ContentListItem[];
 			<div class="shrink-0">
 				<CoverMedia
 					image={person.coverImage}
+					width={256}
+					height={256}
+					sizes="128px"
 					class="size-24 rounded-md object-cover md:size-32"
 				/>
 			</div>

apps/site/src/pages/podcast/[slug].astro

@@ -214,7 +214,7 @@ const faqNode = faqSchema(extractFaqsFromPortableText(podcast.content));
 
 		{
 			podcast.transcript?.summary && (
-				<section class="my-8 rounded-xl border border-border bg-card/50 p-6">
+				<section class="my-8 mx-auto max-w-4xl rounded-xl border border-border bg-card/50 p-6">
 					<h2 class="mb-3 text-xl font-bold">Episode Summary</h2>
 					<p class="leading-relaxed text-muted-foreground">
 						{podcast.transcript.summary}

apps/site/src/pages/post/[slug].astro

@@ -157,7 +157,7 @@ const faqNode = faqSchema(extractFaqsFromPortableText(post.content));
 
 		{
 			post.transcript?.summary && (
-				<section class="my-8 rounded-xl border border-border bg-card/50 p-6">
+				<section class="my-8 mx-auto max-w-4xl rounded-xl border border-border bg-card/50 p-6">
 					<h2 class="mb-3 text-xl font-bold">Video Summary</h2>
 					<p class="leading-relaxed text-muted-foreground">
 						{post.transcript.summary}

apps/site/src/pages/sponsor/[slug].astro

@@ -66,6 +66,9 @@ const relatedPodcasts = (sponsor.related?.podcast ?? []) as ContentListItem[];
 			<div class="shrink-0">
 				<CoverMedia
 					image={sponsor.coverImage}
+					width={256}
+					height={256}
+					sizes="128px"
 					class="size-24 rounded-md object-cover md:size-32"
 				/>
 			</div>