Pagination Blog Block for React

Edit POSTS at the top of the file, newest first, and PER_PAGE. The page numbers, the "Showing 5–8 of 12" line and the last page are derived from the array, so twelve posts at four a page give three numbers and thirteen would give four, the last with one row. Each post is a title, a dek, an author, a category, a date as an ISO string, minutes and an href.

They are links to ?page=2 and so on, and the click is handled in place: the rows swap without a reload. To page on the server, drop the handlers and read page from the address in your route, or swap the state for your router's search params. Each number is an a rendered through the button's render, with an href and an onClick that stops the navigation and sets the page.

The list is drawn twice in one grid cell: the current page on top, and an unseen copy of all three pages underneath, hidden from assistive technology and the keyboard. The cell is as tall as the tallest page, so the pager under it stays where you clicked, even when one page has shorter rows. With a thirteenth post, the last page has one row and still takes the full height.

The pager is a labelled navigation ("Archive pages") with a list of links; the current page is marked with aria-current="page". Tab moves through Previous, the numbers and Next, and Enter changes the page. At the first page Previous, and at the last page Next, is dimmed and leaves the tab order. The line under the rows is a polite status, so a screen reader hears "Showing 5–8 of 12" after a change. Each row is one link, its title.

Each thumbnail is the line pattern its post's category owns (contours, dots, rings, stripes), drawn in two weights of the foreground colour, so the category reads before the badge does. All colours are your theme's tokens, and thumbnails are decoration, hidden from assistive technology. To use photos, put an img with size-full object-cover in Thumb.

Yes. The rows and the pager mirror, the Previous and Next arrows flip, and the range, dates and reading times are isolated with bdi, so "5–8 of 12" keeps its order. The thumbnails are artwork and never mirror.