Skip to content

Commit afb0341

Browse files
huangyiirenehuangyiirene
authored
Merge pull request #122 from objectstack-ai/copilot/migrate-official-docs-to-fumadocs
2 parents c3d4775 + 562322e commit afb0341

22 files changed

+1987
-7
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,8 @@ docs/.vitepress/cache
4343

4444
# Object UI CLI temporary files
4545
.objectui-tmp
46+
47+
# Fumadocs
48+
apps/site/.next
49+
apps/site/.map.ts
50+
apps/site/.source

‎apps/site/.gitignore‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Next.js
5+
/.next/
6+
/out/
7+
8+
# Production
9+
/build
10+
11+
# Misc
12+
.DS_Store
13+
*.pem
14+
15+
# Debug
16+
npm-debug.log*
17+
yarn-debug.log*
18+
yarn-error.log*
19+
20+
# Local env files
21+
.env*.local
22+
23+
# Vercel
24+
.vercel
25+
26+
# TypeScript
27+
*.tsbuildinfo
28+
next-env.d.ts
29+
30+
# Fumadocs
31+
.map.ts
32+
.source

‎apps/site/README.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Object UI Documentation Site (Fumadocs Migration - In Progress)
2+
3+
This is the official documentation site for Object UI, being migrated to [Fumadocs](https://fumadocs.vercel.app/).
4+
5+
## Status
6+
7+
🚧 **Work in Progress** - The site structure is complete but there are issues with the fumadocs source API integration that need to be resolved.
8+
9+
### Completed
10+
- ✅ Next.js 15 + TypeScript setup
11+
- ✅ Tailwind CSS configuration
12+
- ✅ Fumadocs UI integration
13+
- ✅ MDX content processing
14+
- ✅ Basic documentation pages created
15+
- ✅ Homepage and layout structure
16+
17+
### Known Issues
18+
- ⚠️ Route generation not working - investigating fumadocs 15.x API changes
19+
- The `.source` output from fumadocs-mdx needs proper integration with loader
20+
- `createMDXSource` API compatibility issue with runtime-processed docs/meta
21+
22+
## Development
23+
24+
```bash
25+
# Install dependencies
26+
pnpm install
27+
28+
# Start development server (NOTE: routes currently return 404)
29+
pnpm dev
30+
31+
# Build for production
32+
pnpm build
33+
```
34+
35+
## Project Structure
36+
37+
```
38+
apps/site/
39+
├── app/ # Next.js app directory
40+
│ ├── docs/ # Documentation pages
41+
│ ├── layout.tsx # Root layout
42+
│ └── page.tsx # Homepage
43+
├── content/ # MDX documentation content
44+
│ └── docs/ # Documentation markdown files
45+
├── lib/ # Library code
46+
│ └── source.ts # Fumadocs source configuration
47+
├── public/ # Static assets
48+
├── next.config.mjs # Next.js configuration
49+
├── tailwind.config.ts # Tailwind CSS configuration
50+
└── source.config.ts # Fumadocs MDX configuration
51+
```
52+
53+
## Technical Notes
54+
55+
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.
56+
57+
## Next Steps
58+
59+
1. Investigate correct fumadocs 15.x API for integrating `.source` exports
60+
2. Fix route generation to resolve 404 errors
61+
3. Add search functionality
62+
4. Migrate remaining documentation content
63+
5. Set up deployment
64+
65+
## Tech Stack
66+
67+
- [Next.js 15](https://nextjs.org/) - React framework
68+
- [Fumadocs](https://fumadocs.vercel.app/) - Documentation framework
69+
- [Tailwind CSS](https://tailwindcss.com/) - Styling
70+
- [TypeScript](https://www.typescriptlang.org/) - Type safety
71+

‎apps/site/app/docs/[[...slug]]/page.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { source } from '@/lib/source';
2+
import type { Metadata } from 'next';
3+
import {
4+
DocsPage,
5+
DocsBody,
6+
DocsDescription,
7+
DocsTitle,
8+
} from 'fumadocs-ui/page';
9+
import { notFound } from 'next/navigation';
10+
11+
export default async function Page({
12+
params,
13+
}: {
14+
params: Promise<{ slug?: string[] }>;
15+
}) {
16+
const { slug } = await params;
17+
const page = source.getPage(slug);
18+
if (!page) notFound();
19+
20+
// Type assertion needed due to custom data mapping
21+
const MDX = (page.data as any).body;
22+
23+
return (
24+
<DocsPage toc={(page.data as any).toc} full={(page.data as any).full}>
25+
<DocsTitle>{page.data.title}</DocsTitle>
26+
<DocsDescription>{page.data.description}</DocsDescription>
27+
<DocsBody>
28+
<MDX />
29+
</DocsBody>
30+
</DocsPage>
31+
);
32+
}
33+
34+
export async function generateStaticParams() {
35+
return source.generateParams();
36+
}
37+
38+
export async function generateMetadata(props: {
39+
params: Promise<{ slug?: string[] }>;
40+
}): Promise<Metadata> {
41+
const params = await props.params;
42+
const page = source.getPage(params.slug);
43+
if (!page) notFound();
44+
45+
return {
46+
title: page.data.title,
47+
description: page.data.description,
48+
};
49+
}
50+

‎apps/site/app/docs/layout.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { source } from '@/lib/source';
2+
import type { ReactNode } from 'react';
3+
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
4+
5+
export default function Layout({ children }: { children: ReactNode }) {
6+
return (
7+
<DocsLayout tree={source.pageTree} nav={{ title: 'Object UI' }}>
8+
{children}
9+
</DocsLayout>
10+
);
11+
}

‎apps/site/app/global.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎apps/site/app/layout.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import './global.css';
2+
import { RootProvider } from 'fumadocs-ui/provider';
3+
import type { ReactNode } from 'react';
4+
5+
export default function Layout({ children }: { children: ReactNode }) {
6+
return (
7+
<html lang="en" suppressHydrationWarning>
8+
<body>
9+
<RootProvider>{children}</RootProvider>
10+
</body>
11+
</html>
12+
);
13+
}

‎apps/site/app/page.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Link from 'next/link';
2+
3+
export default function HomePage() {
4+
return (
5+
<main className="flex min-h-screen flex-col items-center justify-center p-24">
6+
<div className="text-center">
7+
<h1 className="mb-4 text-4xl font-bold">Object UI</h1>
8+
<p className="mb-8 text-xl text-muted-foreground">
9+
A Universal, Schema-Driven UI Engine built on React, Tailwind, and Shadcn UI.
10+
</p>
11+
<Link
12+
href="/docs"
13+
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"
14+
>
15+
Get Started
16+
</Link>
17+
</div>
18+
</main>
19+
);
20+
}

‎apps/site/content/docs/index.mdx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Introduction
3+
description: Welcome to Object UI - A Universal, Schema-Driven UI Engine
4+
---
5+
6+
# Introduction
7+
8+
**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.
9+
10+
## Key Features
11+
12+
- 🚀 **Schema-Driven**: Define your entire UI using JSON schemas
13+
- 🎨 **Beautiful by Default**: Built on Tailwind CSS and Shadcn UI
14+
- 🔌 **Plugin Architecture**: Extensible through a powerful plugin system
15+
- 📱 **Responsive**: Mobile-first design approach
16+
- ♿ **Accessible**: WCAG 2.1 AA compliant
17+
- 🌗 **Theme Support**: Light and dark mode out of the box
18+
19+
## Quick Start
20+
21+
```bash
22+
# Install dependencies
23+
pnpm install @object-ui/react @object-ui/components
24+
25+
# Start building with JSON
26+
import { ObjectUIRenderer } from '@object-ui/react';
27+
28+
const schema = {
29+
type: 'Container',
30+
children: [
31+
{ type: 'Text', props: { value: 'Hello World' } }
32+
]
33+
};
34+
35+
<ObjectUIRenderer schema={schema} />
36+
```
37+
38+
## Architecture
39+
40+
Object UI follows a multi-package architecture:
41+
42+
- **@object-ui/types**: Core type definitions and protocols
43+
- **@object-ui/core**: Schema registry and validation engine
44+
- **@object-ui/react**: React runtime and renderer
45+
- **@object-ui/components**: UI component library
46+
- **@object-ui/designer**: Visual schema designer
47+
48+
## Next Steps
49+
50+
- [Quick Start Guide](/docs/quick-start)
51+
- [Installation](/docs/installation)
52+
- [Component Reference](/docs/components)

‎apps/site/content/docs/installation.mdx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Installation
3+
description: How to install and set up Object UI in your project
4+
---
5+
6+
# Installation
7+
8+
## Prerequisites
9+
10+
- Node.js 18 or higher
11+
- pnpm 9 or higher (recommended)
12+
13+
## Package Installation
14+
15+
Object UI is distributed as multiple packages. Install the ones you need:
16+
17+
### Core Packages
18+
19+
```bash
20+
# Essential packages
21+
pnpm add @object-ui/react @object-ui/components
22+
23+
# Optional: If you need type definitions
24+
pnpm add -D @object-ui/types
25+
```
26+
27+
### Plugin Packages
28+
29+
```bash
30+
# Charts support
31+
pnpm add @object-ui/plugin-charts
32+
33+
# Kanban board
34+
pnpm add @object-ui/plugin-kanban
35+
36+
# Rich text editor
37+
pnpm add @object-ui/plugin-editor
38+
39+
# Markdown renderer
40+
pnpm add @object-ui/plugin-markdown
41+
```
42+
43+
## Setup
44+
45+
### 1. Configure Tailwind CSS
46+
47+
Add Object UI to your Tailwind config:
48+
49+
```js
50+
// tailwind.config.js
51+
module.exports = {
52+
content: [
53+
'./src/**/*.{js,ts,jsx,tsx}',
54+
'./node_modules/@object-ui/**/*.{js,ts,jsx,tsx}',
55+
],
56+
// ... rest of config
57+
};
58+
```
59+
60+
### 2. Import Styles
61+
62+
```tsx
63+
// app/layout.tsx or main entry file
64+
import '@object-ui/components/styles.css';
65+
```
66+
67+
### 3. Start Using
68+
69+
```tsx
70+
import { ObjectUIRenderer } from '@object-ui/react';
71+
72+
const schema = { /* your schema */ };
73+
74+
export default function App() {
75+
return <ObjectUIRenderer schema={schema} />;
76+
}
77+
```
78+
79+
## Verify Installation
80+
81+
Run your development server and check that everything works:
82+
83+
```bash
84+
pnpm dev
85+
```
86+
87+
You should see your Object UI components rendering correctly!

0 commit comments

Comments
 (0)