makeSource

Path to where the content lives, relative to the root of your project.

Example:

export default makeSource({
  contentDirPath: 'content',
})

This would load content from a content directory in your project.

An array of paths that Contentlayer should include, with the following conditions:

• They can be either files or directories.
• The paths need to be relative to contentDirPath or absolute.
• An empty array means that all files in contentDirPath will be included.
• Glob/wildcard patterns (e.g. using *) are not supported yet.

This is useful when you have content spread across multiple directories in your project.

Default: []

Example:

This would target only content in the docs directory, while using the default for contentDirExclude (see below).

export default makeSource({
  // ...
  contentDirPath: '.',
  contentDirInclude: ['docs'],
})

An array of paths that Contentlayer should explicitly exclude, with the following conditions:

• Setting this option completely overrides the defaults.
• They can be either files or directories.
• The paths need to be relative to contentDirPath or absolute.
• An empty array means that all files in contentDirPath will be included.
• Glob/wildcard patterns (e.g. using *) are not supported yet.

This is useful when you want to ignore a specific file or directory within your main content directory.

Default: ['node_modules', '.git', '.yarn', '.cache', '.next', '.contentlayer', 'package.json', 'tsconfig.json']

Example:

This ignores only the content/internal-docs directory, but targets all other content files in the content directory.

export default makeSource({
  // ...
  contentDirPath: './content',
  contentDirExclude: ['internal-docs'],
})

Your schema definitions for your project. See defineDocumentType for usage.

Specify remark and rehype plugins.

Options:

• remarkPlugins
• rehypePlugins

Example:

Here's an example that adds syntax highlighting with highlight.js (don't forget to add the css file somewhere e.g. from CDN).

import { makeSource } from '@contentlayer/source-files'
import highlight from 'rehype-highlight'

export default makeSource({
  // ...
  markdown: { rehypePlugins: [highlight] },
})

Taking over the remark pipeline

Under the hood, Contentlayer uses its own remark/rehype pipeline, and the plugins specified above are added after the preset plugins (for remark: remarkFrontmatter, remarkParse, and remark2rehype, and for rehype: rehypeStringify). However, if you need full control of the pipeline (e.g. to add allowDangerousHtml to the remark2rehype plugin so that HTML is not stripped from markdown, you can specify a function instead of an object:

export default makeSource({
  // ...
  markdown: (builder) => {
    builder.use(remarkFrontmatter)
    builder.use(remarkParse)
    // other remark plugins as you wish
    builder.use(remark2rehype, { allowDangerousHtml: true })
    // other rehype plugins as you wish
    // rehype to html
    builder.use(rehypeStringify)
  }
})

Follows the same pattern as the markdown option, but for MDX processing.

Options:

• remarkPlugins
• rehypePlugins

Example:

import { makeSource } from '@contentlayer/source-files'
import highlight from 'rehype-highlight'

export default makeSource({
  // ...
  mdx: { rehypePlugins: [highlight] },
})

Provides the ability to manipulate how fields are written when parsing the content source.

Options:

• bodyFieldName (default: body): Name of the field containing the body/content extracted when the body type is markdown or mdx.
• typeFieldName (default: type): Name of the field containing the name of the document type (or nested document type).

Example:

export default makeSource({
  fieldOptions: {
    bodyFieldName: 'content',
    typeFieldName: '__typename',
  },
})

Specify date options. Currently only supports:

• timezone: Specify the timezone when parsing dates. Based on @marsnusw/date-fns-tz.

Callback to run after a build completes successfully. It has access to all the content through the provided asynchronous importData method.

Example:

import { makeSource } from '@contentlayer/source-files'

export default makeSource({
  onSuccess: async (importData) => {
    const { allDocuments } = await importData()
    console.log('allDocuments', allDocuments.length)
  }
})