DEV Community

Preet Suthar
Preet Suthar

Posted on • Originally published at preetsuthar.me

Add a badge to the filename in Fumadocs

#documentation #webdev #nextjs #tutorial

This is the type of badge you can add to the filename in Fumadocs.

image

It is very easy to add a badge to the filename in Fumadocs.

first step is to extend the frontmatter schema.

go to source.config.ts file in root folder of fumadocs project and add the following code.

export const docs = defineDocs({
  docs: {
    schema: frontmatterSchema.extend({
      new: z.boolean().default(false),
    }),
  },
});
Enter fullscreen mode Exit fullscreen mode

now we can basically add the frontmatter prop in lib/source.ts file.

Make sure to rename the lib/source.ts to lib/source.tsx

export const source = loader({
  baseUrl: "/docs",
  source: docs.toFumadocsSource(),
  pageTree: {
    attachFile(node, file) {
      if (!file) return node;

      const data = file.data.data as {
        new: boolean;
      };

      // JSX nodes are allowed
      if (data.new) {
        node.name = (
          <>
            {node.name}
            <div className="bg-fd-primary">NEW</div>
          </>
        );
      }

      return node;
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

now to use this we can just use new prop in the frontmatter.

---
title: "File Upload"
description: "Animated and interactive file upload component."
new: true
---
Enter fullscreen mode Exit fullscreen mode

final result would be like this.

image

Top comments (0)