From 19306831ecaab409b32bbedfc357fbc3203a1b6f Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Wed, 18 Sep 2024 18:37:40 +0100
Subject: [PATCH] Fix issue heading issue

---
 mdx-components.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/mdx-components.tsx b/mdx-components.tsx
index 7275e0c..a010efe 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,5 +1,6 @@
 import type {MDXComponents} from 'mdx/types'
 import {createSlug} from './lib/createSlug'
+import Link from 'next/link'
 
 // This file allows you to provide custom React components
 // to be used in MDX files. You can import and use any
@@ -9,7 +10,9 @@ import {createSlug} from './lib/createSlug'
 // 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>,
+        h2: ({children}) =>
+            // @ts-ignore TS18049
+            <h2 id={createSlug(children.toString())}>{children}<Link className='ml-1' href={`#${createSlug(children.toString())}`} name="anchor" scroll={false}>#</Link></h2>,
         // Allows customizing built-in components, e.g. to add styling.
         // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
         ...components,