add album art to detail page

[argyleink]

Summary by CodeRabbit

• New Features

  • Episode pages now surface episode metadata (artwork, publish date, number, title, description and hosts/guests) in the page layout/sidebar with improved responsive artwork selection.
  • Creators/Guests can be shown in a single-column layout.

• Refactor

  • Improved view-transition support for episode thumbnails, dates and titles to enable smoother visual transitions.
  • Core show notes, sponsors and transcript behavior unchanged.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
www-starpod	Building	Preview, Comment	Jan 27, 2026 6:18am

[coderabbitai]

📝 Walkthrough

Walkthrough

Episode metadata rendering was moved from the page into the Layout via a new episode prop; the page no longer renders date, header, description, or hosts/guests inline and instead passes a consolidated episode object (description, episodeNumber, hostsAndGuests, image, published, title) to Layout.

Changes

Cohort / File(s)	Summary
Episode Page src/pages/[episode].astro	Removed inline rendering of episode date, header, description, and CreatorsAndGuests; now constructs and passes an episode object prop to Layout containing description, episodeNumber, hostsAndGuests, image (episodeImage or show.image), published (Date), and title.
Layout & Types src/layouts/Layout.astro	Added HostOrGuestData and EpisodeData public types and an optional episode?: EpisodeData prop. When episode is present, Layout renders episode-specific sidebar (image, published date, episode number/title, description) and optionally renders CreatorsAndGuests; otherwise falls back to previous show-focused sidebar. Introduced imports: CreatorsAndGuests, FormattedDate, and dasherize for view-transition names.
Episode list view transitions src/components/EpisodeList.astro	Added view-transition-name attributes using dasherized episode titles for image, date wrapper, and h2 title; simplified anchor/link structure to remove inline transition styles.
Creators & Guests layout src/components/episode/CreatorsAndGuests.astro	Added optional singleColumn?: boolean prop (defaults to false) and conditional layout classes to switch between single-column and two-column arrangements.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰
I hopped through props and stitched a new view,
Packed episode bits into one tidy stew.
Image and title snug in Layout's den,
Hosts and notes hop in when called again.
🎉

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title is only partially related to the changeset. While album art addition is mentioned, the commit message reveals the primary change is restructuring episode details rendering with view transitions to the sidebar, which is not captured in the title.	Consider a more accurate title like 'Move episode details to sidebar with view transitions' that better reflects the main architectural change being made.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/pages/`[episode].astro:
- Around line 158-170: Compute a single image source (e.g., const imageSrc =
episode.episodeImage ?? show.image ?? null) and use that to decide rendering:
only render the <img> when imageSrc is truthy (or fallback to a placeholder
URL), replacing direct use of episode.episodeImage and show.image in the JSX;
update the <img> props to use imageSrc and ensure loading/alt/width/height
remain intact. This prevents rendering an <img> with an empty src and avoids
broken image requests.

🧹 Nitpick comments (1)

src/pages/[episode].astro (1)

158-159: Consider a mobile-first column layout.

Side-by-side layout on small screens can make the description harder to read. A flex-col default with lg:flex-row keeps desktop layout while improving mobile readability.

♻️ Suggested tweak

-        <div class="flex gap-6">
+        <div class="flex flex-col gap-6 lg:flex-row lg:items-start">

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Guard against missing image URL.

If both episode.episodeImage and show.image are falsy, the <img> renders without a src, which can trigger a request to the current page and show a broken image. Consider computing a single imageSrc and conditionally rendering the <img> only when it exists (or provide a placeholder).

🔧 Suggested fix

---
// frontmatter
+const episodeImageSrc = episode.episodeImage ?? show.image;

-        <div class="flex gap-6">
+        <div class="flex gap-6">
           <p class="mb-8 flex-1 lg:mb-12">
             {episode.description}
           </p>
-
-          <img
-            alt={`${episode.title} - episode art`}
-            class="h-24 w-24 shrink-0 rounded-lg shadow-lg lg:h-32 lg:w-32"
-            height={128}
-            loading="eager"
-            src={episode.episodeImage ?? show.image}
-            width={128}
-          />
+          {episodeImageSrc ? (
+            <img
+              alt={`${episode.title} - episode art`}
+              class="h-24 w-24 shrink-0 rounded-lg shadow-lg lg:h-32 lg:w-32"
+              height={128}
+              loading="eager"
+              src={episodeImageSrc}
+              width={128}
+            />
+          ) : null}
         </div>

🤖 Prompt for AI Agents

In `@src/pages/`[episode].astro around lines 158 - 170, Compute a single image
source (e.g., const imageSrc = episode.episodeImage ?? show.image ?? null) and
use that to decide rendering: only render the <img> when imageSrc is truthy (or
fallback to a placeholder URL), replacing direct use of episode.episodeImage and
show.image in the JSX; update the <img> props to use imageSrc and ensure
loading/alt/width/height remain intact. This prevents rendering an <img> with an
empty src and avoids broken image requests.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/episode/CreatorsAndGuests.astro (1)

5-15: Align hostsAndGuests.id type with DB‑sourced data.
Layout now introduces HostOrGuestData.id as a number; keeping id: string here can trip astro check or TS tooling. Consider widening to accept numbers.

♻️ Suggested tweak

 export interface Props {
   hostsAndGuests: Array<{
-    id: string;
+    id: string | number;
     img: string | null;
     isHost: boolean;
     name: string;
   }>;
   singleColumn?: boolean;
 }

[RobbieTheWagner]

I think we should chat with our designer and look at rethinking things a bit in general, so let's hold off on this.