The 19 components with variants have 51 variants in total. Each site picks its own so that ten sites look different from one another. There are two ways: write variants in the site config (site.json), for example { "PostCard": "number" }, or write nothing and let it be chosen automatically from the site name. A site always gets the same look, and adding or removing a site never changes another site’s look. Writing a component or variant name that does not exist stops the build.
The automatic pick has one rule. If the home head is the topic-shortcut finder, and the topic list below becomes index (also shortcuts), the same list appears twice, as in the demo above. So the automatic pick switches the topic list to sections in that case. Reading the source shows this fix only applies to the automatic pick: if you write both variants yourself in site.json, it does not run, so avoid that pair yourself.
For the current ten sites, the six components that set the first impression (header, home head, post head, post card, topic list, summary) differ in at least three places between any two sites. variants.test.ts checks this, and changing the underlying value changes every site, so it is not touched casually.
When to use
Think of it when creating a new site, or when deliberately changing one site’s look. Afterwards, check that no content shows up twice.