Post Rows With Sidebar Blog Block for React

The posts are POSTS, with a route for each cover (three stops and where the river crosses); the sidebar's lists are TOPICS, POPULAR and ARCHIVE. Counts are written in the data, so keep them in step with your real archive; nothing here is computed from the posts.

Each cover is one small SVG: a faint grid, a river line, a dashed route through three stops (the first hollow, the last solid) and a scale bar. Every stroke is a hairline in a theme token and the whole cover is aria-hidden artwork; a right-to-left page never mirrors it, as a map wouldn't be.

The title's link covers the whole row, so a click anywhere opens the post and a screen reader hears one name per post. The sidebar's rows are ordinary links. The category and the byline are plain text.

The block's column is the grid, and the two parts carry the padding, so the divider (a start border on the sidebar) runs from the page's top rule to the foot with a plus mark where it meets the rule. Below lg that border is replaced by a rule between the posts and the sidebar.

The rows keep their route map at the start at a smaller size, the dek is hidden below sm, and the sidebar stacks under the list with the topics, the numbered list and the archive one after another. Nothing scrolls sideways at 320 pixels.

Yes. The map moves to the start of the row, which is the right-hand side, the sidebar goes to the left, the divider stays between them, and counts and dates are isolated with bdi.