Give each docs figure its own arrowhead markers - #20
Merged
Conversation
Defs() emitted <marker id="fabriq-arrow"> and its accent twin, and every
Figure rendered its own copy. Two pages render two diagrams each, so both
ids appeared twice on each: (concepts)/architecture and (concepts)/caching.
It rendered correctly, because the markers were identical and url(#id)
resolves to the first match, but duplicate ids are invalid HTML and fail an
axe duplicate-id rule. The comment calling the duplication harmless was
true of the rendering, not of the markup.
Figure already derives an id from its title for aria-labelledby. The markers
now join that scheme as ${id}-arrow and ${id}-arrow-accent. The fabriq-
prefix goes: it existed to namespace an id that was global to the document,
and keeping it would leave one function emitting ids under two conventions
three lines apart.
Getting the scope to the 36 Arrow call sites is the awkward part, because
these render as server components, so there is no context and no useId to
carry it. Figure passes a pre-bound Arrow to its children instead, and both
Defs and the unbound Arrow become private. An arrow that names a marker no
defs on the page defines is now unrepresentable rather than merely
discouraged, which is what the old arrangement could not offer.
architecture-diagram.tsx also carried its own copy of the ten colour
constants, Chip, TierTag, Arrow, Defs and Node, plus an inline figure/svg
wrapper instead of Figure. That is why the marker fix would otherwise have
had to be made twice, and why an edit to the kit never reached the two
most-used diagrams on the site. It imports from ./diagram-kit now, roughly
200 lines lighter.
Verified by rendering all eight diagrams before and after with
renderToStaticMarkup: the markup is identical once ids are normalised away.
The same check run against the old code reports both pages at 8 ids and 6
distinct, naming fabriq-arrow and fabriq-arrow-accent; against the new code
both pages report 8 of 8 distinct, with every url(#...) resolving to a
marker defined in its own figure.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Every
Figurein the docs diagram kit rendered its own copy of<marker id="fabriq-arrow">and its accent twin. Two pages render two diagrams each,(concepts)/architectureand(concepts)/caching, so both ids appeared twice on each. It rendered correctly, because the markers are identical andurl(#id)resolves to the first match, but duplicate ids are invalid HTML and fail an axeduplicate-idrule.Figurealready derives an id from its title foraria-labelledby. The markers join that scheme as${id}-arrowand${id}-arrow-accent.Getting that scope to the 36
Arrowcall sites is the awkward part: these render as server components, so there is no context and nouseIdto carry it.Figurepasses a pre-boundArrowto its children instead, and bothDefsand the unboundArrowbecome private. An arrow naming a marker that no<defs>on the page defines is now unrepresentable rather than merely discouraged.architecture-diagram.tsxalso carried its own copy of the ten colour constants,Chip,TierTag,Arrow,DefsandNode, plus an inlinefigure/svgwrapper instead ofFigure. That is why the marker fix would otherwise have had to be made twice, and why an edit to the kit never reached the two most-used diagrams. It imports from./diagram-kitnow, roughly 200 lines lighter.Verification
All eight diagrams rendered before and after with
renderToStaticMarkup: markup is identical once ids are normalised away, and everyurl(#...)resolves to a marker defined in its own figure.The same check against the pre-change code reports both pages at 8 ids, 6 distinct, naming
fabriq-arrowandfabriq-arrow-accent. Against this branch both report 8 of 8 distinct. The check fails if the old code shows no duplicates, so the pass is not vacuous.tsc --noEmitandbiome checkboth clean.Note on scope
This branch was cut from
docs-link-repairs, so it also carries4fe8653, which repoints four docs links at pages that exist. That commit was not previously pushed anywhere.