refactor: website facelift

apps/website/.prettierignore

@@ -6,3 +6,4 @@ public/searchIndex
 src/assets/readme
 src/styles/unocss.css
 next-env.d.ts
+src/util/shiki.bundle.ts

apps/website/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/website/next.config.mjs → apps/website/next.config.ts

@@ -1,13 +1,19 @@
-/**
- * @type {import('next').NextConfig}
- */
+import type { NextConfig } from 'next';
+
 export default {
 	reactStrictMode: true,
 	images: {
 		dangerouslyAllowSVG: true,
 		contentDispositionType: 'attachment',
 		contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
+		remotePatterns: [
+			{
+				protocol: 'http',
+				hostname: 'localhost',
+			},
+		],
 	},
+	poweredByHeader: false,
 	logging: {
 		fetches: {
 			fullUrl: true,
@@ -16,6 +22,8 @@ export default {
 	experimental: {
 		ppr: true,
 		reactCompiler: true,
+		useCache: true,
+		dynamicOnHover: true,
 	},
 	eslint: {
 		ignoreDuringBuilds: true,
@@ -37,4 +45,4 @@ export default {
 			},
 		];
 	},
-};
+} satisfies NextConfig;

apps/website/package.json

@@ -13,7 +13,7 @@
 		"build:search_indices": "pnpm node scripts/generateAllIndices.js",
 		"build:analyze": "turbo run docs --filter='@discordjs/*' --concurrency=4 && cross-env ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true pnpm run build:prod",
 		"preview": "next start",
-		"dev": "next dev",
+		"dev": "next dev --turbopack",
 		"lint": "pnpm run build:check && prettier --check . && cross-env TIMING=1 eslint --format=pretty src ",
 		"format": "pnpm run build:check && prettier --write . && cross-env TIMING=1 eslint --fix --format=pretty src ",
 		"fmt": "pnpm run format"
@@ -46,57 +46,78 @@
 	"homepage": "https://discord.js.org",
 	"funding": "https://github.com/discordjs/discord.js?sponsor",
 	"dependencies": {
-		"@radix-ui/react-collapsible": "^1.1.2",
+		"@radix-ui/react-collapsible": "^1.1.3",
 		"@react-icons/all-files": "^4.1.0",
-		"@vercel/analytics": "^1.4.1",
+		"@vercel/analytics": "^1.5.0",
 		"@vercel/edge-config": "^1.4.0",
-		"@vercel/og": "^0.6.4",
-		"@vercel/postgres": "^0.9.0",
-		"cmdk": "^1.0.4",
+		"@vercel/og": "^0.6.8",
+		"@vercel/postgres": "^0.10.0",
+		"cmdk": "^1.1.1",
+		"cva": "1.0.0-beta.3",
 		"geist": "^1.3.1",
-		"jotai": "^2.11.0",
-		"lucide-react": "^0.379.0",
-		"meilisearch": "^0.40.0",
-		"next": "15.0.0-rc.0",
-		"next-mdx-remote-client": "^1.0.3",
-		"next-themes": "^0.3.0",
-		"overlayscrollbars": "^2.10.1",
+		"immer": "^10.1.1",
+		"jotai": "^2.12.2",
+		"jotai-immer": "^0.4.1",
+		"lucide-react": "^0.487.0",
+		"meilisearch": "^0.49.0",
+		"motion": "^12.6.3",
+		"next": "15.3.1-canary.2",
+		"next-mdx-remote-client": "^2.1.1",
+		"next-themes": "^0.4.6",
+		"nuqs": "^2.4.1",
+		"overlayscrollbars": "^2.11.1",
 		"overlayscrollbars-react": "^0.5.6",
-		"react": "19.1.0",
-		"react-aria-components": "^1.5.0",
-		"react-dom": "19.1.0",
+		"react": "^19.1.0",
+		"react-aria": "^3.38.1",
+		"react-aria-components": "^1.7.1",
+		"react-dom": "^19.1.0",
+		"react-error-boundary": "^5.0.0",
 		"sharp": "^0.33.5",
-		"usehooks-ts": "^3.1.0",
+		"tailwind-merge": "^3.1.0",
+		"tw-animate-css": "^1.2.5",
+		"usehooks-ts": "^3.1.1",
 		"vaul": "^1.1.2"
 	},
 	"devDependencies": {
-		"@shikijs/rehype": "^1.24.4",
-		"@tailwindcss/typography": "^0.5.15",
+		"@next/env": "^15.2.4",
+		"@playwright/test": "^1.51.1",
+		"@shikijs/rehype": "^3.2.1",
+		"@tailwindcss/postcss": "^4.1.3",
+		"@tailwindcss/typography": "^0.5.16",
+		"@tailwindcss/vite": "^4.1.3",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/node": "^22.14.0",
 		"@types/react": "^19.1.0",
 		"@types/react-dom": "^19.1.1",
 		"@vitejs/plugin-react": "^4.3.4",
+		"@vitest/browser": "^3.1.1",
+		"@vitest/coverage-v8": "^2.1.8",
 		"autoprefixer": "^10.4.21",
-		"babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
+		"babel-plugin-react-compiler": "19.0.0-beta-e993439-20250328",
 		"cpy-cli": "^5.0.0",
 		"cross-env": "^7.0.3",
 		"eslint": "^9.24.0",
 		"eslint-config-neon": "^0.2.7",
-		"eslint-formatter-compact": "^8.40.0",
 		"eslint-formatter-pretty": "^6.0.1",
+		"git-describe": "^4.1.1",
 		"happy-dom": "^17.4.4",
+		"msw": "^2.7.3",
+		"playwright": "^1.51.1",
 		"postcss": "^8.5.3",
 		"prettier": "^3.5.3",
-		"prettier-plugin-tailwindcss": "^0.5.14",
-		"remark-gfm": "^4.0.0",
-		"remark-rehype": "^11.1.1",
-		"shiki": "^1.24.4",
-		"tailwindcss": "^3.4.17",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"remark-gfm": "^4.0.1",
+		"remark-rehype": "^11.1.2",
+		"shiki": "^3.2.1",
+		"tailwindcss": "^4.1.3",
+		"tailwindcss-react-aria-components": "^2.0.0",
 		"turbo": "^2.5.0",
-		"typescript": "~5.8.3",
-		"vercel": "^41.4.1"
+		"typescript": "^5.8.2",
+		"vercel": "^41.4.1",
+		"vite-tsconfig-paths": "^5.1.4",
+		"vitest": "^2.1.8",
+		"vitest-browser-react": "^0.1.1"
 	},
 	"engines": {
 		"node": ">=22.12.0"

apps/website/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+	plugins: {
+		'@tailwindcss/postcss': {},
+	},
+};

apps/website/src/app/docs/packages/[packageName]/[version]/CmdK.tsx

@@ -0,0 +1,14 @@
+import { CmdKNoSRR } from '@/components/CmdK';
+import { fetchDependencies } from '@/util/fetchDependencies';
+
+export async function CmdK({
+	params,
+}: {
+	readonly params: Promise<{ readonly packageName: string; readonly version: string }>;
+}) {
+	const { packageName, version } = await params;
+
+	const dependencies = await fetchDependencies({ packageName, version });
+
+	return <CmdKNoSRR dependencies={dependencies} />;
+}

apps/website/src/app/docs/packages/[packageName]/[version]/[item]/opengraph-image.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 
 import { ImageResponse } from 'next/og';
-import { resolveKind } from '~/util/resolveNodeKind';
+import { resolveKind } from '@/util/resolveNodeKind';
 
 export const runtime = 'edge';
 
@@ -15,22 +15,32 @@ export const contentType = 'image/png';
 export default async function Image({
 	params,
 }: {
-	readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
+	readonly params: Promise<{ readonly item: string; readonly packageName: string; readonly version: string }>;
 }) {
-	const normalizeItem = params.item.split(encodeURIComponent(':')).join('.').toLowerCase();
+	const { item, packageName, version } = await params;
 
-	const isMainVersion = params.version === 'main';
+	const [fontDataBold, fontDataBlack] = await Promise.all([
+		fetch(new URL('../../../../../../assets/Geist-Bold.ttf', import.meta.url), {
+			next: { revalidate: 604_800 },
+		}).then(async (res) => res.arrayBuffer()),
+		fetch(new URL('../../../../../../assets/Geist-Black.ttf', import.meta.url), {
+			next: { revalidate: 604_800 },
+		}).then(async (res) => res.arrayBuffer()),
+	]);
+	const normalizeItem = item.split(encodeURIComponent(':')).join('.').toLowerCase();
+
+	const isMain = version === 'main';
 	const fileContent = await fetch(
-		`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.${normalizeItem}.api.json`,
-		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
+		`${process.env.BLOB_STORAGE_URL}/rewrite/${packageName}/${version}.${normalizeItem}.api.json`,
+		{ next: { revalidate: isMain ? 0 : 604_800 } },
 	);
 	const node = await fileContent.json();
 
 	return new ImageResponse(
 		(
 			<div tw="flex bg-[#121212] h-full w-full p-14">
 				<div tw="flex flex-col mx-auto h-full text-white">
-					<div tw="flex text-4xl text-gray-400">{params.packageName}</div>
+					<div tw="flex text-4xl text-gray-400">{packageName}</div>
 					<div tw="flex flex-col justify-between h-full w-full pt-14">
 						<div tw="flex items-center max-w-full">
 							<span tw="mr-6">{resolveKind(node.kind, 94)}</span>
@@ -40,7 +50,7 @@ export default async function Image({
 									whiteSpace: 'nowrap',
 									overflow: 'hidden',
 								}}
-								tw="text-[5.5rem] font-bold  w-full"
+								tw="text-[5.5rem] font-bold w-full"
 							>
 								{node.displayName}
 							</h2>
@@ -94,6 +104,20 @@ export default async function Image({
 		),
 		{
 			...size,
+			fonts: [
+				{
+					name: 'Geist',
+					data: fontDataBold,
+					weight: 700,
+					style: 'normal',
+				},
+				{
+					name: 'Geist',
+					data: fontDataBlack,
+					weight: 900,
+					style: 'normal',
+				},
+			],
 		},
 	);
 }

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

@@ -1,38 +1,44 @@
+'use cache';
+
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { DocItem } from '~/components/DocItem';
-import { fetchNode } from '~/util/fetchNode';
+import { DocItem } from '@/components/DocItem';
+import { fetchNode } from '@/util/fetchNode';
 
 export async function generateMetadata({
 	params,
 }: {
-	readonly params: {
+	readonly params: Promise<{
 		readonly item: string;
 		readonly packageName: string;
 		readonly version: string;
-	};
+	}>;
 }): Promise<Metadata> {
-	const normalizeItem = params.item.split(encodeURIComponent(':'))[0];
+	const { item, packageName, version } = await params;
+
+	const normalizeItem = item.split(encodeURIComponent(':'))[0];
 
 	return {
-		title: `${normalizeItem} (${params.packageName} - ${params.version})`,
+		title: `${normalizeItem} (${packageName} - ${version})`,
 	};
 }
 
 export default async function Page({
 	params,
 }: {
-	readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
+	readonly params: Promise<{ readonly item: string; readonly packageName: string; readonly version: string }>;
 }) {
-	const node = await fetchNode({ item: params.item, packageName: params.packageName, version: params.version });
+	const { item, packageName, version } = await params;
+
+	const node = await fetchNode({ item, packageName, version });
 
 	if (!node) {
 		notFound();
 	}
 
 	return (
-		<main className="flex w-full flex-col gap-8 pb-12 md:pb-0">
-			<DocItem node={node} packageName={params.packageName} version={params.version} />
+		<main className="mx-auto flex w-full max-w-screen-xl flex-col gap-8 px-6 py-4">
+			<DocItem node={node} packageName={packageName} version={version} />
 		</main>
 	);
 }