feat(ui): add badge snippet tabs for latest and pinned crate versions#285
Open
DCjanus wants to merge 17 commits intodeps-rs:mainfrom
Open
feat(ui): add badge snippet tabs for latest and pinned crate versions#285DCjanus wants to merge 17 commits intodeps-rs:mainfrom
DCjanus wants to merge 17 commits intodeps-rs:mainfrom
Conversation
Co-authored-by: OpenAI Codex <codex@openai.com>
Co-authored-by: OpenAI Codex <codex@openai.com>
Co-authored-by: OpenAI Codex <codex@openai.com>
Co-authored-by: OpenAI Codex <codex@openai.com>
Refactor badge tabs from folder-style to a lightweight, right-aligned pill design to reduce visual weight while maintaining accessibility. Co-authored-by: Gemini <noreply@google.com>
…h contrast Optimized badge tabs to a right-aligned, floating pill design. Implemented translucent backgrounds for better readability on dynamic hero colors and improved layout to ensure full width for code panels. Co-authored-by: Gemini <noreply@google.com>
Refactored badge tabs to a traditional folder tab design. Tabs now attach seamlessly to the top of the code panel with zero margin, top-rounded corners, and a border overlap effect for the active state to create a unified visual surface. Co-authored-by: Gemini <noreply@google.com>
Refactored badge UI to use a lightweight attached-tab design that matches the default Bulma pre block appearance. Reduced vertical padding on code blocks for a more compact profile and ensured a seamless connection between tabs and panels. Co-authored-by: Gemini <noreply@google.com>
Removed unused CSS classes and redundant comments. Finalized the seamless attached-tab design by ensuring direct integration with Bulma's default 'pre' block appearance, maintaining full consistency with the main branch's UI while adding the new tab functionality. Co-authored-by: Gemini <noreply@google.com>
Implemented a fixed-height container approach by using absolute positioning for tabs and reserved padding-top on the group container. This ensures consistent height and bottom-edge alignment regardless of whether tabs are displayed. Co-authored-by: Gemini <noreply@google.com>
Wrapped badge panels in a div with role='tabpanel' to separate interaction logic from semantic pre-formatted code. Simplified Maud template syntax using conditional attributes. Co-authored-by: Gemini <noreply@google.com>
Co-authored-by: OpenAI Codex <codex@openai.com>
Co-authored-by: OpenAI Codex <codex@openai.com>
Co-authored-by: OpenAI Codex <codex@openai.com>
…mbly Co-authored-by: OpenAI Codex <codex@openai.com>
There was a problem hiding this comment.
Pull request overview
This PR enhances badge discoverability on crate pages by adding a tabbed interface that allows users to easily access both latest-version and pinned-version badge markdown snippets.
Changes:
- Added a new HTML route
/crate/{name}/latestfor direct access to latest crate version pages - Implemented tabbed badge snippet UI with Latest/Pinned variants on crate pages
- Added keyboard navigation support (ArrowLeft/Right, Home/End) for accessibility
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/server/mod.rs | Added BadgeTabMode enum, new route handler, and logic to determine tab visibility based on version context |
| src/server/views/html/status.rs | Implemented badge markdown generation helpers and tab/panel rendering with ARIA accessibility attributes |
| src/main.rs | Registered new crate_latest_status_html route |
| assets/links.js | Added JavaScript for tab interaction with keyboard navigation support |
| assets/styles/main.sass | Imported Bulma tabs component and custom badge-tabs styles |
| assets/styles/_badge-tabs.sass | Defined styles for tabbed badge interface with layout stability |
| README.md | Clarified badge URL documentation for latest vs pinned versions |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Member
|
Hey @DCjanus, looks interesting. Thanks for putting in the effort! Is this ready for review (and merge) by a human? 🙂 |
Member
Author
|
Thanks @Feliix42! Yes, this is ready for human review now. Could you please take a look when you have time? |
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
This PR makes badge usage more discoverable on crate pages by exposing both badge variants directly in the UI.
The change is motivated by feedback in Issue #281 comment: users want the latest badge Markdown to be easier to find, instead of only seeing a pinned-version snippet after redirect.
Implementation Note
This PR was primarily implemented with assistance from GPT-5.3-Codex and Gemini 3 Pro, including parts of the PR description.
I have manually reviewed the implementation and validated the final changes before submission.
What changed
1) Badge snippet tabs on crate HTML pages
/crate/{name}/latest/...)/crate/{name}/{version}/...)2) Route + rendering logic
/crate/{name}/latest.BadgeTabModeto control tab visibility and default selection:HiddenPinnedDefaultLatestDefault3) Accessibility and interaction
tablist,tab,tabpanel,aria-selected,aria-controls.assets/links.js:ArrowLeft/ArrowRightHome/End4) Styling and layout stability
5) Documentation update
latest)<VERSION>)Why this approach
path) in both generated variants.Testing
ArrowLeft/Right,Home,End).UI preview
Crate page: pinned tab
Crate page: latest tab
Repo page: unchanged (no tabs)