Blog 108 block design & features
Blog108 is a seasonal series index built with the shadcn/ui Badge component. A header row puts an uppercase label, a large heading, and a description on the left and the author's avatar, name, and total reading time on the right. Below it, each season gets its own band with a heading, a period such as Spring 2026, and an episode count, followed by a grid of square image cards showing the episode number, read time, linked title, and publish date.
Status is carried by tone rather than chrome. Episodes already read turn grey, with a desaturated image, a muted title, and a small check, while the next episode carries an Up next badge and everything still to read stays at full contrast. Unpublished episodes keep their image and title but drop their links and show a coming date. Seasons are divided by a single hairline, and the cards are flat with rounded corners and no borders.
The result feels like a podcast or streaming show applied to writing, which is an uncommon way to present a blog. It is image-driven and content-heavy: every episode needs a square photo, a title, a date, a read time, and a status, and the block reads best with two or three seasons.
The episode grid drops to two columns on tablets and one on phones, and the author byline moves under the heading.