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

2026-03-11 00:53:31 +01:00 · 2023-03-23 17:17:41 -04:00
parent bc641fa936
commit ee5169e0aa
91 changed files with 820 additions and 1688 deletions
--- a/apps/website/src/app/api/dynamic-open-graph.png/route.tsx
+++ b/apps/website/src/app/api/dynamic-open-graph.png/route.tsx
@@ -0,0 +1,170 @@
+/* eslint-disable react/no-unknown-property */
+
+import type { ApiItemKind } from '@microsoft/api-extractor-model';
+import { ImageResponse } from '@vercel/og';
+import type { NextRequest } from 'next/server';
+import type { ServerRuntime } from 'next/types';
+
+export const runtime: ServerRuntime = 'edge';
+
+const fonts = Promise.all([
+	fetch(new URL('../../../assets/fonts/Inter-Regular.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+	fetch(new URL('../../../assets/fonts/Inter-Bold.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
+]);
+
+function resolveIcon(icon: keyof typeof ApiItemKind, size = 88) {
+	switch (icon) {
+		case 'Class':
+			return (
+				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
+					<path d="M11.34 9.71h.71l2.67-2.67v-.71L13.38 5h-.7l-1.82 1.81h-5V5.56l1.86-1.85V3l-2-2H5L1 5v.71l2 2h.71l1.14-1.15v5.79l.5.5H10v.52l1.33 1.34h.71l2.67-2.67v-.71L13.37 10h-.7l-1.86 1.85h-5v-4H10v.48l1.34 1.38zm1.69-3.65l.63.63-2 2-.63-.63 2-2zm0 5l.63.63-2 2-.63-.63 2-2zM3.35 6.65l-1.29-1.3 3.29-3.29 1.3 1.29-3.3 3.3z" />
+				</svg>
+			);
+		case 'Enum':
+			return (
+				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
+					<path
+						clipRule="evenodd"
+						d="M14 2H8L7 3v3h1V3h6v5h-4v1h4l1-1V3l-1-1zM9 6h4v1H9.41L9 6.59V6zM7 7H2L1 8v5l1 1h6l1-1V8L8 7H7zm1 6H2V8h6v5zM3 9h4v1H3V9zm0 2h4v1H3v-1zm6-7h4v1H9V4z"
+						fillRule="evenodd"
+					/>
+				</svg>
+			);
+		case 'EnumMember':
+			return (
+				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
+					<path
+						clipRule="evenodd"
+						d="M7 3l1-1h6l1 1v5l-1 1h-4V8h4V3H8v3H7V3zm2 6V8L8 7H2L1 8v5l1 1h6l1-1V9zM8 8v5H2V8h6zm1.414-1L9 6.586V6h4v1H9.414zM9 4h4v1H9V4zm-2 6H3v1h4v-1z"
+						fillRule="evenodd"
+					/>
+				</svg>
+			);
+		case 'Interface':
+			return (
+				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
+					<path d="M11.496 4a3.49 3.49 0 0 0-3.46 3h-3.1a2 2 0 1 0 0 1h3.1a3.5 3.5 0 1 0 3.46-4zm0 6a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" />
+				</svg>
+			);
+		case 'TypeAlias':
+			return (
+				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
+					<path d="M14.45 4.5l-5-2.5h-.9l-7 3.5-.55.89v4.5l.55.9 5 2.5h.9l7-3.5.55-.9v-4.5l-.55-.89zm-8 8.64l-4.5-2.25V7.17l4.5 2v3.97zm.5-4.8L2.29 6.23l6.66-3.34 4.67 2.34-6.67 3.11zm7 1.55l-6.5 3.25V9.21l6.5-3v3.68z" />
+				</svg>
+			);
+		case 'Variable':
+			return (
+				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
+					<path
+						clipRule="evenodd"
+						d="M2 5h2V4H1.5l-.5.5v8l.5.5H4v-1H2V5zm12.5-1H12v1h2v7h-2v1h2.5l.5-.5v-8l-.5-.5zm-2.74 2.57L12 7v2.51l-.3.45-4.5 2h-.46l-2.5-1.5-.24-.43v-2.5l.3-.46 4.5-2h.46l2.5 1.5zM5 9.71l1.5.9V9.28L5 8.38v1.33zm.58-2.15l1.45.87 3.39-1.5-1.45-.87-3.39 1.5zm1.95 3.17l3.5-1.56v-1.4l-3.5 1.55v1.41z"
+						fillRule="evenodd"
+					/>
+				</svg>
+			);
+		case 'Property':
+			return (
+				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
+					<path d="M2.807 14.975a1.75 1.75 0 0 1-1.255-.556 1.684 1.684 0 0 1-.544-1.1A1.72 1.72 0 0 1 1.36 12.1c1.208-1.27 3.587-3.65 5.318-5.345a4.257 4.257 0 0 1 .048-3.078 4.095 4.095 0 0 1 1.665-1.969 4.259 4.259 0 0 1 4.04-.36l.617.268-2.866 2.951 1.255 1.259 2.944-2.877.267.619a4.295 4.295 0 0 1 .04 3.311 4.198 4.198 0 0 1-.923 1.392 4.27 4.27 0 0 1-.743.581 4.217 4.217 0 0 1-3.812.446c-1.098 1.112-3.84 3.872-5.32 5.254a1.63 1.63 0 0 1-1.084.423zm7.938-13.047a3.32 3.32 0 0 0-1.849.557c-.213.13-.412.284-.591.458a3.321 3.321 0 0 0-.657 3.733l.135.297-.233.227c-1.738 1.697-4.269 4.22-5.485 5.504a.805.805 0 0 0 .132 1.05.911.911 0 0 0 .298.22c.1.044.209.069.319.072a.694.694 0 0 0 .45-.181c1.573-1.469 4.612-4.539 5.504-5.44l.23-.232.294.135a3.286 3.286 0 0 0 3.225-.254 3.33 3.33 0 0 0 .591-.464 3.28 3.28 0 0 0 .964-2.358c0-.215-.021-.43-.064-.642L11.43 7.125 8.879 4.578l2.515-2.59a3.286 3.286 0 0 0-.65-.06z" />
+				</svg>
+			);
+		default:
+			return (
+				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
+					<path d="M13.51 4l-5-3h-1l-5 3-.49.86v6l.49.85 5 3h1l5-3 .49-.85v-6L13.51 4zm-6 9.56l-4.5-2.7V5.7l4.5 2.45v5.41zM3.27 4.7l4.74-2.84 4.74 2.84-4.74 2.59L3.27 4.7zm9.74 6.16l-4.5 2.7V8.15l4.5-2.45v5.16z" />
+				</svg>
+			);
+	}
+}
+
+export async function GET(request: NextRequest) {
+	const fontData = await fonts;
+
+	const { searchParams } = new URL(request.url);
+
+	const hasPkg = searchParams.has('pkg');
+	const hasKind = searchParams.has('kind');
+	const hasName = searchParams.has('name');
+	const hasMethods = searchParams.has('methods');
+	const hasProps = searchParams.has('props');
+	const hasMembers = searchParams.has('members');
+	const pkg = hasPkg ? searchParams.get('pkg') : '';
+	const kind = hasKind ? searchParams.get('kind')! : 'Method';
+	const name = hasName ? searchParams.get('name')!.slice(0, 100) : 'My default name which is super long to overflow';
+	const methods = hasMethods ? searchParams.get('methods') : '';
+	const props = hasProps ? searchParams.get('props') : '';
+	const members = hasMembers ? searchParams.get('members') : '';
+
+	return new ImageResponse(
+		(
+			<div
+				style={{
+					fontFamily: 'Inter',
+				}}
+				tw="flex flex-row bg-[#181818] h-full w-full p-24"
+			>
+				<div tw="flex flex-col mx-auto h-full text-white">
+					<div tw="flex flex-row text-4xl text-gray-400">@discordjs/{pkg}</div>
+					<div tw="flex flex-col justify-between h-full w-full pt-14">
+						<div tw="flex flex-row items-center max-w-full">
+							<span tw="mr-6">{resolveIcon(kind as keyof typeof ApiItemKind)}</span>
+							<h2
+								style={{
+									textOverflow: 'ellipsis',
+									whiteSpace: 'nowrap',
+									overflow: 'hidden',
+								}}
+								tw="text-[5.5rem] font-bold  w-full"
+							>
+								{name}
+							</h2>
+						</div>
+						<div tw="flex flex-row w-full justify-between">
+							<div tw="flex flex-row">
+								{props ? (
+									<div tw="flex flex-row mr-12">
+										<span tw="mr-4">{resolveIcon('Property', 36)}</span>
+										<div tw="flex flex-col text-4xl">
+											<span tw="mb-4">{props}</span>
+											<span>Properties</span>
+										</div>
+									</div>
+								) : null}
+								{methods ? (
+									<div tw="flex flex-row mr-12">
+										<span tw="mr-4">{resolveIcon('Method', 36)}</span>
+										<div tw="flex flex-col text-4xl">
+											<span tw="mb-4">{methods}</span>
+											<span>Methods</span>
+										</div>
+									</div>
+								) : null}
+								{members ? (
+									<div tw="flex flex-row">
+										<span tw="mr-4">{resolveIcon('EnumMember', 36)}</span>
+										<div tw="flex flex-col text-4xl">
+											<span tw="mb-4">{members}</span>
+											<span>Members</span>
+										</div>
+									</div>
+								) : null}
+							</div>
+							<div tw="flex h-full items-end">
+								<span tw="bg-[#5865f2] text-4xl font-black relative rounded-lg py-4 px-8">discord.js</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		),
+		{
+			width: 1_200,
+			height: 630,
+			fonts: [
+				{ name: 'Inter', data: fontData[0], weight: 500, style: 'normal' },
+				{ name: 'Inter', data: fontData[1], weight: 700, style: 'normal' },
+			],
+			debug: false,
+		},
+	);
+}
--- a/apps/website/src/app/api/open-graph.png/route.tsx
+++ b/apps/website/src/app/api/open-graph.png/route.tsx
@@ -0,0 +1,44 @@
+/* eslint-disable react/no-unknown-property */
+
+import { ImageResponse } from '@vercel/og';
+import type { ServerRuntime } from 'next/types';
+
+export const runtime: ServerRuntime = 'edge';
+
+const fonts = fetch(new URL('../../../assets/fonts/Inter-Black.ttf', import.meta.url)).then(async (res) =>
+	res.arrayBuffer(),
+);
+
+export async function GET() {
+	const fontData = await fonts;
+
+	return new ImageResponse(
+		(
+			<div
+				style={{
+					fontFamily: 'Inter',
+				}}
+				tw="flex flex-row bg-[#181818] h-full w-full"
+			>
+				<div tw="mx-auto flex flex-row items-center h-full">
+					<div tw="flex flex-row">
+						<div tw="flex flex-row">
+							<div tw="flex flex-col font-black text-[5.5rem] text-white">
+								<div tw="flex flex-row">
+									The <span tw="bg-[#5865f2] rounded-lg py-1 px-6 ml-4">most popular</span>
+								</div>
+								<span>way to build Discord</span>
+								<span>bots.</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		),
+		{
+			width: 1_200,
+			height: 630,
+			fonts: [{ name: 'Inter', data: fontData, weight: 900, style: 'normal' }],
+		},
+	);
+}
--- a/apps/website/src/app/docAPI.ts
+++ b/apps/website/src/app/docAPI.ts
@@ -15,7 +15,13 @@ export async function fetchModelJSON(packageName: string, version: string): Prom
 			join(process.cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'),
 			'utf8',
 		);
-		return JSON.parse(res);
+
+		try {
+			return JSON.parse(res);
+		} catch {
+			console.log(res);
+			return {};
+		}
 	}

 	const response = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${version}.api.json`, {
--- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/layout.tsx
+++ b/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>
-	);
-}
--- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/page.tsx
+++ b/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>
 	);
 }
--- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/providers.tsx
+++ b/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>
-	);
-}
--- a/apps/website/src/app/docs/packages/[package]/[version]/error.tsx
+++ b/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>
+	);
+}
--- a/apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
+++ b/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>
 	);
 }
--- a/apps/website/src/app/docs/packages/[package]/[version]/page.tsx
+++ b/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>
 	);
--- a/apps/website/src/app/docs/packages/[package]/[version]/providers.tsx
+++ b/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>
+	);
+}
--- a/apps/website/src/app/docs/packages/[package]/page.tsx
+++ b/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">
--- a/apps/website/src/app/docs/packages/page.tsx
+++ b/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">
--- a/apps/website/src/app/error.tsx
+++ b/apps/website/src/app/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>
+	);
+}
--- a/apps/website/src/app/global-error.tsx
+++ b/apps/website/src/app/global-error.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { Providers } from './providers';
+import { inter } from '~/util/fonts';
+
+export default function GlobalError({ error }: { error: Error }) {
+	console.error(error);
+
+	return (
+		<html className={inter.variable} lang="en" suppressHydrationWarning>
+			<body className="dark:bg-dark-800 bg-white">
+				<Providers>
+					<main className="mx-auto h-screen max-w-2xl">
+						<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>
+					</main>
+				</Providers>
+			</body>
+		</html>
+	);
+}
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -1,15 +1,18 @@
 import type { PropsWithChildren } from 'react';
+import { Providers } from './providers';
+import { inter } from '~/util/fonts';

-import '@unocss/reset/tailwind.css';
-import '../styles/inter.css';
+import '@unocss/reset/tailwind-compat.css';
 import '../styles/unocss.css';
 import '../styles/cmdk.css';
 import '../styles/main.css';

 export default function RootLayout({ children }: PropsWithChildren) {
 	return (
-		<html lang="en">
-			<body className="dark:bg-dark-800 bg-white">{children}</body>
+		<html className={inter.variable} lang="en" suppressHydrationWarning>
+			<body className="dark:bg-dark-800 bg-white">
+				<Providers>{children}</Providers>
+			</body>
 		</html>
 	);
 }
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -1,11 +1,12 @@
 import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
 import Image from 'next/image';
 import Link from 'next/link';
+import type { Metadata } from 'next/types';
 import vercelLogo from '../assets/powered-by-vercel.svg';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 import { CODE_EXAMPLE, DESCRIPTION } from '~/util/constants';

-export const metadata = {
+export const metadata: Metadata = {
 	title: 'discord.js',
 	description: DESCRIPTION,
 	viewport: {
@@ -51,7 +52,7 @@ export const metadata = {
 		type: 'website',
 		title: 'discord.js',
 		description: DESCRIPTION,
-		images: 'https://discordjs.dev/api/og',
+		images: 'https://discordjs.dev/api/open-graph.png',
 	},

 	twitter: {
@@ -66,7 +67,7 @@ export const metadata = {

 export default function Page() {
 	return (
-		<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:h-full lg:place-content-center lg:py-0 lg:px-6">
+		<div className="mx-auto flex h-screen max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:place-content-center lg:py-0 lg:px-6">
 			<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
 				<div className="flex max-w-lg flex-col gap-3 lg:mr-8">
 					<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
@@ -104,7 +105,10 @@ export default function Page() {
 						</a>
 					</div>
 				</div>
-				<SyntaxHighlighter code={CODE_EXAMPLE} />
+				<div className="max-w-sm sm:max-w-6xl">
+					{/* @ts-expect-error async component */}
+					<SyntaxHighlighter code={CODE_EXAMPLE} />
+				</div>
 			</div>
 			<div className="flex flex-row place-content-center">
 				<a
--- a/apps/website/src/app/providers.tsx
+++ b/apps/website/src/app/providers.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import type { PropsWithChildren } from 'react';
+
+export function Providers({ children }: PropsWithChildren) {
+	return <ThemeProvider attribute="class">{children}</ThemeProvider>;
+}