Get headers from MDX in Next.js
import {MDXProvider} from '@mdx-js/react'; | |
import {MDXComponents} from 'components/MDX/MDXComponents'; | |
import {Toc} from 'components/Toc/Toc'; | |
import * as React from 'react'; | |
export interface MarkdownProps<Frontmatter> { | |
meta: Frontmatter; | |
children?: React.ReactNode; | |
} | |
export default function MarkdownPage<T extends {title: string} = {title: string}>({ | |
children, | |
meta, | |
}: MarkdownProps<T>) { | |
const anchors = React.Children.toArray(children) | |
.filter( | |
(child: any) => | |
child.props?.mdxType && ['h2', 'h3'].includes(child.props.mdxType) | |
) | |
.map((child: any) => ({ | |
url: '#' + child.props.id, | |
depth: | |
(child.props?.mdxType && | |
parseInt(child.props.mdxType.replace('h', ''), 0)) ?? | |
0, | |
text: child.props.children, | |
})); | |
return ( | |
<> | |
<MDXProvider components={MDXComponents}>{children}</MDXProvider> | |
<Toc anchors={anchors} /> | |
</> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment