CLI: Add layout.config.tsx for sharing layout options

.changeset/beige-bottles-visit.md

@@ -0,0 +1,5 @@
+---
+'create-fumadocs-app': patch
+---
+
+Add `layout.config.tsx` for sharing layout options

apps/docs/app/layout.config.tsx

@@ -2,7 +2,7 @@ import { type BaseLayoutProps } from 'fumadocs-ui/layout';
 import { BookIcon, LayoutTemplateIcon } from 'lucide-react';
 import { NavChildren, Title } from '@/app/layout.client';
 
-export const baseOptions: Omit<BaseLayoutProps, 'children'> = {
+export const baseOptions: BaseLayoutProps = {
   githubUrl: 'https://github.com/fuma-nama/fumadocs',
   nav: {
     transparentMode: 'top',

packages/create-app/src/create-app.ts

@@ -20,7 +20,7 @@ export async function create(options: Options): Promise<void> {
   const projectName = path.basename(options.outputDir);
   const dest = path.resolve(cwd, options.outputDir);
   await copy(path.join(sourceDir, `template/${options.template}`), dest);
-  await copy(path.join(sourceDir, `template/+content`), dest, (name) => {
+  await copy(path.join(sourceDir, `template/+shared`), dest, (name) => {
     switch (name) {
       case 'example.gitignore':
         return '.gitignore';

packages/create-app/template/+shared/app/docs/layout.tsx

@@ -1,10 +1,11 @@
 import { pageTree } from '../source';
 import { DocsLayout } from 'fumadocs-ui/layout';
 import type { ReactNode } from 'react';
+import { baseOptions } from '../layout.config';
 
-export default function RootDocsLayout({ children }: { children: ReactNode }) {
+export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <DocsLayout tree={pageTree} nav={{ title: 'My App' }}>
+    <DocsLayout tree={pageTree} {...baseOptions}>
       {children}
     </DocsLayout>
   );

packages/create-app/template/+shared/app/layout.config.tsx

@@ -0,0 +1,15 @@
+import { type BaseLayoutProps } from 'fumadocs-ui/layout';
+
+// basic configuration here
+export const baseOptions: BaseLayoutProps = {
+  nav: {
+    title: 'My App',
+  },
+  links: [
+    {
+      text: 'Documentation',
+      url: '/docs',
+      active: 'nested-url',
+    },
+  ],
+};

packages/create-app/template/+tailwindcss/app/layout.tsx

@@ -9,7 +9,7 @@ const inter = Inter({
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={inter.className}>
+    <html lang="en" className={inter.className} suppressHydrationWarning>
       <body>
         <RootProvider>{children}</RootProvider>
       </body>

packages/create-app/template/fuma-docs-mdx/app/docs/layout.tsx

@@ -1,11 +0,0 @@
-import { pageTree } from '../source';
-import { DocsLayout } from 'fumadocs-ui/layout';
-import type { ReactNode } from 'react';
-
-export default function RootDocsLayout({ children }: { children: ReactNode }) {
-  return (
-    <DocsLayout tree={pageTree} nav={{ title: 'My App' }}>
-      {children}
-    </DocsLayout>
-  );
-}

packages/create-app/template/fuma-docs-mdx/app/layout.tsx

@@ -1,18 +0,0 @@
-import { RootProvider } from 'fumadocs-ui/provider';
-import 'fumadocs-ui/style.css';
-import { Inter } from 'next/font/google';
-import type { ReactNode } from 'react';
-
-const inter = Inter({
-  subsets: ['latin'],
-});
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body>
-        <RootProvider>{children}</RootProvider>
-      </body>
-    </html>
-  );
-}

packages/create-app/template/fuma-docs-mdx/app/page.tsx

@@ -1,38 +0,0 @@
-import Link from 'next/link';
-
-export default function HomePage() {
-  return (
-    <main
-      style={{
-        height: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        textAlign: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <h1
-        style={{
-          fontSize: '2rem',
-          fontWeight: 'bold',
-          marginBottom: '1rem',
-        }}
-      >
-        Hello World
-      </h1>
-      <p>
-        You can open{' '}
-        <Link
-          href="/docs"
-          style={{
-            fontWeight: '600',
-            textDecoration: 'underline',
-          }}
-        >
-          /docs
-        </Link>{' '}
-        and see the documentation.
-      </p>
-    </main>
-  );
-}

packages/ui/src/layout.tsx

@@ -74,7 +74,7 @@ export interface BaseLayoutProps {
    */
   nav?: Partial<NavOptions>;
 
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 export interface DocsLayoutProps extends BaseLayoutProps {