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";

const Blog = defineDocumentType(() => ({
	name: "Blog",
	filePathPattern: "**/**/*.mdx",
	contentType: "mdx",
	fields: {
		title: {
			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: true,
		},
		author: {
			type: "string",
			required: true,
		},
		tags: {
			type: "list",
			of: { type: "string" },
		},
	},
	computedFields: {
		url: {
			type: "string",
			resolve: (doc) => `/blogs/${doc._raw.flattenedPath}`,
		},
		readingTime: {
			type: "json",
			resolve: (doc) => readingTime(doc.body.raw),
		},
		toc: {
			type: "json",
			resolve: async (doc) => {
				const regulrExp = /\n(?<flag>#{1,6})\s+(?<content>.+)/g;
				const slugger = new GithubSlugger();
				const headings = Array.from(doc.body.raw.matchAll(regulrExp)).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;
			},
		},
	},
}));

const codeOptions = {
	theme: "github-dark",
	grid: false,
};

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