Blog 99 block design & features
Blog99 is a series overview built with Shadcn UI Progress, Badge, and Button components. A sticky column on the left holds an uppercase series label with the part count, a large heading, a description, the author's avatar and name with total reading time, a progress bar with a "2 of 6 parts read" caption, and a continue reading button that links to the next unread part. On the right, each chapter sits in its own row with a square cover image beside the part number, read time, linked title, and a two-line summary.
Rows are separated by hairline dividers rather than joined by a timeline. Finished parts are greyed out with a desaturated image and carry a small check and "Read" label, and the current part carries an "Up next" badge. Unpublished parts stay full color but lose their links and list a coming soon date in place of a read cue. There are no card surfaces.
This pattern reads like a book's table of contents or a course syllabus, and it makes long tutorial series feel finite. Complexity is moderate and content-driven: each chapter needs a title, summary, square image, read time, and a status, and the progress bar and continue target are calculated from those statuses.
Below large screens the intro column stops being sticky and stacks above the chapter list.