chore: move website and guide out of packages

apps/website/src/components/CmdK.tsx

@@ -0,0 +1,136 @@
+import type { ApiItemKind } from '@microsoft/api-extractor-model';
+import { Dialog } from 'ariakit/dialog';
+import { Command } from 'cmdk';
+import { useRouter } from 'next/router';
+import { useEffect, useMemo, useState } from 'react';
+import {
+	VscArrowRight,
+	VscSymbolClass,
+	VscSymbolEnum,
+	VscSymbolField,
+	VscSymbolInterface,
+	VscSymbolMethod,
+	VscSymbolProperty,
+	VscSymbolVariable,
+} from 'react-icons/vsc';
+import { useKey } from 'react-use';
+import { useCmdK } from '~/contexts/cmdK';
+import { client } from '~/util/search';
+
+function resolveIcon(item: keyof ApiItemKind) {
+	switch (item) {
+		case 'Class':
+			return <VscSymbolClass className="shrink-0" size={25} />;
+		case 'Enum':
+			return <VscSymbolEnum className="shrink-0" size={25} />;
+		case 'Interface':
+			return <VscSymbolInterface className="shrink-0" size={25} />;
+		case 'Property':
+			return <VscSymbolProperty className="shrink-0" size={25} />;
+		case 'TypeAlias':
+			return <VscSymbolField className="shrink-0" size={25} />;
+		case 'Variables':
+			return <VscSymbolVariable className="shrink-0" size={25} />;
+		default:
+			return <VscSymbolMethod className="shrink-0" size={25} />;
+	}
+}
+
+export function CmdKDialog({
+	currentPackageName,
+	currentVersion,
+}: {
+	currentPackageName?: string | undefined;
+	currentVersion?: string | undefined;
+}) {
+	const router = useRouter();
+	const dialog = useCmdK();
+	const [search, setSearch] = useState('');
+	const [searchResults, setSearchResults] = useState<any[]>([]);
+
+	const searchResultItems = useMemo(
+		() =>
+			searchResults?.map((item) => (
+				<Command.Item
+					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex flex transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
+					key={item.id}
+					onSelect={() => {
+						void router.push(item.path);
+						dialog!.setOpen(false);
+					}}
+				>
+					<div className="flex grow flex-row place-content-between place-items-center gap-4">
+						<div className="flex flex-row place-items-center gap-4">
+							{resolveIcon(item.kind)}
+							<div className="w-50 sm:w-100 flex flex-col">
+								<h2 className="font-semibold">{item.name}</h2>
+								<div className="line-clamp-1 text-sm font-normal">{item.summary}</div>
+								<div className="line-clamp-1 hidden text-xs font-light opacity-75 dark:opacity-50 sm:block">
+									{item.path}
+								</div>
+							</div>
+						</div>
+						<VscArrowRight className="shrink-0" size={20} />
+					</div>
+				</Command.Item>
+			)) ?? [],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[searchResults],
+	);
+
+	useKey(
+		(event) => {
+			if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				return true;
+			}
+
+			return false;
+		},
+		dialog!.toggle,
+		{ event: 'keydown', options: {} },
+		[],
+	);
+
+	useEffect(() => {
+		if (!dialog!.open) {
+			setSearch('');
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dialog!.open]);
+
+	useEffect(() => {
+		const searchDoc = async (searchString: string, version: string) => {
+			const res = await client.index(`${currentPackageName}-${version}`).search(searchString, { limit: 5 });
+			setSearchResults(res.hits);
+		};
+
+		if (search && currentPackageName) {
+			void searchDoc(search, currentVersion?.replaceAll('.', '-') ?? 'main');
+		} else {
+			setSearchResults([]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [search]);
+
+	return (
+		<Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog!}>
+			<Command
+				className="dark:bg-dark-300 min-w-xs sm:min-w-lg max-w-xs rounded bg-white sm:max-w-lg"
+				label="Command Menu"
+				shouldFilter={false}
+			>
+				<Command.Input
+					className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 focus:ring-width-2 focus:ring-blurple w-full rounded border-0 bg-white p-4 text-lg outline-0 outline-0 focus:ring dark:placeholder:text-white/75"
+					onValueChange={setSearch}
+					placeholder="Quick search..."
+					value={search}
+				/>
+				<Command.List className="pt-0">
+					<Command.Empty className="p-4 text-center">No results found</Command.Empty>
+					{search ? searchResultItems : null}
+				</Command.List>
+			</Command>
+		</Dialog>
+	);
+}

apps/website/src/components/CodeListing.tsx

@@ -0,0 +1,86 @@
+import type { TokenDocumentation, ApiItemJSON, AnyDocNodeJSON, InheritanceData } from '@discordjs/api-extractor-utils';
+import type { PropsWithChildren } from 'react';
+import { FiLink } from 'react-icons/fi';
+import { HyperlinkedText } from './HyperlinkedText';
+import { InheritanceText } from './InheritanceText';
+import { TSDoc } from './tsdoc/TSDoc';
+
+export enum CodeListingSeparatorType {
+	Type = ':',
+	Value = '=',
+}
+
+export function CodeListing({
+	name,
+	separator = CodeListingSeparatorType.Type,
+	typeTokens,
+	readonly = false,
+	optional = false,
+	summary,
+	children,
+	comment,
+	deprecation,
+	inheritanceData,
+}: PropsWithChildren<{
+	comment?: AnyDocNodeJSON | null;
+	deprecation?: AnyDocNodeJSON | null;
+	inheritanceData?: InheritanceData | null;
+	name: string;
+	optional?: boolean;
+	readonly?: boolean;
+	separator?: CodeListingSeparatorType;
+	summary?: ApiItemJSON['summary'];
+	typeTokens: TokenDocumentation[];
+}>) {
+	return (
+		<div className="scroll-mt-30 flex flex-col gap-4" id={name}>
+			<div className="md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2">
+				<a
+					aria-label="Anchor"
+					className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
+					href={`#${name}`}
+				>
+					<FiLink size={20} />
+				</a>
+				{deprecation || readonly || optional ? (
+					<div className="flex flex-row gap-1">
+						{deprecation ? (
+							<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+								Deprecated
+							</div>
+						) : null}
+						{readonly ? (
+							<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								Readonly
+							</div>
+						) : null}
+						{optional ? (
+							<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								Optional
+							</div>
+						) : null}
+					</div>
+				) : null}
+				<div className="flex flex-row flex-wrap place-items-center gap-1">
+					<h4 className="break-all font-mono text-lg font-bold">
+						{name}
+						{optional ? '?' : ''}
+					</h4>
+					<h4 className="font-mono text-lg font-bold">{separator}</h4>
+					<h4 className="break-all font-mono text-lg font-bold">
+						<HyperlinkedText tokens={typeTokens} />
+					</h4>
+				</div>
+			</div>
+			{summary || inheritanceData ? (
+				<div className="flex flex-col gap-4">
+					{deprecation ? <TSDoc node={deprecation} /> : null}
+					{summary ? <TSDoc node={summary} /> : null}
+					{comment ? <TSDoc node={comment} /> : null}
+					{inheritanceData ? <InheritanceText data={inheritanceData} /> : null}
+					{children}
+				</div>
+			) : null}
+		</div>
+	);
+}

apps/website/src/components/DocContainer.tsx

@@ -0,0 +1,135 @@
+import type {
+	ApiItemJSON,
+	TokenDocumentation,
+	TypeParameterData,
+	ApiClassJSON,
+	ApiInterfaceJSON,
+} from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
+import type { ReactNode } from 'react';
+import { Fragment, type PropsWithChildren } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import {
+	VscSymbolClass,
+	VscSymbolMethod,
+	VscSymbolEnum,
+	VscSymbolInterface,
+	VscSymbolVariable,
+	VscListSelection,
+	VscSymbolParameter,
+} from 'react-icons/vsc';
+import { useMedia } from 'react-use';
+import { HyperlinkedText } from './HyperlinkedText';
+import { SyntaxHighlighter } from './SyntaxHighlighter';
+import { TableOfContentItems } from './TableOfContentItems';
+import { TypeParamTable } from './TypeParamTable';
+import { TSDoc } from './tsdoc/TSDoc';
+
+type DocContainerProps = PropsWithChildren<{
+	excerpt: string;
+	extendsTokens?: TokenDocumentation[] | null;
+	implementsTokens?: TokenDocumentation[][];
+	kind: string;
+	methods?: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] | null;
+	name: string;
+	properties?: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] | null;
+	subHeading?: ReactNode;
+	summary?: ApiItemJSON['summary'];
+	typeParams?: TypeParameterData[];
+}>;
+
+function generateIcon(kind: string) {
+	const icons = {
+		Class: <VscSymbolClass />,
+		Method: <VscSymbolMethod />,
+		Function: <VscSymbolMethod />,
+		Enum: <VscSymbolEnum />,
+		Interface: <VscSymbolInterface />,
+		TypeAlias: <VscSymbolVariable />,
+	};
+
+	return icons[kind as keyof typeof icons];
+}
+
+export function DocContainer({
+	name,
+	kind,
+	excerpt,
+	summary,
+	typeParams,
+	children,
+	extendsTokens,
+	implementsTokens,
+	methods,
+	properties,
+	subHeading,
+}: DocContainerProps) {
+	const matches = useMedia('(max-width: 768px)', true);
+
+	return (
+		<>
+			<div className="flex flex-col gap-4">
+				<h2 className="flex flex-row place-items-center gap-2 break-all text-2xl font-bold">
+					<span>{generateIcon(kind)}</span>
+					{name}
+				</h2>
+				{subHeading}
+				<Section dense={matches} icon={<VscListSelection size={20} />} padded title="Summary">
+					{summary ? <TSDoc node={summary} /> : <span>No summary provided.</span>}
+					<div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" />
+				</Section>
+				<SyntaxHighlighter code={excerpt} />
+				{extendsTokens?.length ? (
+					<div className="flex flex-row place-items-center gap-4">
+						<h3 className="text-xl font-bold">Extends</h3>
+						<span className="break-all font-mono">
+							<HyperlinkedText tokens={extendsTokens} />
+						</span>
+					</div>
+				) : null}
+				{implementsTokens?.length ? (
+					<div className="flex flex-row place-items-center gap-4">
+						<h3 className="text-xl font-bold">Implements</h3>
+						<span className="break-all font-mono">
+							{implementsTokens.map((token, idx) => (
+								<Fragment key={idx}>
+									<HyperlinkedText tokens={token} />
+									{idx < implementsTokens.length - 1 ? ', ' : ''}
+								</Fragment>
+							))}
+						</span>
+					</div>
+				) : null}
+				<div className="flex flex-col gap-4">
+					{typeParams?.length ? (
+						<Section
+							defaultClosed
+							dense={matches}
+							icon={<VscSymbolParameter size={20} />}
+							padded
+							title="Type Parameters"
+						>
+							<TypeParamTable data={typeParams} />
+						</Section>
+					) : null}
+					{children}
+				</div>
+			</div>
+			{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
+				<aside className="dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[72px] right-0 bottom-0 z-20 hidden h-[calc(100vh_-_72px)] w-64 border-l bg-white pr-2 xl:block">
+					<Scrollbars
+						autoHide
+						hideTracksWhenNotNeeded
+						renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+						renderTrackVertical={(props) => (
+							<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
+						)}
+						universal
+					>
+						<TableOfContentItems methods={methods ?? []} properties={properties ?? []} />
+					</Scrollbars>
+				</aside>
+			) : null}
+		</>
+	);
+}

