r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-09-22 17:26:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add hover state to anchor links
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m38s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2024-09-18 20:49:53 +01:00
parent 19306831ec
commit a8385c50d9
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
mdx-components.tsx
View File

@ -1,3 +1,4 @@
// @ts-nocheck
import type {MDXComponents} from 'mdx/types' import type {MDXComponents} from 'mdx/types'
import {createSlug} from './lib/createSlug' import {createSlug} from './lib/createSlug'
import Link from 'next/link' import Link from 'next/link'
@ -11,8 +12,11 @@ import Link from 'next/link'
export function useMDXComponents(components: MDXComponents): MDXComponents { export function useMDXComponents(components: MDXComponents): MDXComponents {
return { return {
h2: ({children}) => h2: ({children}) =>
// @ts-ignore TS18049 <h2 id={createSlug(children.toString())}
<h2 id={createSlug(children.toString())}>{children}<Link className='ml-1' href={`#${createSlug(children.toString())}`} name="anchor" scroll={false}>#</Link></h2>, 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. // Allows customizing built-in components, e.g. to add styling.
// h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>, // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
...components, ...components,