Core: Support to add icons to link items in meta.json

fuma-nama · Sep 7, 2024 · 78e59e7 · 78e59e7
1 parent f21c871
commit 78e59e7
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/.changeset/rotten-horses-walk.md b/.changeset/rotten-horses-walk.md
@@ -0,0 +1,5 @@
+---
+'fumadocs-core': patch
+---
+
+Support to add icons to link items in meta.json
diff --git a/apps/docs/content/docs/headless/page-conventions.mdx b/apps/docs/content/docs/headless/page-conventions.mdx
@@ -181,6 +181,15 @@ Use the syntax `[Text](url)` to insert links.
 }
 ```
 
+You can add an icon too.
+
+```json
+{
+  "title": "Folder",
+  "pages": ["index", "[Triangle][Vercel](https://vercel.com)"]
+}
+```
+
 ## Icons
 
 Since Fumadocs doesn't include an icon library, you have to convert the icon names to JSX elements so that it can be rendered as a component.

diff --git a/packages/core/src/source/page-tree-builder.ts b/packages/core/src/source/page-tree-builder.ts
@@ -53,7 +53,7 @@ export interface PageTreeBuilder {
 }
 
 const group = /^\((?<name>.+)\)$/;
-const link = /^\[(?<text>.+)]\((?<url>.+)\)$/;
+const link = /^(?:\[(?<icon>[^\]]+)])?\[(?<name>[^\]]+)]\((?<url>[^)]+)\)$/;
 const separator = /^---(?<name>.*?)---$/;
 const rest = '...';
 const extractPrefix = '...';
@@ -116,18 +116,19 @@ function resolveFolderItem(
 
   const linkResult = link.exec(item);
   if (linkResult?.groups) {
-    const { url, text } = linkResult.groups;
+    const { icon, url, text } = linkResult.groups;
     const isRelative =
       url.startsWith('/') || url.startsWith('#') || url.startsWith('.');
 
     const node: PageTree.Item = {
       type: 'page',
+      icon: ctx.options.resolveIcon?.(icon),
       name: text,
       url,
       external: !isRelative,
     };
 
-    return [ctx.options.attachFile?.(node) ?? node];
+    return [removeUndefined(ctx.options.attachFile?.(node) ?? node)];
   }
 
   const isExcept = item.startsWith(excludePrefix),

diff --git a/packages/core/test/loader.test.ts b/packages/core/test/loader.test.ts
@@ -86,6 +86,7 @@ test('Loader: Simple', () => {
 
 test('Nested Directories', async () => {
   const result = loader({
+    icon: (v) => v as any,
     source: {
       files: [
         {
@@ -106,7 +107,13 @@ test('Nested Directories', async () => {
           type: 'meta',
           path: 'meta.json',
           data: {
-            pages: ['...', '!hidden', 'nested', '[Text](https://google.com)'],
+            pages: [
+              '...',
+              '!hidden',
+              'nested',
+              '[Text](https://google.com)',
+              '[Icon][Text](https://google.com)',
+            ],
           },
         },
         {
@@ -159,7 +166,12 @@ test('Nested Directories', async () => {
         },
         {
           "external": true,
-          "name": "Text",
+          "type": "page",
+          "url": "https://google.com",
+        },
+        {
+          "external": true,
+          "icon": "Icon",
           "type": "page",
           "url": "https://google.com",
         },