apps/website/src/components/HyperlinkedText.tsx

@@ -0,0 +1,22 @@
+import type { TokenDocumentation } from '@discordjs/api-extractor-utils';
+import Link from 'next/link';
+
+export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
+	return (
+		<>
+			{tokens.map((token, idx) => {
+				if (token.path) {
+					return (
+						<Link href={token.path} key={idx} prefetch={false}>
+							<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring">
+								{token.text}
+							</a>
+						</Link>
+					);
+				}
+
+				return <span key={idx}>{token.text}</span>;
+			})}
+		</>
+	);
+}

apps/website/src/components/InheritanceText.tsx

@@ -0,0 +1,15 @@
+import type { InheritanceData } from '@discordjs/api-extractor-utils';
+import Link from 'next/link';
+
+export function InheritanceText({ data }: { data: InheritanceData }) {
+	return (
+		<span className="font-semibold">
+			Inherited from{' '}
+			<Link href={data.path} prefetch={false}>
+				<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
+					{data.parentName}
+				</a>
+			</Link>
+		</span>
+	);
+}

apps/website/src/components/MethodItem.tsx

@@ -0,0 +1,121 @@
+import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
+import { useCallback, useMemo, useState } from 'react';
+import { FiLink } from 'react-icons/fi';
+import { VscChevronDown, VscVersions } from 'react-icons/vsc';
+import { HyperlinkedText } from './HyperlinkedText';
+import { InheritanceText } from './InheritanceText';
+import { ParameterTable } from './ParameterTable';
+import { TSDoc } from './tsdoc/TSDoc';
+
+export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJSON }) {
+	const method = data as ApiMethodJSON;
+	const [overloadIndex, setOverloadIndex] = useState(1);
+	const overloadedData = method.mergedSiblings[overloadIndex - 1]!;
+	const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
+
+	const key = useMemo(
+		() => `${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`,
+		[data.name, data.overloadIndex],
+	);
+
+	const getShorthandName = useCallback(
+		(data: ApiMethodJSON | ApiMethodSignatureJSON) =>
+			`${data.name}${data.optional ? '?' : ''}(${data.parameters.reduce((prev, cur, index) => {
+				if (index === 0) {
+					return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
+				}
+
+				return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
+			}, '')})`,
+		[],
+	);
+
+	return (
+		<div className="scroll-mt-30 flex flex-col gap-4" id={key}>
+			<div className="flex flex-col">
+				<div className="flex flex-col gap-2 md:-ml-9 md:flex-row md:place-items-center">
+					<a
+						aria-label="Anchor"
+						className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
+						href={`#${key}`}
+					>
+						<FiLink size={20} />
+					</a>
+					{data.deprecated ||
+					(data.kind === 'Method' && method.protected) ||
+					(data.kind === 'Method' && method.static) ? (
+						<div className="flex flex-row gap-1">
+							{data.deprecated ? (
+								<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+									Deprecated
+								</div>
+							) : null}
+							{data.kind === 'Method' && method.protected ? (
+								<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+									Protected
+								</div>
+							) : null}
+							{data.kind === 'Method' && method.static ? (
+								<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+									Static
+								</div>
+							) : null}
+						</div>
+					) : null}
+					<div className="flex flex-row flex-wrap gap-1">
+						<h4 className="break-all font-mono text-lg font-bold">{getShorthandName(overloadedData)}</h4>
+						<h4 className="font-mono text-lg font-bold">:</h4>
+						<h4 className="break-all font-mono text-lg font-bold">
+							<HyperlinkedText tokens={data.returnTypeTokens} />
+						</h4>
+					</div>
+				</div>
+			</div>
+			{data.mergedSiblings.length > 1 ? (
+				<div className="flex flex-row place-items-center gap-2">
+					<MenuButton
+						className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+						state={menu}
+					>
+						<div className="flex flex-row place-content-between place-items-center gap-2">
+							<VscVersions size={20} />
+							<div>
+								<span className="font-semibold">{`Overload ${overloadIndex}`}</span>
+								{` of ${data.mergedSiblings.length}`}
+							</div>
+							<VscChevronDown
+								className={`transform transition duration-150 ease-in-out ${menu.open ? 'rotate-180' : 'rotate-0'}`}
+								size={20}
+							/>
+						</div>
+					</MenuButton>
+					<Menu
+						className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
+						state={menu}
+					>
+						{data.mergedSiblings.map((_, idx) => (
+							<MenuItem
+								className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
+								key={idx}
+								onClick={() => setOverloadIndex(idx + 1)}
+							>
+								{`Overload ${idx + 1}`}
+							</MenuItem>
+						))}
+					</Menu>
+				</div>
+			) : null}
+			{data.summary || data.parameters.length ? (
+				<div className="mb-4 flex flex-col gap-4">
+					{overloadedData.deprecated ? <TSDoc node={overloadedData.deprecated} /> : null}
+					{overloadedData.summary ?? data.summary ? <TSDoc node={overloadedData.summary ?? data.summary!} /> : null}
+					{overloadedData.remarks ? <TSDoc node={overloadedData.remarks} /> : null}
+					{overloadedData.comment ? <TSDoc node={overloadedData.comment} /> : null}
+					{overloadedData.parameters.length ? <ParameterTable data={overloadedData.parameters} /> : null}
+					{data.inheritanceData ? <InheritanceText data={data.inheritanceData} /> : null}
+				</div>
+			) : null}
+		</div>
+	);
+}

