Tag Cloud Blog Block for React

Edit POSTS at the top of the file, newest first: each post lists its tags by name. The tag list, the counts, the five sizes and the results are all derived, so a new tag is simply a new name on a post. The sizes are chosen by where a tag's count falls between the least and the most used tags.

The counts are spread across five equal steps between the smallest and the largest, and each step has a type size and a weight written out in weightOf. A tag used once is the smallest, the most used is the largest and heaviest. The size is never the only signal: the count follows each name, and a screen reader hears "Safety, 5 posts".

The tags are one single-choice group named "Tags": Tab reaches it, the arrow keys move between tags, and Space or Enter chooses one; choosing the pressed tag again clears it, as does the Clear button. The line above the results is a polite status, so a screen reader hears how many posts the tag has, and the results are a list named for the tag. Each result is one link, its title.

So that choosing a tag never moves anything: the panel is as tall as three result rows plus its header whether it shows three posts, one, or the hint to choose a tag. A tag with fewer than three posts leaves empty space under its rows. Titles clamp to two lines to keep rows the same height.

The cloud comes first, wrapping to the width of the screen, then the results panel under a hairline. Both together fit in about one and a half screens. Nothing scrolls sideways at 320 pixels.

Yes. The cloud, the divider and the panel mirror, and counts, dates and reading times are isolated with bdi.

Clear is a plain button with an onClick, and the tags are Toggle Group items with a value.