Core: Support folder group on Page Tree Builder

.changeset/stale-comics-behave.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-core': patch
+---
+
+Support folder group on Page Tree Builder

.gitignore

@@ -37,10 +37,4 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
-
-apps/docs/content/docs/ui/museum/events.mdx
-apps/docs/content/docs/ui/museum/operations.mdx
-apps/docs/content/docs/ui/museum/tickets.mdx
-
-apps/docs/content/docs/ui/typescript.mdx

apps/docs/.gitignore

@@ -1 +1,5 @@
-out
+out
+content/docs/ui/museum/events.mdx
+content/docs/ui/museum/operations.mdx
+content/docs/ui/museum/tickets.mdx
+content/docs/ui/(integrations)/typescript.mdx

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

@@ -14,8 +14,6 @@ interface Param {
   slug: string[];
 }
 
-export const dynamicParams = false;
-
 export default function Page({
   params,
 }: {
@@ -64,7 +62,6 @@ export default function Page({
       </p>
       <DocsBody>
         {preview && preview in Preview ? Preview[preview] : null}
-        {page.data.index ? <Category page={page} /> : null}
         <page.data.exports.default
           components={{
             HeadlessOnly:
@@ -77,6 +74,7 @@ export default function Page({
                 : () => undefined,
           }}
         />
+        {page.data.index ? <Category page={page} /> : null}
       </DocsBody>
     </DocsPage>
   );

apps/docs/content/docs/ui/blocks/index.mdx

@@ -0,0 +1,8 @@
+---
+title: Blocks
+description: Introduction to blocks
+index: true
+---
+
+Blocks are essential elements of docs, including layouts and navigation elements.
+They provide basic functionalities to browse the docs, you can see their usage and customisable options.

apps/docs/content/docs/ui/components/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Components
+description: Additional components to improve your docs
+index: true
+---

apps/docs/content/docs/ui/index.mdx

@@ -100,7 +100,7 @@ Some common questions you may encounter.
         they are customisable with exposed props like `style` and `className`.
 
         Blocks are essential elements of docs, providing navigation and basic functionality.
-        We provided many options to customise them, see the **Blocks** section of the docs.
+        We provided many options to customise them, see [Blocks](/docs/ui/blocks).
 
         Although the docs didn't explicitly mention, you can always style the elements with CSS selectors.
 

apps/docs/content/docs/ui/markdown.mdx

@@ -72,7 +72,7 @@ see [MDX Syntax](https://mdxjs.com/docs/what-is-mdx/#mdx-syntax) to learn more.
 
 ### Cards
 
-A [`Card`](/docs/ui/components/mdx/card) component is included by default. Similar to links, but you can display more information (e.g. icons).
+A [`Card`](/docs/ui/mdx/card) component is included by default. Similar to links, but you can display more information (e.g. icons).
 
 ```mdx
 <Cards>

apps/docs/content/docs/ui/mdx/index.mdx

@@ -1,11 +1,12 @@
 ---
 title: MDX
 description: Default MDX Components
+index: true
 ---
 
 ## Usage
 
-The default components include Card, Code Blocks and Headings.
+The default MDX components include Card, Code Blocks and Headings.
 
 ```ts
 import defaultComponents from 'fumadocs-ui/mdx';

apps/docs/content/docs/ui/meta.json

@@ -10,17 +10,13 @@
     "markdown",
     "page-conventions",
     "navigation",
-    "---Components---",
+    "---References---",
-    "...components",
+    "components",
-    "---Blocks---",
+    "mdx",
-    "...blocks",
+    "blocks",
-    "---Integrations---",
+    "(integrations)",
-    "math",
-    "typescript",
-    "twoslash",
-    "openapi",
-    "museum",
     "---Others---",
+    "museum",
     "[Vercel](https://vercel.com)"
   ]
 }

apps/docs/next.config.js

@@ -25,6 +25,7 @@ const config = {
     ignoreDuringBuilds: true,
   },
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: 'https',

packages/core/src/source/loader.ts

@@ -141,7 +141,8 @@ export function createGetUrl(baseUrl: string): UrlFn {
 
 export function getSlugs(info: FileInfo): string[] {
   const result = [...info.dirname.split('/'), info.name].filter(
-    (v) => v.length > 0,
+    // filter empty folder names and file groups like (group_name)
+    (v) => v.length > 0 && !/^\(.+\)$/.test(v),
   );
 
   return result[result.length - 1] === 'index' ? result.slice(0, -1) : result;

packages/core/src/source/page-tree-builder.ts

@@ -56,6 +56,7 @@ export interface PageTreeBuilder {
   ) => Record<string, PageTree.Root>;
 }
 
+const group = /^\((?<name>.+)\)$/;
 const link = /^\[(?<text>.+)]\((?<url>.+)\)$/;
 const separator = /^---(?<name>.*?)---$/;
 const rest = '...';
@@ -204,7 +205,7 @@ function buildFolderNode(
 
   const node: PageTree.Folder = {
     type: 'folder',
-    name: metadata?.title ?? index?.name ?? pathToName(folder.file.name),
+    name: metadata?.title ?? index?.name ?? pathToName(folder.file.name, true),
     icon: ctx.options.resolveIcon?.(metadata?.icon),
     root: metadata?.root,
     defaultOpen: metadata?.defaultOpen,
@@ -282,8 +283,23 @@ function findLocalizedFile(
   return ctx.storage.read(`${path}.${ctx.lang}`, format);
 }
 
-function pathToName(path: string): string {
+/**
-  return path.slice(0, 1).toUpperCase() + path.slice(1);
+ * Get item name from file name
+ *
+ * @param name - file name
+ * @param resolveGroup - resolve folder groups like (group_name)
+ */
+function pathToName(name: string, resolveGroup = false): string {
+  const resolved = resolveGroup ? (group.exec(name)?.[1] ?? name) : name;
+
+  const result = [];
+  for (const c of resolved) {
+    if (result.length === 0) result.push(c.toLocaleUpperCase());
+    else if (c === '-') result.push(' ');
+    else result.push(c);
+  }
+
+  return result.join('');
 }
 
 function removeUndefined<T extends object>(value: T): T {

packages/core/test/source.test.ts

@@ -8,6 +8,10 @@ test('Get Slugs', () => {
     'to',
     'file',
   ]);
+  expect(getSlugs(parseFilePath('path/(group)/file'))).toStrictEqual([
+    'path',
+    'file',
+  ]);
 
   expect(getSlugs(parseFilePath(''))).toStrictEqual([]);
 });
@@ -96,6 +100,13 @@ test('Page Tree: Nested Directories', async () => {
             title: 'Nested Page',
           },
         },
+        {
+          type: 'page',
+          path: '/(nested)/hello.mdx',
+          data: {
+            title: 'Route Group Page',
+          },
+        },
       ],
     },
   });
@@ -103,6 +114,17 @@ test('Page Tree: Nested Directories', async () => {
   expect(result.pageTree, 'Page Tree').toMatchInlineSnapshot(`
     {
       "children": [
+        {
+          "children": [
+            {
+              "name": "Route Group Page",
+              "type": "page",
+              "url": "/hello",
+            },
+          ],
+          "name": "Nested",
+          "type": "folder",
+        },
         {
           "name": "Hello",
           "type": "page",
@@ -129,8 +151,12 @@ test('Page Tree: Nested Directories', async () => {
       "name": "",
     }
   `);
-  expect(result.getPages().length).toBe(3);
+  expect(result.getPages().length).toBe(4);
+  // page in folder
   expect(result.getPage(['nested', 'test'])).toBeDefined();
+
+  // page in folder group
+  expect(result.getPage(['hello'])).toBeDefined();
 });
 
 test('Page Tree: Internationalized Routing', () => {