add blog

Author: hotlong

apps/site/app/blog/[slug]/page.tsx

@@ -0,0 +1,77 @@
+import { blog } from '@/.source/server';
+import { notFound } from 'next/navigation';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import { Logo } from '../../components/Logo';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+
+export default async function BlogPost({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const post = blog.find((post: any) => post.slug === slug);
+
+  if (!post) notFound();
+
+  const MDX = post.data.body;
+
+  return (
+    <HomeLayout 
+      nav={{ title: <Logo />, url: '/' }}
+      links={[
+        {
+          text: 'Documentation',
+          url: '/docs',
+          active: 'nested-url',
+        },
+        {
+          text: 'Blog',
+          url: '/blog',
+          active: 'nested-url',
+        },
+      ]}
+    >
+      <article className="container mx-auto max-w-3xl px-6 py-12">
+        <header className="mb-12 text-center">
+          <div className="mb-4 text-sm text-fd-muted-foreground">
+            <time>{new Date(post.data.date).toLocaleDateString()}</time>
+            {post.data.author && <span> • {post.data.author}</span>}
+          </div>
+          <h1 className="text-4xl font-bold leading-tight md:text-5xl">
+            {post.data.title}
+          </h1>
+          {post.data.description && (
+            <p className="mt-6 text-xl text-fd-muted-foreground">
+              {post.data.description}
+            </p>
+          )}
+        </header>
+        
+        <div className="prose prose-zinc dark:prose-invert max-w-none">
+          <MDX components={defaultMdxComponents} />
+        </div>
+      </article>
+    </HomeLayout>
+  );
+}
+
+export function generateStaticParams() {
+  return blog.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+export async function generateMetadata({ 
+  params 
+}: { 
+  params: Promise<{ slug: string }> 
+}) {
+  const { slug } = await params;
+  const post = blog.find((post) => post.slug === slug);
+  if (!post) return;
+  return {
+    title: post.data.title,
+    description: post.data.description,
+  };
+}

apps/site/app/blog/page.tsx

@@ -0,0 +1,50 @@
+import { blog } from '@/.source/server';
+import Link from 'next/link';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import { Logo } from '../components/Logo';
+
+export default function BlogIndex() {
+  const posts = [...blog].sort(
+    (a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime()
+  );
+
+  return (
+    <HomeLayout 
+      nav={{ title: <Logo />, url: '/' }}
+      links={[
+        {
+          text: 'Documentation',
+          url: '/docs',
+          active: 'nested-url',
+        },
+        {
+          text: 'Blog',
+          url: '/blog',
+          active: 'nested-url',
+        },
+      ]}
+    >
+      <main className="container mx-auto max-w-4xl px-6 py-12">
+        <h1 className="mb-8 text-4xl font-bold">Latest Updates</h1>
+        <div className="grid gap-6">
+          {posts.map((post) => (
+            <Link
+              key={post.url}
+              href={`/blog/${post.slug}`}
+              className="flex flex-col gap-2 rounded-lg border p-6 transition-colors hover:bg-fd-accent/50"
+            >
+              <h2 className="text-2xl font-bold">{post.data.title}</h2>
+              <div className="flex gap-2 text-sm text-fd-muted-foreground">
+                <time>{new Date(post.data.date).toLocaleDateString()}</time>
+                {post.data.author && <span>• {post.data.author}</span>}
+              </div>
+              {post.data.description && (
+                <p className="text-fd-muted-foreground">{post.data.description}</p>
+              )}
+            </Link>
+          ))}
+        </div>
+      </main>
+    </HomeLayout>
+  );
+}

apps/site/app/docs/layout.tsx

@@ -5,7 +5,22 @@ import { Logo } from '../components/Logo';
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <DocsLayout tree={source.pageTree} nav={{ title: <Logo /> }}>
+    <DocsLayout 
+      tree={source.pageTree} 
+      nav={{ title: <Logo />, url: '/' }}
+      links={[
+        {
+          text: 'Documentation',
+          url: '/docs',
+          active: 'nested-url',
+        },
+        {
+          text: 'Blog',
+          url: '/blog',
+          active: 'nested-url',
+        },
+      ]}
+    >
       {children}
     </DocsLayout>
   );

apps/site/app/page.tsx

@@ -16,6 +16,11 @@ export default function HomePage() {
           url: '/docs',
           active: 'nested-url',
         },
+        {
+          text: 'Blog',
+          url: '/blog',
+          active: 'nested-url',
+        },
       ]}
     >
       {/* Hero Section */}

apps/site/content/blog/welcome.mdx

@@ -0,0 +1,26 @@
+---
+title: Welcome to Object UI Blog
+date: 2024-03-20
+description: We are excited to announce the launch of our new blog!
+author: Object UI Team
+---
+
+# Hello World
+
+This is the first post on the Object UI blog. Here we will share updates about:
+- New features
+- Release notes
+- Tutorials and guides
+- Community showcases
+
+Stay tuned for more!
+
+## Code Example
+
+```tsx
+import { SchemaRenderer } from '@object-ui/react';
+
+export const App = () => (
+  <SchemaRenderer schema={{ type: 'button', props: { children: 'Click Me' } }} />
+);
+```

apps/site/package.json

@@ -15,7 +15,8 @@
     "fumadocs-ui": "^16.4.7",
     "next": "^16.1.4",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",

apps/site/source.config.ts

@@ -1,9 +1,21 @@
-import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
+import { defineConfig, defineDocs, defineCollections } from 'fumadocs-mdx/config';
+import { z } from 'zod';
 
 export const { docs, meta } = defineDocs({
   dir: '../../docs',
   root: '../../docs',
   files: ['**/*.{md,mdx}', '!**/node_modules/**'],
 });
 
+export const blog = defineCollections({
+  dir: 'content/blog',
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    date: z.string().date().or(z.date()).map((d) => new Date(d).toISOString()),
+    author: z.string().optional(),
+  }),
+  type: 'doc',
+});
+
 export default defineConfig();