mirror of
https://github.com/luxfi/indexer.git
synced 2026-09-24 00:25:37 +00:00
feat(docs): migrate to fumadocs-ui with Tailwind CSS v4
- Replace @hanzo/mdx with fumadocs-core, fumadocs-mdx, fumadocs-ui - Update all components to use fumadocs imports - Upgrade to Tailwind CSS v4 with @tailwindcss/postcss - Update Next.js to 15.5.9 (patched version) - Add fumadocs-ui CSS imports and theme configuration
This commit is contained in:
@@ -23,3 +23,4 @@ yarn-error.log*
|
||||
|
||||
# Vercel
|
||||
.vercel
|
||||
.docs/
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { source } from "@/lib/source"
|
||||
import type { Metadata } from "next"
|
||||
import { DocsPage, DocsBody, DocsTitle, DocsDescription, defaultMdxComponents } from "@hanzo/ui"
|
||||
import { DocsPage, DocsBody, DocsTitle, DocsDescription } from "fumadocs-ui/page"
|
||||
import defaultMdxComponents from "fumadocs-ui/mdx"
|
||||
import { notFound } from "next/navigation"
|
||||
|
||||
export default async function Page(props: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { source } from "@/lib/source"
|
||||
import type { ReactNode } from "react"
|
||||
import { DocsLayout } from "@hanzo/ui"
|
||||
import { DocsLayout } from "fumadocs-ui/layouts/docs"
|
||||
|
||||
export default async function Layout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
|
||||
+46
-70
@@ -1,79 +1,55 @@
|
||||
@import "tailwindcss";
|
||||
@import "fumadocs-ui/style.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--breakpoint-3xl: 1600px;
|
||||
--breakpoint-4xl: 2000px;
|
||||
--font-sans: var(--font-geist-sans), system-ui, sans-serif;
|
||||
--font-mono: var(--font-geist-mono), monospace;
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--color-background: hsl(0 0% 100%);
|
||||
--color-foreground: hsl(0 0% 3.9%);
|
||||
--color-card: hsl(0 0% 100%);
|
||||
--color-card-foreground: hsl(0 0% 3.9%);
|
||||
--color-popover: hsl(0 0% 100%);
|
||||
--color-popover-foreground: hsl(0 0% 3.9%);
|
||||
--color-primary: hsl(0 0% 9%);
|
||||
--color-primary-foreground: hsl(0 0% 98%);
|
||||
--color-secondary: hsl(0 0% 96.1%);
|
||||
--color-secondary-foreground: hsl(0 0% 9%);
|
||||
--color-muted: hsl(0 0% 96.1%);
|
||||
--color-muted-foreground: hsl(0 0% 45.1%);
|
||||
--color-accent: hsl(0 0% 96.1%);
|
||||
--color-accent-foreground: hsl(0 0% 9%);
|
||||
--color-destructive: hsl(0 84.2% 60.2%);
|
||||
--color-destructive-foreground: hsl(0 0% 98%);
|
||||
--color-border: hsl(0 0% 89.8%);
|
||||
--color-input: hsl(0 0% 89.8%);
|
||||
--color-ring: hsl(0 0% 3.9%);
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
@custom-variant dark (&:is(.dark, .dark *));
|
||||
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--color-background: hsl(0 0% 3.9%);
|
||||
--color-foreground: hsl(0 0% 98%);
|
||||
--color-card: hsl(0 0% 3.9%);
|
||||
--color-card-foreground: hsl(0 0% 98%);
|
||||
--color-popover: hsl(0 0% 3.9%);
|
||||
--color-popover-foreground: hsl(0 0% 98%);
|
||||
--color-primary: hsl(0 0% 98%);
|
||||
--color-primary-foreground: hsl(0 0% 9%);
|
||||
--color-secondary: hsl(0 0% 14.9%);
|
||||
--color-secondary-foreground: hsl(0 0% 98%);
|
||||
--color-muted: hsl(0 0% 14.9%);
|
||||
--color-muted-foreground: hsl(0 0% 63.9%);
|
||||
--color-accent: hsl(0 0% 14.9%);
|
||||
--color-accent-foreground: hsl(0 0% 98%);
|
||||
--color-destructive: hsl(0 62.8% 30.6%);
|
||||
--color-destructive-foreground: hsl(0 0% 98%);
|
||||
--color-border: hsl(0 0% 14.9%);
|
||||
--color-input: hsl(0 0% 14.9%);
|
||||
--color-ring: hsl(0 0% 83.1%);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color-foreground);
|
||||
background: var(--color-background);
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
|
||||
+2
-10
@@ -1,5 +1,5 @@
|
||||
import "./global.css"
|
||||
import { RootProvider } from "@hanzo/ui"
|
||||
import { RootProvider } from "fumadocs-ui/provider"
|
||||
import { Inter } from "next/font/google"
|
||||
import type { ReactNode } from "react"
|
||||
|
||||
@@ -31,15 +31,7 @@ export default function Layout({ children }: { children: ReactNode }) {
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<body className="min-h-svh bg-background font-sans antialiased">
|
||||
<RootProvider
|
||||
search={{
|
||||
enabled: true,
|
||||
}}
|
||||
theme={{
|
||||
enabled: true,
|
||||
defaultTheme: "dark",
|
||||
}}
|
||||
>
|
||||
<RootProvider>
|
||||
<div className="relative flex min-h-svh flex-col bg-background">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
import { docs } from "@/.source"
|
||||
import { loader } from "@hanzo/ui"
|
||||
import { loader } from "fumadocs-core/source"
|
||||
|
||||
// Create a single source instance that is reused
|
||||
// This prevents circular references and stack overflow issues
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { MDXComponents } from "mdx/types"
|
||||
import { defaultMdxComponents } from "@hanzo/ui"
|
||||
import defaultMdxComponents from "fumadocs-ui/mdx"
|
||||
|
||||
export function useMDXComponents(components: MDXComponents): MDXComponents {
|
||||
return {
|
||||
|
||||
Vendored
+1
-1
@@ -1,6 +1,6 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
import "./.next/types/routes.d.ts";
|
||||
/// <reference path="./.next/types/routes.d.ts" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { createMDX } from "@hanzo/docs/mdx/next"
|
||||
import { createMDX } from "fumadocs-mdx/next"
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const config = {
|
||||
@@ -7,9 +7,6 @@ const config = {
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
experimental: {
|
||||
webpackBuildWorker: true,
|
||||
},
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
|
||||
+12
-13
@@ -4,33 +4,32 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --port 3003",
|
||||
"build": "hanzo-mdx && TURBOPACK=0 next build",
|
||||
"export": "TURBOPACK=0 next build",
|
||||
"build": "fumadocs-mdx && next build",
|
||||
"export": "fumadocs-mdx && next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"postinstall": "hanzo-mdx"
|
||||
"postinstall": "fumadocs-mdx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hanzo/mdx": "^14.2.0",
|
||||
"@hanzo/ui": "^5.3.28",
|
||||
"@tailwindcss/postcss": "^4.1.18",
|
||||
"fumadocs-core": "^15.8.5",
|
||||
"fumadocs-mdx": "^12.0.3",
|
||||
"fumadocs-ui": "^15.8.5",
|
||||
"lucide-react": "^0.468.0",
|
||||
"next": "16.0.1",
|
||||
"next": "15.5.9",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"tailwindcss": "^4.1.16",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"zod": "^3.24.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.16",
|
||||
"@types/node": "^22.10.2",
|
||||
"@types/react": "^19.0.1",
|
||||
"@types/react-dom": "^19.0.2",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.49",
|
||||
"rehype-pretty-code": "^0.14.1",
|
||||
"shiki": "^1.27.2",
|
||||
"typescript": "^5.7.2"
|
||||
},
|
||||
"packageManager": "pnpm@10.12.4"
|
||||
"packageManager": "pnpm@9.15.0"
|
||||
}
|
||||
|
||||
Generated
+330
-407
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
defineConfig,
|
||||
defineDocs,
|
||||
} from "@hanzo/mdx/config"
|
||||
} from "fumadocs-mdx/config"
|
||||
import rehypePrettyCode from "rehype-pretty-code"
|
||||
|
||||
export default defineConfig({
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user