Media Section

[esthor]

We currently don't link to or highlight our videos or podcast episodes on the main site.

We should add a section for that on the main page.

All Things Web: The Podcast

Livestreams

Youtube: http://www.youtube.com/@allthingsweb-dev

Where should we show the 2025 and 2024 playlists, of meetup recordings?

[esthor]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Follow the established pattern of hardcoded external links (consistent with About page social links)
• Reuse existing UI primitives (Section, Card, Button, YouTubeLogoIcon) for visual consistency
• Place the section strategically between upcoming events and the Discord CTA to create a logical content flow
• Use muted background variant to provide visual contrast with adjacent sections

Design Choices

Design Choice 1: Placement of the Media Section on the homepage

Options Considered:

1. After Past Events section (at the bottom, before footer)
2. After Upcoming Events section but before Discord CTA
3. After Discord CTA but before Past Events

Chosen Option: 2

Rationale: Placing after upcoming events and before the Discord CTA creates a natural flow from "what's coming up" → "what you can watch now" → "join the community." This keeps promotional/engagement content grouped together.

Design Choice 2: 2024 and 2025 Meetup Recording Playlists

Options Considered:

1. Include placeholder entries that require URL substitution during implementation
2. Only implement the three links explicitly provided in the ticket

Chosen Option: 1

Rationale: Include all five media categories (Podcast, Livestreams, 2025 Recordings, 2024 Recordings, YouTube Channel) with placeholder comments for the missing playlist URLs. This implements the full intent of the ticket.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Create and Integrate Media Section

This phase adds a new media/video section to the homepage following existing visual and structural patterns. The section will use a card grid layout consistent with other content sections.

Task 1: Create MediaSection Component

Create a new component to display media links as a grid of cards linking to external YouTube content.

• Create app/src/components/media-section.tsx as a presentational component
• Use <Section variant="big" background="muted"> wrapper to provide visual separation from adjacent sections
• Apply the standard centered heading pattern: h2 with text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl and supporting text-muted-foreground subtitle
• Implement a responsive card grid: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
• Create individual media cards using <Card> with CardHeader (title + description) and CardFooter (external link button)
• Include the YouTubeLogoIcon from components/ui/icons.tsx in each card
• Hardcode the YouTube URLs inline following the established pattern from the About page
• Use target="_blank" rel="noopener noreferrer" on all external links

Media items to include:

1. The Podcast — Links to the podcast playlist
2. Livestreams — Links to the streams page
3. 2025 Meetup Recordings — Links to 2025 playlist (URL to be provided)
4. 2024 Meetup Recordings — Links to 2024 playlist (URL to be provided)
5. YouTube Channel — Links to the main channel for content discovery

Task 2: Add MediaSection to Homepage

Integrate the new component into the main page layout.

• Import MediaSection in app/src/app/page.tsx
• Insert <MediaSection /> after the "Other Upcoming Events" section and before the Discord CTA section (approximately after line 216)
• No props or data fetching required — the component is self-contained with hardcoded URLs

🤖 Prompt for AI agents

This phase creates the `MediaSection` presentational component and integrates it
into the homepage. The goal is to add a YouTube media links section that
visually fits with existing homepage sections.

**Task 1: Create `app/src/components/media-section.tsx`**
- This is a self-contained presentational component with no props or data
fetching
- Wrap the section in `<Section variant="big" background="muted">` for visual
separation
- Use the standard centered heading pattern: an `h2` with classes `text-3xl
font-bold tracking-tighter sm:text-4xl md:text-5xl`, plus a
`text-muted-foreground` subtitle
- Render a responsive card grid with classes `grid grid-cols-1 md:grid-cols-2
lg:grid-cols-3 gap-6`
- Each card uses the `<Card>` component with `CardHeader` (title + description)
and `CardFooter` (external link button)
- Import and include `YouTubeLogoIcon` from `components/ui/icons.tsx` in each
card
- Hardcode all YouTube URLs inline (matching the About page pattern); use
placeholder comments for the 2024 and 2025 playlist URLs that are not yet
provided
- All external links must have `target="_blank" rel="noopener noreferrer"`
- Include the following five media items:
  1. **The Podcast** — podcast playlist URL
  2. **Livestreams** — streams page URL
  3. **2025 Meetup Recordings** — 2025 playlist URL (placeholder)
  4. **2024 Meetup Recordings** — 2024 playlist URL (placeholder)
  5. **YouTube Channel** — main channel URL

**Task 2: Integrate into `app/src/app/page.tsx`**
- Import `MediaSection` from the new component file
- Insert `<MediaSection />` after the "Other Upcoming Events" section and before
the Discord CTA section (approximately after line 216)
- No additional props or data wiring needed

Research

This is a Next.js App Router project using Server Components with Drizzle ORM for database access. The homepage (app/src/app/page.tsx) renders multiple sections in sequence using a <Section> primitive with variants for spacing and background. Content cards use the shadcn <Card> component system. External links (YouTube, Discord, etc.) are currently hardcoded inline following the pattern established in the About page. A YouTubeLogoIcon already exists in the icons file.

---

🚀 Next Steps

🤖 All AI agent prompts combined

This phase creates the `MediaSection` presentational component and integrates it
into the homepage. The goal is to add a YouTube media links section that
visually fits with existing homepage sections.

**Task 1: Create `app/src/components/media-section.tsx`**
- This is a self-contained presentational component with no props or data
fetching
- Wrap the section in `<Section variant="big" background="muted">` for visual
separation
- Use the standard centered heading pattern: an `h2` with classes `text-3xl
font-bold tracking-tighter sm:text-4xl md:text-5xl`, plus a
`text-muted-foreground` subtitle
- Render a responsive card grid with classes `grid grid-cols-1 md:grid-cols-2
lg:grid-cols-3 gap-6`
- Each card uses the `<Card>` component with `CardHeader` (title + description)
and `CardFooter` (external link button)
- Import and include `YouTubeLogoIcon` from `components/ui/icons.tsx` in each
card
- Hardcode all YouTube URLs inline (matching the About page pattern); use
placeholder comments for the 2024 and 2025 playlist URLs that are not yet
provided
- All external links must have `target="_blank" rel="noopener noreferrer"`
- Include the following five media items:
  1. **The Podcast** — podcast playlist URL
  2. **Livestreams** — streams page URL
  3. **2025 Meetup Recordings** — 2025 playlist URL (placeholder)
  4. **2024 Meetup Recordings** — 2024 playlist URL (placeholder)
  5. **YouTube Channel** — main channel URL

**Task 2: Integrate into `app/src/app/page.tsx`**
- Import `MediaSection` from the new component file
- Insert `<MediaSection />` after the "Other Upcoming Events" section and before
the Discord CTA section (approximately after line 216)
- No additional props or data wiring needed

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!