Repo Cards Open Source About Block for React

Edit REPOS at the top of the file: each has a name, a summary, a language, stars, forks, a contributors count, a few initials for the avatar stack and the latest version and release. The language's letter is the first letter of its name. The "used by" figure is USED_BY. Keep three: they sit side by side from lg.

The repository's name is a link inside the heading, and a pseudo-element stretches it over the whole cell, so the whole card is one click and one tab stop, with a focus ring around the cell. The stars and the avatar stack are not links, so nothing is nested inside another link.

The stars roll up from zero once, when the cell first scrolls into view, and show the final number at once with reduced motion. Counts are wrapped in bdi, so in a right-to-left layout "18,420" and the labels keep their order. The language is a letter in a circle with its name next to it, so it is never a colour code.

They are initials in a stack, hidden from assistive technology, with the real number written beside them ("212 contributors"). They are invented; replace the initials with your own contributors' (or drop the stack) when you use the block.

The three cells stack as full-width bands, each with a rule from rail to rail and a + mark where it meets the rails, and the "used by" line takes the last band. The description wraps, and the language, stars and forks wrap onto two lines when they must. Nothing scrolls sideways at 320 pixels.

The header and the cards fade up once on load, the star counts roll once on view, and the link's arrow nudges on hover. With reduced motion the entrance is off, the counts show their final value and the arrow stays still.