Add anchor links to headings

lib/createSlug.ts

@@ -1,3 +1,5 @@
 export function createSlug(title: string) {
-    return title.toLowerCase().replace(/[.,\s]+/g, '-')
+    return title.toLowerCase()
+        .replace(/\?/g, '')
+        .replace(/[.,\s]+/g, '-')
 }

mdx-components.tsx

@@ -1,4 +1,5 @@
-import type { MDXComponents } from 'mdx/types'
+import type {MDXComponents} from 'mdx/types'
+import {createSlug} from './lib/createSlug'
 
 // This file allows you to provide custom React components
 // to be used in MDX files. You can import and use any
@@ -8,6 +9,7 @@ import type { MDXComponents } from 'mdx/types'
 // This file is required to use MDX in `app` directory.
 export function useMDXComponents(components: MDXComponents): MDXComponents {
     return {
+        h2: ({children}) => <h2>{children}<a className='ml-1' href={`#${createSlug(children)}`}>#</a></h2>,
         // Allows customizing built-in components, e.g. to add styling.
         // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
         ...components,