tldraw/apps/docs/components/Mdx.tsx
Mime Čuvalo 430924f8b6
docs: better code snippets (#2801)
Uses sandpack in all places so we can do richer code snippets.
Also, drive-by fix to fix sidebar logic.
Also, drive-by fix to hide keyboard hint (Cmd+K) for search on mobile.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

### Release Notes

- Docs: reworks code snippets
2024-02-12 14:30:55 +00:00

30 lines
745 B
TypeScript

import { MDXRemote } from 'next-mdx-remote/rsc'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeSlug from 'rehype-slug-custom-id'
import { components } from './mdx-components'
// import rehypeHighlight from 'rehype-highlight'
interface MdxProps {
content: string
}
export function Mdx({ content }: MdxProps) {
return (
<MDXRemote
source={content}
components={components}
options={{
mdxOptions: {
// remarkPlugins: [remarkGfm, {}],
rehypePlugins: [
// [rehypeHighlight as any, {}],
[rehypeAutolinkHeadings, {}],
[rehypeSlug, { enableCustomId: true, maintainCase: true, removeAccents: true }],
],
format: 'mdx',
},
parseFrontmatter: true,
}}
/>
)
}