fix(ui): improve GitHub star badge layout and alignment#6326
Merged
Conversation
- Display star count (19.3k) next to GitHub icon in nav bar - Create NavBarExtra component with animated star badge - Auto-update star count during release process using gh CLI - Add hover animations and proper styling for light/dark modes - Format large numbers with k notation (e.g., 19346 → 19.3k) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove duplicate GitHub icon, keep star count with existing social link - Add star count badge next to the GitHub icon on the right side - Use DOM manipulation to inject star count into existing social links - Hide star count on mobile to save space - Maintain consistent styling with other social icons 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove star emoji to save space (just show number) - Reduce padding and font size for more compact badge - Adjust margins and spacing between social icons - Simplify styling with lighter background - Add tooltip for clarity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Display star count underneath the GitHub icon instead of beside it - Ensure GitHub SVG icon remains visible - Add star symbol (★) back with the count for clarity - Use vertical layout with proper alignment - Adjust padding and margins for clean appearance 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove space between star symbol and count (★19.3k) - Reduce font size from 0.65rem to 0.6rem - Reduce gap between GitHub icon and star count (gap: 0) - Adjust padding and margins for tighter layout 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove star icon, display only the number (19.3k) - Add margin-top to GitHub SVG to align better with Discord logo - Fine-tune padding/margin for better vertical alignment 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR improves the GitHub star badge implementation by positioning the star count below the GitHub icon for a cleaner layout, removing unnecessary visual elements, and making it responsive.
- Modified the release script to fetch GitHub star count and format it (e.g., "19.3k")
- Updated the theme to display the star count below the GitHub icon using absolute positioning
- Added responsive CSS to hide the star count on mobile devices
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| xtasks/release-plz | Adds GitHub API integration to fetch and format star count data |
| docs/.vitepress/theme/index.ts | Implements DOM manipulation to add star count badge to GitHub link |
| docs/.vitepress/theme/custom.css | Styles the star badge with positioning and responsive behavior |
| docs/.vitepress/stars.data.ts | Data file containing formatted star count for display |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| if [[ -n "$stars_raw" ]]; then | ||
| if [[ "$stars_raw" -ge 1000 ]]; then | ||
| # Format as k notation (e.g., 19346 -> 19.3k) | ||
| stars_formatted="$(echo "scale=1; $stars_raw / 1000" | bc)k" |
There was a problem hiding this comment.
The bc command may not be available on all systems. Consider using shell arithmetic instead: stars_formatted=\"$((stars_raw / 1000)).$((stars_raw % 1000 / 100))k\" or add a check to ensure bc is installed.
Suggested change
| stars_formatted="$(echo "scale=1; $stars_raw / 1000" | bc)k" | |
| int_part=$((stars_raw / 1000)) | |
| frac_part=$(( (stars_raw % 1000) / 100 )) | |
| stars_formatted="${int_part}.${frac_part}k" |
Comment on lines
+33
to
+34
| const observer = new MutationObserver(addStarCount); | ||
| observer.observe(document.body, { childList: true, subtree: true }); |
There was a problem hiding this comment.
The MutationObserver is never disconnected, which could cause memory leaks. Consider storing the observer reference and disconnecting it when the component unmounts or use more specific observation targets to reduce overhead.
Comment on lines
+202
to
+203
| padding-bottom: 12px !important; | ||
| margin-bottom: -12px !important; |
There was a problem hiding this comment.
Using negative margins with !important declarations can make the layout fragile and hard to maintain. Consider using a more stable positioning approach or specific flex layout properties to achieve the desired spacing.
- Bump main hero title from 5rem to 6rem on desktop - Scale responsive sizes: 5rem (tablet), 4rem (mobile) - Maintains animated gradient and shimmer effect 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add prominent 'Get Started in Seconds' section after hero - Include one-line install command with copy button - Show simple example: mise x node -- node --version - Animated gradient border and hover effects - Responsive design with mobile optimization - Styled with numbered steps and terminal-like output 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Fix broken features section by restoring proper YAML structure - Move 'Get Started in Seconds' box after features for better flow - Maintain all styling and functionality 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Change from 'mise x node' to 'mise x node@22' - Shows users how to specify tool versions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Place '→ v22.11.0' output inside the code box - Create two-line layout with command and output - Style output with green color to indicate success - Remove orphaned step-output styles 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Use black text on light gradient for light mode - Use white text on darker gradient for dark mode - Ensures numbers are clearly readable in both themes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Use white text for both light and dark modes - Light mode: white on bright gradient - Dark mode: white on darker gradient for better contrast - Fixed backwards contrast issue 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
- Align step numbers with 'Install mise' and 'Run any tool instantly' text - Ensure copy button stays on the right with space-between layout - Add proper flex layout for single-line code boxes - Add negative margin to step numbers for better text alignment 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| # Remove trailing .0k | ||
| stars_formatted="${stars_formatted/.0k/k}" | ||
| else | ||
| stars_formatted="$stars_raw" |
There was a problem hiding this comment.
Bug: GitHub API Response Validation Error
The release-plz script fetches GitHub stars but doesn't validate the API response. If stars_raw is non-numeric (e.g., API error message, jq returning "null"), numeric operations fail, either crashing the script or writing "null" to the stars data file, which then displays incorrectly on the website.
Hyperfine Performance
|
| Command | Mean [ms] | Min [ms] | Max [ms] | Relative |
|---|---|---|---|---|
mise-2025.9.12 x -- echo |
19.7 ± 0.3 | 18.9 | 22.0 | 1.00 |
mise x -- echo |
19.8 ± 0.7 | 19.2 | 31.3 | 1.00 ± 0.04 |
mise env
| Command | Mean [ms] | Min [ms] | Max [ms] | Relative |
|---|---|---|---|---|
mise-2025.9.12 env |
18.9 ± 0.3 | 18.4 | 21.3 | 1.00 |
mise env |
19.2 ± 0.5 | 18.4 | 25.4 | 1.01 ± 0.03 |
mise hook-env
| Command | Mean [ms] | Min [ms] | Max [ms] | Relative |
|---|---|---|---|---|
mise-2025.9.12 hook-env |
18.6 ± 0.3 | 18.0 | 21.3 | 1.00 |
mise hook-env |
18.7 ± 0.3 | 18.2 | 19.9 | 1.01 ± 0.02 |
mise ls
| Command | Mean [ms] | Min [ms] | Max [ms] | Relative |
|---|---|---|---|---|
mise-2025.9.12 ls |
16.4 ± 0.6 | 15.8 | 27.1 | 1.00 |
mise ls |
16.6 ± 0.8 | 16.0 | 27.6 | 1.01 ± 0.06 |
xtasks/test/perf
| Command | mise-2025.9.12 | mise | Variance |
|---|---|---|---|
| install (cached) | 168ms | ✅ 103ms | +63% |
| ls (cached) | 64ms | 64ms | +0% |
| bin-paths (cached) | 70ms | 70ms | +0% |
| task-ls (cached) | 469ms | 471ms | +0% |
✅ Performance improvement: install cached is 63%
jdx
added a commit
that referenced
this pull request
Sep 19, 2025
### 📦 Registry - remove deprecated virtualos by @jdx in [166379f](166379f) - add trufflehog ([aqua:trufflesecurity/trufflehog](https://github.com/trufflesecurity/trufflehog)) by @risu729 in [#6316](#6316) ### 🚀 Features - **(aqua)** integrate native sigstore-verification for security verification by @jdx in [#6332](#6332) - **(docs)** improve search result readability with lighter teal background by @jdx in [#6328](#6328) - **(ui)** update logo as favicon and fix hover transitions by @jdx in [#6325](#6325) - **(vfox)** add file.read lua function by @malept in [#6333](#6333) - add documentation for "Environment in tasks" #5134 #5638 by @Its-Just-Nans in [#6329](#6329) ### 🐛 Bug Fixes - **(github)** correctly paginate releases/tags for private repos by @malept in [#6318](#6318) - **(hk)** exclude aqua-registry from prettier linting by @jdx in [#6327](#6327) - **(ui)** improve GitHub star badge layout and alignment by @jdx in [#6326](#6326) ### 📚 Documentation - change 'hello.py' to 'main.py' in python.md by @my1e5 in [#6319](#6319) - customize VitePress theme with unique branding by @jdx in [#6324](#6324) ### 📦️ Dependency Updates - update taiki-e/install-action digest to 0aa4f22 by @renovate[bot] in [#6334](#6334) - update rust crate comfy-table to v7.2.1 by @renovate[bot] in [#6335](#6335) - update rust crate console to v0.16.1 by @renovate[bot] in [#6336](#6336) - update rust crate indexmap to v2.11.4 by @renovate[bot] in [#6337](#6337) ### Chore - fixing typos by @Its-Just-Nans in [#6331](#6331) ### New Contributors - @Its-Just-Nans made their first contribution in [#6331](#6331) - @my1e5 made their first contribution in [#6319](#6319) --------- Co-authored-by: mise-en-dev <release@mise.jdx.dev> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
netbsd-srcmastr
pushed a commit
to NetBSD/pkgsrc
that referenced
this pull request
Sep 24, 2025
## [2025.9.16](https://github.com/jdx/mise/compare/v2025.9.15..v2025.9.16) - 2025-09-22 ### 📦 Registry - use npm backend for zbctl by @risu729 in [#6379](jdx/mise#6379) ### 🐛 Bug Fixes - **(aqua)** remove blake3 support from aqua checksum algorithms by @risu729 in [#6370](jdx/mise#6370) - **(aqua)** remove cosign and slsa-verifier dependencies by @risu729 in [#6371](jdx/mise#6371) - **(aqua)** remove cosign.experimental by @risu729 in [#6376](jdx/mise#6376) ### 📚 Documentation - minisign doesn't require cli by @risu729 in [#6369](jdx/mise#6369) ### Chore - ignore renovate new bot name by @risu729 in [#6364](jdx/mise#6364) ## [2025.9.15](https://github.com/jdx/mise/compare/v2025.9.14..v2025.9.15) - 2025-09-21 ### 📦 Registry - add missing cargo backends by @jayvdb in [#6307](jdx/mise#6307) ### 🚀 Features - add env propagation by @Its-Just-Nans in [#6342](jdx/mise#6342) ### 🐛 Bug Fixes - **(aqua)** improve GitHub token handling for sigstore verification by @jdx in [#6351](jdx/mise#6351) - **(backend)** change dependency checks to warnings instead of errors by @jdx in [#6363](jdx/mise#6363) - **(npm)** improve error message when npm/bun is not installed by @jdx in [#6359](jdx/mise#6359) - **(vfox)** enable TLS support for reqwest to fix CI tests by @jdx in [#6356](jdx/mise#6356) ### 🚜 Refactor - **(registry)** convert to nested TOML sections format by @jdx in [#6361](jdx/mise#6361) ### 🧪 Testing - **(e2e)** resolve mise via PATH in backend missing deps test by @jdx in [#6362](jdx/mise#6362) - **(vfox)** replace flaky external HTTP tests with local mock server by @jdx in [#6354](jdx/mise#6354) ### 📦️ Dependency Updates - pin dependencies by @renovate[bot] in [#6243](jdx/mise#6243) ### Chore - **(install.sh)** add `MISE_INSTALL_MUSL` to force installing musl variants on Linux by @malept in [#6355](jdx/mise#6355) ## [2025.9.14](https://github.com/jdx/mise/compare/v2025.9.13..v2025.9.14) - 2025-09-20 ### 🐛 Bug Fixes - fix an issue where Swift could not be installed on arm64 Ubuntu by @lish82 in [#6348](jdx/mise#6348) ### Chore - use cross to build on linux by @jdx in [#6346](jdx/mise#6346) ### New Contributors - @lish82 made their first contribution in [#6348](jdx/mise#6348) ## [2025.9.13](https://github.com/jdx/mise/compare/v2025.9.12..v2025.9.13) - 2025-09-19 ### 📦 Registry - remove deprecated virtualos by @jdx in [166379f](jdx/mise@166379f) - add trufflehog ([aqua:trufflesecurity/trufflehog](https://github.com/trufflesecurity/trufflehog)) by @risu729 in [#6316](jdx/mise#6316) ### 🚀 Features - **(aqua)** integrate native sigstore-verification for security verification by @jdx in [#6332](jdx/mise#6332) - **(docs)** improve search result readability with lighter teal background by @jdx in [#6328](jdx/mise#6328) - **(ui)** update logo as favicon and fix hover transitions by @jdx in [#6325](jdx/mise#6325) - **(vfox)** add file.read lua function by @malept in [#6333](jdx/mise#6333) - add documentation for "Environment in tasks" #5134 #5638 by @Its-Just-Nans in [#6329](jdx/mise#6329) ### 🐛 Bug Fixes - **(github)** correctly paginate releases/tags for private repos by @malept in [#6318](jdx/mise#6318) - **(hk)** exclude aqua-registry from prettier linting by @jdx in [#6327](jdx/mise#6327) - **(ui)** improve GitHub star badge layout and alignment by @jdx in [#6326](jdx/mise#6326) ### 📚 Documentation - change 'hello.py' to 'main.py' in python.md by @my1e5 in [#6319](jdx/mise#6319) - customize VitePress theme with unique branding by @jdx in [#6324](jdx/mise#6324) ### 📦️ Dependency Updates - update taiki-e/install-action digest to 0aa4f22 by @renovate[bot] in [#6334](jdx/mise#6334) - update rust crate comfy-table to v7.2.1 by @renovate[bot] in [#6335](jdx/mise#6335) - update rust crate console to v0.16.1 by @renovate[bot] in [#6336](jdx/mise#6336) - update rust crate indexmap to v2.11.4 by @renovate[bot] in [#6337](jdx/mise#6337) ### Chore - fixing typos by @Its-Just-Nans in [#6331](jdx/mise#6331) ### New Contributors - @Its-Just-Nans made their first contribution in [#6331](jdx/mise#6331) - @my1e5 made their first contribution in [#6319](jdx/mise#6319)
riastradh
pushed a commit
to riastradh/pkgsrc-test20250901
that referenced
this pull request
Feb 8, 2026
## [2025.9.16](https://github.com/jdx/mise/compare/v2025.9.15..v2025.9.16) - 2025-09-22 ### 📦 Registry - use npm backend for zbctl by @risu729 in [#6379](jdx/mise#6379) ### 🐛 Bug Fixes - **(aqua)** remove blake3 support from aqua checksum algorithms by @risu729 in [#6370](jdx/mise#6370) - **(aqua)** remove cosign and slsa-verifier dependencies by @risu729 in [#6371](jdx/mise#6371) - **(aqua)** remove cosign.experimental by @risu729 in [#6376](jdx/mise#6376) ### 📚 Documentation - minisign doesn't require cli by @risu729 in [#6369](jdx/mise#6369) ### Chore - ignore renovate new bot name by @risu729 in [#6364](jdx/mise#6364) ## [2025.9.15](https://github.com/jdx/mise/compare/v2025.9.14..v2025.9.15) - 2025-09-21 ### 📦 Registry - add missing cargo backends by @jayvdb in [#6307](jdx/mise#6307) ### 🚀 Features - add env propagation by @Its-Just-Nans in [#6342](jdx/mise#6342) ### 🐛 Bug Fixes - **(aqua)** improve GitHub token handling for sigstore verification by @jdx in [#6351](jdx/mise#6351) - **(backend)** change dependency checks to warnings instead of errors by @jdx in [#6363](jdx/mise#6363) - **(npm)** improve error message when npm/bun is not installed by @jdx in [#6359](jdx/mise#6359) - **(vfox)** enable TLS support for reqwest to fix CI tests by @jdx in [#6356](jdx/mise#6356) ### 🚜 Refactor - **(registry)** convert to nested TOML sections format by @jdx in [#6361](jdx/mise#6361) ### 🧪 Testing - **(e2e)** resolve mise via PATH in backend missing deps test by @jdx in [#6362](jdx/mise#6362) - **(vfox)** replace flaky external HTTP tests with local mock server by @jdx in [#6354](jdx/mise#6354) ### 📦️ Dependency Updates - pin dependencies by @renovate[bot] in [#6243](jdx/mise#6243) ### Chore - **(install.sh)** add `MISE_INSTALL_MUSL` to force installing musl variants on Linux by @malept in [#6355](jdx/mise#6355) ## [2025.9.14](https://github.com/jdx/mise/compare/v2025.9.13..v2025.9.14) - 2025-09-20 ### 🐛 Bug Fixes - fix an issue where Swift could not be installed on arm64 Ubuntu by @lish82 in [#6348](jdx/mise#6348) ### Chore - use cross to build on linux by @jdx in [#6346](jdx/mise#6346) ### New Contributors - @lish82 made their first contribution in [#6348](jdx/mise#6348) ## [2025.9.13](https://github.com/jdx/mise/compare/v2025.9.12..v2025.9.13) - 2025-09-19 ### 📦 Registry - remove deprecated virtualos by @jdx in [166379f](jdx/mise@166379f) - add trufflehog ([aqua:trufflesecurity/trufflehog](https://github.com/trufflesecurity/trufflehog)) by @risu729 in [#6316](jdx/mise#6316) ### 🚀 Features - **(aqua)** integrate native sigstore-verification for security verification by @jdx in [#6332](jdx/mise#6332) - **(docs)** improve search result readability with lighter teal background by @jdx in [#6328](jdx/mise#6328) - **(ui)** update logo as favicon and fix hover transitions by @jdx in [#6325](jdx/mise#6325) - **(vfox)** add file.read lua function by @malept in [#6333](jdx/mise#6333) - add documentation for "Environment in tasks" #5134 #5638 by @Its-Just-Nans in [#6329](jdx/mise#6329) ### 🐛 Bug Fixes - **(github)** correctly paginate releases/tags for private repos by @malept in [#6318](jdx/mise#6318) - **(hk)** exclude aqua-registry from prettier linting by @jdx in [#6327](jdx/mise#6327) - **(ui)** improve GitHub star badge layout and alignment by @jdx in [#6326](jdx/mise#6326) ### 📚 Documentation - change 'hello.py' to 'main.py' in python.md by @my1e5 in [#6319](jdx/mise#6319) - customize VitePress theme with unique branding by @jdx in [#6324](jdx/mise#6324) ### 📦️ Dependency Updates - update taiki-e/install-action digest to 0aa4f22 by @renovate[bot] in [#6334](jdx/mise#6334) - update rust crate comfy-table to v7.2.1 by @renovate[bot] in [#6335](jdx/mise#6335) - update rust crate console to v0.16.1 by @renovate[bot] in [#6336](jdx/mise#6336) - update rust crate indexmap to v2.11.4 by @renovate[bot] in [#6337](jdx/mise#6337) ### Chore - fixing typos by @Its-Just-Nans in [#6331](jdx/mise#6331) ### New Contributors - @Its-Just-Nans made their first contribution in [#6331](jdx/mise#6331) - @my1e5 made their first contribution in [#6319](jdx/mise#6319)
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
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.
Summary
Follow-up improvements to the GitHub star badge implementation from #6325.
Changes
Star Badge Improvements
Technical Details
Test Plan
Screenshots
The star count now appears as a small number (19.3k) directly below the GitHub icon in the navigation bar, with proper alignment alongside the Discord icon.
🤖 Generated with Claude Code