docs: move to fumadocs 14 (#338)

biome.json

@@ -32,7 +32,8 @@
 			"package.json",
 			".contentlayer",
 			".turbo",
-			".nuxt"
+			".nuxt",
+			".source"
 		]
 	}
 }

docs/.gitignore

@@ -27,3 +27,5 @@ yarn-error.log*
 .vercel
 next-env.d.ts
 certificates
+
+.source/

docs/app/api/search/route.ts

@@ -1,10 +1,10 @@
-import { getPages } from "@/app/source";
+import { source } from "@/app/source";
 import { createSearchAPI } from "fumadocs-core/search/server";
 
 export const { GET } = createSearchAPI("advanced", {
-	indexes: getPages().map((page) => ({
+	indexes: source.getPages().map((page) => ({
 		title: page.data.title,
-		structuredData: page.data.exports.structuredData,
+		structuredData: page.data.structuredData,
 		id: page.url,
 		url: page.url,
 	})),

docs/app/docs/[[...slug]]/page.tsx

@@ -1,24 +1,35 @@
-import { getPage, getPages } from "@/app/source";
-import type { Metadata } from "next";
+import { source } from "@/app/source";
 import { DocsPage, DocsBody, DocsTitle } from "fumadocs-ui/page";
 import { notFound } from "next/navigation";
 import { absoluteUrl } from "@/lib/utils";
+import DatabaseTable from "@/components/mdx/database-tables";
+import { cn } from "@/lib/utils";
+import { Step, Steps } from "fumadocs-ui/components/steps";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { GenerateSecret } from "@/components/generate-secret";
+import { AnimatePresence } from "@/components/ui/fade-in";
+import { TypeTable } from "fumadocs-ui/components/type-table";
+import { Features } from "@/components/blocks/features";
+import { ForkButton } from "@/components/fork-button";
+import Link from "next/link";
+import { Callout } from "fumadocs-ui/components/callout";
 
 export default async function Page({
 	params,
 }: {
-	params: { slug?: string[] };
+	params: Promise<{ slug?: string[] }>;
 }) {
-	const page = getPage(params.slug);
+	const { slug } = await params;
+	const page = source.getPage(slug);
 
 	if (page == null) {
 		notFound();
 	}
-	const MDX = page.data.exports.default;
+	const MDX = page.data.body;
 
 	return (
 		<DocsPage
-			toc={page.data.exports.toc}
+			toc={page.data.toc}
 			full={page.data.full}
 			editOnGithub={{
 				owner: "better-auth",
@@ -35,20 +46,53 @@ export default async function Page({
 		>
 			<DocsTitle>{page.data.title}</DocsTitle>
 			<DocsBody>
-				<MDX />
+				<MDX
+					components={{
+						Link: ({
+							className,
+							...props
+						}: React.ComponentProps<typeof Link>) => (
+							<Link
+								className={cn(
+									"font-medium underline underline-offset-4",
+									className,
+								)}
+								{...props}
+							/>
+						),
+						Step,
+						Steps,
+						Tab,
+						Callout,
+						Tabs,
+						GenerateSecret,
+						AnimatePresence,
+						TypeTable,
+						Features,
+						ForkButton,
+						DatabaseTable,
+						iframe: (props) => (
+							<iframe {...props} className="w-full h-[500px]" />
+						),
+					}}
+				/>
 			</DocsBody>
 		</DocsPage>
 	);
 }
 
 export async function generateStaticParams() {
-	return getPages().map((page) => ({
+	const res = source.getPages().map((page) => ({
 		slug: page.slugs,
 	}));
+	return res;
 }
 
-export function generateMetadata({ params }: { params: { slug?: string[] } }) {
-	const page = getPage(params.slug);
+export async function generateMetadata({
+	params,
+}: { params: Promise<{ slug?: string[] }> }) {
+	const { slug } = await params;
+	const page = source.getPage(slug);
 	if (page == null) notFound();
 	const baseUrl = process.env.NEXT_PUBLIC_URL || process.env.VERCEL_URL;
 	const url = new URL(`${baseUrl}/api/og`);

docs/app/docs/layout.tsx

@@ -1,4 +1,4 @@
-import { DocsLayout } from "fumadocs-ui/layout";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import type { ReactNode } from "react";
 import { docsOptions } from "../layout.config";
 import ArticleLayout from "@/components/side-bar";

docs/app/layout.config.tsx

@@ -1,10 +1,8 @@
-import type { DocsLayoutProps } from "fumadocs-ui/layout";
-import type { HomeLayoutProps } from "fumadocs-ui/home-layout";
-import { pageTree } from "@/app/source";
+import { source } from "@/app/source";
 import { DocsNavbarMobileBtn } from "@/components/nav-mobile";
+import { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 
-// shared configuration
-export const baseOptions: HomeLayoutProps = {
+export const baseOptions: BaseLayoutProps = {
 	nav: {
 		component: (
 			<div className="flex items-center justify-between py-4 px-2.5 md:hidden">
@@ -22,8 +20,7 @@ export const baseOptions: HomeLayoutProps = {
 	],
 };
 
-// docs layout configuration
-export const docsOptions: DocsLayoutProps = {
+export const docsOptions = {
 	...baseOptions,
-	tree: pageTree,
+	tree: source.pageTree,
 };

docs/app/sitemap.ts

@@ -1,10 +1,10 @@
 import type { MetadataRoute } from "next";
 import { ENV } from "@/lib/constants";
-import { getPages } from "./source";
+import { source } from "./source";
 
 export default function sitemap(): MetadataRoute.Sitemap {
 	const WEBSITE_URL = ENV.NEXT_PUBLIC_WEBSITE_URL;
-	const pages = getPages().map((page) => ({
+	const pages = source.getPages().map((page) => ({
 		slug: page.slugs,
 	}));
 	const docs = pages.map((plugin) => ({

docs/app/source.ts

@@ -1,9 +1,13 @@
-import { map } from "@/.map";
+import { docs, meta, changelog as _changelog } from "@/.source";
 import { createMDXSource } from "fumadocs-mdx";
 import { loader } from "fumadocs-core/source";
 
-export const { getPage, getPages, pageTree } = loader({
+export const source = loader({
 	baseUrl: "/docs",
-	rootDir: "docs",
-	source: createMDXSource(map),
+	source: createMDXSource(docs, meta),
+});
+
+export const changelog = loader({
+	baseUrl: "/changelog",
+	source: createMDXSource(_changelog, meta),
 });

docs/components/github-stat.tsx

@@ -21,9 +21,9 @@ export function GithubStat({ stars }: { stars: string | null }) {
 					xmlns="http://www.w3.org/2000/svg"
 				>
 					<path
-						clip-rule="evenodd"
+						clipRule="evenodd"
 						d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
-						fill-rule="evenodd"
+						fillRule="evenodd"
 					></path>
 				</svg>
 				<span className="inline-block tabular-nums tracking-wider font-display font-medium text-black dark:text-white">

docs/components/icons.tsx

@@ -195,8 +195,8 @@ export const Icons = {
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M393.946 364.768C398.201 419.418 398.201 445.036 398.201 473H271.756C271.756 466.909 271.865 461.337 271.975 455.687C272.317 438.123 272.674 419.807 269.828 382.819C266.067 328.667 242.748 316.634 199.871 316.634H161.883H1V218.109H205.889C260.049 218.109 287.13 201.633 287.13 158.011C287.13 119.654 260.049 96.4098 205.889 96.4098H1V0H228.456C351.069 0 412 57.9117 412 150.42C412 219.613 369.123 264.739 311.201 272.26C360.096 282.037 388.681 309.865 393.946 364.768Z"
 				fill="currentColor"
 			/>
@@ -220,8 +220,8 @@ export const Icons = {
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M424.404 470.816C478.089 423.889 512 354.905 512 278C512 136.615 397.385 22 256 22C114.615 22 0 136.615 0 278C0 352.658 31.9583 419.851 82.9409 466.646L83.1767 465L419.144 355L424.404 470.816Z"
 				fill="currentColor"
 			/>

docs/components/logo.tsx

@@ -11,8 +11,8 @@ export const Logo = (props: SVGProps<any>) => {
 			xmlns="http://www.w3.org/2000/svg"
 		>
 			<path
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M0 0H15V15H30V30H15V45H0V30V15V0ZM45 30V15H30V0H45H60V15V30V45H45H30V30H45Z"
 				className="fill-black dark:fill-white"
 			/>

docs/components/sidebar-content.tsx

@@ -559,8 +559,8 @@ export const contents: Content[] = [
 				<path
 					fill="currentColor"
 					stroke="currentColor"
-					stroke-linejoin="round"
-					stroke-width="4"
+					strokeLinejoin="round"
+					strokeWidth="4"
 					d="M18 6H8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm0 22H8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V30a2 2 0 0 0-2-2ZM40 6H30a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Zm0 22H30a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V30a2 2 0 0 0-2-2Z"
 				></path>
 			</svg>
@@ -709,8 +709,8 @@ export const contents: Content[] = [
 							fill="none"
 							stroke="currentColor"
 							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
+							strokeLinejoin="round"
+							strokeWidth="2"
 						>
 							<path d="M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0"></path>
 							<path d="M12.556 6c.65 0 1.235.373 1.508.947l2.839 7.848a1.646 1.646 0 0 1-1.01 2.108a1.673 1.673 0 0 1-2.068-.851L13.365 15h-2.73l-.398.905A1.67 1.67 0 0 1 8.26 16.95l-.153-.047a1.647 1.647 0 0 1-1.056-1.956l2.824-7.852a1.66 1.66 0 0 1 1.409-1.087z"></path>

docs/content/docs/concepts/typescript.mdx

@@ -9,7 +9,7 @@ Better Auth is designed to be type-safe. Both the client and server are built wi
 
 Both the client SDK and the server offer types that can be inferred using the `$Infer` property. Plugins can extend base types like `User` and `Session`, and you can use `$Infer` to infer these types. Additionally, plugins can provide extra types that can also be inferred through `$Infer`.
 
-```ts title="client.ts" twoslash
+```ts title="client.ts" 
 import { createAuthClient } from "better-auth/client"
 
 const client = createAuthClient()
@@ -21,7 +21,7 @@ The `Session` type includes both `session` and `user` properties. The user prope
 
 You can also infer types on the server side.
 
-```ts title="auth.ts" twoslash
+```ts title="auth.ts" 
 import { betterAuth } from "better-auth"
 import Database from "better-sqlite3"
 
@@ -37,7 +37,7 @@ type Session = typeof auth.$Infer.Session
 
 Better Auth allows you to add additional fields to the user and session objects. All additional fields are properly inferred and available on the server and client side.
 
-```ts twoslash
+```ts 
 import { betterAuth } from "better-auth"
 import Database from "better-sqlite3"
 

docs/mdx-components.tsx

@@ -1,40 +0,0 @@
-import type { MDXComponents } from "mdx/types";
-import defaultComponents from "fumadocs-ui/mdx";
-import Link from "next/link";
-import { cn } from "./lib/utils";
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-import { GenerateSecret } from "./components/generate-secret";
-import { AnimatePresence } from "./components/ui/fade-in";
-import { Popup, PopupContent, PopupTrigger } from "fumadocs-ui/twoslash/popup";
-import { TypeTable } from "fumadocs-ui/components/type-table";
-import { Features } from "./components/blocks/features";
-import { ForkButton } from "./components/fork-button";
-import DatabaseTable from "./components/mdx/database-tables";
-
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-	return {
-		...defaultComponents,
-		...components,
-		Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
-			<Link
-				className={cn("font-medium underline underline-offset-4", className)}
-				{...props}
-			/>
-		),
-		Step,
-		Steps,
-		Tab,
-		Tabs,
-		GenerateSecret,
-		Popup,
-		PopupTrigger,
-		PopupContent,
-		AnimatePresence,
-		TypeTable,
-		Features,
-		ForkButton,
-		DatabaseTable,
-		iframe: (props) => <iframe {...props} className="w-full h-[500px]" />,
-	};
-}

docs/next.config.mjs

@@ -1,41 +1,12 @@
-import createMDX from "fumadocs-mdx/config";
-import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
-import { remarkInstall } from "fumadocs-docgen";
-import { transformerTwoslash } from "fumadocs-twoslash";
-import { JsxEmit, ModuleResolutionKind } from "typescript";
+import { createMDX } from "fumadocs-mdx/next";
 
-const withMDX = createMDX({
-	mdxOptions: {
-		rehypeCodeOptions: {
-			transformers: [
-				...rehypeCodeDefaultOptions.transformers,
-				transformerTwoslash({
-					twoslashOptions: {
-						compilerOptions: {
-							moduleResolution: ModuleResolutionKind.Bundler,
-							jsx: JsxEmit.React,
-						},
-					},
-				}),
-			],
-		},
-		remarkPlugins: [
-			[
-				remarkInstall,
-				{
-					persist: {
-						id: "persist-install",
-					},
-				},
-			],
-		],
-	},
+export const withMDX = createMDX({
+	configPath: "./source.config.ts",
 });
 
-/** @type {import('next').NextConfig} */
-const config = {
+export default withMDX({
 	reactStrictMode: true,
-	redirects() {
+	redirects: async () => {
 		return [
 			{
 				source: "/docs",
@@ -59,6 +30,4 @@ const config = {
 			},
 		],
 	},
-};
-
-export default withMDX(config);
+});

docs/package.json

@@ -6,7 +6,8 @@
     "build": "next build",
     "dev": "next dev",
     "start": "next start",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.19.8",
@@ -55,18 +56,18 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.2.0",
     "framer-motion": "^11.3.30",
-    "fumadocs-core": "13.4.1",
+    "fumadocs-core": "14.0.2",
     "fumadocs-docgen": "^1.1.0",
-    "fumadocs-mdx": "9.0.4",
+    "fumadocs-mdx": "11.1.0",
     "fumadocs-twoslash": "^1.1.2",
     "fumadocs-typescript": "^2.1.0",
-    "fumadocs-ui": "13.4.1",
+    "fumadocs-ui": "14.0.2",
     "geist": "^1.3.1",
     "input-otp": "^1.2.4",
     "lucide-react": "^0.435.0",
     "mini-svg-data-uri": "^1.4.4",
     "motion": "^10.18.0",
-    "next": "^14.2.5",
+    "next": "^15.0.1",
     "next-themes": "^0.3.0",
     "oslo": "^1.2.1",
     "prism-react-renderer": "^2.4.0",

docs/source.config.ts

@@ -0,0 +1,35 @@
+import {
+	defineCollections,
+	defineDocs,
+	getDefaultMDXOptions,
+} from "fumadocs-mdx/config";
+import { defineConfig } from "fumadocs-mdx/config";
+import { remarkInstall } from "fumadocs-docgen";
+import { z } from "zod";
+
+export default defineConfig({
+	mdxOptions: {
+		remarkPlugins: [
+			[
+				remarkInstall,
+				{
+					persist: {
+						id: "persist-install",
+					},
+				},
+			],
+		],
+	},
+});
+
+export const changelog = defineCollections({
+	type: "doc",
+	dir: "./content/changelog",
+	schema: z.object({
+		title: z.string(),
+	}),
+});
+
+export const { docs, meta } = defineDocs({
+	dir: "./content/docs",
+});