app/layouts/DocsLayout.tsx

@@ -1,40 +1,44 @@
 import type { JSXElement } from "solid-js";
 
-import { TableOfContents } from "@/partials/TableOfContents";
 import { PrevNextLinks } from "@/components/PrevNextLinks";
 import { usePageContext } from "vike-solid/usePageContext";
 import { clientOnly } from "vike-solid/clientOnly";
 import { clock } from "solid-heroicons/outline";
 import { navigation } from "@/libs/navigation";
 import { Prose } from "@/components/Prose";
+import { MDXProvider } from "solid-jsx";
 import { Icon } from "solid-heroicons";
 
+import QuickLinks from "@/components/QuickLinks";
+
 type DocsLayoutProps = {
 	children: JSXElement;
 };
 
-// const TableOfContents = clientOnly(() =>
-// 	import("@/partials/TableOfContents").then((m) => m.TableOfContents),
-// );
+const TableOfContents = clientOnly(() =>
+	import("@/partials/TableOfContents").then((m) => m.TableOfContents),
+);
 
 export function DocsLayout(props: DocsLayoutProps) {
-	const pageContext = usePageContext();
+	const {
+		exports: { frontmatter, readingTime },
+	} = usePageContext();
 
 	return (
-		<>
+		<MDXProvider components={{ QuickLinks, QuickLink: QuickLinks.QuickLink }}>
 			<div class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow">
 				<article>
 					<DocsHeader
-						title={pageContext.exports.frontmatter?.title}
-						estimatedReadingTime={pageContext.exports.readingTime?.text}
+						title={frontmatter?.title}
+						estimatedReadingTime={readingTime?.text}
 					/>
 					<Prose>{props.children}</Prose>
 				</article>
 				<PrevNextLinks />
 			</div>
 
-			<TableOfContents />
-		</>
+			<TableOfContents fallback={null} />
+		</MDXProvider>
 	);
 }
 

app/pages/docs/Button.tsx

@@ -0,0 +1,5 @@
+const Button = () => {
+	return <span>OK</span>;
+};
+
+export default Button;