contentlayer.config.ts

import {defineDocumentType, makeSource} from 'contentlayer/source-files';
import fs from 'fs';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypePrettyCode from 'rehype-pretty-code';
import rehypeSlug from 'rehype-slug';
import remarkGfm from 'remark-gfm';
import {MDXDocument, allCoreContent} from './src/utils/contentlayer';
import {searchMetadata} from './src/data/search';
import GithubSlugger from 'github-slugger';
import {visit} from 'unist-util-visit';

export const Post = defineDocumentType(() => ({
	name: 'Post',
	filePathPattern: `**/*.mdx`,
	contentType: 'mdx',
	fields: {
		title: {type: 'string', required: false},
		date: {type: 'date', required: false},
		seoPriority: {type: 'number', required: false},
		// Preview posts are excluded in the sitemap and the search index. They return a 404
		// unless the ?preview query parameter is present. This is useful for sharing early
		// docs pages internally or with select early customers.
		preview: {type: 'boolean', required: false}
	},
	computedFields: {
		url: {type: 'string', resolve: post => `/${post._raw.flattenedPath}`},
		headings: {
			type: 'json',
			resolve: async doc => {
				const regXHeader = /^ *(?<flag>#{1,6})\s+(?<content>.+)/gm;
				const regXCodeBlock = /```[\s\S]*?```/g;
				const slugger = new GithubSlugger();

				// Ignore content within code blocks – No headings there
				const bodyWithoutCodeBlocks = doc.body.raw.replace(
					regXCodeBlock,
					''
				);

				const headings = Array.from(
					bodyWithoutCodeBlocks.matchAll(regXHeader)
				).map(({groups}) => {
					const flag = groups?.flag;
					// Handles headings with links eg:
					// Converts '##[Getting started](/getting-started)' to 'Getting started'
					const match = groups?.content?.match(
						/\[([^\]]+)\]\([^)]+\)/
					);
					const title = match ? match[1] : groups?.content;
					return {
						level: flag?.length,
						title: title,
						id: title ? slugger.slug(title) : undefined
					};
				});
				return headings;
			}
		}
	}
}));

function createSearchIndex(allPosts: MDXDocument[]) {
	if (
		searchMetadata?.provider === 'kbar' &&
		searchMetadata.kbarConfig.searchDocumentsPath
	) {
		fs.writeFileSync(
			`public/search.json`,
			JSON.stringify(allCoreContent(allPosts))
		);
		console.log('Search index generated...');
	}
}

const prettyCodeOptions = {
	keepBackground: true,
	theme: JSON.parse(
		fs.readFileSync(
			new URL(
				'./../../../src/styles/shades-of-purple.json',
				import.meta.url
			),
			'utf-8'
		)
	)
};

const rehypePlugins: any = [
	// Extract raw code content from code elements within pre elements
	() => (tree: any) => {
		visit(tree, (node: any) => {
			if (node?.type === 'element' && node?.tagName === 'pre') {
				const [codeEl] = node.children;
				if (codeEl.tagName !== 'code') return;

				node.raw = codeEl.children?.[0].value;
			}
		});
	},
	[rehypePrettyCode, prettyCodeOptions],
	// Add raw code content as a property to pre elements within div elements containing data-rehype-pretty-code-fragment attribute
	() => (tree: any) => {
		visit(tree, (node: any) => {
			if (node?.type === 'element' && node?.tagName === 'div') {
				if (!('data-rehype-pretty-code-fragment' in node.properties))
					return;

				for (const child of node.children)
					if (child.tagName === 'pre')
						child.properties['raw'] = node.raw;
			}
		});
	},
	rehypeSlug,
	[rehypeAutolinkHeadings]
];

export default makeSource({
	contentDirPath: 'docs',
	documentTypes: [Post],
	mdx: {
		remarkPlugins: [remarkGfm],
		rehypePlugins: rehypePlugins,
		// Externalize mermaid to prevent bundling its problematic Unicode regex patterns
		esbuildOptions: options => ({...options, external: [...(options.external ?? []), 'mermaid']})
	},
	onSuccess: async importData => {
		const {allPosts} = await importData();
		createSearchIndex(allPosts);
	}
});