supMDX/pages/_app.tsx
2022-11-05 02:42:47 +09:00

20 lines
727 B
TypeScript

import React from 'react';
import type {AppProps} from 'next/app';
import {MDXProvider} from '@mdx-js/react';
import {S} from '@/mdx';
import '../styles/index.sass';
// add anchor to all headings having id
const hx = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
const extendedHx = Object.fromEntries(hx.map(H => [H,
({children, id, ...props}: React.ComponentProps<(typeof hx)[number]>) => <H id={id} {...props}>
{id && <a className="anchor" href={'#'+encodeURIComponent(id)} />}
{children}
</H>,
]));
export default function App({Component, pageProps, router: {pathname}}: AppProps) {
return <MDXProvider components={{S, ...extendedHx}}>
<Component data={{pathname}} {...pageProps} />
</MDXProvider>;
}