refactor(docs): migrate to pure Astro + inline JS, remove React/MDX#50
Conversation
Migrate docs from React islands to pure Astro with catch-all route. Move wiki/ → docs/wiki/, fix broken markdown links, kebab-case filenames. Split globals.css into base + docs.css external stylesheets. Add categorized sidebar with absolute BASE_URL links, search, scrollspy. Dynamic SEO URLs via Astro.site, prefers-reduced-motion support.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThe PR removes the React integration and related React components from the Astro docs site, consolidates doc rendering and client behaviors into a new Astro route ChangesDocumentation Architecture Refactor
Sequence DiagramsequenceDiagram
participant Browser
participant DocPage as docs/[...slug].astro
participant WikiModules as Wiki Modules (../../wiki/*.md)
participant DOM
Browser->>DocPage: Request /docs or /docs/[section]
activate DocPage
DocPage->>WikiModules: import.meta.glob('../../wiki/*.md')
WikiModules-->>DocPage: Resolved markdown modules
DocPage->>DocPage: Render BaseLayout + Sidebar + Section HTML + inline client script
DocPage-->>Browser: Serve HTML
deactivate DocPage
Browser->>DOM: Parse HTML, execute inline client script
activate DOM
Note over DOM: Mobile menu toggle (open/close overlay & sidebar)
Note over DOM: If root page -> hash-based auto-scroll to section
Note over DOM: If root page -> IntersectionObserver updates active nav item
Note over DOM: If root page -> Search input toggles `.hidden-section` and hides/shows nav items/categories
Browser->>DOM: User interactions (menu, search, scroll)
DOM->>DOM: Update classes (.open, .active, .hidden-section)
deactivate DOM
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Review rate limit: 9/10 reviews remaining, refill in 6 minutes. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
docs/src/styles/globals.css (1)
767-771: ⚡ Quick winDisable motion entirely in the
reducebranch.Several globals in this file use infinite keyframe animations. Setting only the durations to
0sis less reliable than turning the animations/transitions off, and it can still leave elements jumping to final states.Suggested fix
`@media` (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } *, *::before, *::after { - animation-duration: 0s !important; - transition-duration: 0s !important; + animation: none !important; + transition: none !important; } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/src/styles/globals.css` around lines 767 - 771, In the `@media` (prefers-reduced-motion: reduce) rule that targets "*, *::before, *::after" replace the current approach of only zeroing durations by disabling animations and transitions entirely: set animation to "none !important" and transition to "none !important" (and, optionally, set animation-iteration-count: 1 or remove other animation properties) for those selectors so infinite keyframe animations and transitions are fully suppressed and elements won't jump to final states.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/src/pages/docs/`[...slug].astro:
- Around line 127-129: The inline script declares isRoot twice causing a
SyntaxError; remove the redundant "const isRoot = window.__isRoot;" (and similar
duplicate at lines 211-213) and use the injected binding from define:vars
(isRoot and docsBase) directly inside the DOMContentLoaded handler (e.g.,
reference isRoot and docsBase, not window.__isRoot or a new const), leaving the
DOMContentLoaded listener and any use of isRoot/docsBase unchanged.
- Around line 139-149: The mobile drawer isn't closed when a nav link that only
changes the hash is clicked; update the event wiring so that after adding the
existing click/overlay handlers you also attach a click listener to the
sidebar's nav links (e.g., query the sidebar for its anchor elements or use
sidebar.querySelectorAll('a')) and in that handler remove the 'open' class from
sidebar and overlay and set menuToggle.setAttribute('aria-expanded','false') so
the drawer always closes on any nav click (covers hash-only links).
In `@docs/src/styles/docs.css`:
- Around line 253-260: The table rule (.docs-layout .doc-section table) causes
wide markdown tables to be clipped on small screens; wrap tables in a
horizontally scrollable container or change the selector so tables can scroll by
adding a wrapper class (e.g., .doc-table-wrap) or updating .docs-layout
.doc-section table to allow horizontal overflow (set display:block or width:auto
with overflow-x:auto and -webkit-overflow-scrolling: touch) and constrain
max-width:100% so the table can be scrolled horizontally on mobile while
preserving visual styles like border-radius by applying overflow on the wrapper
instead of the table itself.
---
Nitpick comments:
In `@docs/src/styles/globals.css`:
- Around line 767-771: In the `@media` (prefers-reduced-motion: reduce) rule that
targets "*, *::before, *::after" replace the current approach of only zeroing
durations by disabling animations and transitions entirely: set animation to
"none !important" and transition to "none !important" (and, optionally, set
animation-iteration-count: 1 or remove other animation properties) for those
selectors so infinite keyframe animations and transitions are fully suppressed
and elements won't jump to final states.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 3279a41f-7f82-4ca3-abac-fe7e4bb4ef5c
⛔ Files ignored due to path filters (1)
docs/bun.lockis excluded by!**/*.lock,!**/bun.lock
📒 Files selected for processing (23)
docs/astro.config.mjsdocs/package.jsondocs/src/components/docs/DocPageIsland.tsxdocs/src/components/docs/Sidebar.tsxdocs/src/components/docs/sections/ArchitectureSection.astrodocs/src/components/docs/sections/ChallengeSection.astrodocs/src/components/docs/sections/CiCdSection.astrodocs/src/components/docs/sections/GettingStartedSection.astrodocs/src/components/docs/sections/HomeSection.astrodocs/src/components/docs/sections/PerformanceSection.astrodocs/src/content.config.tsdocs/src/hooks/useScrollspy.tsdocs/src/layouts/BaseLayout.astrodocs/src/pages/docs/[...slug].astrodocs/src/pages/docs/index.astrodocs/src/styles/docs.cssdocs/src/styles/globals.cssdocs/wiki/architecture.mddocs/wiki/challenge.mddocs/wiki/ci-cd-pipeline.mddocs/wiki/getting-started.mddocs/wiki/home.mddocs/wiki/performance.md
💤 Files with no reviewable changes (11)
- docs/src/components/docs/sections/CiCdSection.astro
- docs/src/content.config.ts
- docs/src/components/docs/DocPageIsland.tsx
- docs/src/components/docs/sections/ChallengeSection.astro
- docs/src/hooks/useScrollspy.ts
- docs/src/pages/docs/index.astro
- docs/src/components/docs/sections/HomeSection.astro
- docs/src/components/docs/sections/PerformanceSection.astro
- docs/src/components/docs/sections/GettingStartedSection.astro
- docs/src/components/docs/Sidebar.tsx
- docs/src/components/docs/sections/ArchitectureSection.astro
- Remove duplicate isRoot const (define:vars already injects it) - Close mobile drawer after nav link click - Make doc tables horizontally scrollable on mobile
|
Fixed all CodeRabbit review comments:\n\n1. Removed duplicate isRoot const declaration (define:vars already injects it)\n2. Added closeMenu function for mobile drawer on nav click\n3. Made doc tables horizontally scrollable on mobile (max-width: 768px) |
Summary
[...slug].astrocatch-all route@astrojs/react,@astrojs/mdx, React, and React DOM dependencies./wiki/→./docs/wiki/, fix broken markdown links, normalize to kebab-case filenamesglobals.cssinto base styles +docs.cssexternal stylesheetAstro.site, prefers-reduced-motion supportArchitecture
docs/index.astro+ 6 hardcoded section componentsdocs/[...slug].astrocatch-all withimport.meta.glob./wiki/folder (8 files, had.git/gitlink trap)./docs/wiki/(6 files, kebab-case)Filename Mapping
wiki/Home.mddocs/wiki/home.mdwiki/Architecture.mddocs/wiki/architecture.mdwiki/Challenge.mddocs/wiki/challenge.mdwiki/CI-CD-Pipeline.mddocs/wiki/ci-cd-pipeline.mdwiki/Getting-Started.mddocs/wiki/getting-started.mdwiki/Performance.mddocs/wiki/performance.mdwiki/index.mdwiki/_Footer.mdContent Fixes
challenge.md: Fixed broken link[github.com/...L(https://...md)→ proper[]()syntaxperformance.md: Fixed broken link[rinha2-back-end-k6L(https://...md)→ proper[]()syntaxhome.md: Updated wiki page links to use anchor references (#challenge, etc.)Build Output
Checklist
[...slug].astrowith catch-all routeimport.meta.globfor wiki markdown filesisRootconditional for sectionsToRendergetStaticPaths()self-contained (no module references)${docsBase}/#${anchor})Summary by CodeRabbit
New Features
Bug Fixes
Style
Documentation