docs: migrate from MkDocs to Fumadocs #363
Open
+1,506
−128
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Replace external MkDocs site (supabase.github.io/dbdev) with fumadocs embedded directly in the existing Next.js app at /docs - Add App Router layout (app/) alongside existing Pages Router (pages/) - Convert 5 markdown docs to MDX with fumadocs components (Callout, Tabs) - Convert mkdocs admonitions (!!! warning) to <Callout type="warn"> - Convert mkdocs tabbed content (=== "Tab") to <Tabs>/<Tab> components - Scope fumadocs CSS with cssPrefix: 'fd' to avoid conflicts with shadcn/ui - Update all internal links from external docs URL to /docs routes - Update tsconfig moduleResolution to 'bundler' for subpath exports - Convert next.config.js and tailwind.config.js to ESM (.mjs) https://claude.ai/code/session_01HxAShm5FC75BcRs2Eaforj
|
@claude is attempting to deploy a commit to the Supabase Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Next.js App Router uses inline <script>self.__next_f.push(...)</script> tags for the RSC payload. Without 'unsafe-inline' in the script policy, CSP blocks these inline scripts, preventing client-side hydration. This caused all interactive elements (tabs, dark mode, sidebar) to render as static HTML but not respond to clicks. Pages Router was unaffected because it uses external script tags (covered by 'self') and non-executable JSON for hydration data. https://claude.ai/code/session_01HxAShm5FC75BcRs2Eaforj
…ark mode The App Router layout was importing globals.css which defines shadcn/ui CSS variables (--background, --foreground, --primary, etc.) on :root and .dark. These collided with fumadocs' own theme variables, breaking dark mode colors (faded text, wrong heading colors). Fix: create a separate styles/docs.css with just the Tailwind directives (no shadcn variable definitions) and import that in the App Router layout instead of globals.css. Fumadocs' preset handles its own theme via --fd-* prefixed variables through @tailwind base. https://claude.ai/code/session_01HxAShm5FC75BcRs2Eaforj
…k theme The docs.css file generated a second copy of @tailwind base (preflight + preset base styles) that cascaded after fumadocs-ui/style.css, overriding its dark mode color definitions. Since style.css is fully self-contained (2625 lines including preflight, CSS variables, component styles, and utility classes), the separate docs.css import was both redundant and harmful. Removed docs.css entirely — fumadocs-ui/style.css is the sole stylesheet for App Router docs pages. https://claude.ai/code/session_01HxAShm5FC75BcRs2Eaforj
- Use the same dbdev logo images as the main site, with CSS dark:hidden / dark:block toggling to match the current theme - Add /api/search route using fumadocs createFromSource() to power the built-in search dialog https://claude.ai/code/session_01HxAShm5FC75BcRs2Eaforj
Reduced logo height from h-7 (28px) to 20px. Replaced Tailwind dark: variant classes (not available in fumadocs pre-compiled style.css) with inline <style> using .dark parent selector for theme-aware toggling. https://claude.ai/code/session_01HxAShm5FC75BcRs2Eaforj
Inline styles have higher specificity than class selectors, so the dark mode CSS rules were being ignored. Moved all display/height styles into the <style> block with !important to override any inline or inherited styles. Restored logo height to 28px. https://claude.ai/code/session_01HxAShm5FC75BcRs2Eaforj
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
migrates the dbdev documentation from a separate MkDocs site to an integrated Fumadocs-based documentation system within the Next.js website. The documentation is now served at
/docsinstead of a separate GitHub Pages site.