docs: show the GitHub star count in the nav overflow menu - #13193
Conversation
VitePress renders the GitHub social link twice: inline in the nav bar, and again inside the "..." overflow menu that replaces it between 768px and 1279px. The badge injector used `querySelector`, so it always matched the inline link -- which is `display: none` at those widths -- and the star count was simply missing from the menu the whole time it was the only place the link appeared. Inject into every match instead, and stop the MutationObserver once every link has its badge rather than re-running on every DOM mutation the page makes for the rest of its life. The inline badge is unchanged: same position, same 64px nav bar. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited) Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (1)
Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review. 📝 WalkthroughWalkthroughThe theme now badges every matching GitHub social link. It observes navigation changes until all links are badged, then disconnects. It also disconnects the observer when the component unmounts. ChangesGitHub star badge lifecycle
Priority: ⬇️ Low Estimated code review effort: 2 (Simple) | ~10 minutes Change: Bug fix Merge Risk: ⚪ Minimal · up to The GitHub badge behavior is covered across the responsive navigation variants, with no actionable merge-blocking risk identified. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Instruction countsNothing was compared, and so nothing was gated. No series appears on both sides: either the base has no measurements recorded, or the two were measured on different runner classes, which are deliberately not comparable — counts shift between machine types by more than a real regression does. New, nothing to compare against: Only instruction counts gate. Wall clock is shown for context — on identical hardware it moves 4-20% run to run. Measured by tak — instruction-counted CLI benchmarks, stored in this repository's git notes.
|
1 participant
Problem
Between 768px and 1279px wide, VitePress collapses the nav bar's social links
into the "…" overflow menu. On mise.jdx.dev the GitHub star count disappeared
entirely at those widths — the menu showed a bare GitHub icon.
Cause
VitePress renders the GitHub link twice: inline in the nav bar, and again inside
the overflow menu. The badge injector used
querySelector, so it always matchedthe inline link — which is
display: nonebelow 1280px — and appended the badgethere. The menu's copy never got one.
Fix
Inject into every match, and disconnect the
MutationObserveronce each link hasits badge instead of re-running on every DOM mutation the page makes for the rest
of its life. This matches what hk, pitchfork, usage and mr-boxington already do.
No CSS change was needed: the badge sits 8px clear of the menu's clip box, so it
does not hit the clipping that jdx/pitchfork#862,
jdx/usage#1429 and
jdx/pacvamp#91 fix.
Validation
Built the docs (
mise run docs:build), served the output, and drove headlessChromium against it:
★ 33.9k, 8px clear of the menu's clip box(x 1299.0, y 41, 45.9×12) and the nav bar is still 64px tall
this change either, on mise or any of the sibling sites
AI-assisted — Tool: Claude Code; model: anthropic/claude-opus-5; version: 2.1.270.
Note
Low Risk
Docs-site nav DOM injection only; no changes to app logic, auth, or data handling.
Overview
Fixes missing GitHub star badges when VitePress moves social links into the nav "…" overflow menu (roughly 768px–1279px).
The theme injector in
docs/.vitepress/theme/index.tsnow usesquerySelectorAllso every mise GitHub nav link gets a.star-countbadge (inline + overflow copy), skips work whenstarsDatais empty, and treats “all links badged” as success. TheMutationObserveris scoped to.VPNav, disconnects once badges are on all links (instead of watchingdocument.bodyon every mutation), and is torn down inonUnmounted; the old immediate +setTimeout(100)retry path is removed.Reviewed by Cursor Bugbot for commit 40cbad9. Bugbot is set up for automated code reviews on this repo. Configure here.
Summary by CodeRabbit