Blog 109 block design & features
Blog109 is a single-row series overview built with the Shadcn UI Button component. A header row holds an uppercase label with the part count, a large heading, and a description on the left, and a parts-read count, total reading time, and a continue button that names the next part on the right. Below it, eight parts sit in a four-column grid of square image cards, each with a two-digit number, publish date, read time, and linked title.
Each card starts with a thin bar, and together the bars read as one segmented progress strip across the series. Read parts have a grey segment, a desaturated image, and a muted title, the current part has a solid foreground segment, and the rest stay as faint hairline segments. Upcoming parts keep their image but lose their links. The type is compact and the cards are flat.
This is a weekly-cadence take on a series index, closer to a course tracker than a blog grid. It is moderately complex and image-driven, needing a square photo, a short title, a date, and a status for every part, and it looks best with four or eight parts so the strip fills complete rows.
On phones the grid becomes two columns and the progress strip wraps with it.