Related Posts Shared Topics Blog Block for Radix UI

Each related post lists the topics it shares in topics; the count, the dots and the badges are worked out from that and from the current post's CURRENT.topics. Keep the posts in order from most to least in common. A post that shares none would show three quiet words and "0 of 3 topics in common", so leave it out of the list.

Change CURRENT.topics. The dots follow its length, and each cell lists every one of the current post's topics, shared or not. Three is the sweet spot: more makes a cell's row of topics wrap.

A shared topic has a tick and a darker border, an unshared one has neither, and both have hidden text before them ("Shared:" and "Not shared:"). The dots beside the count are decorative; the count is written out in words.

One column, one cell under the other, each with the same content. The block is short: the three cells fit in about one and a half screens.

Yes. The cells run from the right, the ticks stay with their badges, and the count and dates are isolated with bdi.

One link per card keeps tabbing short and gives each post a clear name. The link's after: box stretches over the whole cell, so a click anywhere opens the post, and the focus ring is drawn around the cell.