feat: portable text renderers and content detail routes

Twelve Astro renderers for the custom block types, plus the detail routes
that consume them: /post/[slug], /podcast/[slug], /author/[slug],
/guest/[slug], /sponsor/[slug], and the /[slug] catch-all for page
documents.

The pre-Next Astro app rendered Portable Text with no component map at
all, so every custom block rendered as nothing. This is the piece that
was genuinely missing rather than portable.

astro-portabletext uses SINGULAR `type` / `block` / `mark` keys where
@portabletext/react uses `types` / `marks`, and mark components receive
the mark definition on `node.markDef` rather than on the node. Both fail
silently — the components simply never run — so both are called out at
the definition sites.

Dependencies dropped, not ported:

- react-syntax-highlighter and the hand-maintained Prism language list
  become Astro's bundled Shiki, highlighting at render time. Language
  ids are normalised through an allowlist first: `@sanity/code-input`
  does not constrain the field, and one live document carries
  `language: "Zanzibar"`, which Shiki throws on. The allowlist is typed
  as a literal union so a typo in it is a compile error rather than a
  runtime 500.
- react-markdown per table cell. No table block exists in production —
  every cell in the dataset is null — so it was never exercised. Cells
  render as text.
- embla-carousel for YouTube shorts becomes a scroll-snap row.
- react-twitter-embed becomes the official blockquote markup, with
  widgets.js loaded only when a page actually contains a post. It now
  degrades to a readable link when the script is blocked.
- react-icons for the 20 social platforms: paths inlined.

Fixes carried in:

- CodePen and CodeSandbox URL parsing was positional destructuring and
  an unguarded double `.at(-1)`; a malformed URL threw at render. Both
  validate now.
- Tables get a header row. The Next version emitted every row as `<td>`
  in a bare `<tbody>`, leaving no column headers for screen readers.
- Sanity's file-asset URL for cover video read NEXT_PUBLIC_* env at
  module scope, which does not exist on Workers; it uses the
  per-request config.
- Socials rendered an empty clickable link for any key without an icon
  (`email`, `polywork`); unknown keys are skipped and both now have one.

Podcast episodes play through a native audio element for now — the
persistent floating player is a React island and lands with the rest of
the islands.

Verified against a real Worker: code, quote, image, htmlBlock and
twitter blocks all render from live dev-dataset documents, Shiki emits
dual-theme output with the dark variant activated, and every detail
route 200s while unknown slugs 404.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HZ4S1uTJwFdbv3A6PHWfw2

Author: codercatdev

apps/site/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@astrojs/cloudflare": "^14.2.1",
     "@astrojs/react": "^6.0.2",
+    "@portabletext/types": "^4.0.2",
     "@sanity/client": "^7.26.2",
     "@sanity/image-url": "^2.1.1",
     "@sanity/visual-editing-standalone": "^2.0.1",

apps/site/src/components/Breadcrumbs.astro

@@ -0,0 +1,33 @@
+---
+interface Props {
+	links: Array<{ title: string; href?: string }>;
+}
+
+const { links } = Astro.props;
+---
+
+<nav class="my-10 text-lg md:text-xl" aria-label="Breadcrumb">
+	<ol class="flex flex-wrap items-center gap-1.5">
+		<li><a href="/" class="hover:underline">Home</a></li>
+		{
+			links.map((link, index) => (
+				<>
+					<li aria-hidden="true" class="text-muted-foreground">
+						/
+					</li>
+					<li>
+						{link.href && index < links.length - 1 ? (
+							<a href={link.href} class="hover:underline">
+								{link.title}
+							</a>
+						) : (
+							<span class="text-muted-foreground" aria-current="page">
+								{link.title}
+							</span>
+						)}
+					</li>
+				</>
+			))
+		}
+	</ol>
+</nav>

apps/site/src/components/CoverMedia.astro

