[docs][ui][fixes] - Fixes welcome/guides tabs, better components#1027
[docs][ui][fixes] - Fixes welcome/guides tabs, better components#1027madster456 wants to merge 9 commits intodevfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughA new MCP (Model Context Protocol) setup guide is introduced as documentation across multiple clients (Cursor, VS Code, Claude, Windsurf, ChatGPT, Gemini CLI) with tabbed installation instructions. A reusable QuickLinks/QuickLink component is added for quick-access navigation layouts. Documentation navigation and sidebar rendering are updated to handle special items (Overview, FAQ) and adjust active-link matching logic. Various styling refinements and component exports are also applied. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ 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 |
Greptile OverviewGreptile SummaryThis PR improves the documentation UI with a new QuickLinks component, fixes navigation issues with Welcome/Guides tabs, and restores the MCP setup documentation. Key Changes
Confidence Score: 5/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User
participant Browser
participant Overview as overview.mdx
participant QuickLinks as QuickLinks Component
participant Sidebar as Docs Sidebar
participant NavHeader as Navigation Header
User->>Browser: Navigate to /docs/overview
Browser->>Overview: Render page
Overview->>QuickLinks: Render <QuickLinks> with gradient cards
QuickLinks->>Browser: Display centered grid with hover effects
Browser->>Sidebar: Render sidebar navigation
Sidebar->>Sidebar: Find Overview & FAQ items
Sidebar->>Browser: Display Overview/FAQ in bordered container
Sidebar->>Browser: Display other items below
Browser->>NavHeader: Update active tab
NavHeader->>NavHeader: Check if pathname is /docs/overview or /docs/faq
NavHeader->>Browser: Highlight "Welcome" tab
User->>Browser: Click on "Guides" tab
Browser->>NavHeader: Navigate to /docs/getting-started/setup
NavHeader->>Browser: Highlight "Guides" tab
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![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
🧹 Nitpick comments (1)
docs/src/components/layouts/docs.tsx (1)
323-349: Consider refactoring special items identification logic.The current implementation duplicates the item-finding logic and uses both URL suffix and name matching. This could be more maintainable:
Apply this diff to refactor the logic:
+ const SPECIAL_ITEM_PATHS = [ + { urlSuffix: '/overview', name: 'Overview' }, + { urlSuffix: '/faq', name: 'FAQ' } + ]; + + const isSpecialItem = (item: PageTree.Node) => { + if (item.type !== 'page') return false; + return SPECIAL_ITEM_PATHS.some( + special => item.url.endsWith(special.urlSuffix) || item.name === special.name + ); + }; + - const overviewItem = tree.children.find( - (item) => - item.type === 'page' && - (item.url.endsWith('/overview') || item.name === 'Overview') - ); - const faqItem = tree.children.find( - (item) => - item.type === 'page' && - (item.url.endsWith('/faq') || item.name === 'FAQ') - ); - - const specialItems = [overviewItem, faqItem].filter( - (item): item is PageTree.Node => !!item - ); + const specialItems = tree.children.filter(isSpecialItem); const otherItems = tree.children.filter( (item) => !specialItems.includes(item) );This refactor:
- Centralizes special item definitions
- Eliminates duplication
- Makes it easier to add/remove special items in the future
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
docs/content/docs/(guides)/meta.json(1 hunks)docs/content/docs/(guides)/others/mcp-setup.mdx(1 hunks)docs/content/docs/(guides)/overview.mdx(1 hunks)docs/src/components/layouts/docs.tsx(3 hunks)docs/src/components/layouts/shared-header.tsx(2 hunks)docs/src/components/mdx/app-card.tsx(1 hunks)docs/src/components/mdx/index.ts(1 hunks)docs/src/components/mdx/quick-links.tsx(1 hunks)docs/src/lib/navigation-utils.ts(1 hunks)docs/src/mdx-components.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
docs/src/components/mdx/quick-links.tsx (2)
docs/src/components/icons.tsx (2)
FileText(207-219)Code(340-343)docs/src/components/mdx/index.ts (2)
QuickLink(6-6)QuickLinks(6-6)
⏰ 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). (10)
- GitHub Check: setup-tests
- GitHub Check: build (22.x)
- GitHub Check: restart-dev-and-test-with-custom-base-port
- GitHub Check: build (22.x)
- GitHub Check: build (22.x)
- GitHub Check: check_prisma_migrations (22.x)
- GitHub Check: docker
- GitHub Check: restart-dev-and-test
- GitHub Check: lint_and_build (latest)
- GitHub Check: all-good
🔇 Additional comments (18)
docs/src/components/mdx/app-card.tsx (1)
112-119: LGTM! Clean centering implementation.The layout changes properly center the app grid with a max-width constraint, aligning with the PR objective to center app-icons on the overview page.
docs/content/docs/(guides)/meta.json (1)
47-47: LGTM! Metadata correctly updated.The addition of
"others/mcp-setup"properly registers the new MCP setup guide in the documentation navigation structure.docs/src/components/layouts/shared-header.tsx (2)
53-53: LGTM! Correct active state handling for Welcome.The updated condition properly includes both
/docs/overviewand/docs/faqunder the Welcome section, ensuring accurate navigation highlighting.
65-66: LGTM! Proper exclusion of FAQ from Guides.The Guides condition now correctly excludes
/docs/faqalong with other special paths, maintaining clean separation between navigation sections.docs/src/mdx-components.tsx (2)
13-13: LGTM! Components properly imported.The QuickLink and QuickLinks components are correctly imported alongside existing MDX components.
49-50: LGTM! Components properly registered.The QuickLink and QuickLinks components are correctly added to the MDX components object, making them available for use in MDX files.
docs/src/components/layouts/docs.tsx (2)
142-142: LGTM! Styling refinement.The change from
rounded-mdtorounded-lgprovides slightly more rounded corners, consistent with modern UI design patterns.
231-231: LGTM! Consistent styling update.The border radius update matches the styling change in DocsSidebarLink, maintaining visual consistency.
docs/src/components/mdx/index.ts (1)
6-6: Verified: QuickLinks component implementation exists with proper exports.The file
docs/src/components/mdx/quick-links.tsxis present and correctly exports bothQuickLink(line 43) andQuickLinks(line 116). The export statement inindex.tsis valid.docs/content/docs/(guides)/overview.mdx (1)
9-46: Remove the review comment - the gradient prop is unused and non-functional.The gradient values in the QuickLink components are irrelevant because the
gradientprop is explicitly marked as "not used in current design" in the component source code (docs/src/components/mdx/quick-links.tsx, line 37-39). The prop is accepted but ignored entirely by the component—whether the values are0, 1, 1, 3or any other sequence has no visual or functional impact. The duplicate gradient value and the missing gradient value are not concerns.Likely an incorrect or invalid review comment.
docs/src/components/mdx/quick-links.tsx (3)
1-6: LGTM!The client directive and imports are appropriate for this interactive component in Next.js 15 App Router.
8-14: LGTM!The icon mapping provides a clean migration path from FontAwesome to Lucide icons. The limited set is appropriate as it can be extended when needed.
104-130: LGTM!The QuickLinks container component provides a clean, responsive grid layout with proper centering and equal-height cards.
docs/content/docs/(guides)/others/mcp-setup.mdx (5)
125-229: LGTM!The Markdown instructions section provides useful copyable content for README files. The use of template literal syntax and pre/code blocks is appropriate for MDX.
232-239: LGTM!The Features section clearly outlines the capabilities of the Stack Auth MCP server.
5-9: No issues found.Both the
StackAuthIconcomponent and the image file are properly available. The component is correctly exported from the MDX components context, and the image file exists at the expected path.
27-27: Button component properly supportshrefandiconprops as used in the file.The Button component implementation in
docs/src/components/mdx/button.tsxconfirms:
iconprop acceptsReact.ReactNode, enabling custom elements like<img>hrefprop creates navigable anchor tags when provided- Both lines 27 and 47 correctly use these props
27-27: No issues found. Deep link encoding is correct.The base64-encoded configuration decodes successfully to valid JSON:
{"url": "https://mcp.stack-auth.com/"}. The encoding is properly formatted and contains the correct MCP server endpoint.
| /** | ||
| * Gradient index - not used in current design | ||
| */ | ||
| gradient?: number, |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove the unused gradient prop.
The gradient prop is defined but never used in the component implementation (not destructured on lines 43-48 and not referenced in the JSX). This is dead code that adds confusion to the API surface.
Apply this diff to remove the unused prop:
/**
- * Gradient index - not used in current design
- */
- gradient?: number,
-}
+ */
+ icon?: string,
+}Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In docs/src/components/mdx/quick-links.tsx around lines 37 to 40, remove the
unused gradient prop declaration from the component props (delete the line
"gradient?: number,"), update any related prop type/interface so it no longer
includes gradient, and ensure there are no remaining references or defaults for
gradient elsewhere in the file; run TypeScript checks to confirm no usages
remain and adjust any callers or tests if they reference this prop.
|
|
||
| const DOCS_OVERVIEW_PATH = '/docs/overview'; | ||
| const DOCS_GUIDES_PATH = '/docs/overview'; | ||
| const DOCS_GUIDES_PATH = '/docs/getting-started/setup'; |
There was a problem hiding this comment.
🧩 Analysis chain
Verify the navigation path change across the codebase.
The Guides navigation path has been updated from /docs/overview to /docs/getting-started/setup. Ensure that:
- The new target page exists and is properly configured
- Any hardcoded references to the old path are updated
- User-facing documentation and links reflect this change
Run the following script to verify the path change:
🏁 Script executed:
#!/bin/bash
# Verify the new setup page exists and check for old path references
echo "=== Checking if new setup page exists ==="
fd -t f "setup.mdx" docs/content/docs/
echo -e "\n=== Checking for hardcoded references to old guides path ==="
rg -n "/docs/overview" --type-add 'web:*.{ts,tsx,js,jsx,mdx,json}' --type web -g '!*.test.*'
echo -e "\n=== Checking navigation configuration ==="
rg -n "DOCS_GUIDES_PATH|guides.*path" docs/src/lib/Length of output: 1068
I need to clarify whether the /docs/overview references found are related to this change or represent separate navigation elements.The web search provided general documentation patterns, but doesn't help clarify the specific context of this codebase. Let me search for whether /docs/overview page still exists and verify the scope of the change.
---
🏁 Script executed:
```shell
#!/bin/bash
# Check if /docs/overview page exists
echo "=== Checking for overview page files ==="
find docs/content/docs -name "*overview*" -type f 2>/dev/null
echo -e "\n=== Checking all docs directory structure ==="
ls -la docs/content/docs/ 2>/dev/null | head -20
echo -e "\n=== Checking for any index files in guides ==="
find docs/content/docs -name "index.mdx" -o -name "_index.mdx" 2>/dev/null
Length of output: 135
Let me verify the actual structure and changes in this PR:
🏁 Script executed:
#!/bin/bash
# Get current directory and check git status to understand the PR scope
echo "=== Current directory ==="
pwd
echo -e "\n=== Git status and changed files ==="
git status --short | head -20
echo -e "\n=== Check git diff for navigation-utils.ts ==="
git diff HEAD -- docs/src/lib/navigation-utils.ts 2>/dev/null || echo "Git diff unavailable"
echo -e "\n=== Look for docs content directory ==="
find . -type d -name "docs" 2>/dev/null | grep -E "(content|source)" | head -10
echo -e "\n=== Check if /docs/overview references are still valid - search for page structure ==="
rg -n "slug.*overview|overview.*page" --type ts --type tsx -C2Length of output: 321
🏁 Script executed:
#!/bin/bash
# Direct file inspection without git
echo "=== List all mdx files in docs/content/docs ==="
find ./docs/content/docs -name "*.mdx" -type f | sort
echo -e "\n=== Check for overview or guides index files ==="
ls -la ./docs/content/docs/*/ 2>/dev/null | grep -E "(overview|guides|index)"
echo -e "\n=== Examine the actual references to /docs/overview in shared-header.tsx ==="
grep -n "/docs/overview" ./docs/src/components/layouts/shared-header.tsx -B2 -A2
echo -e "\n=== Check iconHover.tsx reference ==="
grep -n "/docs/overview" ./docs/src/components/homepage/iconHover.tsx -B2 -A2Length of output: 5553
🏁 Script executed:
#!/bin/bash
# Check if DOCS_GUIDES_PATH is exported and can be imported
echo "=== Check navigation-utils.ts exports ==="
grep -n "export" ./docs/src/lib/navigation-utils.ts | head -20
echo -e "\n=== Check if iconHover.tsx imports from navigation-utils ==="
grep -n "import\|from" ./docs/src/components/homepage/iconHover.tsx | head -10
echo -e "\n=== Check actual usage of DOCS_GUIDES_PATH in navigation-utils ==="
grep -n "DOCS_GUIDES_PATH" ./docs/src/lib/navigation-utils.ts -A1 -B1
echo -e "\n=== Check where DOCS_GUIDES_PATH is actually being used ==="
rg -n "DOCS_GUIDES_PATH" docs/src/ -C1Length of output: 1377
Update iconHover.tsx to use the exported navigation constant instead of hardcoding the old path.
The navigation path change in navigation-utils.ts is incomplete. While DOCS_GUIDES_PATH has been correctly updated to /docs/getting-started/setup and is used in the main navigation, docs/src/components/homepage/iconHover.tsx still hardcodes the old /docs/overview path on line 25. This creates an inconsistency where different parts of the UI navigate to different pages.
Required fix:
- Import
DOCS_NAV_PATHSfromdocs/src/lib/navigation-utils.tsiniconHover.tsx - Replace the hardcoded
url: "/docs/overview"withurl: DOCS_NAV_PATHS.guides(or import and useDOCS_GUIDES_PATHif exported)
🤖 Prompt for AI Agents
In docs/src/components/homepage/iconHover.tsx around line 25, the component
still hardcodes url: "/docs/overview" which is inconsistent with the updated
navigation constant; import DOCS_NAV_PATHS from docs/src/lib/navigation-utils.ts
(or DOCS_GUIDES_PATH if that is exported) at the top of the file and replace the
hardcoded url with url: DOCS_NAV_PATHS.guides (or url: DOCS_GUIDES_PATH). Ensure
the import path is correct and update any references so the component uses the
exported constant instead of the literal string.
|
Deployment failed with the following error: Learn More: https://vercel.com/docs/limits#rate-limits |
2 participants
New
Better UI that is more aligned with current styling, as well as centered on page for better experience.
Update
fixes
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.
Note
Adds MCP Setup guide, introduces new QuickLinks UI on the docs overview, and updates sidebar/nav styling and behavior with centered app grid.
others/mcp-setup.mdxwith multi-client install instructions; register indocs/(guides)/meta.json.docs/(guides)/overview.mdxto use new quick links and center app grid.QuickLinks/QuickLinkcomponents (docs/src/components/mdx/quick-links.tsx); export via MDX and wire intomdx-components.tsx.AppGridand justify items (app-card.tsx).rounded-lgand visually groupOverview/FAQin a bordered block indocs.tsx.FAQas part of “Welcome” active state; adjust “Guides” detection and set Guides path to/docs/getting-started/setup(shared-header.tsx,navigation-utils.ts).Written by Cursor Bugbot for commit 30f7724. This will update automatically on new commits. Configure here.