-
Notifications
You must be signed in to change notification settings - Fork 0
Initialize fumadocs documentation site at /apps/site #122
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
5bc9d57
81bd2fa
48d5cdc
562322e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| # Dependencies | ||
| /node_modules | ||
|
|
||
| # Next.js | ||
| /.next/ | ||
| /out/ | ||
|
|
||
| # Production | ||
| /build | ||
|
|
||
| # Misc | ||
| .DS_Store | ||
| *.pem | ||
|
|
||
| # Debug | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
|
|
||
| # Local env files | ||
| .env*.local | ||
|
|
||
| # Vercel | ||
| .vercel | ||
|
|
||
| # TypeScript | ||
| *.tsbuildinfo | ||
| next-env.d.ts | ||
|
|
||
| # Fumadocs | ||
| .map.ts | ||
| .source |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| # Object UI Documentation Site (Fumadocs Migration - In Progress) | ||
|
|
||
| This is the official documentation site for Object UI, being migrated to [Fumadocs](https://fumadocs.vercel.app/). | ||
|
|
||
| ## Status | ||
|
|
||
| 🚧 **Work in Progress** - The site structure is complete but there are issues with the fumadocs source API integration that need to be resolved. | ||
|
|
||
| ### Completed | ||
| - ✅ Next.js 15 + TypeScript setup | ||
| - ✅ Tailwind CSS configuration | ||
| - ✅ Fumadocs UI integration | ||
| - ✅ MDX content processing | ||
| - ✅ Basic documentation pages created | ||
| - ✅ Homepage and layout structure | ||
|
|
||
| ### Known Issues | ||
| - ⚠️ Route generation not working - investigating fumadocs 15.x API changes | ||
| - The `.source` output from fumadocs-mdx needs proper integration with loader | ||
| - `createMDXSource` API compatibility issue with runtime-processed docs/meta | ||
|
|
||
| ## Development | ||
|
|
||
| ```bash | ||
| # Install dependencies | ||
| pnpm install | ||
|
|
||
| # Start development server (NOTE: routes currently return 404) | ||
| pnpm dev | ||
|
|
||
| # Build for production | ||
| pnpm build | ||
| ``` | ||
|
|
||
| ## Project Structure | ||
|
|
||
| ``` | ||
| apps/site/ | ||
| ├── app/ # Next.js app directory | ||
| │ ├── docs/ # Documentation pages | ||
| │ ├── layout.tsx # Root layout | ||
| │ └── page.tsx # Homepage | ||
| ├── content/ # MDX documentation content | ||
| │ └── docs/ # Documentation markdown files | ||
| ├── lib/ # Library code | ||
| │ └── source.ts # Fumadocs source configuration | ||
| ├── public/ # Static assets | ||
| ├── next.config.mjs # Next.js configuration | ||
| ├── tailwind.config.ts # Tailwind CSS configuration | ||
| └── source.config.ts # Fumadocs MDX configuration | ||
| ``` | ||
|
|
||
| ## Technical Notes | ||
|
|
||
| The fumadocs-mdx compiler generates a `.source` directory with processed docs and meta exports. These are wrapped by `_runtime.doc()` and `_runtime.meta()` functions. The correct integration with fumadocs-core's `loader` and `createMDXSource` needs investigation based on fumadocs 15.x API. | ||
|
|
||
| ## Next Steps | ||
|
|
||
| 1. Investigate correct fumadocs 15.x API for integrating `.source` exports | ||
| 2. Fix route generation to resolve 404 errors | ||
| 3. Add search functionality | ||
| 4. Migrate remaining documentation content | ||
| 5. Set up deployment | ||
|
|
||
| ## Tech Stack | ||
|
|
||
| - [Next.js 15](https://nextjs.org/) - React framework | ||
| - [Fumadocs](https://fumadocs.vercel.app/) - Documentation framework | ||
| - [Tailwind CSS](https://tailwindcss.com/) - Styling | ||
| - [TypeScript](https://www.typescriptlang.org/) - Type safety | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { source } from '@/lib/source'; | ||
| import type { Metadata } from 'next'; | ||
| import { | ||
| DocsPage, | ||
| DocsBody, | ||
| DocsDescription, | ||
| DocsTitle, | ||
| } from 'fumadocs-ui/page'; | ||
| import { notFound } from 'next/navigation'; | ||
|
|
||
| export default async function Page({ | ||
| params, | ||
| }: { | ||
| params: Promise<{ slug?: string[] }>; | ||
| }) { | ||
| const { slug } = await params; | ||
| const page = source.getPage(slug); | ||
| if (!page) notFound(); | ||
|
|
||
| // Type assertion needed due to custom data mapping | ||
| const MDX = (page.data as any).body; | ||
|
|
||
| return ( | ||
| <DocsPage toc={(page.data as any).toc} full={(page.data as any).full}> | ||
|
||
| <DocsTitle>{page.data.title}</DocsTitle> | ||
| <DocsDescription>{page.data.description}</DocsDescription> | ||
| <DocsBody> | ||
| <MDX /> | ||
| </DocsBody> | ||
| </DocsPage> | ||
| ); | ||
| } | ||
|
|
||
| export async function generateStaticParams() { | ||
| return source.generateParams(); | ||
| } | ||
|
|
||
| export async function generateMetadata(props: { | ||
| params: Promise<{ slug?: string[] }>; | ||
| }): Promise<Metadata> { | ||
| const params = await props.params; | ||
| const page = source.getPage(params.slug); | ||
| if (!page) notFound(); | ||
|
|
||
| return { | ||
| title: page.data.title, | ||
| description: page.data.description, | ||
| }; | ||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { source } from '@/lib/source'; | ||
| import type { ReactNode } from 'react'; | ||
| import { DocsLayout } from 'fumadocs-ui/layouts/docs'; | ||
|
|
||
| export default function Layout({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <DocsLayout tree={source.pageTree} nav={{ title: 'Object UI' }}> | ||
| {children} | ||
| </DocsLayout> | ||
| ); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import './global.css'; | ||
| import { RootProvider } from 'fumadocs-ui/provider'; | ||
| import type { ReactNode } from 'react'; | ||
|
|
||
| export default function Layout({ children }: { children: ReactNode }) { | ||
| return ( | ||
| <html lang="en" suppressHydrationWarning> | ||
| <body> | ||
| <RootProvider>{children}</RootProvider> | ||
| </body> | ||
| </html> | ||
| ); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import Link from 'next/link'; | ||
|
|
||
| export default function HomePage() { | ||
| return ( | ||
| <main className="flex min-h-screen flex-col items-center justify-center p-24"> | ||
| <div className="text-center"> | ||
| <h1 className="mb-4 text-4xl font-bold">Object UI</h1> | ||
| <p className="mb-8 text-xl text-muted-foreground"> | ||
| A Universal, Schema-Driven UI Engine built on React, Tailwind, and Shadcn UI. | ||
| </p> | ||
| <Link | ||
| href="/docs" | ||
| className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90" | ||
| > | ||
| Get Started | ||
| </Link> | ||
| </div> | ||
| </main> | ||
| ); | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| --- | ||
| title: Introduction | ||
| description: Welcome to Object UI - A Universal, Schema-Driven UI Engine | ||
| --- | ||
|
|
||
| # Introduction | ||
|
|
||
| **Object UI** is a Universal, Schema-Driven UI Engine built on React, Tailwind CSS, and Shadcn UI. It allows you to build enterprise-grade interfaces from JSON schema definitions. | ||
|
|
||
| ## Key Features | ||
|
|
||
| - 🚀 **Schema-Driven**: Define your entire UI using JSON schemas | ||
| - 🎨 **Beautiful by Default**: Built on Tailwind CSS and Shadcn UI | ||
| - 🔌 **Plugin Architecture**: Extensible through a powerful plugin system | ||
| - 📱 **Responsive**: Mobile-first design approach | ||
| - ♿ **Accessible**: WCAG 2.1 AA compliant | ||
| - 🌗 **Theme Support**: Light and dark mode out of the box | ||
|
|
||
| ## Quick Start | ||
|
|
||
| ```bash | ||
| # Install dependencies | ||
| pnpm install @object-ui/react @object-ui/components | ||
|
|
||
| # Start building with JSON | ||
| import { ObjectUIRenderer } from '@object-ui/react'; | ||
|
||
|
|
||
| const schema = { | ||
| type: 'Container', | ||
| children: [ | ||
| { type: 'Text', props: { value: 'Hello World' } } | ||
| ] | ||
| }; | ||
|
|
||
| <ObjectUIRenderer schema={schema} /> | ||
| ``` | ||
|
|
||
| ## Architecture | ||
|
|
||
| Object UI follows a multi-package architecture: | ||
|
|
||
| - **@object-ui/types**: Core type definitions and protocols | ||
| - **@object-ui/core**: Schema registry and validation engine | ||
| - **@object-ui/react**: React runtime and renderer | ||
| - **@object-ui/components**: UI component library | ||
| - **@object-ui/designer**: Visual schema designer | ||
|
|
||
| ## Next Steps | ||
|
|
||
| - [Quick Start Guide](/docs/quick-start) | ||
| - [Installation](/docs/installation) | ||
| - [Component Reference](/docs/components) | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| --- | ||
| title: Installation | ||
| description: How to install and set up Object UI in your project | ||
| --- | ||
|
|
||
| # Installation | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| - Node.js 18 or higher | ||
| - pnpm 9 or higher (recommended) | ||
|
|
||
| ## Package Installation | ||
|
|
||
| Object UI is distributed as multiple packages. Install the ones you need: | ||
|
|
||
| ### Core Packages | ||
|
|
||
| ```bash | ||
| # Essential packages | ||
| pnpm add @object-ui/react @object-ui/components | ||
|
|
||
| # Optional: If you need type definitions | ||
| pnpm add -D @object-ui/types | ||
| ``` | ||
|
|
||
| ### Plugin Packages | ||
|
|
||
| ```bash | ||
| # Charts support | ||
| pnpm add @object-ui/plugin-charts | ||
|
|
||
| # Kanban board | ||
| pnpm add @object-ui/plugin-kanban | ||
|
|
||
| # Rich text editor | ||
| pnpm add @object-ui/plugin-editor | ||
|
|
||
| # Markdown renderer | ||
| pnpm add @object-ui/plugin-markdown | ||
| ``` | ||
|
|
||
| ## Setup | ||
|
|
||
| ### 1. Configure Tailwind CSS | ||
|
|
||
| Add Object UI to your Tailwind config: | ||
|
|
||
| ```js | ||
| // tailwind.config.js | ||
| module.exports = { | ||
| content: [ | ||
| './src/**/*.{js,ts,jsx,tsx}', | ||
| './node_modules/@object-ui/**/*.{js,ts,jsx,tsx}', | ||
| ], | ||
| // ... rest of config | ||
| }; | ||
| ``` | ||
|
|
||
| ### 2. Import Styles | ||
|
|
||
| ```tsx | ||
| // app/layout.tsx or main entry file | ||
| import '@object-ui/components/styles.css'; | ||
| ``` | ||
|
|
||
| ### 3. Start Using | ||
|
|
||
| ```tsx | ||
| import { ObjectUIRenderer } from '@object-ui/react'; | ||
|
||
|
|
||
| const schema = { /* your schema */ }; | ||
|
|
||
| export default function App() { | ||
| return <ObjectUIRenderer schema={schema} />; | ||
| } | ||
| ``` | ||
|
|
||
| ## Verify Installation | ||
|
|
||
| Run your development server and check that everything works: | ||
|
|
||
| ```bash | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| You should see your Object UI components rendering correctly! | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "title": "Documentation", | ||
| "pages": [ | ||
| "index", | ||
| "quick-start", | ||
| "installation" | ||
| ] | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Type assertion to
anyremoves type safety. Define a proper interface for the page data structure to maintain type safety throughout the component.