feat: add logo to docs site #442
Conversation
Add green flag "--help" logo to the documentation site: - Hero image on homepage - Nav logo in header - Updated favicons Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR adds branding to the documentation site by incorporating a green flag "--help" logo across multiple touchpoints including the hero section, navigation header, and favicons.
Changes:
- Added hero image to homepage
- Added logo to navigation header
- Updated favicons with transparent backgrounds
Reviewed changes
Copilot reviewed 2 out of 10 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| docs/index.md | Added hero image configuration with logo.png |
| docs/.vitepress/config.mts | Added navigation logo configuration with logo-nav.png |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #442 +/- ##
=======================================
Coverage 47.36% 47.36%
=======================================
Files 47 47
Lines 6653 6653
Branches 6653 6653
=======================================
Hits 3151 3151
Misses 1739 1739
Partials 1763 1763 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Use square crop showing flag with partial pole visible, matching the nav logo style. Ensure transparent background. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add proper favicon link tags to VitePress head config - Update site.webmanifest with name and theme color - Set theme-color meta tag to match logo green Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Remove light mode option from docs site. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add custom UsageHero.vue component with animated gradient background - Add stat cards (5+ Shells, 3 Doc Formats, Any Language) - Add styled action buttons (Get Started, CLI Reference) - Expand features section with icons and links - Create custom.css with brand colors and animations Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| animation-delay: -14s; | ||
| } |
There was a problem hiding this comment.
CSS animation overrides centering transform on third orb
Medium Severity
The .usage-hero-orb-3 element uses transform: translate(-50%, -50%) to center itself at top: 50%; left: 50%. However, the float animation keyframes also use the transform property (e.g., transform: translate(0, 0) scale(1)), which completely overwrites the centering transform when the animation runs. This causes the third orb to jump away from center and animate around an incorrect position instead of staying centered.
Additional Locations (1)
- Add hover tooltips showing details (shells list, KDL description) - Change middle stat from "3 Doc Formats" to "KDL Powered" - Add hover effect with green border on stat cards Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Restructure hero to two-column layout with text on left, logo on right - Fix title text clipping by adding padding and line-height - Update responsive styles to stack columns on mobile - Make logo larger (280px) for better visual balance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Set overflow to visible so logo isn't clipped - Add 4rem margin-bottom for clear separation from features Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add feature buttons to hero component with icons - Remove VitePress features from index.md - Add CSS styling for feature buttons with hover effects - Remove unused VPFeatures enhancement styles Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove separate stats section - Combine all features (Shell Completions, Documentation, Scripts, KDL Specification, 5+ Shells, Any Language) into one section - Add emoji icons to all feature buttons - Move features above action buttons - Remove unused stats CSS Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add tooltip hover cards with descriptions for each feature - Use CSS grid for 2 rows of 3 equal-sized feature buttons - Shorten feature labels to fit grid (Completions, Documentation, Scripts, KDL Spec, 5+ Shells, Any Language) - Responsive: 2x3 grid on tablet, 3x2 grid on mobile Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add z-index: 10 to hovered feature so tooltip isn't hidden behind buttons in the row below. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Summary
Test plan
🤖 Generated with Claude Code
Note
Refreshes the docs site branding and homepage experience.
UsageHero.vuewith animated background and CTA links; wired into theme throughtheme/index.tsand styled incustom.cssappearance: "force-dark", setslogo, and injects favicon/apple-touch/manifest links plustheme-colordocs/index.mdfrontmatter to defer to custom herosite.webmanifestwith proper name, theme color (#22c55e), and iconsWritten by Cursor Bugbot for commit 34e426a. This will update automatically on new commits. Configure here.