Conversation
This commit contains the migration work from Nextra to Fumadocs: Changes: - Replace Nextra packages with fumadocs-core, fumadocs-mdx, fumadocs-ui - Add source.config.ts for Fumadocs MDX configuration - Create src/lib/source.ts for content loaders (docs and blocks) - Create app routes for /docs and /blocks with Fumadocs layouts - Convert all _meta.ts files to meta.json format - Update MDX component imports (nextra/components → fumadocs-ui) - Fix Cards.Card usage to separate Card component - Create custom landing-footer.tsx and not-found.tsx - Update globals.css with Fumadocs CSS imports - Update ThemeRender to use named export Known issues: - Build fails with "e.map is not a function" during page data collection - Likely related to fumadocs-mdx/fumadocs-core page tree formatting - The landing page and basic structure work, but docs/blocks pages fail This is a work-in-progress commit to checkpoint progress.
There was a problem hiding this comment.
Pull request overview
This pull request migrates the documentation website from Nextra to Fumadocs, replacing the custom reablocks-docs-theme with Fumadocs UI components and implementing a new documentation structure.
Key changes:
- Replaced Nextra with Fumadocs as the documentation framework, updating dependencies and configuration
- Converted all TypeScript metadata files (
_meta.ts) to JSON format (meta.json) for Fumadocs compatibility - Updated component imports throughout MDX files to use Fumadocs UI components (Cards, Card, Steps, Tabs, Callout)
Reviewed changes
Copilot reviewed 96 out of 97 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Removed nextra and reablocks-docs-theme; added fumadocs-core, fumadocs-mdx, and fumadocs-ui packages |
| next.config.mjs | Replaced nextra configuration with fumadocs-mdx/next createMDX wrapper |
| source.config.ts | Added new Fumadocs configuration defining docs and blocks collections |
| src/lib/source.ts | Created source loaders for docs and blocks using Fumadocs core |
| src/mdx-components.tsx | Reimplemented MDX components configuration for Fumadocs |
| src/app/layout.tsx | Replaced Nextra Layout with Fumadocs RootProvider |
| src/app/layout.config.tsx | Added basic Fumadocs layout configuration |
| src/app/docs/[[...slug]]/page.tsx | Created new dynamic route handler for docs pages |
| src/app/blocks/[[...slug]]/page.tsx | Created new dynamic route handler for blocks pages |
| src/app/docs/layout.tsx | Added simple layout wrapper for docs section |
| src/app/blocks/layout.tsx | Added simple layout wrapper for blocks section |
| src/styles/globals.css | Removed Nextra-specific styles and added Fumadocs CSS imports |
| src/components/ui/story-renderer.tsx | Removed dependency on reablocks-docs-theme and implemented custom story rendering |
| src/components/ui/theme-render.tsx | Changed export from default to named export |
| src/components/ui/landing-footer.tsx | Created new custom landing footer component |
| src/content/**/_meta.ts | Removed all TypeScript metadata files |
| src/content/**/meta.json | Added JSON metadata files for all sections |
| src/content//.mdx | Updated imports from nextra/components to fumadocs-ui/components |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/app/blocks/layout.tsx
Outdated
|
|
||
| export default function Layout({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <div className="container mx-auto p-4"> | ||
| {children} | ||
| </div> |
There was a problem hiding this comment.
Similar to the docs layout, the blocks layout should use Fumadocs layout components to provide proper documentation structure with navigation, sidebar, and other documentation features.
| export default function Layout({ children }: { children: ReactNode }) { | |
| return ( | |
| <div className="container mx-auto p-4"> | |
| {children} | |
| </div> | |
| import { DocsLayout } from 'fumadocs-ui/layout'; | |
| export default function Layout({ children }: { children: ReactNode }) { | |
| return ( | |
| <DocsLayout> | |
| {children} | |
| </DocsLayout> |
| /* Landing page styles */ | ||
| .landing-page { | ||
| background: linear-gradient(to bottom, #11111F 50%, #11111F, #121212); | ||
| } |
There was a problem hiding this comment.
The landing page footer styles reference a class "landing-page" that is defined in globals.css, but this class is never applied to any element in the actual landing page. The background gradient styles should either be applied via the "landing-page" class or the class definition should be removed if unused.
| src={img.src} | ||
| /> | ||
| --- | ||
| </div> |
There was a problem hiding this comment.
A horizontal rule separator (---) was removed from the markdown. This may have been intentional as part of the migration, but verify that this doesn't negatively impact the visual layout of the blocks index page.
| <Tabs items={['Single Theme', 'Multiple Themes']}> | ||
| <Tabs.Tab> | ||
| <Tabs defaultValue="single"> | ||
| <Tab value=""> |
There was a problem hiding this comment.
The Tab component has an empty value attribute. In Fumadocs, the Tab component requires a non-empty value prop to identify each tab. You should provide meaningful values like "single" and "multiple" to match the tab content.
| <> | ||
| <br /> | ||
| <code className="border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10 nextra-code"> | ||
| <code className="border-black border-opacity-[0.04] bg-opacity-[0.03] bg-black break-words rounded-md border py-0.5 px-[.25em] text-[.9em] dark:border-white/10 dark:bg-white/10 text-blue-400"> |
There was a problem hiding this comment.
The className reference "nextra-code" has been removed from the CSS but this component still references it in the className string. Since you're migrating to Fumadocs, you should update this to use an appropriate Fumadocs or custom class name, or simply remove the reference to "nextra-code".
src/app/docs/layout.tsx
Outdated
|
|
||
| export default function Layout({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <div className="container mx-auto p-4"> | ||
| {children} | ||
| </div> |
There was a problem hiding this comment.
The docs layout is too simplistic and doesn't use Fumadocs layout components. Fumadocs provides DocsLayout component that should be used here to include sidebar navigation, table of contents, breadcrumbs, and other documentation features that were present in the Nextra version.
| export default function Layout({ children }: { children: ReactNode }) { | |
| return ( | |
| <div className="container mx-auto p-4"> | |
| {children} | |
| </div> | |
| import { DocsLayout } from 'fumadocs-ui'; | |
| export default function Layout({ children }: { children: ReactNode }) { | |
| return ( | |
| <DocsLayout> | |
| {children} | |
| </DocsLayout> |
| </Tab> | ||
|
|
||
| <Tabs.Tab> | ||
| <Tab value=""> |
There was a problem hiding this comment.
The Tab component has an empty value attribute. This should be a non-empty string that identifies this tab, such as "multiple" to differentiate it from the first tab.
| return ( | ||
| <div> | ||
| <h1>{String(page.data.title)}</h1> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
The docs and blocks page implementations only render a simple title without the actual MDX content. The page should render the full MDX content using Fumadocs components. You need to add the MDX component rendering similar to how Fumadocs typically handles this with their DocsPage or similar components.
| return ( | ||
| <div> | ||
| <h1>{String(page.data.title)}</h1> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
Similar to the docs page, this blocks page only renders the title without the actual MDX content. The page should render the full MDX content using Fumadocs components to properly display the block documentation.
| export const baseOptions: BaseLayoutProps = { | ||
| nav: { | ||
| title: 'Reablocks', | ||
| }, |
There was a problem hiding this comment.
The layout configuration only sets the navigation title but doesn't configure other important aspects like links, GitHub repository, or sidebar configuration. Fumadocs typically needs more comprehensive layout configuration including project links, repository base URL, and navigation items to provide a complete documentation experience.
| }, | |
| }, | |
| links: [ | |
| { | |
| label: 'GitHub', | |
| href: 'https://github.com/reablocks/reablocks', | |
| }, | |
| ], | |
| github: { | |
| repo: 'reablocks/reablocks', | |
| branch: 'main', | |
| dir: '/', | |
| }, | |
| sidebar: { | |
| defaultOpenLevel: 1, | |
| }, |
- Fix source.ts to use resolveFiles directly instead of createMDXSource (fixes e.map is not a function error due to API mismatch) - Add proper pages arrays to all meta.json files for navigation - Restore DocsLayout and DocsPage components with proper typing - Fix Tab components in migration.mdx with valid value props - Add error handling to changelog.mdx for GitHub fetch failures - Update blocks and docs page layouts with full Fumadocs UI
Deploying reablocks-website with
|
| Latest commit: |
73968b2
|
| Status: | 🚫 Build failed. |
- Override --color-fd-* variables with site's color palette - Use black-pearl (#02020f) for sidebar background - Use vulcan (#11111f) for main background - Use charade (#242433) for cards and secondary backgrounds - Use blue-500 (#105eff) for primary/accent colors - Use athens-gray (#f7f7fa) for text
- Set consistent dark background (#1e1e2e) for pre/code blocks - Remove per-line background colors - Add proper border and border-radius - Style code block captions/titles
2 participants
No description provided.