docs: setup twostash (#649)

apps/docs/app/docs/layout.tsx

@@ -1,6 +1,7 @@
 import { DocsLayout } from "fumadocs-ui/layout";
 import type { ReactNode } from "react";
 import { docsOptions } from "./layout.config";
+import "fumadocs-ui/twoslash.css";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return <DocsLayout {...docsOptions}>{children}</DocsLayout>;

apps/docs/content/docs/runtimes/custom-rest.mdx

@@ -37,9 +37,10 @@ Update the `MyModelAdapter` below to integrate with your own custom API.
 
 `@/app/MyRuntimeProvider.tsx`
 
-```tsx
+```tsx twoslash
 "use client";
 
+import type { ReactNode } from "react";
 import {
   AssistantRuntimeProvider,
   useLocalRuntime,
@@ -77,7 +78,7 @@ const MyModelAdapter: ChatModelAdapter = {
 export function MyRuntimeProvider({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: ReactNode;
 }>) {
   const runtime = useLocalRuntime(MyModelAdapter);
 
@@ -144,4 +145,4 @@ const MyModelAdapter: ChatModelAdapter = {
     }
   },
 };
-```
+```

apps/docs/mdx-components.tsx

@@ -1,9 +1,34 @@
-import type { MDXComponents } from 'mdx/types';
-import defaultComponents from 'fumadocs-ui/mdx';
+import type { MDXComponents } from "mdx/types";
+import { Accordion, Accordions } from "fumadocs-ui/components/accordion";
+import { Callout } from "fumadocs-ui/components/callout";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { TypeTable } from "fumadocs-ui/components/type-table";
+import defaultComponents from "fumadocs-ui/mdx";
+import {
+  CodeBlock,
+  type CodeBlockProps,
+  Pre,
+} from "fumadocs-ui/components/codeblock";
+import { Popup, PopupContent, PopupTrigger } from "fumadocs-ui/twoslash/popup";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...defaultComponents,
+    Popup,
+    PopupContent,
+    PopupTrigger,
+    pre: (props: CodeBlockProps) => (
+      <CodeBlock {...props}>
+        <Pre className="max-h-[400px]">{props.children}</Pre>
+      </CodeBlock>
+    ),
+    Tabs,
+    Tab,
+    Callout,
+    TypeTable,
+    Accordion,
+    Accordions,
+    blockquote: (props) => <Callout>{props.children}</Callout>,
     ...components,
   };
 }

apps/docs/next.config.mjs

@@ -1,6 +1,23 @@
 import createMDX from "fumadocs-mdx/config";
+import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
+import { transformerTwoslash } from "fumadocs-twoslash";
 
-const withMDX = createMDX();
+const withMDX = createMDX({
+  mdxOptions: {
+    rehypeCodeOptions: {
+      transformers: [
+        ...rehypeCodeDefaultOptions.transformers,
+        transformerTwoslash({
+          twoslashOptions: {
+            compilerOptions: {
+              jsx: 12,
+            },
+          },
+        }),
+      ],
+    },
+  },
+});
 
 /** @type {import('next').NextConfig} */
 const config = {

apps/docs/package.json

@@ -28,6 +28,7 @@
     "clsx": "^2.1.1",
     "fumadocs-core": "13.0.7",
     "fumadocs-mdx": "9.0.0",
+    "fumadocs-twoslash": "^1.1.1",
     "fumadocs-ui": "13.0.7",
     "geist": "^1.3.1",
     "lucide-react": "^0.424.0",