feat(docs): fill the landing canvas with every example and turn chart cards through their charts by onmax · Pull Request #103 · onmax/comark-plugins

onmax · 2026-10-22T15:36:40Z

Stacked on #100 (fix/landing-demo-shift). Retarget it to main once #100 merges.

What changes

Every example. The canvas holds the landing's demos plus every package page's ::examples: 45 cards, up from 15. They're in a fixed shuffle with no two of one package in a row. The column step is picked so copies of a card sit as far apart as possible across the columns one screen holds, so no card shows twice on screen. Charts are the exception: instead of a card per example, the two chart cards cycle through all of them (see "Charts" below). An example the landing already shows, such as github's references, appears once.
Heights. Example cards have no height in their markup. The canvas measures them once, off screen, at its first draw, and keeps the heights for the visit, so coming back to the page through the app measures nothing. At build time the site's PNGs get width and height attributes, so a card measures the same as it shows.
Charts. While hovered, a chart card cycles through the chart examples: the first change after 0.7 s, then one every 2.8 s, crossfading SVGs drawn at build time. Vega never runs in the browser. The per-bar grow and line-draw animations are gone, since they repainted the SVG on every frame.
Start delay. Loops used to hold still before moving: 0.4 s for most cards, about 0.8 s for diff, 1 s for zoom, 1.4 s for code, and 2.5 s for carousel. Now each one starts moving as soon as the pointer arrives. The loops animate only opacity and transforms (no filter: blur).
Containment. .demo is contain: strict, and its hidden Markdown overlay is content-visibility: hidden until shown.
Icon card. The landing's icon demo drew 2.25rem logos with font-size: 0, which hid the sentence. It's gone, and the icon examples show icons inline at text size.
References. References used to fade out and pop back in, so a card mid-loop looked like it had lost its links ("this fixes , and builds on it"). Now they light up in turn and stay visible.
Long card labels end in an ellipsis instead of wrapping.

Numbers

Measured in headless Chromium at 1440×900, main-thread time from CDP Performance.getMetrics. Before is main with #100.

Hover, 3 s with the pointer on each card, main-thread time:

card	before	after
annotate	217 ms	106 ms
charts	294 ms	93 ms
chips	214 ms	127 ms
code	149 ms	216 ms
diff	98 ms	101 ms
github references	218 ms	96 ms
zoom	141 ms	78 ms
carousel	100 ms	85 ms
tabs	204 ms	177 ms
lint	98 ms	94 ms
total	1733 ms	1173 ms (−32%)

Code costs more because its press now happens inside the 3 s window. Before, the card was still idle for its first 1.4 s.

Annotate's median frame went from 33.3 ms to 16.7 ms. Before, its loop ran at 30 fps.

Panning (a 90-step drag) costs about the same main-thread time: 636–649 ms before, 604–633 ms after. Median frame is 16.7 ms in both. The canvas now shows three times as many distinct cards for that cost. Measuring the cards takes about 50 ms once per visit, on a shared machine.

Tests

Two new e2e tests in e2e/docs.e2e.ts:

The canvas has more than 40 cards, none shows twice on screen, and every live card has a height.
A hovered chart card changes chart.

e2e/docs.e2e.ts and e2e/navigation.e2e.ts pass against a fresh nuxi generate build. vp check and pnpm run lint:docs pass.

…lient navigation

… cards through their charts - The canvas holds the landing's demos plus every package page's examples (45 cards instead of 15), in a fixed shuffle with no two of one package in a row. Each column's step is the one that keeps copies of a card farthest apart over the columns a screen holds, so no card shows twice on screen. - Cards without a height in their markup are measured once off screen and kept for the visit. The site's PNGs get their width and height at build time, so a card measures as it will show. - The two chart cards turn through the chart examples while hovered, crossfading SVGs drawn at build time. The per-bar and line-drawing animations, which repainted the SVG every frame, are gone. - Card loops start moving as soon as the pointer arrives instead of holding first, and they animate opacity and transforms only, with no blur. - `.demo` is `contain: strict`, and its hidden Markdown is `content-visibility: hidden` until shown. - The icon demo is gone: its logos filled the card at 2.25rem with the sentence hidden. The icon examples show icons inline at text size. - References light up in turn instead of vanishing, which made a card look like it had lost its links. - The github references demo, which repeated the page's References example, shows once.

vitehub-bot · 2026-10-22T15:37:22Z

Session	Status	Started	Duration
Pending	Completed	Not started	—

Latest result

Pull request merged.

Final answers

Session

Pull request merged.

Session