refactor: display readme correctly

apps/website/src/app/docs/packages/[package]/[version]/layout.tsx

@@ -4,7 +4,6 @@ import dynamic from 'next/dynamic';
 import { notFound } from 'next/navigation';
 import { cache, type PropsWithChildren } from 'react';
 import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
-// import { Banner } from '~/components/Banner';
 import { CmdKDialog } from '~/components/CmdK';
 import { Nav } from '~/components/Nav';
 import type { SidebarSectionItemData } from '~/components/Sidebar';
@@ -77,7 +76,6 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 
 	return (
 		<Providers>
-			{/* <Banner className="mb-6" /> */}
 			<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
 				<Header />
 				<div className="relative top-2.5 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">

apps/website/src/app/docs/packages/[package]/[version]/page.tsx

@@ -15,9 +15,8 @@ const loadREADME = cache(async (packageName: string) => {
 const mdxOptions = {
 	mdxOptions: {
 		remarkPlugins: [remarkGfm],
-		remarkRehypeOptions: { allowDangerousHtml: true },
 		rehypePlugins: [rehypeSlug],
-		format: 'md',
+		format: 'mdx',
 	},
 } satisfies SerializeOptions;
 
@@ -26,7 +25,7 @@ export default async function Page({ params }: { params: VersionRouteParams }) {
 	const readmeSource = await loadREADME(packageName);
 
 	return (
-		<div className="max-w-none prose">
+		<div className="relative top-4 max-w-none prose">
 			{/* @ts-expect-error SyntaxHighlighter is assignable */}
 			<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
 		</div>