shadcn.io is not affiliated with official shadcn/ui
Podcast Show Notes About Block for Solid
Show notes for a podcast hosting company's own show: a scrolling vertical list of eight episodes at the start and the chosen episode's notes at the end, with a summary, chapters drawn to scale and listed with time stamps, and a Listen link.
Installation
Overview
Show notes for Solid with Ark UI, written for Offtape, a fictional audio hosting company, and its show Spare Reels. A vertical tab list of eight episodes sits at the start in a scroller: the number, the title, the guest and the length. A divider meets the band's top rule with a plus, and the chosen episode's notes fill the end: the title and guest, a summary, a bar of the chapters drawn to scale, the chapters as a list with their time stamps and lengths, and one Listen link as the block's Shine Button. There is no player and no playable media: the time stamps are notes. The notes of every episode are stacked unseen under the open ones, so choosing an episode never moves the block. On a phone the list becomes a row of chips above the notes. It's built from Tabs, Timecode Text, Shine Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For about pages and media pages that want to show what they publish. The episodes, guests and chapters are example data.
FAQ
How do I change the episodes?
They are EPISODES at the top of the file: a number, a title, a short name for the phone chips, a guest, the length in minutes, a summary and the chapters, each a start in seconds and a title. The chapter lengths, the bar's proportions and the "min" labels are worked out from those starts and the episode's length.
Can people play the episode here?
No, and the block doesn't pretend to. The time stamps are plain text in a Timecode Text that holds still, and the Listen link goes wherever you point it: your player, an RSS app or a hosted page. It is a link, so it works with no script.
How do the tabs behave with a keyboard?
They are the library's tabs in a vertical list: one tab stop, the up and down arrows move between episodes, and the notes follow. The list scrolls inside its own frame when there are more episodes than fit, and focusing a row scrolls it into view.
Why is there a hidden copy of every episode's notes?
Episodes have different amounts of text. An unseen copy of all of them sits in the same grid cell as the live notes, hidden from assistive technology and inert, so the cell is always as tall as the tallest and the page never jumps.