upstream-tldraw/apps/docs/components/content/index.tsx

import shikiRehype from '@shikijs/rehype'
import { MDXRemote } from 'next-mdx-remote-client/rsc'
import rehypeSlug from 'rehype-slug-custom-id'
import remarkGfm from 'remark-gfm'
import { ApiHeading } from '@/components/content/api-heading'
import { StarterKitBento } from '@/components/content/bento'
import { Blockquote } from '@/components/content/blockquote'
import { Callout } from '@/components/content/callout'
import { CheckItem } from '@/components/content/check-item'
import { Code, CodeLinks, FocusLines } from '@/components/content/code'
import { Embed, StarterKitEmbed } from '@/components/content/embed'
import { Feature } from '@/components/content/feature'
import { Image } from '@/components/content/image'
import { MaskedArticleImage } from '@/components/content/masked-article-image'
import { ParametersTable } from '@/components/content/parameters-table'
import { ParametersTableDescription } from '@/components/content/parameters-table-description'
import { ParametersTableName } from '@/components/content/parameters-table-name'
import { ParametersTableRow } from '@/components/content/parameters-table-row'
import { Pre } from '@/components/content/pre'
import { SideBySideImages } from '@/components/content/side-by-side-images'
import { ApiMemberTitle } from '@/components/content/title-with-source-link'
import { Video } from '@/components/content/video'
import { YouTube } from '@/components/content/youtube'
import { cn } from '@/utils/cn'
import { TldrawLink } from '../common/tldraw-link'

export function Content({
	mdx,
	type,
	className,
}: {
	mdx: string
	type?: string
	className?: string
}) {
	return (
		<section
			className={cn(
				type === 'reference' && 'prose-hr:hidden prose-h2:!mt-8 md:prose-h2:!mt-24',
				'prose dark:prose-invert prose-sm prose-zinc text-zinc-800 dark:text-zinc-200 sm:prose-base w-full max-w-full',
				'prose-code:before:content-none prose-code:after:content-none prose-code:bg-zinc-100 dark:prose-code:!bg-zinc-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:font-normal',
				'prose-a:no-underline prose-a:text-blue-500 hover:prose-a:text-blue-600 dark:hover:prose-a:text-blue-400 prose-a:font-normal',
				'prose-blockquote:text-zinc-800 dark:prose-blockquote:text-zinc-200 prose-blockquote:font-normal prose-blockquote:border-none prose-blockquote:px-4 prose-blockquote:leading-normal prose-blockquote:bg-zinc-50 dark:prose-blockquote:bg-zinc-900 prose-blockquote:py-3 prose-blockquote:rounded-xl',
				'prose-table:bg-zinc-50 dark:prose-table:bg-zinc-900 prose-table:rounded-xl prose-table:text-sm',
				'prose-th:text-left prose-th:font-semibold prose-th:uppercase prose-th:text-xs prose-th:border-l prose-th:border-white dark:prose-th:border-zinc-950 prose-th:py-3 prose-th:px-4',
				'prose-tr:border-t prose-tr:border-white dark:prose-tr:border-zinc-950',
				'prose-td:border-l first:prose-td:border-l-0 prose-td:border-white dark:prose-td:border-zinc-950 prose-td:py-3 prose-td:px-4',
				'prose-hr:border-zinc-100 dark:prose-hr:border-zinc-800',
				'prose-h1:scroll-mt-20 prose-h2:scroll-mt-20 prose-h3:scroll-mt-20 prose-h4:scroll-mt-20 prose-h5:scroll-mt-20',
				className
			)}
		>
			<MDXRemote
				source={mdx}
				components={{
					a: TldrawLink,
					Embed,
					StarterKitEmbed,
					pre: Pre,
					code: Code,
					// Markdown images and `<Image />` — both resolve `/…` static URLs via `assetUrl` in `image.tsx`.
					Image,
					img: Image,
					MaskedArticleImage,
					ApiHeading,
					StarterKitBento,
					Feature,
					Callout,
					FocusLines,
					CodeLinks,
					ParametersTable,
					ParametersTableDescription,
					ParametersTableName,
					ParametersTableRow,
					ApiMemberTitle,
					CheckItem,
					blockquote: Blockquote,
					Video,
					YouTube,
					TwoImages: SideBySideImages,
				}}
				options={{
					mdxOptions: {
						remarkPlugins: [remarkGfm],
						rehypePlugins: [
							[
								rehypeSlug,
								{
									enableCustomId: true,
									maintainCase: true,
									removeAccents: true,
								},
							],
							[
								shikiRehype as any,
								{
									themes: {
										dark: 'github-dark-default',
										light: 'github-light-default',
									},
									defaultColor: false,
									// Without `langs` the plugin loads all ~300 bundled grammars (seconds and
									// >100MB per build worker / dev server). Anything not listed is still
									// loaded on demand thanks to `lazy`.
									langs: ['ts', 'tsx', 'bash', 'css', 'toml', 'html'],
									lazy: true,
								},
							],
						],
						format: 'mdx',
					},
					parseFrontmatter: true,
				}}
			/>
		</section>
	)
}