UI: Support children prop in custom Folder component

fuma-nama · Jan 20, 2025 · 4f2538a · 4f2538a
1 parent b52f4d0
commit 4f2538a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 26 deletions.
diff --git a/.changeset/cool-cameras-smile.md b/.changeset/cool-cameras-smile.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Support `children` prop in custom `Folder` component
diff --git a/apps/docs/source.config.ts b/apps/docs/source.config.ts
@@ -55,6 +55,8 @@ export default defineConfig({
 
     return {
       rehypeCodeOptions: {
+        lazy: true,
+        langs: ['ts', 'js', 'html'],
         inline: 'tailing-curly-colon',
         themes: {
           light: 'catppuccin-latte',

diff --git a/packages/ui/src/layouts/docs/shared.tsx b/packages/ui/src/layouts/docs/shared.tsx
@@ -47,7 +47,7 @@ export interface SidebarOptions extends SidebarProps {
 
 export interface SidebarComponents {
   Item: FC<{ item: PageTree.Item }>;
-  Folder: FC<{ item: PageTree.Folder; level: number }>;
+  Folder: FC<{ item: PageTree.Folder; level: number; children: ReactNode }>;
   Separator: FC<{ item: PageTree.Separator }>;
 }
 

diff --git a/packages/ui/src/layouts/docs/sidebar.tsx b/packages/ui/src/layouts/docs/sidebar.tsx
@@ -396,35 +396,42 @@ export function SidebarPageTree(props: {
     ): ReactNode[] {
       return items.map((item, i) => {
         const id = `${item.type}_${i.toString()}`;
+        if (item.type === 'separator') {
+          if (Separator) return <Separator key={id} item={item} />;
+          return (
+            <SidebarSeparator key={id} className={cn(i !== 0 && 'mt-8')}>
+              {item.name}
+            </SidebarSeparator>
+          );
+        }
 
-        switch (item.type) {
-          case 'separator':
-            if (Separator) return <Separator key={id} item={item} />;
-            return (
-              <SidebarSeparator key={id} className={cn(i !== 0 && 'mt-8')}>
-                {item.name}
-              </SidebarSeparator>
-            );
-          case 'folder':
-            if (Folder) return <Folder key={id} item={item} level={level} />;
-            return (
-              <PageTreeFolder key={id} item={item} level={level}>
-                {renderSidebarList(item.children, level + 1)}
-              </PageTreeFolder>
-            );
-          default:
-            if (Item) return <Item key={item.url} item={item} />;
+        if (item.type === 'folder') {
+          const children = renderSidebarList(item.children, level + 1);
+
+          if (Folder)
             return (
-              <SidebarItem
-                key={item.url}
-                href={item.url}
-                external={item.external}
-                icon={item.icon}
-              >
-                {item.name}
-              </SidebarItem>
+              <Folder key={id} item={item} level={level}>
+                {children}
+              </Folder>
             );
+          return (
+            <PageTreeFolder key={id} item={item} level={level}>
+              {children}
+            </PageTreeFolder>
+          );
         }
+
+        if (Item) return <Item key={item.url} item={item} />;
+        return (
+          <SidebarItem
+            key={item.url}
+            href={item.url}
+            external={item.external}
+            icon={item.icon}
+          >
+            {item.name}
+          </SidebarItem>
+        );
       });
     }