feat(guide): parse and serialize markdown headings

apps/guide/contentlayer.config.ts

@@ -1,5 +1,6 @@
 import { remarkCodeHike } from '@code-hike/mdx';
 import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+import GithubSlugger from 'github-slugger';
 import { type Node, toString } from 'hast-util-to-string';
 import { h } from 'hastscript';
 import { escape } from 'html-escaper';
@@ -33,6 +34,23 @@ export const Content = defineDocumentType(() => ({
 			// eslint-disable-next-line unicorn/prefer-string-replace-all
 			resolve: (doc) => `/guide/${doc._raw.flattenedPath.replace(/\d+-/g, '')}`,
 		},
+		headings: {
+			type: 'json',
+			resolve: async (doc) => {
+				const regXHeader = /\n(?<flag>#{1,6})\s+(?<content>.+)/g;
+				const slugger = new GithubSlugger();
+				// @ts-expect-error TypeScript can't infer
+				return Array.from(doc.body.raw.matchAll(regXHeader)).map(({ groups }) => {
+					const flag = groups?.flag;
+					const content = groups?.content;
+					return {
+						level: flag?.length,
+						text: content,
+						slug: content ? slugger.slug(content) : undefined,
+					};
+				});
+			},
+		},
 	},
 }));
 

apps/guide/package.json

@@ -53,6 +53,7 @@
 		"ariakit": "^2.0.0-next.44",
 		"cmdk": "^0.2.0",
 		"contentlayer": "^0.3.2",
+		"github-slugger": "^2.0.0",
 		"next": "^13.4.3",
 		"next-contentlayer": "^0.3.2",
 		"next-themes": "^0.2.1",

apps/guide/src/app/guide/[...slug]/page.tsx

@@ -8,11 +8,13 @@ export async function generateStaticParams() {
 
 export default function Page({ params }: { params: { slug: string[] } }) {
 	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
-
 	if (!content) {
 		notFound();
 	}
 
+	// TODO Render headings in table of contents
+	// const headings = serializeHeadings(content.headings);
+
 	return (
 		<article className="max-w-none px-5 prose">
 			<Mdx code={content?.body.code ?? ''} />

apps/guide/src/util/heading-node.ts

@@ -0,0 +1,42 @@
+export interface HeadingData {
+	level: number;
+	slug: string;
+	text: string;
+}
+
+export interface HeadingNode extends HeadingData {
+	children: HeadingNode[];
+}
+
+/**
+ * Serialize heading data into a hierarchial tree structure where lower level headings are children of higher level headings.
+ *
+ * @param headings - An array of heading data
+ */
+export function serializeHeadings(headings: HeadingData[]): HeadingNode[] {
+	const tree: HeadingNode[] = [];
+	const stack: HeadingNode[] = [];
+
+	for (const heading of headings) {
+		const node: HeadingNode = {
+			level: heading.level,
+			text: heading.text,
+			slug: heading.slug,
+			children: [],
+		};
+
+		while (stack.length > 0 && stack.at(-1)!.level >= node.level) {
+			stack.pop();
+		}
+
+		if (stack.length === 0) {
+			tree.push(node);
+		} else {
+			stack.at(-1)!.children.push(node);
+		}
+
+		stack.push(node);
+	}
+
+	return tree;
+}

yarn.lock

@@ -2208,6 +2208,7 @@ __metadata:
     eslint: ^8.41.0
     eslint-config-neon: ^0.1.47
     eslint-formatter-pretty: ^5.0.0
+    github-slugger: ^2.0.0
     happy-dom: ^9.20.1
     hast-util-to-string: ^2.0.0
     hastscript: ^7.2.0