@@ -0,0 +1,61 @@
+---
+import { stegaClean } from "@sanity/client/stega";
+import type { SanityImageSource } from "@sanity/image-url";
+import CoverImage from "@/components/CoverImage.astro";
+import PtYouTube from "@/components/portable-text/PtYouTube.astro";
+
+/**
+ * Picks the hero medium for a content page, in the Next app's precedence:
+ * uploaded video, then YouTube, then the cover image.
+ */
+interface Props {
+	image?: (SanityImageSource & { alt?: string }) | null;
+	video?: { asset?: { _ref?: string } } | null;
+	youtube?: string | null;
+	class?: string;
+}
+
+const { image, video, youtube, class: className } = Astro.props;
+
+/**
+ * Sanity file refs are `file-{hash}-{ext}`. The Next version read the project
+ * id and dataset from `process.env.NEXT_PUBLIC_*` at module scope, which does
+ * not exist on Workers — resolved from the per-request config instead.
+ */
+function fileUrl(ref: string | undefined) {
+	if (!ref?.startsWith("file-")) {
+		return undefined;
+	}
+	const parts = ref.split("-");
+	const ext = parts.pop();
+	const hash = parts.slice(1).join("-");
+	if (!ext || !hash) {
+		return undefined;
+	}
+	const { projectId, dataset } = Astro.locals.sanity.config;
+	return `https://cdn.sanity.io/files/${projectId}/${dataset}/${hash}.${ext}`;
+}
+
+const videoUrl = fileUrl(stegaClean(video?.asset?._ref));
+const youtubeUrl = stegaClean(youtube);
+---
+
+{
+	videoUrl ? (
+		<div class="shadow-md transition-shadow duration-200 sm:mx-0">
+			<video
+				class:list={["w-full h-auto rounded-md", className]}
+				width={1920}
+				height={1080}
+				controls
+				preload="metadata"
+			>
+				<source src={videoUrl} />
+			</video>
+		</div>
+	) : youtubeUrl ? (
+		<PtYouTube node={{ _type: "youtube", youtube: youtubeUrl }} index={0} isInline={false} />
+	) : (
+		<CoverImage image={image} priority class={className} />
+	)
+}

apps/site/src/components/PodcastListen.astro

@@ -0,0 +1,80 @@
+---
+import { stegaClean } from "@sanity/client/stega";
+
+interface Props {
+	title: string;
+	audioUrl?: string | null;
+	youtube?: string | null;
+}
+
+const { title, audioUrl, youtube } = Astro.props;
+
+const src = stegaClean(audioUrl);
+const youtubeUrl = stegaClean(youtube);
+const cleanTitle = stegaClean(title) ?? "";
+
+const spotifyUrl = `https://open.spotify.com/search/codingcat.dev%20${encodeURIComponent(cleanTitle)}/episodes`;
+const appleUrl =
+	"https://podcasts.apple.com/us/podcast/codingcat-dev-podcast/id1491655542";
+
+const buttonClass =
+	"inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent hover:text-accent-foreground";
+---
+
+{
+	src && (
+		<div class="flex w-full flex-col flex-wrap items-center justify-start gap-2 border border-foreground p-2 sm:flex-row sm:gap-4 sm:p-4">
+			<h2 class="w-full text-center text-xl font-bold sm:text-start">
+				Listening Options
+			</h2>
+			{/*
+			  * A native audio element, not the floating persistent player — that
+			  * player is a React island and lands with the rest of the islands.
+			  * This keeps every episode playable in the meantime with no JS.
+			  */}
+			<audio class="w-full sm:flex-1" controls preload="none" src={src}>
+				<track kind="captions" />
+			</audio>
+			<div class="flex gap-1">
+				<a
+					href={spotifyUrl}
+					target="_blank"
+					rel="noreferrer noopener"
+					class={buttonClass}
+					aria-label="Search for this episode on Spotify"
+				>
+					<svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+						<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0Zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02Zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2Zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3Z" />
+					</svg>
+					<span class="sr-only">Listen on Spotify</span>
+				</a>
+				<a
+					href={appleUrl}
+					target="_blank"
+					rel="noreferrer noopener"
+					class={buttonClass}
+					aria-label="Listen on Apple Podcasts"
+				>
+					<svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+						<path d="M5.34 0A5.328 5.328 0 0 0 0 5.34v13.32A5.328 5.328 0 0 0 5.34 24h13.32A5.328 5.328 0 0 0 24 18.66V5.34A5.328 5.328 0 0 0 18.66 0Zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 0 1-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.535-.224 1.447-.874 2.008-1.435a7.644 7.644 0 0 0 2.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.672-2.512-4.544-5.096-5.336-.784-.24-2.44-.336-3.384-.2-2.36.32-4.448 1.664-5.616 3.616-1.096 1.832-1.264 4.24-.44 6.224.6 1.448 1.784 2.792 3.048 3.472.28.152.352.28.416.72.048.36.024.44-.056.44-.048 0-.416-.16-.816-.36l-.024-.008c-1.472-.72-2.72-2.032-3.448-3.648-1.472-3.248-.688-7.02 1.928-9.352 1.72-1.53 3.88-2.28 6.344-2.28z" />
+					</svg>
+					<span class="sr-only">Listen on Apple Podcasts</span>
+				</a>
+				{youtubeUrl && (
+					<a
+						href={youtubeUrl}
+						target="_blank"
+						rel="noreferrer noopener"
+						class={buttonClass}
+						aria-label="Watch on YouTube"
+					>
+						<svg class="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+							<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814ZM9.545 15.568V8.432L15.818 12l-6.273 3.568Z" />
+						</svg>
+						<span class="sr-only">Watch on YouTube</span>
+					</a>
+				)}
+			</div>
+		</div>
+	)
+}

apps/site/src/components/PodcastPicks.astro

@@ -0,0 +1,86 @@
+---
+import { stegaClean } from "@sanity/client/stega";
+
+interface Pick {
+	name?: string | null;
+	site?: string | null;
+	user?: { title?: string | null } | null;
+}
+
+interface Props {
+	picks?: Array<Pick | null> | null;
+}
+
+const { picks } = Astro.props;
+
+// Group by the picking guest, alphabetically — same as the Next version, but
+// without the shadcn Card/Table primitives it used for what is a list.
+const grouped = new Map<string, Pick[]>();
+for (const pick of picks ?? []) {
+	const author = pick?.user?.title;
+	if (!pick || !author) {
+		continue;
+	}
+	const existing = grouped.get(author);
+	if (existing) {
+		existing.push(pick);
+	} else {
+		grouped.set(author, [pick]);
+	}
+}
+
+const sorted = [...grouped.entries()].sort(([a], [b]) => a.localeCompare(b));
+---
+
+{
+	sorted.length > 0 && (
+		<>
+			<hr class="mb-8 mt-8 border-border sm:mb-24 sm:mt-28" />
+			<h2 class="mb-8 text-6xl font-bold leading-tight tracking-tighter md:text-7xl">
+				Picks
+			</h2>
+			<section class="grid gap-4 p-0 sm:gap-8 sm:p-12">
+				{sorted.map(([author, items]) => (
+					<article class="rounded-xl border border-border bg-card">
+						<h3 class="border-b border-border px-6 py-4 text-xl font-bold sm:text-2xl">
+							{author}
+						</h3>
+						<ul>
+							{items.map((pick) => {
+								const site = stegaClean(pick.site);
+								return (
+									<li class="border-b border-border last:border-b-0">
+										{site ? (
+											<a
+												href={site}
+												target="_blank"
+												rel="noopener noreferrer"
+												class="flex items-center justify-between p-4 text-base transition-colors hover:bg-accent sm:text-xl"
+											>
+												<span>{pick.name}</span>
+												<svg
+													class="size-4 shrink-0"
+													viewBox="0 0 24 24"
+													fill="none"
+													stroke="currentColor"
+													stroke-width="2"
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													aria-hidden="true"
+												>
+													<path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+												</svg>
+											</a>
+										) : (
+											<span class="block p-4 text-base sm:text-xl">{pick.name}</span>
+										)}
+									</li>
+								);
+							})}
+						</ul>
+					</article>
+				))}
+			</section>
+		</>
+	)
+}

apps/site/src/components/SponsorCard.astro

@@ -0,0 +1,52 @@
+---
+import { stegaClean } from "@sanity/client/stega";
+import CoverImage from "@/components/CoverImage.astro";
+import type { CoverImage as CoverImageType } from "@/lib/sanity/types.gen";
+
+interface Sponsor {
+	_id: string;
+	title: string;
+	slug?: string | null;
+	excerpt?: string | null;
+	coverImage?: CoverImageType | null;
+	url?: string | null;
+}
+
+interface Props {
+	sponsors?: Sponsor[] | null;
+}
+
+const { sponsors } = Astro.props;
+const items = sponsors ?? [];
+---
+
+{
+	items.length > 0 && (
+		<div class="grid justify-center gap-6 p-4 md:p-6 lg:auto-cols-[1fr] lg:grid-flow-col">
+			{items.map((sponsor) => {
+				const external = stegaClean(sponsor.url);
+				const href = external || `/sponsor/${sponsor.slug}`;
+				return (
+					<a
+						href={href}
+						target={external ? "_blank" : undefined}
+						rel={external ? "noopener noreferrer sponsored" : undefined}
+						class="flex"
+					>
+						<article class="flex max-w-xl grow flex-col overflow-hidden rounded-xl border border-border bg-card shadow-md transition-all hover:scale-[1.02] hover:shadow-lg">
+							<CoverImage image={sponsor.coverImage} />
+							<div class="grow p-6">
+								<h3 class="mb-3 text-3xl text-balance">{sponsor.title}</h3>
+							</div>
+							{sponsor.excerpt && (
+								<p class="px-6 pb-6 text-lg leading-relaxed text-pretty">
+									{sponsor.excerpt}
+								</p>
+							)}
+						</article>
+					</a>
+				);
+			})}
+		</div>
+	)
+}