API Keys

Turn a source into an unitied interface

Usage

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

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.

import { map } from '@/.map';
import { createMDXSource } from 'fumadocs-mdx';
import { loader } from 'fumadocs-core/source';

export const docs = loader({
  source: createMDXSource(map),
});

Custom Source

Furthermore, you can write your source interface. The Source object includes a files property which has an array of virtual files. Each virtual file must contain its file path and corresponding data.

export function createMySource(): Source<{
  metaData: MetaData; // Your custom type
  pageData: PageData; // Your custom type
}> {
  return {
    files: [...],
  };
}

Transformer

To perform custom file-system operations before processing the storage, you can add a transformer.

loader({
  transformers: [
    ({ storage }) => {
      storage.makeDir();
    },
  ],
});

Root Directory

All files outside of the root directory will be ignored.

loader({
  rootDir: 'docs',
});

Base URL

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

loader({
  baseUrl: '/docs',
});

Icons

Load the icon from the data of 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 in icons) return createElement(icons[icon as keyof typeof icons]);
  },
});

Last updated on