Source API

Usage

Source API is a helper to load file-system based content source, it outputs numerous useful properties to integrate with Fumadocs, such as Page Tree.

import { map } from '@/.map';
import { createMDXSource } from 'fumadocs-mdx';
import { loader } from 'fumadocs-core/source';
 
export const docs = loader({
  source: createMDXSource(map),
});

Root Directory

All files outside of the root directory will be ignored.

import { loader } from 'fumadocs-core/source';
 
loader({
  rootDir: 'docs',
});

Relative paths, like ./ and ../ are not supported.

Base URL

As the loader function also generate an URL for each page, you can override the default base URL.

import { loader } from 'fumadocs-core/source';
 
loader({
  baseUrl: '/docs',
});

Icons

Load the icon property specified by pages and meta files.

import { loader } from 'fumadocs-core/source';
import { icons } from 'lucide-react';
import { createElement } from 'react';
 
export const utils = loader({
  icon(icon) {
    if (!icon) {
      // You may set a default icon
      return;
    }
 
    if (icon in icons) return createElement(icons[icon as keyof typeof icons]);
  },
});

Deep Dive

As mentioned, the output strictly follows Page Conventions. During the process, your input source files will be parsed and form a virtual storage to avoid inconsistent behaviour between different OS.

Transformer

To perform virtual file-system operations before processing, you can add a transformer.

import { loader } from 'fumadocs-core/source';
 
loader({
  transformers: [
    ({ storage }) => {
      storage.makeDir();
    },
  ],
});

Custom Source

To plug your own content source, return a Source object.

It includes a files property which has an array of virtual files. Each virtual file must contain its file path and corresponding data.

import { Source } from 'fumadocs-core/source';
 
export function createMySource(): Source<{
  metaData: { title: string; pages: string[] }; // Your custom type
  pageData: { title: string; description: string }; // Your custom type
}> {
  return {
    files: [],
  };
}