Skip to content

refactor(docs): migrate to pure Astro + inline JS, remove React/MDX#50

Merged
jonathanperis merged 2 commits into
mainfrom
feat/docs-pure-astro
May 3, 2026
Merged

refactor(docs): migrate to pure Astro + inline JS, remove React/MDX#50
jonathanperis merged 2 commits into
mainfrom
feat/docs-pure-astro

Conversation

@jonathanperis
Copy link
Copy Markdown
Owner

@jonathanperis jonathanperis commented May 3, 2026

Summary

  • Migrate docs from React islands (DocPageIsland.tsx, Sidebar.tsx) to pure Astro with [...slug].astro catch-all route
  • Remove @astrojs/react, @astrojs/mdx, React, and React DOM dependencies
  • Move ./wiki/./docs/wiki/, fix broken markdown links, normalize to kebab-case filenames
  • Split globals.css into base styles + docs.css external stylesheet
  • Add categorized sidebar with absolute BASE_URL links, search filter, scrollspy
  • Dynamic SEO URLs via Astro.site, prefers-reduced-motion support

Architecture

Before After
docs/index.astro + 6 hardcoded section components docs/[...slug].astro catch-all with import.meta.glob
React island (DocPageIsland.tsx + Sidebar.tsx) Pure Astro + inline JS
./wiki/ folder (8 files, had .git/ gitlink trap) ./docs/wiki/ (6 files, kebab-case)
globals.css (1104 lines, Tailwind + docs mixed) globals.css (base) + docs.css (docs-only)

Filename Mapping

Old New
wiki/Home.md docs/wiki/home.md
wiki/Architecture.md docs/wiki/architecture.md
wiki/Challenge.md docs/wiki/challenge.md
wiki/CI-CD-Pipeline.md docs/wiki/ci-cd-pipeline.md
wiki/Getting-Started.md docs/wiki/getting-started.md
wiki/Performance.md docs/wiki/performance.md
wiki/index.md Deleted (duplicate)
wiki/_Footer.md Deleted (GitHub Wiki convention)

