Latest Posts Blog Block for React

In one useState array of post ids on the page, so a reload brings back the starting state (the oldest post read, the other three unread). Opening a post marks it read; Mark all as read marks all four. To keep the state, store the ids in localStorage or your API and pass them in as the starting value.

The count is a role="status" region, so a change is announced politely: "3 new" becomes "All caught up". Each row also carries a hidden "Unread" or "Read" before its details, because a dot is not text. The dots and the "New" mark are drawn, and their space is always reserved, so marking a post read never moves the layout.

No: it pulses three times when the page loads and then rests, and with reduced motion it doesn't pulse at all. Nothing loops.

Edit LEAD and ROWS at the top of the file. Each post has an id, a title, an author, a category, an ISO date, a reading time in minutes and an href; the lead also has a dek. START_READ lists the ids that begin as read. Dates are fixed and formatted in UTC.

The count and the button sit under the heading, the lead's title wraps in large type, and each row stacks its category, date and reading time under its title. The block is about one and a half screens and nothing scrolls sideways at 320 pixels.

Yes. The rows, the dots and the count mirror, and the numbers in the count, the dates and the reading times are isolated with bdi.

It toggles between Mark all as read and Mark all as unread. The button takes onClick.