Walkthrough

This update overhauls the documentation system, replacing nearly all Markdown (.md) files with MDX (.mdx) files, and introduces a suite of custom React UI components for consistent, styled documentation elements. Numerous new components—such asNote,Tip,Warning,InfoBox,ListItems,ChatBubble,DarkCodeBlock,PlatformCard,PlatformGrid, andTable—were created with associated CSS modules. The documentation content was migrated and refactored to use these components, and all platform integration guides and quickstart materials were rewritten in MDX. The Prism theme was unified to "nightOwl" for both light and dark modes.

Changes

Sequence Diagram(s)

sequenceDiagram    participant User    participant Docs (MDX)    participant CustomComponents    participant CSSModules    User->>Docs (MDX): Navigates to documentation page    Docs (MDX)->>CustomComponents: Renders content using Note, Tip, ListItems, etc.    CustomComponents->>CSSModules: Applies custom styles    CustomComponents-->>User: Displays styled, interactive documentation

Possibly related PRs

• Feat/adding new organizations #200: Originally added the Markdown "adding organizations" document, directly related to this PR's replacement of that file with an MDX version.

Poem

🐰✨
In the garden of docs, new flowers grow,
With MDX seeds and a custom UI show.
Notes, tips, and warnings now brightly appear,
Code blocks and tables crystal clear.
The rabbit hops with CSS delight—
All docs now shine in "nightOwl" light!
🌙📚

Pre-Merge Checks (1 passed, 2 warnings)

Impact Analysis

Fix broken documentation links to MDX pages

ℹ️ Low 🔄 Impacts behavior

Updated hyperlinks in the FAQ and Why CodeRabbit pages to point to the newly migrated MDX-based guides (replacing .md references with .mdx), restoring correct navigation to installation and sign-in instructions.

Verify that all sidebar and in-page links now use .mdx extensions and update any lingering .md references in the site configuration or navigation metadata.

Browse the FAQ “How to install CodeRabbit?” tabs and the “Three Steps to Better Code Reviews” section, clicking each platform link to ensure they resolve without 404 errors to the correct MDX pages.

Update documentation syntax highlighting theme

ℹ️ Low 🔄 Impacts behavior

Switched the Prism code-block theme in docusaurus.config.ts from GitHub/Dracula to NightOwl for both light and dark modes, changing the look and feel of all code snippets across the documentation site.

Confirm the NightOwl theme provides adequate contrast and readability for the full range of supported languages; consider tweaking theme overrides if any elements appear washed out or illegible.

Inspect representative code blocks on multiple pages under both light and dark themes, checking token colors, background contrast, and overall legibility.

Consolidate and enhance documentation site CSS styling

ℹ️ Low 🔄 Impacts behavior

Refactored custom.css to centralize mobile navigation centering, consolidate media queries, introduce new CSS variables for theming (.language-text, markdown padding), and remove redundant styles, improving responsive layout and consistent styling across the docs site.

Review the consolidated mobile and desktop CSS rules to ensure no regressions in navbar alignment or content spacing; validate that new variables do not conflict with existing themes.

Test the documentation site on desktop, tablet, and mobile breakpoints to confirm centered nav items, proper logo sizing, and consistent padding/margins for markdown content and language-text blocks.

Introduce new UI components for MDX documentation

ℹ️ Low 🔄 Impacts behavior

Added a suite of React components (BlockQuote, ChatBubble, DarkCodeBlock, InfoBox, ListItems, Note, OrderedSteps, PlatformCard, PlatformGrid, Table, Tip, Warning) along with associated CSS modules to standardize and enhance the presentation of MDX-based docs, including interactive copy-to-clipboard features and structured layouts.

Ensure each component’s API is intuitive and documented; pay special attention to copy functionality in ChatBubble and DarkCodeBlock for accessibility and error handling; audit CSS modules for theme compatibility.

Render sample documentation pages incorporating each new component to verify visual styling, interaction (e.g., click-to-copy), and responsive behavior across breakpoints; test keyboard and screen-reader accessibility for interactive elements.

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.