feat: toc for blog post

components/MDXComponents.js

@@ -3,10 +3,12 @@ import { useMemo } from 'react'
 import { getMDXComponent } from 'mdx-bundler/client'
 import Image from './Image'
 import CustomLink from './Link'
+import TOCInline from './TOCInline'
 import Pre from './Pre'
 
 export const MDXComponents = {
   Image,
+  TOCInline,
   a: CustomLink,
   pre: Pre,
   wrapper: ({ components, layout, ...rest }) => {

components/TOCInline.js

@@ -0,0 +1,18 @@
+const TOCInline = ({ toc, indentDepth = 3 }) => {
+  return (
+    <details open>
+      <summary className="pt-2 pb-2 ml-6 text-xl font-bold">Table of Contents</summary>
+      <div className="ml-6">
+        <ul>
+          {toc.map((heading) => (
+            <li key={heading.value} className={`${heading.depth >= indentDepth && 'ml-6'}`}>
+              <a href={heading.url}>{heading.value}</a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </details>
+  )
+}
+
+export default TOCInline