CLI: Move DocsLayout options to layout.config.tsx

.changeset/sixty-masks-clap.md

@@ -0,0 +1,5 @@
+---
+'create-fumadocs-app': patch
+---
+
+Move DocsLayout options to layout.config.tsx

apps/docs/app/docs/layout.tsx

@@ -1,42 +1,11 @@
 import { DocsLayout } from 'fumadocs-ui/layout';
 import type { ReactNode } from 'react';
-import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
-import { baseOptions } from '@/app/layout.config';
-import { utils } from '@/utils/source';
-import { modes } from '@/utils/modes';
+import { docsOptions } from '@/app/layout.config';
 
 export default function Layout({
   children,
 }: {
   children: ReactNode;
 }): React.ReactElement {
-  return (
-    <DocsLayout
-      {...baseOptions}
-      tree={utils.pageTree}
-      sidebar={{
-        defaultOpenLevel: 0,
-        banner: (
-          <RootToggle
-            options={modes.map((mode) => ({
-              url: `/docs/${mode.param}`,
-              icon: (
-                <mode.icon
-                  className="size-9 shrink-0 rounded-md bg-gradient-to-t from-background/80 p-1.5"
-                  style={{
-                    backgroundColor: `hsl(var(--${mode.param}-color)/.3)`,
-                    color: `hsl(var(--${mode.param}-color))`,
-                  }}
-                />
-              ),
-              title: mode.name,
-              description: mode.description,
-            }))}
-          />
-        ),
-      }}
-    >
-      {children}
-    </DocsLayout>
-  );
+  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
 }

apps/docs/app/layout.config.tsx

@@ -1,8 +1,11 @@
-import { type BaseLayoutProps } from 'fumadocs-ui/layout';
+import { type BaseLayoutProps, type DocsLayoutProps } from 'fumadocs-ui/layout';
 import { BookIcon, LayoutTemplateIcon } from 'lucide-react';
 import Image from 'next/image';
+import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle';
 import { FumadocsIcon, NavChildren } from '@/app/layout.client';
 import Logo from '@/public/logo.png';
+import { utils } from '@/utils/source';
+import { modes } from '@/utils/modes';
 
 export const baseOptions: BaseLayoutProps = {
   githubUrl: 'https://github.com/fuma-nama/fumadocs',
@@ -41,3 +44,29 @@ export const baseOptions: BaseLayoutProps = {
     },
   ],
 };
+
+export const docsOptions: DocsLayoutProps = {
+  ...baseOptions,
+  tree: utils.pageTree,
+  sidebar: {
+    defaultOpenLevel: 0,
+    banner: (
+      <RootToggle
+        options={modes.map((mode) => ({
+          url: `/docs/${mode.param}`,
+          icon: (
+            <mode.icon
+              className="size-9 shrink-0 rounded-md bg-gradient-to-t from-background/80 p-1.5"
+              style={{
+                backgroundColor: `hsl(var(--${mode.param}-color)/.3)`,
+                color: `hsl(var(--${mode.param}-color))`,
+              }}
+            />
+          ),
+          title: mode.name,
+          description: mode.description,
+        }))}
+      />
+    ),
+  },
+};

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

@@ -19,7 +19,6 @@ export interface Options {
 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/+shared`), dest, (name) => {
     switch (name) {
       case 'example.gitignore':
@@ -29,6 +28,8 @@ export async function create(options: Options): Promise<void> {
     }
   });
 
+  await copy(path.join(sourceDir, `template/${options.template}`), dest);
+
   if (options.tailwindcss) {
     await copy(path.join(sourceDir, `template/+tailwindcss`), dest);
   }

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

@@ -1,12 +1,7 @@
-import { pageTree } from '../source';
 import { DocsLayout } from 'fumadocs-ui/layout';
 import type { ReactNode } from 'react';
-import { baseOptions } from '../layout.config';
+import { docsOptions } from '../layout.config';
 
 export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <DocsLayout tree={pageTree} {...baseOptions}>
-      {children}
-    </DocsLayout>
-  );
+  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
 }

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

@@ -1,6 +1,7 @@
-import { type BaseLayoutProps } from 'fumadocs-ui/layout';
+import { type BaseLayoutProps, type DocsLayoutProps } from 'fumadocs-ui/layout';
+import { pageTree } from '../source';
 
-// basic configuration here
+// shared configuration
 export const baseOptions: BaseLayoutProps = {
   nav: {
     title: 'My App',
@@ -13,3 +14,9 @@ export const baseOptions: BaseLayoutProps = {
     },
   ],
 };
+
+// docs layout configuration
+export const docsOptions: DocsLayoutProps = {
+  ...baseOptions,
+  tree: pageTree,
+};

packages/ui/src/components/layout/nav.tsx

@@ -10,7 +10,8 @@ import { cn } from '@/utils/cn';
 
 export interface NavBoxProps {
   /**
-   * When to use transparent navbar
+   * Use transparent background
+   *
    * @defaultValue none
    */
   transparentMode?: 'always' | 'top' | 'none';
@@ -29,7 +30,7 @@ export interface TitleProps {
 export function NavBox({
   transparentMode = 'none',
   ...props
-}: NavBoxProps & HTMLAttributes<HTMLElement>) {
+}: NavBoxProps & HTMLAttributes<HTMLElement>): React.ReactElement {
   const [transparent, setTransparent] = useState(transparentMode !== 'none');
 
   useEffect(() => {
@@ -60,7 +61,7 @@ export function NavBox({
   );
 }
 
-export function Title({ title, url = '/' }: TitleProps) {
+export function Title({ title, url = '/' }: TitleProps): React.ReactElement {
   return (
     <Link
       href={url}