From 1715e0c275ea75d201fb52e86b013768ff126d2e Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Wed, 18 Sep 2024 17:36:21 +0100
Subject: [PATCH] Add anchor links to headings

---
 lib/createSlug.ts  | 4 +++-
 mdx-components.tsx | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/createSlug.ts b/lib/createSlug.ts
index fb3861a..c7e7b37 100644
--- a/lib/createSlug.ts
+++ b/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, '-')
 }
\ No newline at end of file
diff --git a/mdx-components.tsx b/mdx-components.tsx
index 2592b0d..7275e0c 100644
--- a/mdx-components.tsx
+++ b/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,