docs: update docs home#948
Conversation
…and centered content
|
|
Caution Review failedThe pull request is closed. Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a new docs homepage component and route, integrates it into the sidebar and docs navbar (per-tab match functions), introduces DocsHome UI and styles, adjusts feature-showcase text and styling, and applies extensive docs-home-specific CSS (including a duplicated block). Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant NavBar
participant Sidebar
participant DocsHome
User->>Browser: Navigate to /docs/home
Browser->>NavBar: request active tab for current path
NavBar->>NavBar: evaluate per-tab match functions (including Home)
NavBar-->>Browser: render nav with Home active
Browser->>Sidebar: render page (docs-home CSS may hide sidebar)
Browser->>DocsHome: mount component
DocsHome-->>Browser: render hero, features, showcase, links
Browser-->>User: display docs home page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
✏️ Tip: You can disable this entire section by setting Comment |
Deploying voltagent with
|
| Latest commit: |
20a0dee
|
| Status: | ⚡️ Build in progress... |
This comment has been minimized.
This comment has been minimized.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@website/src/components/docs-widgets/DocsHome.tsx`:
- Around line 131-133: The full-width breakout div in the DocsHome component
using the left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen pattern can produce
horizontal scroll; fix by ensuring overflow-x is hidden at the root so the
breakout cannot create a scrollbar—add overflow-x: hidden to the global layout
or body (or the nearest top-level wrapper that contains <FeatureShowcase />) so
the full-width technique won’t cause horizontal overflow.
In `@website/src/components/feature-showcase/mock-data.ts`:
- Line 308: Fix the user-facing string in mock-data by updating the footerText
value in website/src/components/feature-showcase/mock-data.ts (the footerText
property) to include a space after the comma so "one click,no infrastructure to
manage" becomes "one click, no infrastructure to manage".
🧹 Nitpick comments (2)
website/src/components/doc-navbar/index.tsx (1)
87-89: Consider extracting inline Tailwind styles to CSS module.The brand icon uses inline Tailwind classes while the rest of the component uses CSS module styles. For consistency, consider moving these styles to
styles.module.css.♻️ Suggested refactor
- <span className="flex items-center justify-center w-8 h-8 rounded-full border-2 border-solid border-[`#00d992`] bg-[rgba(0,217,146,0.08)]"> - <BoltIcon className="w-4 h-4 text-[`#00d992`]" /> + <span className={styles.brandIconWrapper}> + <BoltIcon className={styles.brandIcon} /> </span>Then add corresponding styles to the CSS module.
website/src/components/docs-widgets/DocsHome.tsx (1)
160-180: Consider making the entire card clickable for better UX.Currently, only the inner
<Link>is clickable while the outer<div>has the card styling. Users might click on the card padding/border area expecting navigation.♻️ Suggested improvement
{quickLinks.map((link) => ( - <div + <Link + to={link.href} key={link.title} - className="group p-3 md:p-4 rounded-lg !border !border-solid !border-zinc-800 transition-all duration-200" + className="group p-3 md:p-4 rounded-lg !border !border-solid !border-zinc-800 transition-all duration-200 no-underline hover:no-underline hover:border-zinc-700" > <div className="flex items-start gap-2 md:gap-3"> <link.icon className="w-4 h-4 md:w-5 md:h-5 text-[`#00d992`] flex-shrink-0 mt-0.5" /> - <Link - to={link.href} - className="text-white font-medium hover:text-emerald-400 transition-colors no-underline hover:no-underline" - > - <div className="flex text-white flex-col"> - <span className="text-sm md:text-base">{link.title}</span> - <span className="text-[`#b2b2b2`] text-xs md:text-sm mt-1"> - {link.description} - </span> - </div> - </Link> + <div className="flex text-white flex-col"> + <span className="text-sm md:text-base font-medium group-hover:text-emerald-400 transition-colors">{link.title}</span> + <span className="text-[`#b2b2b2`] text-xs md:text-sm mt-1"> + {link.description} + </span> + </div> </div> - </div> + </Link> ))}
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
website/docs/home.mdwebsite/sidebars.tswebsite/src/components/doc-navbar/index.tsxwebsite/src/components/docs-widgets/DocsHome.tsxwebsite/src/components/feature-showcase/index.tsxwebsite/src/components/feature-showcase/mock-data.tswebsite/src/components/navbar/index.tsxwebsite/src/components/navbar/styles.module.csswebsite/src/css/custom.css
🧰 Additional context used
📓 Path-based instructions (1)
**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.ts: Maintain type safety in TypeScript-first codebase
Never use JSON.stringify; use thesafeStringifyfunction instead, imported from@voltagent/internal
Files:
website/sidebars.tswebsite/src/components/feature-showcase/mock-data.ts
🧬 Code graph analysis (2)
website/src/components/docs-widgets/DocsHome.tsx (2)
website/src/components/ui/dot-pattern.tsx (1)
DotPattern(10-63)website/src/components/feature-showcase/index.tsx (1)
FeatureShowcase(31-281)
website/src/components/navbar/index.tsx (2)
website/src/theme/Navbar/index.js (1)
location(8-8)website/src/theme/TOC/index.js (1)
location(11-11)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (9)
- GitHub Check: cubic · AI code reviewer
- GitHub Check: Test server-core
- GitHub Check: Test core
- GitHub Check: Test cli
- GitHub Check: Build (Node 22)
- GitHub Check: Build (Node 20)
- GitHub Check: Build (Node 24)
- GitHub Check: Lint (Node 22)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (18)
website/src/components/navbar/styles.module.css (1)
371-379: Styling updates look good.The increased icon size with border styling creates better visual hierarchy. Minor nit: Line 373 has trailing whitespace after
1.5rem ;but this is cosmetic.website/src/components/navbar/index.tsx (2)
45-81: Tab configuration refactoring looks solid.The function-based matching approach is more flexible than string prefixes and handles the new Home tab routing correctly. The VoltAgent match logic properly excludes
/docs/hometo prevent both tabs appearing active simultaneously.
224-226: Tab matching implementation is correct.The call to
tab.match(location.pathname)correctly invokes the function-based matching defined in the tab configuration.website/src/components/doc-navbar/index.tsx (2)
21-31: Home tab configuration is well-implemented.The exact path matching for the Home tab (
pathname === "/docs/home/" || pathname === "/docs/home") correctly handles both trailing slash variants. The VoltAgent exclusion logic prevents multiple active states.
145-164: Mobile menu Home link addition is correct.The new Home link follows the same pattern as existing mobile links with proper active state handling and menu close behavior.
website/src/css/custom.css (3)
4669-4686: Sidebar header styling updates are consistent.The typography changes (font-weight: 500, capitalize text-transform, letter-spacing: 0.02em) improve readability and create a more refined visual hierarchy for the sidebar navigation.
5880-5968: Docs Home Page styling is well-structured.The comprehensive styling for the docs home page correctly:
- Hides the sidebar when
.docs-homeis present- Centers content with appropriate max-width
- Handles hero section typography and button alignment
- Uses
:has()selector for contextual styling
5969-6048: No unintended CSS duplication found.The "Docs Home Page Styles" comment appears only once in the file. While there are multiple
.docs-homeselectors scattered throughout the file (lines 5882–6035), the entire block at lines 5969–6048 is not accidentally duplicated. The repeated comments and similar rules (e.g., "Hide sidebar on docs home page" at both lines 5885 and 5993) use different selectors targeting distinct DOM structures, confirming this is intentional for cross-version Docusaurus compatibility.website/docs/home.md (1)
1-11: Docs home page configuration is correct.The frontmatter properly configures this as a landing page:
hide_table_of_contents: trueandhide_title: trueallow the DocsHome component to control the full layoutcustom_edit_url: nullappropriately hides the edit link for a component-rendered page- The
@siteimport alias correctly resolves to the existing DocsHome componentwebsite/sidebars.ts (1)
15-19: LGTM!The new "Home" sidebar item follows Docusaurus conventions and is correctly placed at the start of the docs array for proper navigation hierarchy.
website/src/components/docs-widgets/DocsHome.tsx (3)
1-12: LGTM!The imports are well-organized. The
@ts-expect-errorfor the Docusaurus theme component is an acceptable pattern since@theme/CodeBlockdoesn't export TypeScript types.
14-27: LGTM!The code example is well-structured and provides a clear introduction to VoltAgent usage.
31-52: All three quick link URLs are correctly configured and properly resolve to their intended destinations.After verifying against the documentation configuration:
/docs/quick-start/— Correctly maps to the Quick Start guide (slug/quick-startinquick-start.md)/recipes-and-guides/— Correctly maps to the Recipes & Guides section (configured indocusaurus.config.tswithrouteBasePath: "recipes-and-guides")/tutorial/introduction/— Correctly maps to the tutorial introduction page (introduction.tsxexists insrc/pages/tutorial/)No URL corrections are needed.
Likely an incorrect or invalid review comment.
website/src/components/feature-showcase/mock-data.ts (1)
299-299: LGTM!The updated guardrails description is clear and accurately reflects the feature capabilities.
website/src/components/feature-showcase/index.tsx (4)
72-77: LGTM!The
!importantmodifiers on border classes are a reasonable approach for ensuring consistent styling in Docusaurus's themed environment where CSS specificity can be challenging.
114-117: LGTM!Good responsive design adjustment — smaller icons on mobile (
w-3.5 h-3.5) improve the tab bar layout on constrained screens while maintaining larger icons (md:w-5 md:h-5) on desktop.
133-140: LGTM!Changing from
<p>to<span>is semantically correct here since this text is inline content within a flex container, not a standalone paragraph.
206-206: Good fix for the CSS class typo.Changed
bg:blacktobg-black— the colon was incorrect syntax for Tailwind classes.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| <div className="my-6 md:my-12 relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen max-w-none px-2 md:px-8"> | ||
| <FeatureShowcase /> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n website/src/components/docs-widgets/DocsHome.tsx | head -150Repository: VoltAgent/voltagent
Length of output: 7228
🏁 Script executed:
rg -n "overflow-x|overflow:" website/src/components/docs-widgets/ -A 1Repository: VoltAgent/voltagent
Length of output: 386
🏁 Script executed:
fd -e css -e scss -e ts -e tsx website/ -x rg -l "overflow-x.*hidden|overflow.*hidden" {}Repository: VoltAgent/voltagent
Length of output: 400
🏁 Script executed:
# Check the root HTML/body level styles
find website -name "*.css" -o -name "*.scss" | head -20 | xargs rg -n "overflow" -C 2Repository: VoltAgent/voltagent
Length of output: 6822
Full-width breakout technique may cause horizontal overflow.
The left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen pattern on line 131 can create horizontal scrollbars if overflow is not handled at the page or body level. Ensure the root layout or document body has overflow-x: hidden to prevent this UX issue.
🤖 Prompt for AI Agents
In `@website/src/components/docs-widgets/DocsHome.tsx` around lines 131 - 133, The
full-width breakout div in the DocsHome component using the left-1/2 right-1/2
-ml-[50vw] -mr-[50vw] w-screen pattern can produce horizontal scroll; fix by
ensuring overflow-x is hidden at the root so the breakout cannot create a
scrollbar—add overflow-x: hidden to the global layout or body (or the nearest
top-level wrapper that contains <FeatureShowcase />) so the full-width technique
won’t cause horizontal overflow.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
1 issue found across 9 files
Prompt for AI agents (all issues)
Check if these issues are valid — if so, understand the root cause of each and fix them.
<file name="website/src/components/feature-showcase/mock-data.ts">
<violation number="1" location="website/src/components/feature-showcase/mock-data.ts:308">
P3: Add the missing space after the comma so the footer text reads naturally ("one click, no infrastructure").</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
…gent into update-docs-home
1 participant
PR Checklist
Please check if your PR fulfills the following requirements:
Bugs / Features
What is the current behavior?
What is the new behavior?
fixes (issue)
Notes for reviewers
Summary by cubic
Adds a dedicated Docs Home at /docs/home with a centered hero, quick-start links, and a feature showcase. Updates navigation and styles to surface the new home and improve docs readability.
Written for commit 20a0dee. Summary will update on new commits.
Summary by CodeRabbit
New Features
Style
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.