apps/website/src/components/MethodList.tsx

@@ -0,0 +1,22 @@
+import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
+import { Fragment, useMemo } from 'react';
+import { MethodItem } from './MethodItem';
+
+export function MethodList({ data }: { data: (ApiMethodJSON | ApiMethodSignatureJSON)[] }) {
+	const methodItems = useMemo(
+		() =>
+			data
+				.filter((method) => method.overloadIndex <= 1)
+				.map((method) => (
+					<Fragment
+						key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`}
+					>
+						<MethodItem data={method} />
+						<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
+					</Fragment>
+				)),
+		[data],
+	);
+
+	return <div className="flex flex-col gap-4">{methodItems}</div>;
+}

apps/website/src/components/ParameterTable.tsx

@@ -0,0 +1,29 @@
+import type { ParameterDocumentation } from '@discordjs/api-extractor-utils';
+import { useMemo } from 'react';
+import { HyperlinkedText } from './HyperlinkedText';
+import { Table } from './Table';
+import { TSDoc } from './tsdoc/TSDoc';
+
+const columnStyles = {
+	Name: 'font-mono whitespace-nowrap',
+	Type: 'font-mono whitespace-pre-wrap break-normal',
+};
+
+export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
+	const rows = useMemo(
+		() =>
+			data.map((param) => ({
+				Name: param.name,
+				Type: <HyperlinkedText tokens={param.tokens} />,
+				Optional: param.isOptional ? 'Yes' : 'No',
+				Description: param.paramCommentBlock ? <TSDoc node={param.paramCommentBlock} /> : 'None',
+			})),
+		[data],
+	);
+
+	return (
+		<div className="overflow-x-auto">
+			<Table columnStyles={columnStyles} columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} />
+		</div>
+	);
+}

apps/website/src/components/PropertyList.tsx

@@ -0,0 +1,27 @@
+import type { ApiPropertyItemJSON } from '@discordjs/api-extractor-utils';
+import { Fragment, useMemo } from 'react';
+import { CodeListing } from './CodeListing';
+
+export function PropertyList({ data }: { data: ApiPropertyItemJSON[] }) {
+	const propertyItems = useMemo(
+		() =>
+			data.map((prop) => (
+				<Fragment key={prop.name}>
+					<CodeListing
+						comment={prop.comment}
+						deprecation={prop.deprecated}
+						inheritanceData={prop.inheritanceData}
+						name={prop.name}
+						optional={prop.optional}
+						readonly={prop.readonly}
+						summary={prop.summary}
+						typeTokens={prop.propertyTypeTokens}
+					/>
+					<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
+				</Fragment>
+			)),
+		[data],
+	);
+
+	return <div className="flex flex-col gap-4">{propertyItems}</div>;
+}

apps/website/src/components/Sections.tsx

@@ -0,0 +1,95 @@
+import type {
+	ApiClassJSON,
+	ApiInterfaceJSON,
+	ParameterDocumentation,
+	ApiConstructorJSON,
+} from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
+import { useMemo } from 'react';
+import { VscSymbolConstant, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
+import { useMedia } from 'react-use';
+import { MethodList } from './MethodList';
+import { ParameterTable } from './ParameterTable';
+import { PropertyList } from './PropertyList';
+import { TSDoc } from './tsdoc/TSDoc';
+
+export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] }) {
+	const matches = useMedia('(max-width: 768px)', true);
+
+	return data.length ? (
+		<Section dense={matches} icon={<VscSymbolProperty size={20} />} padded title="Properties">
+			<PropertyList data={data} />
+		</Section>
+	) : null;
+}
+
+export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] }) {
+	const matches = useMedia('(max-width: 768px)', true);
+
+	return data.length ? (
+		<Section dense={matches} icon={<VscSymbolMethod size={20} />} padded title="Methods">
+			<MethodList data={data} />
+		</Section>
+	) : null;
+}
+
+export function ParametersSection({ data }: { data: ParameterDocumentation[] }) {
+	const matches = useMedia('(max-width: 768px)', true);
+
+	return data.length ? (
+		<Section dense={matches} icon={<VscSymbolConstant size={20} />} padded title="Parameters">
+			<ParameterTable data={data} />
+		</Section>
+	) : null;
+}
+
+export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
+	const matches = useMedia('(max-width: 768px)', true);
+
+	const getShorthandName = useMemo(
+		() =>
+			`constructor(${data.parameters.reduce((prev, cur, index) => {
+				if (index === 0) {
+					return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
+				}
+
+				return `${prev}, ${cur.isOptional ? `${cur.name}?` : cur.name}`;
+			}, '')})`,
+		[data.parameters],
+	);
+
+	return data.parameters.length ? (
+		<Section dense={matches} icon={<VscSymbolMethod size={20} />} padded title="Constructor">
+			<div className="scroll-mt-30 flex flex-col gap-4" id={data.name}>
+				<div className="flex flex-col">
+					<div className="flex flex-col gap-2 md:flex-row md:place-items-center">
+						{data.deprecated || data.protected ? (
+							<div className="flex flex-row gap-1">
+								{data.deprecated ? (
+									<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+										Deprecated
+									</div>
+								) : null}
+								{data.protected ? (
+									<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+										Protected
+									</div>
+								) : null}
+							</div>
+						) : null}
+						<h4 className="break-all font-mono text-lg font-bold">{getShorthandName}</h4>
+					</div>
+				</div>
+				{data.summary || data.parameters.length ? (
+					<div className="mb-4 flex flex-col gap-4">
+						{data.deprecated ? <TSDoc node={data.deprecated} /> : null}
+						{data.summary ? <TSDoc node={data.summary} /> : null}
+						{data.remarks ? <TSDoc node={data.remarks} /> : null}
+						{data.comment ? <TSDoc node={data.comment} /> : null}
+						{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
+					</div>
+				) : null}
+			</div>
+		</Section>
+	) : null;
+}

apps/website/src/components/SidebarItems.tsx

@@ -0,0 +1,113 @@
+import { Section } from '@discordjs/ui';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { type Dispatch, type SetStateAction, useEffect, useState, useMemo } from 'react';
+import {
+	VscSymbolClass,
+	VscSymbolEnum,
+	VscSymbolInterface,
+	VscSymbolField,
+	VscSymbolVariable,
+	VscSymbolMethod,
+} from 'react-icons/vsc';
+import type { GroupedMembers, Members } from './SidebarLayout';
+
+function groupMembers(members: Members): GroupedMembers {
+	const Classes: Members = [];
+	const Enums: Members = [];
+	const Interfaces: Members = [];
+	const Types: Members = [];
+	const Variables: Members = [];
+	const Functions: Members = [];
+
+	for (const member of members) {
+		switch (member.kind) {
+			case 'Class':
+				Classes.push(member);
+				break;
+			case 'Enum':
+				Enums.push(member);
+				break;
+			case 'Interface':
+				Interfaces.push(member);
+				break;
+			case 'TypeAlias':
+				Types.push(member);
+				break;
+			case 'Variable':
+				Variables.push(member);
+				break;
+			case 'Function':
+				Functions.push(member);
+				break;
+			default:
+				break;
+		}
+	}
+
+	return { Classes, Functions, Enums, Interfaces, Types, Variables };
+}
+
+function resolveIcon(item: keyof GroupedMembers) {
+	switch (item) {
+		case 'Classes':
+			return <VscSymbolClass size={20} />;
+		case 'Enums':
+			return <VscSymbolEnum size={20} />;
+		case 'Interfaces':
+			return <VscSymbolInterface size={20} />;
+		case 'Types':
+			return <VscSymbolField size={20} />;
+		case 'Variables':
+			return <VscSymbolVariable size={20} />;
+		default:
+			return <VscSymbolMethod size={20} />;
+	}
+}
+
+export function SidebarItems({
+	members,
+	setOpened,
+}: {
+	members: Members;
+	setOpened: Dispatch<SetStateAction<boolean>>;
+}) {
+	const router = useRouter();
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
+	const groupItems = useMemo(() => groupMembers(members), [members]);
+
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0] ?? '');
+	}, [router.asPath]);
+
+	return (
+		<div className="flex flex-col gap-3 p-3 pb-32 lg:pb-12">
+			{(Object.keys(groupItems) as (keyof GroupedMembers)[])
+				.filter((group) => groupItems[group].length)
+				.map((group, idx) => (
+					<Section icon={resolveIcon(group)} key={idx} title={group}>
+						{groupItems[group].map((member, index) => (
+							<Link href={member.path} key={index} prefetch={false}>
+								<a
+									className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
+										asPathWithoutQueryAndAnchor === member.path
+											? 'bg-blurple text-white'
+											: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
+									}`}
+									onClick={() => setOpened(false)}
+									title={member.name}
+								>
+									<div className="flex flex-row place-items-center gap-2 lg:text-sm">
+										<span className="truncate">{member.name}</span>
+										{member.overloadIndex && member.overloadIndex > 1 ? (
+											<span className="text-xs">{member.overloadIndex}</span>
+										) : null}
+									</div>
+								</a>
+							</Link>
+						))}
+					</Section>
+				))}
+		</div>
+	);
+}

