feature/docs/20260529#451
Conversation
…esponsive grid Add gradient hero with CTA buttons, quick-nav type pills, a decision lookup table with per-type color badges, and a 3→2→1 column card grid with 11 semantic accent colors per category. Modules and contributing sections use compact grids. Fully responsive across desktop, tablet, and mobile.
…and improved hero buttons Replace plain intro card with a 3-column value proposition strip. Add gradient+glow primary CTA, glass-border secondary CTA, and GitHub icon button to the hero. Apply color-coded type tags across the types and modules grids. Compact section headers with inline "Full reference" links. Responsive 4→2→1 column type grid and 3→2→1 modules grid.
|
Warning Review limit reached
More reviews will be available in 48 minutes and 5 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR redesigns the homepage and guide pages with a unified tag-color system. Both pages introduce tagColor mappings, restructure their data models, rebuild page layouts with new markup, and apply comprehensive CSS overhauls. The guide introduction is additionally enhanced with a centered ecosystem image. ChangesPage UI Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
site/src/pages/index.astro (1)
10-22: ⚡ Quick winExtract the tag-color system into a shared module/style.
The homepage and guide now each carry their own
tagColormap plus near-identicalcolor-*/accent-*rules. That already creates drift risk for the “unified” design system this PR introduces, because the next palette or tag change has to stay manually synchronized in both files. Move the mapping and color classes into one shared source and have both pages consume it.Also applies to: 596-615
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@site/src/pages/index.astro` around lines 10 - 22, Extract the tag-color map and duplicated color/accent CSS into a single shared module and stylesheet: create a shared JS/TS export (e.g., export const tagColor: Record<string,string>) containing the mapping currently defined as tagColor, move the duplicated CSS rules (the color-* and accent-* classes) into one shared CSS/SCSS file, then update both pages to import the shared tagColor module and include the shared stylesheet instead of local copies; ensure symbol names remain tagColor and the class names (color-*/accent-*) are unchanged so the pages’ markup continues to work.site/src/pages/guide/index.astro (1)
427-438: ⚡ Quick winAllow guide card headers to wrap.
Unlike the homepage card header, this one has no wrap/shrink guard. Long names such as
Jakarta JSON-B + JAXBcan overflow against the badge on narrower widths.Possible fix
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; + flex-wrap: wrap; } .card-name { font-size: 0.9rem; font-weight: 700; color: var(--color-primary); + min-width: 0; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@site/src/pages/guide/index.astro` around lines 427 - 438, The .card-header currently allows the name to overflow the badge; update the CSS for .card-name (used inside .card-header) to allow wrapping and let flex shrink it: add "flex: 1 1 auto; min-width: 0;" and enable wrapping/soft breaks (e.g. "overflow-wrap: anywhere;" or "word-break: break-word;") so long names like "Jakarta JSON-B + JAXB" wrap instead of overlapping the badge.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@site/src/pages/guide/index.astro`:
- Around line 192-195: Update the section heading text from “Contributing &
Maintainer” to “Contributing & Maintainers” by editing the h2 element with class
"section-heading" (the element that contains the span with class "section-icon"
and the emoji 🛠) so the visible title matches the plural form.
---
Nitpick comments:
In `@site/src/pages/guide/index.astro`:
- Around line 427-438: The .card-header currently allows the name to overflow
the badge; update the CSS for .card-name (used inside .card-header) to allow
wrapping and let flex shrink it: add "flex: 1 1 auto; min-width: 0;" and enable
wrapping/soft breaks (e.g. "overflow-wrap: anywhere;" or "word-break:
break-word;") so long names like "Jakarta JSON-B + JAXB" wrap instead of
overlapping the badge.
In `@site/src/pages/index.astro`:
- Around line 10-22: Extract the tag-color map and duplicated color/accent CSS
into a single shared module and stylesheet: create a shared JS/TS export (e.g.,
export const tagColor: Record<string,string>) containing the mapping currently
defined as tagColor, move the duplicated CSS rules (the color-* and accent-*
classes) into one shared CSS/SCSS file, then update both pages to import the
shared tagColor module and include the shared stylesheet instead of local
copies; ensure symbol names remain tagColor and the class names
(color-*/accent-*) are unchanged so the pages’ markup continues to work.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 5afe114a-02fa-4314-8355-7ffbf195fdb6
📒 Files selected for processing (3)
site/src/data/guide/introduction.mdxsite/src/pages/guide/index.astrosite/src/pages/index.astro
…overflow
- Fix "Contributing & Maintainer" → "Contributing & Maintainers"
- Add flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere to .card-name
to prevent long type names from overflowing the badge container
Pull Request
📌 Summary
Briefly describe the purpose of this pull request and what problem it solves.
✅ Checklist
Please check all that apply:
🔗 Related Issues
Closes #[issue-number]
Fixes #[issue-number]
(Related but not closing: #[issue-number])
💬 Additional Notes
Any other context, screenshots, design decisions, or points to be reviewed carefully.
Summary by CodeRabbit