From a8385c50d916ace7b62819c1ace1c680718dfbc2 Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Wed, 18 Sep 2024 20:49:53 +0100
Subject: [PATCH] Add hover state to anchor links

---
 mdx-components.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/mdx-components.tsx b/mdx-components.tsx
index a010efe..38d3065 100644
--- a/mdx-components.tsx
+++ b/mdx-components.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type {MDXComponents} from 'mdx/types'
 import {createSlug} from './lib/createSlug'
 import Link from 'next/link'
@@ -11,8 +12,11 @@ import Link from 'next/link'
 export function useMDXComponents(components: MDXComponents): MDXComponents {
     return {
         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>,
+            <h2 id={createSlug(children.toString())}
+                className='group'>{children}
+                <Link className='ml-1 group-hover:opacity-100 opacity-0 transition-opacity ease-in'
+                      href={`#${createSlug(children.toString())}`}
+                      name="anchor">#</Link></h2>,
         // Allows customizing built-in components, e.g. to add styling.
         // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
         ...components,