What is the simplest way to customize the contentlayer.config.ts for custom folder structure

[huskyjp]

Hi there, I am wondering how to control the multiple-tree right under the root directory (/content) structure when combining next-docs-zeta & contentlayer. (Pattern 1) Or for simplicity, I should just go with Pattern 2 but have some confusions.

Pattern 1

I have existing contentlayer based project for our docs, blogs and legal documents in mdx files. The current folder structure is like contents/docs/**/*.mdx/, contents/blogs/**/*.mdx contents/terms/**/*.mdx and such.

Here is my current contentalyer.config.ts

// Same for Docs, Blogs and etc
const Docs = defineDocumentType(() => ({
  name: "Docs",
  filePathPattern: `docs/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    description: {
      type: "string",
    },
    date: {
      type: "date",
      required: true,
    },
  },
  computedFields,
}))

const Blogs = defineDocumentType(() => ({
  name: "Blogs",
  filePathPattern: `blogs/**/*.mdx`,
  contentType: "mdx",
   ...  
}))

const computedFields: ComputedFields = {
  slug: {
    type: "string",
    resolve: (doc) => `/${doc._raw.flattenedPath}`,
  },
  slugAsParams: {
    type: "string",
    resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
  },
  lang: {
    type: "string",
    resolve: (doc) => doc._raw.flattenedPath.split("/")[1],
  },
}

export default makeSource({
  contentDirPath: "content",
  disableImportAliasWarning: true,
  documentTypes: [Blogs, Docs, Terms, CommercialAct, PrivacyPolicy],
  mdx: {some configs..}
})

To integrate the next-docs-zeta, I believe I should customize the code from the official configuration.ts (for example, we should change docsPattern type from string to string[] to accept multiple pages?) and then call the function within the file.

// contentlayer.config.ts
const customConfig = createConfig()

export default makeSource({
  ...customConfig,
})

Is there any practical way to write the custom createConfig function (like defined in configuration.ts) for my purposes?

Pattern 2

Or, I am fine with just create another content/docs folder, then move everything in - eventually like content/docs/docs/**/*.mdx, content/docs/blogs/**/*.mdx and something like that.

And then in my contentlayer.config.ts file

export default makeSource(
  createConfig({
    docsComputedFields: {
      structuredData: {
        type: "json",
        resolve: (page) => structure(page.body.raw),
      },
    },
  })
)

And in my app/source.ts

import { allDocs, allMeta } from "@contentlayer/generated"
import { createContentlayer } from "next-docs-zeta/contentlayer"

export const { tree, getPage, getPages } = createContentlayer(allMeta, allDocs)

But I am not sure how things work from here - let's say we have app/docs/page.tsx & app/docs/[...slug]/page.tsx route, then we want to filter and find the docs from generated files. We should use getPage but not sure how to construct the functions.
I console.log the current allDocs and part of the log is like this.

{
title: 'Docs Top'
description: "ABCD (omitted)",
body: "SOMETHING (omitted) "
_id: 'docs/docs/index.mdx',
_raw: {
  sourceFilePath: 'docs/docs/index.mdx',
  sourceFileName: 'index.mdx',
  sourceFileDir: 'docs/docs',
  contentType: 'mdx',
  flattenedPath: 'docs/docs'
},
type: 'Docs',
slug: 'docs',
url: '/docs/docs',
structuredData: {
  contents: [
    {
      heading: '',
      content:
        'This site is a work in progress.'
    }
  ],
  headings: []
}
}

Also, because everything is under the /docs folder, allDocs includes everything - we only need /docs/docs/**/*.mdx for docs route.

Anyways, I would like to know how to handle these things in the simplest way.

[huskyjp]

Additionally - according to the official docs, it seems like we can generate multiple trees but how this work with contentlayer? Should this solve the above problems?😨

https://next-docs-zeta.vercel.app/docs/headless/utils/build-page-tree#pages-structure

[fuma-nama]

For multiple sources, you can call createContentlayer for each Contentlayer source.

To implement multiple page trees, you can manually modify the page tree, convert the direct children of the root to roots, and search them by name (you can define its name in meta.json).

You may take this example as a reference.

[fuma-nama]

Both patterns looks bad to me, the default pattern of Docs is docs/**/*.mdx, same as your current one. And page tree is not associated with your source, you can easily modify the tree and separate it as you wish.

In pattern 2
Why do you need to prefix your other source patterns with /docs? It should only be added for your docs, which needs page tree to render.

You can check the options of createConfig, in your case, it may be unnecessary to copy the source code. If you want to extend the config, your pattern 1 is correct - You can add your other sources while next-docs only scans the files nested under content/docs.

[huskyjp]

I figured it out how to generate the all contentlayer contents, in this way it generates the all sources under the contents (Docs and Blogs). But please let me know if this is not ideal way to handle the things!

const config = createConfig({
  docFields: {
    title: {
      type: "string",
    },
    description: {
      type: "string",
    },
    date: {
      type: "date",
    },
  },

  docsComputedFields: {
    structuredData: {
      type: "json",
      resolve: (doc) => structure(page.body.raw),
    },
    slug: {
      type: "string",
      resolve: (doc) => `/${doc._raw.flattenedPath}`,
    },
    slugAsParams: {
      type: "string",
      resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
    },
    lang: {
      type: "string",
      resolve: (doc) => doc._raw.flattenedPath.split("/")[1],
    },
  },
})

const existingDocumentTypes = config.documentTypes
const existingDocumentTypesArray = Array.isArray(existingDocumentTypes)
  ? existingDocumentTypes
  : Object.values(existingDocumentTypes)

const allDocumentTypes = [...existingDocumentTypesArray, Blogs, Terms, CommercialAct, PrivacyPolicy]

const customConfig: Args = {
  ...config,
  documentTypes: allDocumentTypes,
}

[fuma-nama]

The Source API has been released since v.7.0.0, you can take a look at the new docs.