contentlayer.config.js

import { makeSource, defineDocumentType } from "@contentlayer/source-files";
import readingTime from "reading-time";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
import GithubSlugger from "github-slugger";
import { group } from "console";

const Blog = defineDocumentType(() => ({
  name: "Blog",
  filePathPattern: "**/**/**/*.mdx",
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    lang: {
      type: "string",
      required: true,
     },
    publishedAt: {
      type: "date",
      required: true,
    },
    updatedAt: {
      type: "date",
      required: true,
    },
    description: {
      type: "string",
      required: true,
    },
    image: { type: "image"},
    isPublished: {
      type: "boolean",
      default: false,
    },
    author: {
      type: "string",
      required: true,
    },
    tags: {
      type: "list",
      of: { type: "string" },
    },
  },
  computedFields: {
    url_path: {
      type: "string",
      resolve: (doc) => `/blogs/${doc._raw.flattenedPath.replace(/^[^\/]*\//, '')}`,
    },
    readingTime: {
      type: "json",
      resolve: (doc) => readingTime(doc.body.raw)
    },
    toc: {
      type: "json",
      resolve: (doc) => {
        const regularExpression = /\n(?<flag>#{1,6})\s+(?<content>.+)/g;
        const slugger = new GithubSlugger();
        const headings = Array.from(doc.body.raw.matchAll(regularExpression))
          .map(({groups}) => {
            if (groups?.flag && groups?.content) {
              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;
      }
    }
  },
}));

const options = {
  theme: "dracula"
}

export default makeSource({
  /* options */
  contentDirPath: "content",
  documentTypes: [Blog],
  mdx: { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeSlug, 
    [rehypeAutolinkHeadings, { behavior: "append" }],
    [rehypePrettyCode, options]
  ]}
});