{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "template-podcast", "title": "The Long Table: podcast", "author": "Ballmac ", "description": "A warm five-page podcast site built on a new audio player: a home with a latest-episode hero and a mini player, an episodes archive, an episode page with chapters and a transcript that follows playback, hosts and subscribe.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils", "https://ui.ballmac.com/r/audio-player.json", "https://ui.ballmac.com/r/copy-button.json", "https://ui.ballmac.com/r/media.json" ], "files": [ { "path": "registry/ballmac/components/templates/podcast/podcast-fonts.ts", "content": "// Ballmac UI: Podcast template fonts. https://ui.ballmac.com/templates/template-podcast\nimport { Nunito_Sans, Young_Serif } from \"next/font/google\"\n\nexport const podcastDisplay = Young_Serif({ variable: \"--podcast-display\", subsets: [\"latin\"], weight: \"400\", display: \"swap\", preload: false })\nexport const podcastSans = Nunito_Sans({ variable: \"--podcast-sans\", subsets: [\"latin\"], display: \"swap\", preload: false })\n", "type": "registry:component", "target": "@components/ballmac/templates/podcast/podcast-fonts.ts" }, { "path": "registry/ballmac/components/templates/podcast/podcast-data.ts", "content": "import type { MediaSource } from \"@/components/ballmac/media\"\n\n// Ballmac UI: Podcast sample content. https://ui.ballmac.com/templates/template-podcast\n\nexport type TranscriptLine = { t: number; who: string; text: string }\nexport type Episode = {\n n: number\n slug: string\n title: string\n guest: string\n guestRole: string\n date: string\n /** Length in seconds. */\n duration: number\n season: 1 | 2 | 3\n summary: string\n art: number\n /** Your own image instead of the painted art: an image URL (give it imageAlt), an object with alt text and a dark-mode file, or your own element. */\n image?: MediaSource\n /** Describes `image` when it is a plain URL. */\n imageAlt?: string\n chapters: { start: number; title: string }[]\n}\n\nexport const episodes: Episode[] = [\n { n: 42, slug: \"the-optimised-life\", title: \"The Optimised Life\", guest: \"Amara Okafor\", guestRole: \"Writer and technologist\", date: \"2026-09-29\", duration: 2460, season: 3, summary: \"A year without metrics, and what was left when she stopped counting. Plus: why the best dinner party has no agenda.\", art: 0, chapters: [{ start: 0, title: \"Cold open\" }, { start: 95, title: \"Why we stopped measuring\" }, { start: 612, title: \"The spreadsheet that ate a year\" }, { start: 1480, title: \"What replaced it\" }, { start: 2210, title: \"Listener questions\" }] },\n { n: 41, slug: \"bread-and-patience\", title: \"Bread and Patience\", guest: \"Tomás Reyes\", guestRole: \"Baker\", date: \"2026-09-15\", duration: 2920, season: 3, summary: \"A third-generation baker on sourdough, sleep and why nothing good happens quickly.\", art: 1, chapters: [{ start: 0, title: \"Welcome\" }, { start: 300, title: \"The starter\" }, { start: 1500, title: \"Night shifts\" }] },\n { n: 40, slug: \"the-unfinished-city\", title: \"The Unfinished City\", guest: \"Inês Marques\", guestRole: \"Editor\", date: \"2026-09-01\", duration: 2210, season: 3, summary: \"Scaffolding, cranes and the case for cities that are never done.\", art: 2, chapters: [{ start: 0, title: \"Welcome\" }, { start: 410, title: \"Rua da Madalena\" }] },\n { n: 39, slug: \"what-the-radio-knew\", title: \"What the Radio Knew\", guest: \"Elena Rossi\", guestRole: \"Culture editor\", date: \"2026-08-18\", duration: 1980, season: 3, summary: \"Why the old shipping forecast still feels like poetry.\", art: 3, chapters: [{ start: 0, title: \"Welcome\" }, { start: 600, title: \"The forecast\" }] },\n { n: 38, slug: \"a-year-offline\", title: \"A Year Offline\", guest: \"Dev Patel\", guestRole: \"Engineer\", date: \"2026-08-04\", duration: 3120, season: 3, summary: \"He deleted every feed and kept the group chats. Here is what changed.\", art: 4, chapters: [{ start: 0, title: \"Welcome\" }, { start: 800, title: \"Week three\" }] },\n { n: 37, slug: \"small-kitchens\", title: \"Small Kitchens\", guest: \"Mei Tanaka\", guestRole: \"Chef\", date: \"2026-07-21\", duration: 2640, season: 2, summary: \"Cooking for twelve on two burners, and why constraints taste good.\", art: 5, chapters: [{ start: 0, title: \"Welcome\" }, { start: 520, title: \"Two burners\" }] },\n { n: 36, slug: \"the-long-way-home\", title: \"The Long Way Home\", guest: \"Sasha Petrova\", guestRole: \"Travel writer\", date: \"2026-07-07\", duration: 2750, season: 2, summary: \"Trains, ferries and the pleasure of arriving slowly.\", art: 0, chapters: [{ start: 0, title: \"Welcome\" }] },\n { n: 35, slug: \"on-listening\", title: \"On Listening\", guest: \"Marcus Lindqvist\", guestRole: \"Therapist\", date: \"2026-06-23\", duration: 2300, season: 2, summary: \"What a good listener actually does, and how to become one.\", art: 2, chapters: [{ start: 0, title: \"Welcome\" }] },\n]\n\nexport const transcript: TranscriptLine[] = [\n { t: 0, who: \"Nora\", text: \"Welcome to The Long Table, the show where we sit down for a long dinner and talk about whatever comes up.\" },\n { t: 14, who: \"Sam\", text: \"Tonight it's Amara Okafor, who spent a year without measuring anything. No steps, no calories, no inbox zero.\" },\n { t: 31, who: \"Nora\", text: \"Which sounds either wonderful or like a recipe for disaster.\" },\n { t: 40, who: \"Amara\", text: \"Both, honestly. The first month I felt like I'd lost my map. I kept reaching for numbers the way you reach for a phone you've left in another room.\" },\n { t: 63, who: \"Sam\", text: \"What were you actually measuring before? Walk us through a normal day.\" },\n { t: 76, who: \"Amara\", text: \"Everything. Sleep, steps, tasks closed, words written, minutes meditated. I had a dashboard for my own life and it had a streak counter.\" },\n { t: 99, who: \"Nora\", text: \"A streak counter for meditating. That's the part that gets me.\" },\n { t: 108, who: \"Amara\", text: \"I know. I once meditated in a taxi to keep a streak alive. I wasn't calm. I was anxious about the streak.\" },\n { t: 126, who: \"Sam\", text: \"So what made you stop?\" },\n { t: 132, who: \"Amara\", text: \"A very ordinary Tuesday. I realised I couldn't remember anything about the week except the numbers.\" },\n]\n\nexport const getEpisode = (slug: string) => episodes.find((e) => e.slug === slug) ?? episodes[0]\nconst fmt = new Intl.DateTimeFormat(\"en-US\", { month: \"long\", day: \"numeric\", year: \"numeric\", timeZone: \"UTC\" })\nexport const formatDate = (iso: string) => fmt.format(new Date(iso))\nexport const minutes = (s: number) => `${Math.round(s / 60)} min`\n", "type": "registry:component", "target": "@components/ballmac/templates/podcast/podcast-data.ts" }, { "path": "registry/ballmac/components/templates/podcast/podcast-theme.tsx", "content": "// Ballmac UI: Podcast template shell. https://ui.ballmac.com/templates/template-podcast\n\"use client\"\n\nimport * as React from \"react\"\nimport { Menu, Rss, X } from \"lucide-react\"\n\nimport { AudioPlayer } from \"@/components/ballmac/audio-player\"\nimport { type Episode } from \"@/components/ballmac/templates/podcast/podcast-data\"\nimport { podcastDisplay, podcastSans } from \"@/components/ballmac/templates/podcast/podcast-fonts\"\nimport { cn } from \"@/lib/utils\"\nimport { Media, type MediaSource } from \"@/components/ballmac/media\"\n\ntype PodcastPage = \"home\" | \"episodes\" | \"episode\" | \"hosts\" | \"subscribe\"\ntype PodcastHrefs = Record\n\nconst defaultHrefs: PodcastHrefs = { home: \"/podcast\", episodes: \"/podcast/episodes\", episode: \"/podcast/episodes/the-optimised-life\", hosts: \"/podcast/hosts\", subscribe: \"/podcast/subscribe\" }\n\n/** The Long Table's palette: warm cream and aubergine ink with amber candlelight. Dark mode is the same table after dark. */\nconst podcastCss = `\n.podcast-theme,body:not(:has([data-gallery])):has(.podcast-theme){--background:oklch(0.972 0.02 70);--foreground:oklch(0.24 0.06 340);--card:oklch(0.99 0.012 70);--card-foreground:oklch(0.24 0.06 340);--popover:oklch(0.99 0.012 70);--popover-foreground:oklch(0.24 0.06 340);--primary:oklch(0.3 0.08 340);--primary-foreground:oklch(0.975 0.02 70);--secondary:oklch(0.945 0.03 68);--secondary-foreground:oklch(0.24 0.06 340);--muted:oklch(0.945 0.03 68);--muted-foreground:oklch(0.45 0.05 340);--accent:oklch(0.93 0.04 66);--accent-foreground:oklch(0.24 0.06 340);--border:oklch(0.24 0.06 340 / 14%);--input:oklch(0.24 0.06 340 / 22%);--ring:oklch(0.45 0.16 345);--surface:oklch(0.955 0.025 68);--destructive:oklch(0.52 0.21 27);--chart-1:oklch(0.78 0.16 70);--chart-2:oklch(0.45 0.16 345);--chart-3:oklch(0.55 0.1 160);--chart-4:oklch(0.68 0.15 35);--chart-5:oklch(0.42 0.1 280);--podcast-on-amber:oklch(0.24 0.06 340);--radius:1rem}\n.dark .podcast-theme,.dark body:not(:has([data-gallery])):has(.podcast-theme){--background:oklch(0.18 0.04 335);--foreground:oklch(0.95 0.025 70);--card:oklch(0.22 0.045 335);--card-foreground:oklch(0.95 0.025 70);--popover:oklch(0.24 0.047 335);--popover-foreground:oklch(0.95 0.025 70);--primary:oklch(0.95 0.025 70);--primary-foreground:oklch(0.22 0.05 340);--secondary:oklch(0.27 0.05 335);--secondary-foreground:oklch(0.95 0.025 70);--muted:oklch(0.26 0.05 335);--muted-foreground:oklch(0.74 0.04 60);--accent:oklch(0.3 0.055 335);--accent-foreground:oklch(0.95 0.025 70);--border:oklch(1 0 0 / 11%);--input:oklch(1 0 0 / 16%);--ring:oklch(0.78 0.16 70);--surface:oklch(0.2 0.042 335);--destructive:oklch(0.7 0.19 27);--chart-1:oklch(0.8 0.16 72);--chart-2:oklch(0.76 0.13 350);--chart-3:oklch(0.78 0.11 160);--chart-4:oklch(0.74 0.14 38);--chart-5:oklch(0.74 0.1 285)}\nbody:not(:has([data-gallery])):has(.podcast-theme){font-family:var(--podcast-sans),ui-sans-serif,system-ui,sans-serif}\n`\n\nconst display = \"[font-family:var(--podcast-display),ui-serif,Georgia,serif] font-normal tracking-[-0.01em]\"\n\n/** Cover art: a table seen from above, in the show's colours. */\nfunction ShowArt({ variant, className, image, imageAlt }: { variant: number; className?: string; image?: MediaSource; imageAlt?: string }) {\n const v = ((variant % 6) + 6) % 6\n if (image) return \n const bg = [\"bg-chart-2\", \"bg-chart-1\", \"bg-chart-4\", \"bg-chart-3\", \"bg-chart-5\", \"bg-primary\"][v]\n return (\n
\n
\n
\n
\n
\n
\n {[\"42\", \"41\", \"40\", \"39\", \"38\", \"37\"][v]}\n
\n )\n}\n\ntype Ctx = { now: Episode | null; play: (e: Episode) => void }\nconst PodcastContext = React.createContext({ now: null, play: () => {} })\n/** The episode in the mini player and a way to start one. Use it inside a PodcastShell. */\nfunction usePodcast() {\n return React.useContext(PodcastContext)\n}\n\nconst links: { key: PodcastPage; label: string }[] = [\n { key: \"episodes\", label: \"Episodes\" },\n { key: \"hosts\", label: \"Hosts\" },\n { key: \"subscribe\", label: \"Subscribe\" },\n]\n\ntype PodcastShellProps = React.ComponentProps<\"div\"> & {\n /** The page being shown, so its nav link is marked current. */\n page: PodcastPage\n /** Override where pages live (used by previews). */\n hrefs?: Partial\n}\n\n/** The Long Table's frame: a warm header, a footer with platforms and a mini player that appears when you press play on a list. */\nfunction PodcastShell({ page, hrefs: overrides, className, style, children, ...props }: PodcastShellProps) {\n const hrefs = { ...defaultHrefs, ...overrides }\n const [open, setOpen] = React.useState(false)\n const [now, setNow] = React.useState(null)\n React.useEffect(() => {\n const classes = [podcastDisplay.variable, podcastSans.variable].filter(Boolean)\n document.body.classList.add(...classes)\n return () => document.body.classList.remove(...classes)\n }, [])\n const active = page === \"episode\" ? \"episodes\" : page\n const ctx = React.useMemo(() => ({ now, play: setNow }), [now])\n return (\n \n \n \n
\n
\n \n \n The Long Table\n \n \n \n
\n {open && }\n
\n {children}\n
\n
\n

The Long Table

A long dinner and a good conversation, every other Tuesday. Hosted by Nora Vale and Sam Okoye.

\n

Listen

    {[\"Apple Podcasts\", \"Spotify\", \"YouTube\", \"RSS feed\"].map((p) =>
  • {p}
    • )}
\n

The show

    {[[\"Episodes\", hrefs.episodes], [\"Hosts\", hrefs.hosts], [\"Sponsor\", hrefs.subscribe], [\"Contact\", hrefs.hosts]].map(([l, h]) =>
  • {l}
    • )}
\n
\n

© 2026 The Long Table. Recorded in a very small kitchen.

\n
\n {now && (\n
\n \n \n
\n )}\n
\n \n )\n}\n\nexport { PodcastShell, ShowArt, defaultHrefs as podcastDefaultHrefs, display as podcastDisplayClass, usePodcast, type PodcastHrefs, type PodcastPage, type PodcastShellProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/podcast/podcast-theme.tsx" }, { "path": "registry/ballmac/components/templates/podcast/podcast-home.tsx", "content": "// Ballmac UI: Podcast home page. https://ui.ballmac.com/templates/template-podcast\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, Check, Play } from \"lucide-react\"\n\nimport { episodes, formatDate, minutes } from \"@/components/ballmac/templates/podcast/podcast-data\"\nimport { PodcastShell, ShowArt, podcastDisplayClass, usePodcast, type PodcastHrefs } from \"@/components/ballmac/templates/podcast/podcast-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst eyebrow = \"text-chart-2 text-xs font-extrabold tracking-[0.14em] uppercase\"\n\nfunction PlayButton({ ep, big }: { ep: (typeof episodes)[number]; big?: boolean }) {\n const { play, now } = usePodcast()\n const on = now?.slug === ep.slug\n return (\n \n )\n}\n\nfunction Subscribe() {\n const [email, setEmail] = React.useState(\"\")\n const [error, setError] = React.useState(\"\")\n const [done, setDone] = React.useState(false)\n return done ? (\n

Saved a seat for you. See you Tuesday.

\n ) : (\n
{ e.preventDefault(); if (!/^\\S+@\\S+\\.\\S+$/.test(email.trim())) return setError(\"Enter an email like you@example.com.\"); setError(\"\"); setDone(true) }} className=\"flex w-full flex-col gap-2 sm:flex-row\">\n \n setEmail(e.target.value)} aria-invalid={!!error} aria-describedby={error ? \"pc-err\" : undefined} placeholder=\"you@example.com\" className=\"bg-background text-foreground focus-visible:ring-ring/50 placeholder:text-muted-foreground aria-[invalid=true]:border-destructive h-12 flex-1 rounded-full border px-5 outline-none focus-visible:ring-[3px]\" />\n \n
\n {error &&

{error}

}\n
\n )\n}\n\ntype PodcastHomeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Podcast home page: the latest episode with a play button, the recent list, the hosts and a show-notes sign-up. The mini player appears when you play. */\nfunction PodcastHome({ hrefs, ...props }: PodcastHomeProps) {\n const [latest, ...rest] = episodes\n const ep = hrefs?.episode ?? \"/podcast/episodes/the-optimised-life\"\n return (\n \n
\n
\n
\n

New episode · {formatDate(latest.date)}

\n

Long dinners. Good questions. No agenda.

\n

The Long Table is a podcast recorded at an actual table, every other Tuesday, with someone worth listening to for an hour.

\n
\n \n Show notes \n
\n
    {[\"Apple Podcasts\", \"Spotify\", \"YouTube\", \"RSS\"].map((p) =>
  • {p}
    • )}
\n
\n \n \n Episode {latest.n}: {latest.title}\n \n
\n\n
\n \n \n
\n\n
\n
\n

Two friends, one table.

\n

Nora Vale is a food writer. Sam Okoye is a former radio producer. They started the show to have the long conversations they kept promising each other.

\n Meet the hosts \n
\n
{[[\"NV\", \"bg-chart-4\"], [\"SO\", \"bg-chart-3\"]].map(([i, c], idx) =>
{i}
)}
\n
\n\n
\n
\n

Show notes, in your inbox, before the episode.

\n

One email every other Tuesday: the guest, the three best ideas and the recipe we made.

\n
\n
\n
\n
\n \n )\n}\n\nexport { PodcastHome, PlayButton, type PodcastHomeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/podcast/podcast-home.tsx" }, { "path": "registry/ballmac/components/templates/podcast/podcast-episodes.tsx", "content": "// Ballmac UI: Podcast episodes page. https://ui.ballmac.com/templates/template-podcast\n\"use client\"\n\nimport * as React from \"react\"\nimport { Search } from \"lucide-react\"\n\nimport { episodes, formatDate, minutes } from \"@/components/ballmac/templates/podcast/podcast-data\"\nimport { PlayButton } from \"@/components/ballmac/templates/podcast/podcast-home\"\nimport { PodcastShell, ShowArt, podcastDisplayClass, type PodcastHrefs } from \"@/components/ballmac/templates/podcast/podcast-theme\"\nimport { cn } from \"@/lib/utils\"\n\ntype Season = \"All\" | \"3\" | \"2\"\n\ntype PodcastEpisodesProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Podcast episodes page: search, a season filter and a sort, with a play button on every row. */\nfunction PodcastEpisodes({ hrefs, ...props }: PodcastEpisodesProps) {\n const [query, setQuery] = React.useState(\"\")\n const [season, setSeason] = React.useState(\"All\")\n const [sort, setSort] = React.useState<\"new\" | \"long\">(\"new\")\n const q = query.trim().toLowerCase()\n const list = episodes\n .filter((e) => (season === \"All\" || String(e.season) === season) && (!q || [e.title, e.guest, e.summary].join(\" \").toLowerCase().includes(q)))\n .sort((a, b) => (sort === \"new\" ? b.n - a.n : b.duration - a.duration))\n const ep = hrefs?.episode ?? \"/podcast/episodes/the-optimised-life\"\n return (\n \n
\n

Episodes

\n

Every conversation, newest first. Search a guest or an idea.

\n
\n
\n \n setQuery(e.target.value)} placeholder=\"Search episodes\" className=\"bg-card focus-visible:ring-ring/50 placeholder:text-muted-foreground h-11 w-full rounded-full border pe-4 ps-11 outline-none focus-visible:ring-[3px]\" />\n
\n
\n {([\"All\", \"3\", \"2\"] as const).map((s) => )}\n
\n \n
\n

{list.length} episodes

\n {list.length === 0 ? (\n

No episodes found

Try a different guest, or clear the filters.

\n ) : (\n \n )}\n
\n \n )\n}\n\nexport { PodcastEpisodes, type PodcastEpisodesProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/podcast/podcast-episodes.tsx" }, { "path": "registry/ballmac/components/templates/podcast/podcast-episode.tsx", "content": "// Ballmac UI: Podcast episode page. https://ui.ballmac.com/templates/template-podcast\n\"use client\"\n\nimport * as React from \"react\"\nimport { Search } from \"lucide-react\"\n\nimport { AudioPlayer, formatTime } from \"@/components/ballmac/audio-player\"\nimport { episodes, formatDate, getEpisode, minutes, transcript } from \"@/components/ballmac/templates/podcast/podcast-data\"\nimport { PodcastShell, ShowArt, podcastDisplayClass, type PodcastHrefs } from \"@/components/ballmac/templates/podcast/podcast-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst eyebrow = \"text-chart-2 text-xs font-extrabold tracking-[0.14em] uppercase\"\n\ntype PodcastEpisodeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial; slug?: string }\n\n/** The Podcast episode page: a player whose chapters and transcript follow along, a searchable transcript you can click to seek, show notes and more episodes. */\nfunction PodcastEpisode({ hrefs, slug = \"the-optimised-life\", ...props }: PodcastEpisodeProps) {\n const ep = getEpisode(slug)\n const [time, setTime] = React.useState(0)\n const [follow, setFollow] = React.useState(true)\n const [query, setQuery] = React.useState(\"\")\n const box = React.useRef(null)\n const q = query.trim().toLowerCase()\n const current = [...transcript].reverse().find((l) => time >= l.t)\n const matches = q ? transcript.filter((l) => l.text.toLowerCase().includes(q)).length : 0\n\n // Keep the spoken line in view when following along.\n React.useEffect(() => {\n if (!follow || !box.current) return\n const el = box.current.querySelector(\"[data-current='true']\")\n const parent = box.current.parentElement\n if (el && parent && typeof parent.scrollTo === \"function\") parent.scrollTo({ top: Math.max(0, el.offsetTop - 96), behavior: \"smooth\" })\n }, [current?.t, follow])\n\n const marks = (text: string) => {\n if (!q) return text\n const i = text.toLowerCase().indexOf(q)\n return i < 0 ? text : <>{text.slice(0, i)}{text.slice(i, i + q.length)}{text.slice(i + q.length)}\n }\n\n return (\n \n
\n

Season {ep.season} · Episode {ep.n}

\n

{ep.title}

\n

{ep.summary}

\n

{formatDate(ep.date)} · {minutes(ep.duration)} · with {ep.guest}

\n\n
\n } />\n
\n\n
\n
\n
\n

Transcript

\n \n
\n
\n \n setQuery(e.target.value)} placeholder=\"Search the transcript\" className=\"bg-card focus-visible:ring-ring/50 placeholder:text-muted-foreground h-11 w-full rounded-full border pe-4 ps-11 outline-none focus-visible:ring-[3px]\" />\n
\n

{q ? `${matches} ${matches === 1 ? \"match\" : \"matches\"}` : \"Click any line to jump to it.\"}

\n
\n
    \n {transcript.map((l) => {\n const on = current?.t === l.t\n return (\n
  1. \n \n
    2. \n )\n })}\n
\n
\n
\n\n \n
\n\n
\n

More conversations

\n \n
\n
\n \n )\n}\n\nexport { PodcastEpisode, type PodcastEpisodeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/podcast/podcast-episode.tsx" }, { "path": "registry/ballmac/components/templates/podcast/podcast-hosts.tsx", "content": "// Ballmac UI: Podcast hosts page. https://ui.ballmac.com/templates/template-podcast\n\"use client\"\n\nimport * as React from \"react\"\nimport { Mail } from \"lucide-react\"\n\nimport { PodcastShell, podcastDisplayClass, type PodcastHrefs } from \"@/components/ballmac/templates/podcast/podcast-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst hosts = [\n { name: \"Nora Vale\", role: \"Host and food writer\", bio: \"Nora has written about food for fifteen years and cooks every dinner we record. She believes most arguments end better with a second helping.\", tone: \"bg-chart-4\", initials: \"NV\", fact: \"Cannot eat a meal without asking where the recipe came from.\" },\n { name: \"Sam Okoye\", role: \"Host and producer\", bio: \"Sam spent a decade making radio before the long table. He asks the second question, the one after the polite answer.\", tone: \"bg-chart-3\", initials: \"SO\", fact: \"Still keeps a drawer of cassette tapes he will never digitise.\" },\n]\nconst guests = [\"Amara Okafor\", \"Tomás Reyes\", \"Inês Marques\", \"Elena Rossi\", \"Dev Patel\", \"Mei Tanaka\", \"Sasha Petrova\", \"Marcus Lindqvist\", \"Priya Raman\", \"Colm Brennan\", \"Jonas Eklund\", \"Yuki Tanaka\"]\n\ntype PodcastHostsProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Podcast hosts page: two hosts with bios, a wall of past guests and a way to write in. */\nfunction PodcastHosts({ hrefs, ...props }: PodcastHostsProps) {\n return (\n \n
\n

Meet the hosts

\n

Two friends, one table, and a recording light that is mostly a candle.

\n
    \n {hosts.map((h) => (\n
  • \n
    {h.initials}
    \n

    {h.name}

    \n

    {h.role}

    \n

    {h.bio}

    \n

    Fun fact: {h.fact}

    \n
    • \n ))}\n
\n
\n

Everyone who sat down

\n
    {guests.map((g) =>
  • {g}
    • )}
\n
\n
\n

Write to the table

\n

Suggest a guest, argue with an episode or send us a recipe. We read every message and answer the good questions on air.

\n hello@longtable.example\n
\n
\n \n )\n}\n\nexport { PodcastHosts, type PodcastHostsProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/podcast/podcast-hosts.tsx" }, { "path": "registry/ballmac/components/templates/podcast/podcast-subscribe.tsx", "content": "// Ballmac UI: Podcast subscribe page. https://ui.ballmac.com/templates/template-podcast\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Heart } from \"lucide-react\"\n\nimport { CopyButton } from \"@/components/ballmac/copy-button\"\nimport { PodcastShell, podcastDisplayClass, type PodcastHrefs } from \"@/components/ballmac/templates/podcast/podcast-theme\"\nimport { cn } from \"@/lib/utils\"\n\nconst platforms = [[\"Apple Podcasts\", \"Open in Podcasts\"], [\"Spotify\", \"Follow on Spotify\"], [\"YouTube\", \"Watch the full dinners\"], [\"Overcast\", \"Subscribe\"], [\"Pocket Casts\", \"Subscribe\"], [\"Amazon Music\", \"Listen\"]]\nconst tiers = [\n { id: \"guest\", name: \"Guest\", price: 5, perks: [\"Ad-free episodes\", \"Bonus recipe card each episode\"] },\n { id: \"regular\", name: \"Regular\", price: 10, perks: [\"Everything in Guest\", \"The unedited hour after each recording\", \"Name in the credits\"], featured: true },\n { id: \"host\", name: \"Host the dinner\", price: 25, perks: [\"Everything in Regular\", \"Vote on the next guest\", \"A yearly letter from Nora and Sam\"] },\n]\n\ntype PodcastSubscribeProps = React.ComponentProps<\"div\"> & { hrefs?: Partial }\n\n/** The Podcast subscribe page: every platform, the RSS feed to copy, and three ways to support the show. */\nfunction PodcastSubscribe({ hrefs, ...props }: PodcastSubscribeProps) {\n const [tier, setTier] = React.useState(\"regular\")\n return (\n \n
\n

Pull up a chair

\n

Follow The Long Table wherever you listen. New episodes land every other Tuesday at 6am.

\n \n
\n

RSS feed

https://feeds.longtable.example/the-long-table.xml

\n \n
\n\n
\n

Keep the candle lit

\n

The show is made by three people and paid for by listeners. No sponsors in the middle of the conversation, ever.

\n
\n {tiers.map((t) => {\n const on = tier === t.id\n return (\n \n )\n })}\n
\n Support at ${tiers.find((t) => t.id === tier)?.price} a month\n
\n
\n \n )\n}\n\nexport { PodcastSubscribe, type PodcastSubscribeProps }\n", "type": "registry:component", "target": "@components/ballmac/templates/podcast/podcast-subscribe.tsx" }, { "path": "registry/ballmac/app/podcast/page.tsx", "content": "// Ballmac UI: Podcast template route. https://ui.ballmac.com/templates/template-podcast\nimport type { Metadata } from \"next\"\n\nimport { PodcastHome } from \"@/components/ballmac/templates/podcast/podcast-home\"\n\nexport const metadata: Metadata = {\n title: \"The Long Table: a podcast recorded at a real table\",\n description: \"Long dinners, good questions, no agenda. New episodes every other Tuesday.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/podcast/page.tsx" }, { "path": "registry/ballmac/app/podcast/episodes/page.tsx", "content": "// Ballmac UI: Podcast template route. https://ui.ballmac.com/templates/template-podcast\nimport type { Metadata } from \"next\"\n\nimport { PodcastEpisodes } from \"@/components/ballmac/templates/podcast/podcast-episodes\"\n\nexport const metadata: Metadata = {\n title: \"Episodes · The Long Table\",\n description: \"Every conversation, newest first.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/podcast/episodes/page.tsx" }, { "path": "registry/ballmac/app/podcast/episodes/[slug]/page.tsx", "content": "// Ballmac UI: Podcast template route. https://ui.ballmac.com/templates/template-podcast\nimport type { Metadata } from \"next\"\n\nimport { PodcastEpisode } from \"@/components/ballmac/templates/podcast/podcast-episode\"\n\nexport const metadata: Metadata = {\n title: \"The Optimised Life · The Long Table\",\n description: \"A year without metrics, and what was left when she stopped counting.\",\n}\n\nexport default async function Page({ params }: { params: Promise<{ slug: string }> }) {\n const { slug } = await params\n return \n}\n", "type": "registry:page", "target": "app/podcast/episodes/[slug]/page.tsx" }, { "path": "registry/ballmac/app/podcast/hosts/page.tsx", "content": "// Ballmac UI: Podcast template route. https://ui.ballmac.com/templates/template-podcast\nimport type { Metadata } from \"next\"\n\nimport { PodcastHosts } from \"@/components/ballmac/templates/podcast/podcast-hosts\"\n\nexport const metadata: Metadata = {\n title: \"Hosts · The Long Table\",\n description: \"Meet Nora Vale and Sam Okoye.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/podcast/hosts/page.tsx" }, { "path": "registry/ballmac/app/podcast/subscribe/page.tsx", "content": "// Ballmac UI: Podcast template route. https://ui.ballmac.com/templates/template-podcast\nimport type { Metadata } from \"next\"\n\nimport { PodcastSubscribe } from \"@/components/ballmac/templates/podcast/podcast-subscribe\"\n\nexport const metadata: Metadata = {\n title: \"Subscribe · The Long Table\",\n description: \"Follow the show on any platform, or support it directly.\",\n}\n\nexport default function Page() {\n return \n}\n", "type": "registry:page", "target": "app/podcast/subscribe/page.tsx" } ], "meta": { "schema": 1, "tier": "free", "tags": [ "template", "podcast", "audio", "episodes", "transcript", "player", "show notes" ], "version": "1.0.0", "updated": "2026-10-01", "ai": { "summary": "Installs a five-page podcast site on the audio-player component. Change episodes in podcast-data.ts, add src URLs for real audio, and edit podcastCss for the palette.", "whenToUse": [ "Podcasts, audio shows and interview series", "Any site where a transcript should follow audio playback" ], "whenNotToUse": [ "Music streaming with playlists and queues" ], "composesWith": [ "audio-player", "slider", "scroll-progress" ], "a11y": [ { "keys": "Click or Enter on a transcript line", "action": "Seeks the player to that line" }, { "keys": "Enter / Space on a chapter", "action": "Jumps to the start of the chapter" } ], "customization": [ "Add src to AudioPlayer in podcast-episode.tsx and podcast-theme.tsx", "Edit podcastCss for the light and dark palettes", "Replace ShowArt with cover images" ] }, "examples": [ "template-podcast-demo", "template-podcast-episodes", "template-podcast-episode", "template-podcast-hosts", "template-podcast-subscribe" ], "url": "https://ui.ballmac.com/components/template-podcast" }, "docs": "Pages are at /podcast, /podcast/episodes, /podcast/episodes/[slug], /podcast/hosts and /podcast/subscribe. Episodes and the transcript live in podcast-data.ts; pass a real src to AudioPlayer in podcast-episode.tsx to play audio (without one it runs a silent demo).", "categories": [ "templates" ], "type": "registry:block" }