portfolio/mdx-components.tsx

20 lines
878 B
TypeScript
Raw Normal View History

2024-09-18 16:36:21 +00:00
import type {MDXComponents} from 'mdx/types'
import {createSlug} from './lib/createSlug'
2024-09-18 17:37:40 +00:00
import Link from 'next/link'
2023-07-29 22:40:36 +00:00
// This file allows you to provide custom React components
// to be used in MDX files. You can import and use any
// React component you want, including components from
// other libraries.
// This file is required to use MDX in `app` directory.
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
2024-09-18 17:37:40 +00:00
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>,
2023-07-29 22:40:36 +00:00
// Allows customizing built-in components, e.g. to add styling.
// h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
...components,
}
}