feat(docs): Complete documentation overhaul with accurate architecture#240
Conversation
- Added Cmd+K search with cmdk - Added Table of Contents with scroll spy - Added breadcrumb navigation - Added syntax highlighted code blocks with copy button and language tabs - Added callout components (info, warning, tip, danger, success) - Added step-by-step tutorial components - Added prerequisites with collapsible - Added time estimate and difficulty badges - Added pagination (prev/next) - Upgraded DocsSidebar with icons and search - Upgraded DocsLayout with mobile support and TOC - Redesigned DocsHomePage with professional look - Rewrote MCPSetupPage using new components New shadcn components: - scroll-area - collapsible - command (cmdk) Added dependencies: - cmdk - @radix-ui/react-scroll-area - @radix-ui/react-collapsible
New pages: - QuickStartPage: Hosted, Docker, and Manual setup options - SemanticSearchPage: How semantic search works, usage, examples - DependencyAnalysisPage: Graph visualization, reading the graph - ImpactPredictionPage: Blast radius, risk levels, API response - CodeStyleAnalysisPage: Naming conventions, patterns, use cases Updated routing in App.tsx for all new pages Removed AI-looking badges from page headers
New pages: - MCPToolsPage: Complete reference for all 7 MCP tools with parameters - MCPExamplesPage: Real-world prompt examples organized by use case - DockerSetupPage: Docker Compose setup with env vars and commands - SelfHostingPage: Railway, Fly.io, and VPS deployment guides Updated routing in App.tsx for all new pages
New pages: - APIOverviewPage: Base URL, authentication, error handling, rate limits - APIRepositoriesPage: List, get, create, delete, reindex endpoints - APISearchPage: Semantic search with parameters and examples - APIAnalysisPage: Dependencies, impact, style, insights endpoints All major documentation sections now complete: - Getting Started (intro, quickstart) - MCP Integration (setup, tools, examples) - Features (search, dependencies, impact, style) - Deployment (docker, self-hosting) - API Reference (overview, repos, search, analysis) Only placeholders remaining: Architecture, Contributing
- All API endpoints now correctly show /api/v1 prefix - Fixed impact endpoint: POST not GET, takes JSON body not query params - Fixed style endpoint: /style-analysis not /style - Updated all curl examples with correct URLs
Architecture page includes: - Complete tech stack breakdown (backend + frontend) - Data flow diagrams for indexing and search pipelines - Backend services documentation - Frontend structure overview - MCP server explanation - Database schema overview - Emphasis on Bun requirement for frontend Contributing page includes: - Prerequisites with accurate versions - Local setup instructions (using Bun, not npm) - Test commands - Code style guidelines - PR process - Project structure reference
- Changed npm install to bun install - Changed npm run build to bun run build - Added explicit warning about using Bun exclusively
Navigation now flows correctly through all sections: Getting Started → MCP → Features → Deployment → API Reference → Contributing
|
@DevanshuNEU is attempting to deploy a commit to the Dev's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, 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 have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughAdds a comprehensive docs system and many docs-focused UI components to the frontend, expands routing for documentation pages, enforces Bun for frontend package management in docs and scripts, and introduces Radix/CmdK wrapper UI primitives plus related dependencies. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BrowserRouter
participant DocsSearch
participant DocsLayout
participant DocsTableOfContents
participant ScrollToTop
User->>BrowserRouter: navigate or press Cmd/Ctrl+K
BrowserRouter->>DocsSearch: open CommandDialog (search)
DocsSearch->>BrowserRouter: navigate to selected doc href
BrowserRouter->>DocsLayout: render selected docs page
DocsLayout->>DocsTableOfContents: compute TOC via useTableOfContents
BrowserRouter->>ScrollToTop: trigger scroll reset on route change
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Keep single source of truth in DocsRelated.tsx
…ayout - Move useLocation and cn imports to top of file - Add API Reference section to mobile navigation - Add Contributing section (Architecture, Development Setup)
Use canonical TimeEstimate and DifficultyBadge from DocsBadges. DocsPrerequisites already exists in DocsPrerequisites.tsx.
Add API Reference (Overview, Repositories, Search, Analysis) and Contributing (Architecture, Development Setup) to search results
Prevents parent routes from highlighting on child pages
repo_id is taken from the URL path, not the body
Moved explanation to paragraph below for valid copy-paste JSON
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@CLAUDE.md`:
- Around line 36-40: The fenced code block containing the directory list (lines
starting with "backend/", "frontend/", "mcp-server/") is missing a language
identifier; update the opening fence (the triple backticks) to include a
language specifier such as plaintext (e.g., change ``` to ```plaintext) so the
block is lint-compliant and renders with proper highlighting.
- Around line 7-9: Update CLAUDE.md to remove or relax the overly restrictive
rules on lines 7-9: either delete the "Files must stay under 200 lines" rule or
change it to guidance (e.g., prefer smaller modules but allow exceptions) and
allow JSDoc blocks (or limit to public APIs), and add an enforcement policy for
exceptions; reference the large legitimate files (backend/routes/playground.py,
backend/services/dna_extractor.py,
frontend/src/components/DependencyGraph/index.tsx) and the JSDoc users
(frontend/src/services/playground-api.ts, frontend/src/config/api.ts,
frontend/src/hooks/useViewTransition.ts) so reviewers know these are approved
exceptions and update the doc text to state the new rule, the exception process,
and where JSDoc is allowed.
🧹 Nitpick comments (6)
frontend/src/components/docs/DocsPageHeader.tsx (1)
30-34: Falsy check on a numeric prop can hide the badge row whentimeEstimateis0.Using
timeEstimate || difficultyandtimeEstimate && <…>means a value of0is treated as "not provided." While0minutes is unlikely in practice, using explicit!= nullchecks is more defensive for numeric optional props.Suggested diff
- {(timeEstimate || difficulty) && ( + {(timeEstimate != null || difficulty) && ( <div className="flex items-center gap-3"> - {timeEstimate && <TimeEstimate minutes={timeEstimate} />} + {timeEstimate != null && <TimeEstimate minutes={timeEstimate} />} {difficulty && <DifficultyBadge level={difficulty} />} </div> )}frontend/src/components/docs/DocsSearch.tsx (1)
186-193:groupedPagesrecomputed on every render.
docsPagesis a module-level constant, so the grouping result never changes. Consider memoizing or hoisting it to module scope alongsidedocsPages.♻️ Suggested change
+// Group pages by category (static, computed once) +const groupedPages = docsPages.reduce((acc, page) => { + if (!acc[page.category]) { + acc[page.category] = [] + } + acc[page.category].push(page) + return acc +}, {} as Record<string, DocPage[]>) + export function DocsSearch() { const [open, setOpen] = useState(false) const navigate = useNavigate() ... - // Group pages by category - const groupedPages = docsPages.reduce((acc, page) => { - if (!acc[page.category]) { - acc[page.category] = [] - } - acc[page.category].push(page) - return acc - }, {} as Record<string, DocPage[]>)frontend/src/pages/api/APIRepositoriesPage.tsx (1)
171-224: Consider extractingEndpointHeaderandParamTableas shared docs components.These helpers are defined locally here, but
APIAnalysisPage.tsx(Lines 32–37, 82–87, 139–144, 178–183) duplicates the same endpoint badge markup inline. Extracting them into@/components/docswould eliminate duplication across all four API doc pages.frontend/src/pages/api/APIAnalysisPage.tsx (2)
32-37: Endpoint badge markup is duplicated inline across all four sections.
APIRepositoriesPage.tsxalready defines anEndpointHeadercomponent for this exact pattern. These four inline instances should reuse it (or a shared version of it) to stay DRY.Also applies to: 82-87, 139-144, 178-183
75-76: Gitleaks flagsYOUR_API_KEYas a potential secret — false positive, but consider angle-bracket placeholders.The static analysis tool flags the
Authorization: Bearer YOUR_API_KEYstrings. These are clearly documentation placeholders, not real secrets. Using<YOUR_API_KEY>(with angle brackets) is a common convention that makes the placeholder nature even more explicit and may suppress the Gitleaks warning.Also applies to: 129-133, 219-220
frontend/src/components/docs/DocsSidebar.tsx (1)
30-78: Navigation data is defined in three separate places.The same page list is maintained in:
DocsSidebar.tsx(navigation, Lines 30–78)DocsSearch.tsx(docsPages, Lines 32–163)DocsLayout.tsx(mobileNavigation, Lines 108–156)Adding or renaming a page requires updating all three. Consider extracting a single
docsNavigationdata source (without icons/descriptions) and deriving each variant from it.
- Changed 200-line limit from hard rule to guidance - Added JSDoc policy section with approved files - Added large file exceptions with specific approved files - Added plaintext language to code fence - Removed overly restrictive 'no JSDoc' rule
Falsy check would hide badge row when timeEstimate is 0
docsPages is constant, no need to recompute grouping on every render
…nings Changed YOUR_API_KEY to <YOUR_API_KEY> across all API docs
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/src/pages/api/APIAnalysisPage.tsx`:
- Around line 136-173: The Code Style section (the "Code Style" h2 and its
DocsCodeBlock) is missing a curl example like the other sections; add a curl
example block that shows a GET request to /api/v1/repos/{repo_id}/style-analysis
and a minimal curl command users can copy (e.g., curl -X GET
"https://…/api/v1/repos/{repo_id}/style-analysis" -H "Authorization: Bearer
<token>") placed immediately after the existing DocsCodeBlock for the Code Style
response so it matches the pattern used by Dependency Graph, Impact Analysis,
and Repository Insights.
🧹 Nitpick comments (3)
frontend/src/components/docs/DocsSearch.tsx (1)
203-205: Keyboard shortcut hint only shows⌘K(Mac) — consider platform detection.The listener correctly handles both
metaKey(Mac) andctrlKey(Windows/Linux), but the<kbd>element always renders the Mac symbol⌘. Windows/Linux users won't recognise this as their shortcut.Suggested platform-aware hint
+const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform) + export function DocsSearch() { ... <kbd className="hidden sm:inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 bg-white/5 border border-white/10 rounded"> - <span className="text-xs">⌘</span>K + <span className="text-xs">{isMac ? '⌘' : 'Ctrl+'}</span>K </kbd>frontend/src/pages/api/APIRepositoriesPage.tsx (1)
171-187: Consider extractingEndpointHeaderfor reuse across API doc pages.
APIAnalysisPage.tsxduplicates the endpoint-header markup inline (colored method badge + path in a bordered container) instead of reusing this component. ExtractingEndpointHeader(andParamTable) into a shared module (e.g.,@/components/docs) would eliminate the duplication and keep styling consistent if it changes later.frontend/src/pages/api/APIAnalysisPage.tsx (1)
32-37: Inline endpoint-header markup duplicates theEndpointHeadercomponent fromAPIRepositoriesPage.All four sections hand-roll the same colored-badge + path layout that
APIRepositoriesPagealready encapsulates in a reusableEndpointHeadercomponent. This was noted in the other file as well — extracting it to a shared location would remove ~40 lines of duplication here.Also applies to: 82-87, 139-144, 178-183
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
@coderabbitai resolve |
✅ Actions performedComments resolved. Auto-approval is disabled; enable |
1 participant
Summary
Complete documentation system overhaul with accurate technical information, proper navigation, and contributor-friendly guides.
Changes
New Pages Created
Fixes
/api/v1/prefix/style-analysis(not/style)Code Quality
Commits
Summary by CodeRabbit
New Features
Documentation
Chores
Style