feat: toc for blog post

lib/mdx.js

@@ -5,6 +5,7 @@ import path from 'path'
 import readingTime from 'reading-time'
 import visit from 'unist-util-visit'
 import codeTitles from './remark-code-title'
+import remarkTocHeadings from './remark-toc-headings'
 import imgToJsx from './img-to-jsx'
 import getAllFilesRecursively from './utils/files'
 
@@ -66,6 +67,8 @@ export async function getFileBySlug(type, slug) {
     )
   }
 
+  let toc = []
+
   const { frontmatter, code } = await bundleMDX(source, {
     // mdx imports can be automatically source from the components directory
     cwd: path.join(process.cwd(), 'components'),
@@ -77,6 +80,7 @@ export async function getFileBySlug(type, slug) {
         ...(options.remarkPlugins ?? []),
         require('remark-slug'),
         require('remark-autolink-headings'),
+        [remarkTocHeadings, { exportRef: toc }],
         require('remark-gfm'),
         codeTitles,
         [require('remark-footnotes'), { inlineNotes: true }],
@@ -111,6 +115,7 @@ export async function getFileBySlug(type, slug) {
 
   return {
     mdxSource: code,
+    toc,
     frontMatter: {
       readingTime: readingTime(code),
       slug: slug || null,

lib/remark-toc-headings.js

@@ -0,0 +1,12 @@
+import visit from 'unist-util-visit'
+
+module.exports = function (options) {
+  return (tree) =>
+    visit(tree, 'heading', (node, index, parent) => {
+      options.exportRef.push({
+        value: node.children[1].value,
+        url: node.children[0].url,
+        depth: node.depth,
+      })
+    })
+}