Content Fixes

  • challenge.md: Fixed broken link [github.com/...L(https://...md) → proper []() syntax
  • performance.md: Fixed broken link [rinha2-back-end-k6L(https://...md) → proper []() syntax
  • home.md: Updated wiki page links to use anchor references (#challenge, etc.)

Build Output

  • 9 pages: 1 home + 1 docs root + 6 doc slugs + 1 reports
  • 0 errors
  • No React or MDX in build output

Checklist

  • [...slug].astro with catch-all route
  • ORDER array + SLUG_LABEL map + SECTION_CATEGORIES
  • import.meta.glob for wiki markdown files
  • isRoot conditional for sectionsToRender
  • getStaticPaths() self-contained (no module references)
  • BaseLayout.astro with SEO, JSON-LD, OG tags, Twitter Card, dynamic URLs
  • Analytics.astro component (conditional on PUBLIC_GA_ID)
  • content.config.ts with empty export
  • docs.css external file with all styles
  • globals.css for base/reset styles
  • prefers-reduced-motion: no-preference media query
  • prefers-reduced-motion: reduce media query
  • scrollIntoView JS gate with matchMedia
  • hidden={!isRoot} on search input
  • window.__isRoot via define:vars
  • Root guards on auto-scroll, scrollspy, search
  • Custom scrollbar (Firefox + Webkit with hover + corner)
  • currentcolor lowercase (stylelint)
  • Dynamic canonical/OG URLs via Astro.site
  • Mobile responsive breakpoints (768px)
  • Absolute sidebar links (${docsBase}/#${anchor})
  • git ls-tree shows 040000 tree (not gitlink)
  • bun run build produces correct page count, 0 errors
  • No React or MDX in astro.config.mjs or package.json

Summary by CodeRabbit

  • New Features

    • Reworked docs into a dynamic docs page with in-page search, scrollspy highlighting, and a mobile sidebar toggle for improved navigation.
  • Bug Fixes

    • Fixed broken documentation links.
  • Style

    • Introduced a new themed docs stylesheet with improved mobile responsiveness and added reduced-motion accessibility support.
  • Documentation

    • Consolidated and reorganized several documentation sections and updated wiki links.

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.
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 3, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 157d6183-2fb9-44c0-bad5-391107fdb43e

📥 Commits

Reviewing files that changed from the base of the PR and between a4ca7a7 and 15569f6.

📒 Files selected for processing (2)
  • docs/src/pages/docs/[...slug].astro
  • docs/src/styles/docs.css
🚧 Files skipped from review as they are similar to previous changes (2)
  • docs/src/styles/docs.css
  • docs/src/pages/docs/[...slug].astro

📝 Walkthrough

Walkthrough

The 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 docs/src/pages/docs/[...slug].astro, adds a fresh docs stylesheet, updates layout URL handling, and fixes several wiki markdown links.

Changes

Documentation Architecture Refactor

Layer / File(s) Summary
Dependency & Config Removal
docs/astro.config.mjs, docs/package.json
Remove @astrojs/react, react, and react-dom; keep @astrojs/sitemap and Astro config now omits react() integration.
Component & Hook Deletions
docs/src/components/docs/DocPageIsland.tsx, docs/src/components/docs/Sidebar.tsx, docs/src/hooks/useScrollspy.ts
Deleted React island, Sidebar component, and scrollspy hook (state, DOM-manipulation, and client React logic removed).
Section Components Removed
docs/src/components/docs/sections/* (Home, Architecture, Challenge, CiCd, GettingStarted, Performance)
Removed multiple static Astro section components previously used on the docs index page.
Consolidated Docs Page
docs/src/pages/docs/[...slug].astro
New unified Astro page: defines section order/labels/categories, eagerly imports wiki/*.md, exports getStaticPaths(), renders sections, and implements client-side mobile menu, hash scroll, scrollspy, and search filtering inline.
Index Page Removal
docs/src/pages/docs/index.astro
Removed prior index that mounted React island and statically included section components.
Layout & Meta URL Updates
docs/src/layouts/BaseLayout.astro
Compute pageUrl from Astro.site (with fallback); replace hardcoded canonical and og:url with dynamic pageUrl; update Google Fonts import.
Styling Consolidation
docs/src/styles/docs.css, docs/src/styles/globals.css
Add new docs.css with full docs layout/theme; remove duplicated docs CSS from globals.css; move scroll-behavior: smooth into prefers-reduced-motion: no-preference and add prefers-reduced-motion: reduce rules.
Content Config Cleanup
docs/src/content.config.ts
Removed file-level comment; export const collections = {} preserved.
Wiki Content Fixes
docs/wiki/home.md, docs/wiki/challenge.md, docs/wiki/performance.md
Corrected malformed intra-page anchors and external repository/k6 links in markdown.

Sequence Diagram

sequenceDiagram
    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
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title directly and clearly summarizes the main change: migrating documentation from React islands to pure Astro with inline JavaScript while removing React/MDX dependencies.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/docs-pure-astro

Review rate limit: 9/10 reviews remaining, refill in 6 minutes.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
docs/src/styles/globals.css (1)

767-771: ⚡ Quick win

Disable motion entirely in the reduce branch.

Several globals in this file use infinite keyframe animations. Setting only the durations to 0s is 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

📥 Commits

Reviewing files that changed from the base of the PR and between b52ba5a and a4ca7a7.

⛔ Files ignored due to path filters (1)
  • docs/bun.lock is excluded by !**/*.lock, !**/bun.lock
📒 Files selected for processing (23)
  • docs/astro.config.mjs
  • docs/package.json
  • docs/src/components/docs/DocPageIsland.tsx
  • docs/src/components/docs/Sidebar.tsx
  • docs/src/components/docs/sections/ArchitectureSection.astro
  • docs/src/components/docs/sections/ChallengeSection.astro
  • docs/src/components/docs/sections/CiCdSection.astro
  • docs/src/components/docs/sections/GettingStartedSection.astro
  • docs/src/components/docs/sections/HomeSection.astro
  • docs/src/components/docs/sections/PerformanceSection.astro
  • docs/src/content.config.ts
  • docs/src/hooks/useScrollspy.ts
  • docs/src/layouts/BaseLayout.astro
  • docs/src/pages/docs/[...slug].astro
  • docs/src/pages/docs/index.astro
  • docs/src/styles/docs.css
  • docs/src/styles/globals.css
  • docs/wiki/architecture.md
  • docs/wiki/challenge.md
  • docs/wiki/ci-cd-pipeline.md
  • docs/wiki/getting-started.md
  • docs/wiki/home.md
  • docs/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

Comment thread docs/src/pages/docs/[...slug].astro Outdated
Comment thread docs/src/pages/docs/[...slug].astro
Comment thread docs/src/styles/docs.css
- Remove duplicate isRoot const (define:vars already injects it)
- Close mobile drawer after nav link click
- Make doc tables horizontally scrollable on mobile
@jonathanperis
Copy link
Copy Markdown
Owner Author

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)

@jonathanperis jonathanperis merged commit 20c12dd into main May 3, 2026
5 checks passed
@jonathanperis jonathanperis deleted the feat/docs-pure-astro branch May 3, 2026 01:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant