Repository navigation
feat(web): show API kind as icon badge in TOC - #1605
Merged
Merged
Conversation
Replace trailing (interface)/(type) hints in the API reference table of contents with monochromatic letter badges (C/I/T/f/N/V) before the label, covering all six reflection kinds. Tighten the nested TOC indent on API module pages only. Also restyle the declaration kind badge and the Signature label to match the landing typography spec (pill badge, muted mono scaffold label).
Keep the landing pill look (rounded-full, bordered, mono uppercase) but match ApiStabilityBadge metrics: text-[10px] leading-none, tighter padding, so kind + stability badges align at equal height.
Byte-identical to the landing typography spec instead of the theme-token approximation.
This reverts commit 3b22fd7.
Kind pill back to text-[10px]/py-0.5 with tighter px-2; stability badge gains a transparent border so both render at 16px. Verified via Playwright screenshot + measured bounding boxes.
Both kind and stability badges: pill radius, 10px uppercase micro-label, px-2.5 rhythm, 16px height. Matches common badge patterns; verified via Playwright screenshot.
Kind pill renders only for interface/type again (was showing on every title via declaration.kind); Example header uses the same muted-mono scaffold label as Signature.
Pre-existing logic rendered every @stability value including 'stable'. Gate on unstable; dataset values are stable/unstable.
API_JSDOC_CLASS forced text-brand (from PR #1507); the shared prose-effect treatment already styles links foreground + underlined across blog/docs/API. Removing the override restores one link treatment everywhere.
The declarations wrapper is not-prose, so prose-effect link CSS never applied and PR #1507 utilities set emerald instead. Set the same values as global prose links: foreground, medium, underline 4px, none on hover.
Cloudflare PreviewURL: https://effectwebsite-websiteworker-pr-1605-jvjxoyzxfc3meqbe.matechs.workers.dev Built from commit 3ebb62f. This comment updates automatically with each deployment. |
Signature and Example labels lock to text-[12px]; example names drop parens/muted-mono for normal prose text.
The declarations wrapper carried not-prose, which disabled all prose element styles (p/ul/ol/li margins, list markers) for every JSDoc comment. Drop the guard; add mt-0 to category h2s to keep their space-y rhythm.
Position letters from viewBox center with dy 0.35em instead of a fixed baseline, so cap-height centers on the badge box across fonts. Measured: glyph center within 0.2 units of box center, badge center within 0.01px of text center.
The 16px box centered on the 16.8px line box sits ~1px below the glyph mass (measured via canvas cap metrics in JetBrains Mono). -1px optical nudge.
Row uses items-center; badge is a plain centered flex box. Drops the baseline/self-center combo and the translate nudge.
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.
Type
Description
Replace trailing (interface)/(type) hints in the API reference table of contents with monochromatic letter badges (C/I/T/f/N/V) before the label, covering all six reflection kinds. Tighten the nested TOC indent on API module pages only.
Also restyle the declaration kind badge and the Signature label to match the landing typography spec (pill badge, muted mono scaffold label).
Related