feat(website): render syntax and mdx on the server (#9086)

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

@@ -1,12 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { Providers } from './providers';
-import { CmdKDialog } from '~/components/CmdK';
-
-export default function ItemLayout({ children }: PropsWithChildren) {
-	return (
-		<Providers>
-			<>{children}</>
-			<CmdKDialog />
-		</Providers>
-	);
-}

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

@@ -1,9 +1,4 @@
-/* eslint-disable no-case-declarations */
-import { readFile } from 'node:fs/promises';
-import { join } from 'node:path';
-// eslint-disable-next-line n/prefer-global/process
-import process, { cwd } from 'node:process';
-import { createApiModel, tryResolveSummaryText } from '@discordjs/scripts';
+import { addPackageToModel, tryResolveSummaryText } from '@discordjs/scripts';
 import type {
 	ApiClass,
 	ApiDeclaredItem,
@@ -18,9 +13,9 @@ import type {
 	ApiTypeAlias,
 	ApiVariable,
 } from '@microsoft/api-extractor-model';
-import { ApiItemKind, ApiFunction } from '@microsoft/api-extractor-model';
-import type { Metadata } from 'next';
+import { ApiItemKind, ApiModel, ApiFunction } from '@microsoft/api-extractor-model';
 import { notFound } from 'next/navigation';
+import type { Metadata } from 'next/types';
 import { fetchModelJSON } from '~/app/docAPI';
 import { Class } from '~/components/model/Class';
 import { Interface } from '~/components/model/Interface';
@@ -39,7 +34,7 @@ export interface ItemRouteParams {
 
 async function fetchHeadMember({ package: packageName, version, item }: ItemRouteParams): Promise<ApiItem | undefined> {
 	const modelJSON = await fetchModelJSON(packageName, version);
-	const model = createApiModel(modelJSON);
+	const model = addPackageToModel(new ApiModel(), modelJSON);
 	const pkg = model.tryGetPackageByName(packageName);
 	const entry = pkg?.entryPoints[0];
 
@@ -89,11 +84,11 @@ function resolveMemberSearchParams(packageName: string, member: ApiItem): URLSea
 	return params;
 }
 
-export async function generateMetadata({ params }: { params: ItemRouteParams }): Promise<Metadata> {
+export async function generateMetadata({ params }: { params: ItemRouteParams }) {
 	const member = (await fetchHeadMember(params))!;
 	const name = `discord.js${member?.displayName ? ` | ${member.displayName}` : ''}`;
 	const ogTitle = `${params.package ?? 'discord.js'}${member?.displayName ? ` | ${member.displayName}` : ''}`;
-	const url = new URL('https://discordjs.dev/api/og_model');
+	const url = new URL('https://discordjs.dev/api/dynamic-open-graph.png');
 	const searchParams = resolveMemberSearchParams(params.package, member);
 	url.search = searchParams.toString();
 	const ogImage = url.toString();
@@ -107,21 +102,21 @@ export async function generateMetadata({ params }: { params: ItemRouteParams }):
 			description: description ?? 'Discord.js API Documentation',
 			images: ogImage,
 		},
-	};
+	} satisfies Metadata;
 }
 
 export async function generateStaticParams({ params: { package: packageName, version } }: { params: ItemRouteParams }) {
 	const modelJSON = await fetchModelJSON(packageName, version);
-	const model = createApiModel(modelJSON);
+	const model = addPackageToModel(new ApiModel(), modelJSON);
 
 	const pkg = model.tryGetPackageByName(packageName);
 	const entry = pkg?.entryPoints[0];
 
 	if (!entry) {
-		return notFound();
+		notFound();
 	}
 
-	return entry.members.map((member) => ({
+	return entry.members.map((member: ApiItem) => ({
 		item: member.displayName,
 	}));
 }
@@ -131,21 +126,20 @@ async function fetchMember({ package: packageName, version: branchName = 'main',
 		notFound();
 	}
 
-	let data;
-	try {
-		if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
-			const res = await readFile(join(cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'), 'utf8');
-			data = JSON.parse(res);
-		} else {
-			const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
-			data = await res.json();
+	const model = new ApiModel();
+
+	if (branchName === 'main') {
+		const modelJSONFiles = await Promise.all(PACKAGES.map(async (pkg) => fetchModelJSON(pkg, branchName)));
+
+		for (const modelJSONFile of modelJSONFiles) {
+			addPackageToModel(model, modelJSONFile);
 		}
-	} catch {
-		notFound();
+	} else {
+		const modelJSON = await fetchModelJSON(packageName, branchName);
+		addPackageToModel(model, modelJSON);
 	}
 
 	const [memberName, overloadIndex] = decodeURIComponent(item).split(OVERLOAD_SEPARATOR);
-	const model = createApiModel(data);
 
 	// eslint-disable-next-line prefer-const
 	let { containerKey, displayName: name } = findMember(model, packageName, memberName) ?? {};
@@ -161,7 +155,7 @@ function Member({ member }: { member?: ApiItem }) {
 		case 'Class':
 			return <Class clazz={member as ApiClass} />;
 		case 'Function':
-			return <Function item={member as ApiFunction} key={member.containerKey} />;
+			return <Function item={member as ApiFunction} key={`${member.displayName}-${member.containerKey}`} />;
 		case 'Interface':
 			return <Interface item={member as ApiInterface} />;
 		case 'TypeAlias':
@@ -179,7 +173,7 @@ export default async function Page({ params }: { params: ItemRouteParams }) {
 	const member = await fetchMember(params);
 
 	return (
-		<main
+		<div
 			className={
 				(member?.kind === 'Class' || member?.kind === 'Interface') && (member as ApiClass | ApiInterface).members.length
 					? 'xl:pr-64'
@@ -189,6 +183,6 @@ export default async function Page({ params }: { params: ItemRouteParams }) {
 			<article className="dark:bg-dark-600 bg-light-600">
 				<div className="dark:bg-dark-800  bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
 			</article>
-		</main>
+		</div>
 	);
 }

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

@@ -1,27 +0,0 @@
-'use client';
-
-// import { ThemeProvider } from 'next-themes';
-import type { PropsWithChildren } from 'react';
-import { CmdKProvider } from '~/contexts/cmdK';
-import { NavProvider } from '~/contexts/nav';
-
-export function Providers({ children }: PropsWithChildren) {
-	return (
-		<NavProvider>
-			<CmdKProvider>
-				{/* <ThemeProvider
-					attribute="class"
-					cookieName="theme"
-					defaultTheme="system"
-					disableTransitionOnChange
-					value={{
-						light: 'light',
-						dark: 'dark',
-					}}
-				> */}
-				{children}
-				{/* </ThemeProvider> */}
-			</CmdKProvider>
-		</NavProvider>
-	);
-}

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

@@ -0,0 +1,12 @@
+'use client';
+
+export default function Error({ error }: { error: Error }) {
+	console.error(error);
+
+	return (
+		<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
+			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
+			<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
+		</div>
+	);
+}

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

@@ -1,10 +1,13 @@
-import { createApiModel } from '@discordjs/scripts';
+import { addPackageToModel } from '@discordjs/scripts';
 import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
+import { ApiModel } from '@microsoft/api-extractor-model';
 import Image from 'next/image';
 import { notFound } from 'next/navigation';
 import type { PropsWithChildren } from 'react';
+import { Providers } from './providers';
 import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
 import vercelLogo from '~/assets/powered-by-vercel.svg';
+import { CmdKDialog } from '~/components/CmdK';
 import { Header } from '~/components/Header';
 import { Nav } from '~/components/Nav';
 import type { SidebarSectionItemData } from '~/components/Sidebar';
@@ -41,18 +44,18 @@ function serializeIntoSidebarItemData(item: ApiItem): SidebarSectionItemData {
 
 export default async function PackageLayout({ children, params }: PropsWithChildren<{ params: VersionRouteParams }>) {
 	const modelJSON = await fetchModelJSON(params.package, params.version);
-	const model = createApiModel(modelJSON);
+	const model = addPackageToModel(new ApiModel(), modelJSON);
 
 	const pkg = model.tryGetPackageByName(params.package);
 
 	if (!pkg) {
-		return notFound();
+		notFound();
 	}
 
 	const entry = pkg.entryPoints[0];
 
 	if (!entry) {
-		return notFound();
+		notFound();
 	}
 
 	const members = entry.members.filter((member) => {
@@ -64,80 +67,83 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 	});
 
 	return (
-		<>
-			<Header />
-			<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
-			<article className="pt-18 lg:pl-76">
-				<div className="relative z-10 min-h-[calc(100vh_-_70px)]">{children}</div>
-				<div className="h-76 md:h-52" />
-				<footer className="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
-					<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
-						<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
-							<a
-								className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-								href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-								rel="noopener noreferrer"
-								target="_blank"
-								title="Vercel"
-							>
-								<Image alt="Vercel" src={vercelLogo} />
-							</a>
-							<div className="flex flex-row gap-6 md:gap-12">
-								<div className="flex flex-col gap-2">
-									<div className="text-lg font-semibold">Community</div>
-									<div className="flex flex-col gap-1">
-										<a
-											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-											href="https://discord.gg/djs"
-											rel="noopener noreferrer"
-											target="_blank"
-										>
-											Discord
-										</a>
-										<a
-											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-											href="https://github.com/discordjs/discord.js/discussions"
-											rel="noopener noreferrer"
-											target="_blank"
-										>
-											GitHub discussions
-										</a>
+		<Providers>
+			<main>
+				<Header />
+				<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
+				<article className="pt-18 lg:pl-76">
+					<div className="relative z-10 min-h-[calc(100vh_-_70px)]">{children}</div>
+					<div className="h-76 md:h-52" />
+					<footer className="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
+						<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
+							<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
+								<a
+									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+									rel="noopener noreferrer"
+									target="_blank"
+									title="Vercel"
+								>
+									<Image alt="Vercel" src={vercelLogo} />
+								</a>
+								<div className="flex flex-row gap-6 md:gap-12">
+									<div className="flex flex-col gap-2">
+										<div className="text-lg font-semibold">Community</div>
+										<div className="flex flex-col gap-1">
+											<a
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												href="https://discord.gg/djs"
+												rel="noopener noreferrer"
+												target="_blank"
+											>
+												Discord
+											</a>
+											<a
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												href="https://github.com/discordjs/discord.js/discussions"
+												rel="noopener noreferrer"
+												target="_blank"
+											>
+												GitHub discussions
+											</a>
+										</div>
 									</div>
-								</div>
-								<div className="flex flex-col gap-2">
-									<div className="text-lg font-semibold">Project</div>
-									<div className="flex flex-col gap-1">
-										<a
-											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-											href="https://github.com/discordjs/discord.js"
-											rel="noopener noreferrer"
-											target="_blank"
-										>
-											discord.js
-										</a>
-										<a
-											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-											href="https://discordjs.guide"
-											rel="noopener noreferrer"
-											target="_blank"
-										>
-											discord.js guide
-										</a>
-										<a
-											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-											href="https://discord-api-types.dev"
-											rel="noopener noreferrer"
-											target="_blank"
-										>
-											discord-api-types
-										</a>
+									<div className="flex flex-col gap-2">
+										<div className="text-lg font-semibold">Project</div>
+										<div className="flex flex-col gap-1">
+											<a
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												href="https://github.com/discordjs/discord.js"
+												rel="noopener noreferrer"
+												target="_blank"
+											>
+												discord.js
+											</a>
+											<a
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												href="https://discordjs.guide"
+												rel="noopener noreferrer"
+												target="_blank"
+											>
+												discord.js guide
+											</a>
+											<a
+												className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+												href="https://discord-api-types.dev"
+												rel="noopener noreferrer"
+												target="_blank"
+											>
+												discord-api-types
+											</a>
+										</div>
 									</div>
 								</div>
 							</div>
 						</div>
-					</div>
-				</footer>
-			</article>
-		</>
+					</footer>
+				</article>
+			</main>
+			<CmdKDialog />
+		</Providers>
 	);
 }

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

@@ -1,66 +1,36 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import { serialize } from 'next-mdx-remote/serialize';
+import type { SerializeOptions } from 'next-mdx-remote/dist/types';
+import { MDXRemote } from 'next-mdx-remote/rsc';
 import rehypeIgnore from 'rehype-ignore';
-import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
 import rehypeRaw from 'rehype-raw';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
-import { getHighlighter } from 'shiki';
-import shikiLangJavascript from 'shiki/languages/javascript.tmLanguage.json';
-import shikiLangTypescript from 'shiki/languages/typescript.tmLanguage.json';
-import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json';
-import shikiThemeLightPlus from 'shiki/themes/light-plus.json';
 import type { VersionRouteParams } from './layout';
-import { MDXRemote } from '~/components/MDXRemote';
+import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 
 async function loadREADME(packageName: string) {
 	return readFile(join(process.cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
 }
 
-async function generateMDX(readme: string) {
-	return serialize(readme, {
-		mdxOptions: {
-			remarkPlugins: [remarkGfm],
-			remarkRehypeOptions: { allowDangerousHtml: true },
-			rehypePlugins: [
-				rehypeRaw,
-				rehypeIgnore,
-				rehypeSlug,
-				[
-					rehypePrettyCode,
-					{
-						theme: {
-							dark: shikiThemeDarkPlus,
-							light: shikiThemeLightPlus,
-						},
-						getHighlighter: async (options?: Partial<Options>) =>
-							getHighlighter({
-								...options,
-								langs: [
-									// @ts-expect-error: Working as intended
-									{ id: 'javascript', aliases: ['js'], scopeName: 'source.js', grammar: shikiLangJavascript },
-									// @ts-expect-error: Working as intended
-									{ id: 'typescript', aliases: ['ts'], scopeName: 'source.ts', grammar: shikiLangTypescript },
-								],
-							}),
-					},
-				],
-			],
-			format: 'md',
-		},
-	});
-}
+const mdxOptions = {
+	mdxOptions: {
+		remarkPlugins: [remarkGfm],
+		remarkRehypeOptions: { allowDangerousHtml: true },
+		rehypePlugins: [rehypeRaw, rehypeIgnore, rehypeSlug],
+		format: 'md',
+	},
+} satisfies SerializeOptions;
 
 export default async function Page({ params }: { params: VersionRouteParams }) {
 	const { package: packageName } = params;
 	const readmeSource = await loadREADME(packageName);
-	const mdxSource = await generateMDX(readmeSource);
 
 	return (
 		<article className="dark:bg-dark-600 bg-white p-10">
 			<div className="prose max-w-none">
-				<MDXRemote {...mdxSource} />
+				{/* @ts-expect-error async component */}
+				<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
 			</div>
 		</article>
 	);

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

@@ -0,0 +1,13 @@
+'use client';
+
+import type { PropsWithChildren } from 'react';
+import { CmdKProvider } from '~/contexts/cmdK';
+import { NavProvider } from '~/contexts/nav';
+
+export function Providers({ children }: PropsWithChildren) {
+	return (
+		<NavProvider>
+			<CmdKProvider>{children}</CmdKProvider>
+		</NavProvider>
+	);
+}

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

@@ -24,14 +24,14 @@ export default async function Page({ params }: { params: { package: string } })
 	const data = await getData(params.package);
 
 	return (
-		<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+		<div className="min-w-xs sm:w-md mx-auto flex h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
 			<div className="flex grow flex-col place-content-center gap-4">
 				<h1 className="text-2xl font-semibold">Select a version:</h1>
-				{data.map((version) => (
+				{data.map((version, idx) => (
 					<Link
 						className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
 						href={`/docs/packages/${params.package}/${version}`}
-						key={version}
+						key={`${version}-${idx}`}
 					>
 						<div className="flex flex-row place-content-between place-items-center gap-4">
 							<div className="flex flex-row place-content-between place-items-center gap-4">

apps/website/src/app/docs/packages/page.tsx

@@ -5,7 +5,7 @@ import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
 import Link from 'next/link';
 import { PACKAGES } from '~/util/constants';
 
-export default async function Page() {
+export default function Page() {
 	return (
 		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
 			<div className="flex grow flex-col place-content-center gap-4">
@@ -24,11 +24,11 @@ export default async function Page() {
 						<VscArrowRight size={20} />
 					</div>
 				</a>
-				{PACKAGES.map((pkg) => (
+				{PACKAGES.map((pkg, idx) => (
 					<Link
 						className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
 						href={`/docs/packages/${pkg}`}
-						key={pkg}
+						key={`${pkg}-${idx}`}
 					>
 						<div className="flex grow flex-row place-content-between place-items-center gap-4">
 							<div className="flex grow flex-row place-content-between place-items-center gap-4">