How I can use anchor from Fumadocs with my Contentlayer configuration?

[johanguse]

Hey guys, I have contentlayer and Fumadocs together, my anchor links from Fumadocs are not working in the Docs link. I believe it is something related to contentlayer and Fumadocs together. Bellow I have my contentlayer.config.js is something I need to change to make it work?

import { defineDocumentType, makeSource } from 'contentlayer2/source-files'
import { create, defaultConfig } from 'fumadocs-contentlayer/configuration'
import GithubSlugger from 'github-slugger'

const { Docs, Meta, contentDirPath, mdx } = create(defaultConfig)

/** @type {import('contentlayer/source-files').ComputedFields} */
const computedFields = {
  slug: {
    type: 'string',
    resolve: (doc) => `/${doc._raw.flattenedPath}`,
  },
  slugAsParams: {
    type: 'string',
    resolve: (doc) => doc._raw.flattenedPath.split('/').slice(1).join('/'),
  },
  headings: {
    type: 'json',
    resolve: async (doc) => {
      const regXHeader = /\n(?<flag>#{1,6})\s+(?<content>.+)/g
      const slugger = new GithubSlugger()
      const headings = Array.from(doc.body.raw.matchAll(regXHeader)).map(
        ({ groups }) => {
          const flag = groups?.flag
          const content = groups?.content
          return {
            level:
              flag?.length == 1 ? 'one' : flag?.length == 2 ? 'two' : 'three',
            text: content,
            slug: content ? slugger.slug(content) : undefined,
          }
        }
      )
      return headings
    },
  },
}

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `blog/**/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: {
      type: 'string',
      required: true,
    },
    description: {
      type: 'string',
    },
    date: {
      type: 'date',
      required: true,
    },
    published: {
      type: 'boolean',
      default: true,
    },
    image: {
      type: 'string',
      required: true,
    },
    authors: {
      // Reference types are not embedded.
      // Until this is fixed, we can use a simple list.
      // type: "reference",
      // of: Author,
      type: 'list',
      of: { type: 'string' },
      required: true,
    },
    tags: {
      type: 'list',
      of: { type: 'string' },
      required: false,
    },
    category: {
      type: 'list',
      of: { type: 'string' },
      required: false,
    },
    toc: {
      type: 'boolean',
      required: false,
      default: false,
    },
  },
  computedFields,
}))

export const Author = defineDocumentType(() => ({
  name: 'Author',
  filePathPattern: `authors/**/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: {
      type: 'string',
      required: true,
    },
    description: {
      type: 'string',
    },
    avatar: {
      type: 'string',
      required: true,
    },
    twitter: {
      type: 'string',
      required: true,
    },
  },
  computedFields,
}))

export const Page = defineDocumentType(() => ({
  name: 'Page',
  filePathPattern: `pages/**/*.mdx`,
  contentType: 'mdx',
  fields: {
    title: {
      type: 'string',
      required: true,
    },
    description: {
      type: 'string',
    },
  },
  computedFields,
}))

export default makeSource({
  contentDirPath,
  mdx,
  documentTypes: [Post, Docs, Meta, Author, Page],
})

[fuma-nama]

Oops your toc compute field overrode the original toc field which contains the table of contents parsed by Fumadocs.

We no longer provide the remark headings plugin on Contentlayer because they don't support exporting other properties from MDX file.
Remark headings is the plugin that parses table of contents and processes anchors, it needs a way to export its output so that you can access table of contents from your code. Now Contentlayer doesn't support a way to access the output yielded by a remark plugin. We used the suboptimal way, which parse the table of contents again by running remark again.

You can still opt-in by passing the remark headings plugin, but I will recommend using Fumadocs MDX, it's a drop-in replacement and is actively maintained.

[johanguse]

Thank you! I will follow the yeecord implementation from the showcase. It looks like a nice example that also has i18n.