feat: add client-side Kmesh version badge - #344
Conversation
Signed-off-by: hudazaan <naazhuda2000@gmail.com>
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
✅ Deploy Preview for kmesh-net ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Welcome @hudazaan! It looks like this is your first PR to kmesh-net/website 🎉 |
There was a problem hiding this comment.
Pull request overview
Warning
Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.
Adds a client-side “latest Kmesh release” version badge to the top navbar by fetching the latest GitHub release tag and rendering it into the existing navbar DOM via a React portal.
Changes:
- Add a Docusaurus theme override for
Navbarthat fetches the latest GitHub release tag and portals a badge into the navbar’s right-side area. - Add CSS for the version badge and its container (including dark theme + mobile hiding behavior).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/theme/Navbar/index.js | Fetches latest release from GitHub API and injects/portals a version badge into the navbar near search. |
| src/css/custom.css | Styles the badge/container and hides it on smaller viewports. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const searchEl = document.querySelector('.navbar__search, .DocSearch-Button'); | ||
| const navRight = document.querySelector('.navbar__items--right'); | ||
| if (searchEl) { | ||
| const searchItem = searchEl.closest('.navbar__item') || searchEl.parentNode; | ||
| const container = navRight || (searchItem && searchItem.parentNode); | ||
| if (container && searchItem) { | ||
|
|
||
| let existing = container.querySelector('.kmesh-version-container'); | ||
| if (!existing) { | ||
| const wrapper = document.createElement('div'); | ||
| wrapper.className = 'kmesh-version-container'; | ||
| wrapper.style.display = 'inline-flex'; | ||
| wrapper.style.alignItems = 'center'; | ||
| wrapper.style.margin = '0 0.5rem 0 0'; | ||
| wrapper.style.padding = '0'; | ||
| container.insertBefore(wrapper, searchItem); | ||
| setContainerEl(wrapper); |
| const wrapper = document.createElement('div'); | ||
| wrapper.className = 'kmesh-version-container'; | ||
| wrapper.style.display = 'inline-flex'; | ||
| wrapper.style.alignItems = 'center'; | ||
| wrapper.style.margin = '0 0.5rem 0 0'; | ||
| wrapper.style.padding = '0'; |
| return () => { | ||
| mounted = false; | ||
| }; |
Fixes #290