apps/website/src/components/SidebarLayout.tsx

@@ -0,0 +1,378 @@
+import type { getMembers, ApiItemJSON, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
+import { Button } from 'ariakit/button';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+import Image from 'next/future/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
+import { useTheme } from 'next-themes';
+import { type PropsWithChildren, useState, useEffect, useMemo, Fragment } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { FiCommand } from 'react-icons/fi';
+import {
+	VscChevronDown,
+	VscColorMode,
+	VscGithubInverted,
+	VscMenu,
+	VscPackage,
+	VscSearch,
+	VscVersions,
+} from 'react-icons/vsc';
+import { useMedia /* useLockBodyScroll */ } from 'react-use';
+import useSWR from 'swr';
+import vercelLogo from '../assets/powered-by-vercel.svg';
+import { CmdKDialog } from './CmdK';
+import { SidebarItems } from './SidebarItems';
+import { useCmdK } from '~/contexts/cmdK';
+import { PACKAGES } from '~/util/constants';
+import { fetcher } from '~/util/fetcher';
+import type { findMember } from '~/util/model.server';
+
+export interface SidebarLayoutProps {
+	branchName: string;
+	data: {
+		member: ReturnType<typeof findMember>;
+		members: ReturnType<typeof getMembers>;
+		searchIndex: any[];
+		source: MDXRemoteSerializeResult;
+	};
+	packageName: string;
+
+	selectedMember?: ApiItemJSON | undefined;
+}
+
+export type Members = SidebarLayoutProps['data']['members'];
+
+export interface GroupedMembers {
+	Classes: Members;
+	Enums: Members;
+	Functions: Members;
+	Interfaces: Members;
+	Types: Members;
+	Variables: Members;
+}
+
+export function SidebarLayout({
+	packageName,
+	branchName,
+	data,
+	children,
+}: PropsWithChildren<Partial<SidebarLayoutProps>>) {
+	const router = useRouter();
+	const dialog = useCmdK();
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
+	const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
+	const { resolvedTheme, setTheme } = useTheme();
+	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+	const matches = useMedia('(min-width: 992px)', false);
+	const [opened, setOpened] = useState(false);
+	const packageMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
+	const versionMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
+	// useLockBodyScroll(opened);
+
+	useEffect(() => {
+		if (matches) {
+			setOpened(false);
+		}
+	}, [matches]);
+
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(router.asPath.split('?')[0]?.split('#')[0]?.split(':')[0] ?? '');
+	}, [router.asPath]);
+
+	const packageMenuItems = useMemo(
+		() => [
+			<a href="https://discord.js.org/#/docs/discord.js" key="discord.js">
+				<MenuItem
+					className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
+					onClick={() => packageMenu.setOpen(false)}
+					state={packageMenu}
+				>
+					discord.js
+				</MenuItem>
+			</a>,
+			...PACKAGES.map((pkg) => (
+				<Link href={`/docs/packages/${pkg}/main`} key={pkg} passHref prefetch={false}>
+					<MenuItem
+						as="a"
+						className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
+						onClick={() => packageMenu.setOpen(false)}
+						state={packageMenu}
+					>
+						{pkg}
+					</MenuItem>
+				</Link>
+			)),
+		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
+
+	const versionMenuItems = useMemo(
+		() =>
+			versions
+				?.map((item) => (
+					<Link href={`/docs/packages/${packageName}/${item}`} key={item} passHref prefetch={false}>
+						<MenuItem
+							as="a"
+							className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
+							onClick={() => versionMenu.setOpen(false)}
+							state={versionMenu}
+						>
+							{item}
+						</MenuItem>
+					</Link>
+				))
+				.reverse() ?? [],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[versions, packageName],
+	);
+
+	const pathElements = useMemo(
+		() =>
+			asPathWithoutQueryAndAnchor
+				.split('/')
+				.slice(1)
+				.map((path, idx, original) => (
+					<Link href={`/${original.slice(0, idx + 1).join('/')}`} key={idx} prefetch={false}>
+						<a className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring">{path}</a>
+					</Link>
+				)),
+		[asPathWithoutQueryAndAnchor],
+	);
+
+	const breadcrumbs = useMemo(
+		() =>
+			pathElements.flatMap((el, idx, array) => {
+				if (idx === 0) {
+					return (
+						<Fragment key={idx}>
+							<div className="mx-2">/</div>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				if (idx !== array.length - 1) {
+					return (
+						<Fragment key={idx}>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				return <Fragment key={idx}>{el}</Fragment>;
+			}),
+		[pathElements],
+	);
+
+	return (
+		<>
+			<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+				<div className="h-18 block px-6">
+					<div className="flex h-full flex-row place-content-between place-items-center">
+						<Button
+							aria-label="Menu"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
+							onClick={() => setOpened((open) => !open)}
+						>
+							<VscMenu size={24} />
+						</Button>
+						<div className="hidden md:flex md:flex-row">{breadcrumbs}</div>
+						<div className="flex flex-row place-items-center gap-4">
+							<Button
+								as="div"
+								className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
+								onClick={() => dialog?.toggle()}
+							>
+								<div className="flex flex-row place-items-center gap-4">
+									<VscSearch size={18} />
+									<span className="opacity-65">Search...</span>
+									<div className="opacity-65 flex flex-row place-items-center gap-2">
+										<FiCommand size={18} /> K
+									</div>
+								</div>
+							</Button>
+							<Button
+								aria-label="GitHub"
+								as="a"
+								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+								href="https://github.com/discordjs/discord.js"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								<VscGithubInverted size={24} />
+							</Button>
+							<Button
+								aria-label="Toggle theme"
+								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+								onClick={() => toggleTheme()}
+							>
+								<VscColorMode size={24} />
+							</Button>
+						</div>
+					</div>
+				</div>
+			</header>
+			<nav
+				className={`dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 h-[calc(100vh_-_73px)] w-full border-r bg-white ${
+					opened ? 'block' : 'hidden'
+				} lg:w-76 lg:max-w-76 lg:block`}
+			>
+				<Scrollbars
+					autoHide
+					hideTracksWhenNotNeeded
+					renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+					renderTrackVertical={(props) => (
+						<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
+					)}
+					universal
+				>
+					<div className="flex flex-col gap-3 px-3 pt-3">
+						<MenuButton
+							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+							state={packageMenu}
+						>
+							<div className="flex flex-row place-content-between place-items-center">
+								<div className="flex flex-row place-items-center gap-3">
+									<VscPackage size={20} />
+									<span className="font-semibold">{packageName}</span>
+								</div>
+								<VscChevronDown
+									className={`transform transition duration-150 ease-in-out ${
+										packageMenu.open ? 'rotate-180' : 'rotate-0'
+									}`}
+									size={20}
+								/>
+							</div>
+						</MenuButton>
+						<Menu
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
+							state={packageMenu}
+						>
+							{packageMenuItems}
+						</Menu>
+						<MenuButton
+							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+							state={versionMenu}
+						>
+							<div className="flex flex-row place-content-between place-items-center">
+								<div className="flex flex-row place-items-center gap-3">
+									<VscVersions size={20} />
+									<span className="font-semibold">{branchName}</span>
+								</div>
+								<VscChevronDown
+									className={`transform transition duration-150 ease-in-out ${
+										versionMenu.open ? 'rotate-180' : 'rotate-0'
+									}`}
+									size={20}
+								/>
+							</div>
+						</MenuButton>
+						<Menu
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
+							state={versionMenu}
+						>
+							{versionMenuItems}
+						</Menu>
+					</div>
+					<SidebarItems members={data?.members ?? []} setOpened={setOpened} />
+				</Scrollbars>
+			</nav>
+			<main
+				className={`pt-18 lg:pl-76 ${
+					(data?.member?.kind === 'Class' || data?.member?.kind === 'Interface') &&
+					((data.member as ApiClassJSON | ApiInterfaceJSON).methods?.length ||
+						(data.member as ApiClassJSON | ApiInterfaceJSON).properties?.length)
+						? 'xl:pr-64'
+						: ''
+				}`}
+			>
+				<article className="dark:bg-dark-600 bg-light-600">
+					<div className="dark:bg-dark-800 relative z-10 min-h-[calc(100vh_-_70px)] bg-white p-6 pb-20 shadow">
+						{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 ${
+							(data?.member?.kind === 'Class' || data?.member?.kind === 'Interface') &&
+							((data.member as ApiClassJSON | ApiInterfaceJSON).methods?.length ||
+								(data.member as ApiClassJSON | ApiInterfaceJSON).properties?.length)
+								? 'xl:pr-76'
+								: 'xl: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 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>
+					</footer>
+				</article>
+			</main>
+			<CmdKDialog currentPackageName={packageName} currentVersion={branchName} />
+		</>
+	);
+}

apps/website/src/components/SyntaxHighlighter.tsx

@@ -0,0 +1,31 @@
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { vscDarkPlus, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+export function SyntaxHighlighter({ language = 'typescript', code }: { code: string; language?: string }) {
+	return (
+		<>
+			<div data-theme="dark">
+				<PrismAsyncLight
+					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+					language={language}
+					style={vscDarkPlus}
+					wrapLines
+					wrapLongLines
+				>
+					{code}
+				</PrismAsyncLight>
+			</div>
+			<div data-theme="light">
+				<PrismAsyncLight
+					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+					language={language}
+					style={prism}
+					wrapLines
+					wrapLongLines
+				>
+					{code}
+				</PrismAsyncLight>
+			</div>
+		</>
+	);
+}

apps/website/src/components/Table.tsx

@@ -0,0 +1,52 @@
+import { useMemo, type ReactNode } from 'react';
+
+export function Table({
+	rows,
+	columns,
+	columnStyles,
+}: {
+	columnStyles?: Record<string, string>;
+	columns: string[];
+	rows: Record<string, ReactNode>[];
+}) {
+	const cols = useMemo(
+		() =>
+			columns.map((column) => (
+				<th
+					className="border-light-900 dark:border-dark-100 break-normal border-b px-3 py-2 text-left text-sm"
+					key={column}
+				>
+					{column}
+				</th>
+			)),
+		[columns],
+	);
+
+	const data = useMemo(
+		() =>
+			rows.map((row, idx) => (
+				<tr className="[&>td]:last-of-type:border-0" key={idx}>
+					{Object.entries(row).map(([colName, val]) => (
+						<td
+							className={`border-light-900 dark:border-dark-100 border-b px-3 py-2 text-left text-sm ${
+								columnStyles?.[colName] ?? ''
+							}`}
+							key={colName}
+						>
+							{val}
+						</td>
+					))}
+				</tr>
+			)),
+		[columnStyles, rows],
+	);
+
+	return (
+		<table className="w-full border-collapse">
+			<thead>
+				<tr>{cols}</tr>
+			</thead>
+			<tbody>{data}</tbody>
+		</table>
+	);
+}

apps/website/src/components/TableOfContentItems.tsx

@@ -0,0 +1,87 @@
+import type { ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
+import { useMemo } from 'react';
+import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
+
+export function TableOfContentItems({
+	methods,
+	properties,
+}: {
+	methods: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'];
+	properties: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'];
+}) {
+	const propertyItems = useMemo(
+		() =>
+			properties.map((prop) => (
+				<a
+					className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
+					href={`#${prop.name}`}
+					key={prop.name}
+					title={prop.name}
+				>
+					<span className="line-clamp-1">{prop.name}</span>
+				</a>
+			)),
+		[properties],
+	);
+
+	const methodItems = useMemo(
+		() =>
+			methods.map((member) => {
+				if (member.overloadIndex && member.overloadIndex > 1) {
+					return null;
+				}
+
+				const key = `${member.name}${
+					member.overloadIndex && member.overloadIndex > 1 ? `:${member.overloadIndex}` : ''
+				}`;
+
+				return (
+					<a
+						className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] flex flex-row place-items-center gap-2 border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
+						href={`#${key}`}
+						key={key}
+						title={member.name}
+					>
+						<span className="line-clamp-1">{member.name}</span>
+						{member.overloadIndex && member.overloadIndex > 1 ? (
+							<span className="text-xs">{member.overloadIndex}</span>
+						) : null}
+					</a>
+				);
+			}),
+		[methods],
+	);
+
+	return (
+		<div className="flex flex-col break-all p-3 pb-8">
+			<div className="mt-4 ml-2 flex flex-row gap-2">
+				<VscListSelection size={25} />
+				<span className="font-semibold">Contents</span>
+			</div>
+			<div className="mt-5.5 ml-2 flex flex-col gap-2">
+				{propertyItems.length ? (
+					<div className="flex flex-col">
+						<div className="flex flex-row place-items-center gap-4">
+							<VscSymbolProperty size={20} />
+							<div className="p-3 pl-0">
+								<span className="font-semibold">Properties</span>
+							</div>
+						</div>
+						{propertyItems}
+					</div>
+				) : null}
+				{methodItems.length ? (
+					<div className="flex flex-col">
+						<div className="flex flex-row place-items-center gap-4">
+							<VscSymbolMethod size={20} />
+							<div className="p-3 pl-0">
+								<span className="font-semibold">Methods</span>
+							</div>
+						</div>
+						{methodItems}
+					</div>
+				) : null}
+			</div>
+		</div>
+	);
+}

apps/website/src/components/TypeParamTable.tsx

@@ -0,0 +1,35 @@
+import type { TypeParameterData } from '@discordjs/api-extractor-utils';
+import { useMemo } from 'react';
+import { HyperlinkedText } from './HyperlinkedText';
+import { Table } from './Table';
+import { TSDoc } from './tsdoc/TSDoc';
+
+const rowElements = {
+	Name: 'font-mono whitespace-nowrap',
+	Constraints: 'font-mono whitespace-pre break-normal',
+	Default: 'font-mono whitespace-pre break-normal',
+};
+
+export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
+	const rows = useMemo(
+		() =>
+			data.map((typeParam) => ({
+				Name: typeParam.name,
+				Constraints: <HyperlinkedText tokens={typeParam.constraintTokens} />,
+				Optional: typeParam.optional ? 'Yes' : 'No',
+				Default: <HyperlinkedText tokens={typeParam.defaultTokens} />,
+				Description: typeParam.commentBlock ? <TSDoc node={typeParam.commentBlock} /> : 'None',
+			})),
+		[data],
+	);
+
+	return (
+		<div className="overflow-x-auto">
+			<Table
+				columnStyles={rowElements}
+				columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
+				rows={rows}
+			/>
+		</div>
+	);
+}

apps/website/src/components/model/Class.tsx

@@ -0,0 +1,23 @@
+import type { ApiClassJSON } from '@discordjs/api-extractor-utils';
+import { DocContainer } from '../DocContainer';
+import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections';
+
+export function Class({ data }: { data: ApiClassJSON }) {
+	return (
+		<DocContainer
+			excerpt={data.excerpt}
+			extendsTokens={data.extendsTokens}
+			implementsTokens={data.implementsTokens}
+			kind={data.kind}
+			methods={data.methods}
+			name={data.name}
+			properties={data.properties}
+			summary={data.summary}
+			typeParams={data.typeParameters}
+		>
+			{data.constructor ? <ConstructorSection data={data.constructor} /> : null}
+			<PropertiesSection data={data.properties} />
+			<MethodsSection data={data.methods} />
+		</DocContainer>
+	);
+}

apps/website/src/components/model/Enum.tsx

@@ -0,0 +1,28 @@
+import type { ApiEnumJSON } from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
+import { VscSymbolEnumMember } from 'react-icons/vsc';
+import { useMedia } from 'react-use';
+import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
+import { DocContainer } from '../DocContainer';
+
+export function Enum({ data }: { data: ApiEnumJSON }) {
+	const matches = useMedia('(max-width: 768px)', true);
+
+	return (
+		<DocContainer excerpt={data.excerpt} kind={data.kind} name={data.name} summary={data.summary}>
+			<Section dense={matches} icon={<VscSymbolEnumMember size={20} />} padded title="Members">
+				<div className="flex flex-col gap-4">
+					{data.members.map((member) => (
+						<CodeListing
+							key={member.name}
+							name={member.name}
+							separator={CodeListingSeparatorType.Value}
+							summary={member.summary}
+							typeTokens={member.initializerTokens}
+						/>
+					))}
+				</div>
+			</Section>
+		</DocContainer>
+	);
+}

apps/website/src/components/model/Function.tsx

@@ -0,0 +1,62 @@
+import type { ApiFunctionJSON } from '@discordjs/api-extractor-utils';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
+import { useState } from 'react';
+import { VscChevronDown, VscVersions } from 'react-icons/vsc';
+import { DocContainer } from '../DocContainer';
+import { ParametersSection } from '../Sections';
+
+export function Function({ data }: { data: ApiFunctionJSON }) {
+	const [overloadIndex, setOverloadIndex] = useState(1);
+	const overloadedData = data.mergedSiblings[overloadIndex - 1]!;
+	const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
+
+	return (
+		<DocContainer
+			excerpt={overloadedData.excerpt}
+			kind={overloadedData.kind}
+			name={`${overloadedData.name}${
+				overloadedData.overloadIndex && overloadedData.overloadIndex > 1 ? ` (${overloadedData.overloadIndex})` : ''
+			}`}
+			subHeading={
+				data.mergedSiblings.length > 1 ? (
+					<div className="flex flex-row place-items-center gap-2">
+						<MenuButton
+							className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+							state={menu}
+						>
+							<div className="flex flex-row place-content-between place-items-center gap-2">
+								<VscVersions size={20} />
+								<div>
+									<span className="font-semibold">{`Overload ${overloadIndex}`}</span>
+									{` of ${data.mergedSiblings.length}`}
+								</div>
+								<VscChevronDown
+									className={`transform transition duration-150 ease-in-out ${menu.open ? 'rotate-180' : 'rotate-0'}`}
+									size={20}
+								/>
+							</div>
+						</MenuButton>
+						<Menu
+							className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
+							state={menu}
+						>
+							{data.mergedSiblings.map((_, idx) => (
+								<MenuItem
+									className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
+									key={idx}
+									onClick={() => setOverloadIndex(idx + 1)}
+								>
+									{`Overload ${idx + 1}`}
+								</MenuItem>
+							))}
+						</Menu>
+					</div>
+				) : null
+			}
+			summary={overloadedData.summary}
+			typeParams={overloadedData.typeParameters}
+		>
+			<ParametersSection data={overloadedData.parameters} />
+		</DocContainer>
+	);
+}

apps/website/src/components/model/Interface.tsx

@@ -0,0 +1,20 @@
+import type { ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
+import { DocContainer } from '../DocContainer';
+import { MethodsSection, PropertiesSection } from '../Sections';
+
+export function Interface({ data }: { data: ApiInterfaceJSON }) {
+	return (
+		<DocContainer
+			excerpt={data.excerpt}
+			kind={data.kind}
+			methods={data.methods}
+			name={data.name}
+			properties={data.properties}
+			summary={data.summary}
+			typeParams={data.typeParameters}
+		>
+			<PropertiesSection data={data.properties} />
+			<MethodsSection data={data.methods} />
+		</DocContainer>
+	);
+}

apps/website/src/components/model/TypeAlias.tsx

@@ -0,0 +1,14 @@
+import type { ApiTypeAliasJSON } from '@discordjs/api-extractor-utils';
+import { DocContainer } from '../DocContainer';
+
+export function TypeAlias({ data }: { data: ApiTypeAliasJSON }) {
+	return (
+		<DocContainer
+			excerpt={data.excerpt}
+			kind={data.kind}
+			name={data.name}
+			summary={data.summary}
+			typeParams={data.typeParameters}
+		/>
+	);
+}

apps/website/src/components/model/Variable.tsx

@@ -0,0 +1,6 @@
+import type { ApiVariableJSON } from '@discordjs/api-extractor-utils';
+import { DocContainer } from '../DocContainer';
+
+export function Variable({ data }: { data: ApiVariableJSON }) {
+	return <DocContainer excerpt={data.excerpt} kind={data.kind} name={data.name} summary={data.summary} />;
+}

apps/website/src/components/tsdoc/BlockComment.tsx

@@ -0,0 +1,56 @@
+import { Alert } from '@discordjs/ui';
+import { StandardTags } from '@microsoft/tsdoc';
+import type { PropsWithChildren } from 'react';
+
+export function Block({ children, title }: PropsWithChildren<{ title: string }>) {
+	return (
+		<div className="flex flex-col gap-2">
+			<h5 className="font-bold">{title}</h5>
+			{children}
+		</div>
+	);
+}
+
+export function ExampleBlock({
+	children,
+	exampleIndex,
+}: PropsWithChildren<{ exampleIndex?: number | undefined }>): JSX.Element {
+	return <Block title={`Example ${exampleIndex ? exampleIndex : ''}`}>{children}</Block>;
+}
+
+export function DefaultValueBlock({ children }: PropsWithChildren): JSX.Element {
+	return <Block title="Default value">{children}</Block>;
+}
+
+export function RemarksBlock({ children }: PropsWithChildren): JSX.Element {
+	return <Block title="Remarks">{children}</Block>;
+}
+
+export function BlockComment({
+	children,
+	tagName,
+	index,
+}: PropsWithChildren<{
+	index?: number | undefined;
+	tagName: string;
+}>): JSX.Element {
+	switch (tagName.toUpperCase()) {
+		case StandardTags.example.tagNameWithUpperCase:
+			return <ExampleBlock exampleIndex={index}>{children}</ExampleBlock>;
+		case StandardTags.deprecated.tagNameWithUpperCase:
+			return (
+				<Alert title="Deprecated" type="danger">
+					{children}
+				</Alert>
+			);
+		case StandardTags.remarks.tagNameWithUpperCase:
+			return <RemarksBlock>{children}</RemarksBlock>;
+		case StandardTags.defaultValue.tagNameWithUpperCase:
+			return <DefaultValueBlock>{children}</DefaultValueBlock>;
+		case StandardTags.typeParam.tagNameWithUpperCase:
+		case StandardTags.param.tagNameWithUpperCase:
+			return <span>{children}</span>;
+		default: // TODO: Support more blocks in the future.
+			return <>{children}</>;
+	}
+}

apps/website/src/components/tsdoc/TSDoc.tsx

@@ -0,0 +1,123 @@
+import type {
+	AnyDocNodeJSON,
+	DocPlainTextJSON,
+	DocNodeContainerJSON,
+	DocLinkTagJSON,
+	DocFencedCodeJSON,
+	DocBlockJSON,
+	DocCommentJSON,
+} from '@discordjs/api-extractor-utils';
+import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
+import Link from 'next/link';
+import { Fragment, useCallback, type ReactNode } from 'react';
+import { SyntaxHighlighter } from '../SyntaxHighlighter';
+import { BlockComment } from './BlockComment';
+
+export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
+	const createNode = useCallback((node: AnyDocNodeJSON, idx?: number): ReactNode => {
+		let numberOfExamples = 0;
+		let exampleIndex = 0;
+
+		switch (node.kind) {
+			case DocNodeKind.PlainText:
+				return (
+					<span className="break-words" key={idx}>
+						{(node as DocPlainTextJSON).text}
+					</span>
+				);
+			case DocNodeKind.Paragraph:
+				return (
+					<span className="break-words leading-relaxed" key={idx}>
+						{(node as DocNodeContainerJSON).nodes.map((node, idx) => createNode(node, idx))}
+					</span>
+				);
+			case DocNodeKind.SoftBreak:
+				return <Fragment key={idx} />;
+			case DocNodeKind.LinkTag: {
+				const { codeDestination, urlDestination, text } = node as DocLinkTagJSON;
+
+				if (codeDestination) {
+					return (
+						<Link href={codeDestination.path} key={idx} prefetch={false}>
+							<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
+								{text ?? codeDestination.name}
+							</a>
+						</Link>
+					);
+				}
+
+				if (urlDestination) {
+					return (
+						<Link href={urlDestination} key={idx} prefetch={false}>
+							<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
+								{text ?? urlDestination}
+							</a>
+						</Link>
+					);
+				}
+
+				return null;
+			}
+
+			case DocNodeKind.CodeSpan: {
+				const { code } = node as DocFencedCodeJSON;
+				return (
+					<code className="font-mono text-sm" key={idx}>
+						{code}
+					</code>
+				);
+			}
+
+			case DocNodeKind.FencedCode: {
+				const { language, code } = node as DocFencedCodeJSON;
+				return <SyntaxHighlighter code={code} key={idx} language={language} />;
+			}
+
+			case DocNodeKind.ParamBlock:
+			case DocNodeKind.Block: {
+				const { tag } = node as DocBlockJSON;
+
+				if (tag.tagName.toUpperCase() === StandardTags.example.tagNameWithUpperCase) {
+					exampleIndex++;
+				}
+
+				const index = numberOfExamples > 1 ? exampleIndex : undefined;
+
+				return (
+					<BlockComment index={index} key={idx} tagName={tag.tagName}>
+						{(node as DocBlockJSON).content.map((node, idx) => createNode(node, idx))}
+					</BlockComment>
+				);
+			}
+
+			case DocNodeKind.Comment: {
+				const comment = node as DocCommentJSON;
+
+				if (!comment.customBlocks.length) {
+					return null;
+				}
+
+				// Cheat a bit by finding out how many comments we have beforehand...
+				numberOfExamples = comment.customBlocks.filter(
+					(block) => block.tag.tagName.toUpperCase() === StandardTags.example.tagNameWithUpperCase,
+				).length;
+
+				return <div key={idx}>{comment.customBlocks.map((node, idx) => createNode(node, idx))}</div>;
+			}
+
+			default:
+				// console.log(`Captured unknown node kind: ${node.kind}`);
+				return null;
+		}
+	}, []);
+
+	return (
+		<>
+			{node.kind === 'Paragraph' || node.kind === 'Section' ? (
+				<>{(node as DocNodeContainerJSON).nodes.map((node, idx) => createNode(node, idx))}</>
+			) : (
+				createNode(node)
+			)}
+		</>
+	);
+}