feat(website): add app dir (#8869)

Co-authored-by: iCrawl <buechler.noel@outlook.com>

apps/website/src/components/CmdK.tsx

@@ -1,7 +1,9 @@
+'use client';
+
 import type { ApiItemKind } from '@microsoft/api-extractor-model';
 import { Dialog } from 'ariakit/dialog';
 import { Command } from 'cmdk';
-import { useRouter } from 'next/router';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 import {
 	VscArrowRight,
@@ -36,18 +38,16 @@ function resolveIcon(item: keyof typeof ApiItemKind) {
 	}
 }
 
-export function CmdKDialog({
-	currentPackageName,
-	currentVersion,
-}: {
-	currentPackageName?: string | undefined;
-	currentVersion?: string | undefined;
-}) {
+export function CmdKDialog() {
+	const pathname = usePathname();
 	const router = useRouter();
 	const dialog = useCmdK();
 	const [search, setSearch] = useState('');
 	const [searchResults, setSearchResults] = useState<any[]>([]);
 
+	const packageName = pathname?.split('/').slice(3, 4)[0];
+	const branchName = pathname?.split('/').slice(4, 5)[0];
+
 	const searchResultItems = useMemo(
 		() =>
 			searchResults?.map((item) => (
@@ -55,7 +55,7 @@ export function CmdKDialog({
 					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 transform-gpu cursor-pointer select-none appearance-none flex-row 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);
+						router.push(item.path);
 						dialog!.setOpen(false);
 					}}
 				>
@@ -101,12 +101,12 @@ export function CmdKDialog({
 
 	useEffect(() => {
 		const searchDoc = async (searchString: string, version: string) => {
-			const res = await client.index(`${currentPackageName}-${version}`).search(searchString, { limit: 5 });
+			const res = await client.index(`${packageName}-${version}`).search(searchString, { limit: 5 });
 			setSearchResults(res.hits);
 		};
 
-		if (search && currentPackageName) {
-			void searchDoc(search, currentVersion?.replaceAll('.', '-') ?? 'main');
+		if (search && packageName) {
+			void searchDoc(search, branchName?.replaceAll('.', '-') ?? 'main');
 		} else {
 			setSearchResults([]);
 		}

apps/website/src/components/CodeListing.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { TokenDocumentation, ApiItemJSON, AnyDocNodeJSON, InheritanceData } from '@discordjs/api-extractor-utils';
 import type { PropsWithChildren } from 'react';
 import { FiLink } from 'react-icons/fi';

apps/website/src/components/DocContainer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type {
 	ApiItemJSON,
 	TokenDocumentation,

apps/website/src/components/Header.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import { Button } from 'ariakit/button';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useTheme } from 'next-themes';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+import { FiCommand } from 'react-icons/fi';
+import { VscColorMode, VscGithubInverted, VscMenu, VscSearch } from 'react-icons/vsc';
+import { useCmdK } from '~/contexts/cmdK';
+import { useNav } from '~/contexts/nav';
+
+export function Header() {
+	const pathname = usePathname();
+	// eslint-disable-next-line @typescript-eslint/unbound-method
+	const { setOpened } = useNav();
+	const { resolvedTheme, setTheme } = useTheme();
+	const dialog = useCmdK();
+	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
+
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(pathname?.split('?')[0]?.split('#')[0] ?? '');
+	}, [pathname]);
+
+	const asPathWithoutContainerKey = useMemo(
+		() => asPathWithoutQueryAndAnchor?.split(':')[0] ?? '',
+		[asPathWithoutQueryAndAnchor],
+	);
+
+	const pathElements = useMemo(
+		() =>
+			asPathWithoutContainerKey
+				.split('/')
+				.slice(1)
+				.map((path, idx, original) => (
+					<Link
+						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
+						href={`/${original.slice(0, idx + 1).join('/')}`}
+						key={idx}
+					>
+						{path}
+					</Link>
+				)),
+		[asPathWithoutContainerKey],
+	);
+
+	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 flex-row 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 md:overflow-hidden">{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="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md: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 flex-row 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 flex-row 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>
+	);
+}

apps/website/src/components/HyperlinkedText.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { TokenDocumentation } from '@discordjs/api-extractor-utils';
 import Link from 'next/link';
 
@@ -11,7 +13,6 @@ export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
 							className="text-blurple focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
 							href={token.path}
 							key={idx}
-							prefetch={false}
 						>
 							{token.text}
 						</Link>

apps/website/src/components/InheritanceText.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { InheritanceData } from '@discordjs/api-extractor-utils';
 import Link from 'next/link';
 
@@ -8,7 +10,6 @@ export function InheritanceText({ data }: { data: InheritanceData }) {
 			<Link
 				className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
 				href={data.path}
-				prefetch={false}
 			>
 				{data.parentName}
 			</Link>

apps/website/src/components/MDXRemote.tsx

@@ -0,0 +1,3 @@
+'use client';
+
+export { MDXRemote } from 'next-mdx-remote';

apps/website/src/components/MethodItem.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import { useCallback, useMemo, useState } from 'react';
 import { FiLink } from 'react-icons/fi';
 import { VscChevronDown, VscVersions } from 'react-icons/vsc';

apps/website/src/components/MethodList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ApiMethodJSON, ApiMethodSignatureJSON } from '@discordjs/api-extractor-utils';
 import { Fragment, useMemo } from 'react';
 import { MethodItem } from './MethodItem';

apps/website/src/components/Nav.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import type { getMembers } from '@discordjs/api-extractor-utils';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { PackageSelect } from './PackageSelect';
+import { SidebarItems } from './SidebarItems';
+import { VersionSelect } from './VersionSelect';
+import { useNav } from '~/contexts/nav';
+
+export function Nav({ members }: { members: ReturnType<typeof getMembers> }) {
+	// eslint-disable-next-line @typescript-eslint/unbound-method
+	const { opened } = useNav();
+
+	return (
+		<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">
+					<PackageSelect />
+					<VersionSelect />
+				</div>
+				<SidebarItems members={members} />
+			</Scrollbars>
+		</nav>
+	);
+}

apps/website/src/components/PackageSelect.tsx

@@ -0,0 +1,67 @@
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useMemo } from 'react';
+import { VscPackage, VscChevronDown } from 'react-icons/vsc';
+import { PACKAGES } from '~/util/constants';
+
+export function PackageSelect() {
+	const pathname = usePathname();
+	const packageName = pathname?.split('/').slice(3, 4)[0];
+
+	const packageMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
+
+	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"
+					id="discord-js"
+					onClick={() => packageMenu.setOpen(false)}
+					state={packageMenu}
+				>
+					discord.js
+				</MenuItem>
+			</a>,
+			...PACKAGES.map((pkg) => (
+				<Link href={`/docs/packages/${pkg}/main`} key={pkg}>
+					<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"
+						id={pkg}
+						onClick={() => packageMenu.setOpen(false)}
+						state={packageMenu}
+					>
+						{pkg}
+					</MenuItem>
+				</Link>
+			)),
+		],
+		[packageMenu],
+	);
+
+	return (
+		<>
+			<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>
+		</>
+	);
+}

apps/website/src/components/ParameterTable.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ParameterDocumentation } from '@discordjs/api-extractor-utils';
 import { useMemo } from 'react';
 import { HyperlinkedText } from './HyperlinkedText';

apps/website/src/components/PropertyList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ApiPropertyItemJSON } from '@discordjs/api-extractor-utils';
 import { Fragment, useMemo } from 'react';
 import { CodeListing } from './CodeListing';

apps/website/src/components/Sections.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type {
 	ApiClassJSON,
 	ApiInterfaceJSON,

apps/website/src/components/SidebarItems.tsx

@@ -1,6 +1,10 @@
+'use client';
+
+import type { getMembers } from '@discordjs/api-extractor-utils';
 import { Section } from '@discordjs/ui';
 import Link from 'next/link';
-import { type Dispatch, type SetStateAction, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+import { useMemo, useState, useEffect } from 'react';
 import {
 	VscSymbolClass,
 	VscSymbolEnum,
@@ -9,7 +13,18 @@ import {
 	VscSymbolVariable,
 	VscSymbolMethod,
 } from 'react-icons/vsc';
-import type { GroupedMembers, Members } from './SidebarLayout';
+import { useNav } from '~/contexts/nav';
+
+type Members = ReturnType<typeof getMembers>;
+
+interface GroupedMembers {
+	Classes: Members;
+	Enums: Members;
+	Functions: Members;
+	Interfaces: Members;
+	Types: Members;
+	Variables: Members;
+}
 
 function groupMembers(members: Members): GroupedMembers {
 	const Classes: Members = [];
@@ -64,15 +79,15 @@ function resolveIcon(item: keyof GroupedMembers) {
 	}
 }
 
-export function SidebarItems({
-	members,
-	setOpened,
-	asPath,
-}: {
-	asPath: string;
-	members: Members;
-	setOpened: Dispatch<SetStateAction<boolean>>;
-}) {
+export function SidebarItems({ members }: { members: Members }) {
+	const pathname = usePathname();
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
+	const { setOpened } = useNav();
+
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(pathname?.split('?')[0]?.split('#')[0] ?? '');
+	}, [pathname]);
+
 	const groupItems = useMemo(() => groupMembers(members), [members]);
 
 	return (
@@ -84,14 +99,13 @@ export function SidebarItems({
 						{groupItems[group].map((member, index) => (
 							<Link
 								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 ${
-									asPath === member.path
+									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'
 								}`}
 								href={member.path}
 								key={index}
 								onClick={() => setOpened(false)}
-								prefetch={false}
 								title={member.name}
 							>
 								<div className="flex flex-row place-items-center gap-2 lg:text-sm">

apps/website/src/components/SidebarLayout.tsx

@@ -1,376 +0,0 @@
-import type { getMembers, ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
-import { Button } from 'ariakit/button';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
-import Image from 'next/image';
-import Link from 'next/link';
-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 {
-	asPath: string;
-	branchName: string;
-	data: {
-		description: string;
-		member?: ReturnType<typeof findMember>;
-		members: ReturnType<typeof getMembers>;
-		source: MDXRemoteSerializeResult;
-	};
-	packageName: string;
-}
-
-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,
-	asPath,
-	children,
-}: PropsWithChildren<SidebarLayoutProps>) {
-	const dialog = useCmdK();
-	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]);
-
-	const asPathWithoutContainerKey = useMemo(() => asPath?.split(':')[0] ?? '', [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
-						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
-							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(
-		() =>
-			asPathWithoutContainerKey
-				.split('/')
-				.slice(1)
-				.map((path, idx, original) => (
-					<Link
-						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
-						href={`/${original.slice(0, idx + 1).join('/')}`}
-						key={idx}
-						prefetch={false}
-					>
-						{path}
-					</Link>
-				)),
-		[asPathWithoutContainerKey],
-	);
-
-	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 flex-row 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 md:overflow-hidden">{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="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md: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 flex-row 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 flex-row 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 asPath={asPath} 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

@@ -1,3 +1,5 @@
+'use client';
+
 import { PrismAsyncLight } from 'react-syntax-highlighter';
 import { vscDarkPlus, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 

apps/website/src/components/Table.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo, type ReactNode } from 'react';
 
 export function Table({

apps/website/src/components/TableOfContentItems.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ApiClassJSON, ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
 import { useMemo } from 'react';
 import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';

apps/website/src/components/TypeParamTable.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { TypeParameterData } from '@discordjs/api-extractor-utils';
 import { useMemo } from 'react';
 import { HyperlinkedText } from './HyperlinkedText';

apps/website/src/components/VersionSelect.tsx

@@ -0,0 +1,60 @@
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useMemo } from 'react';
+import { VscVersions, VscChevronDown } from 'react-icons/vsc';
+import useSWR from 'swr';
+import { fetcher } from '~/util/fetcher';
+
+export function VersionSelect() {
+	const pathname = usePathname();
+	const packageName = pathname?.split('/').slice(3, 4)[0];
+	const branchName = pathname?.split('/').slice(4, 5)[0];
+
+	const { data: versions } = useSWR<string[]>(`https://docs.discordjs.dev/api/info?package=${packageName}`, fetcher);
+	const versionMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
+
+	const versionMenuItems = useMemo(
+		() =>
+			versions
+				?.map((item) => (
+					<Link href={`/docs/packages/${packageName}/${item}`} key={item}>
+						<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={() => versionMenu.setOpen(false)}
+							state={versionMenu}
+						>
+							{item}
+						</MenuItem>
+					</Link>
+				))
+				.reverse() ?? [],
+		[versions, packageName, versionMenu],
+	);
+
+	return (
+		<>
+			<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>
+		</>
+	);
+}

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

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ApiClassJSON } from '@discordjs/api-extractor-utils';
 import { DocContainer } from '../DocContainer';
 import { ConstructorSection, MethodsSection, PropertiesSection } from '../Sections';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ApiEnumJSON } from '@discordjs/api-extractor-utils';
 import { Section } from '@discordjs/ui';
 import { Fragment } from 'react';

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

@@ -1,5 +1,7 @@
+'use client';
+
 import type { ApiFunctionJSON } from '@discordjs/api-extractor-utils';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import { useState } from 'react';
 import { VscChevronDown, VscVersions } from 'react-icons/vsc';
 import { DocContainer } from '../DocContainer';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ApiInterfaceJSON } from '@discordjs/api-extractor-utils';
 import { DocContainer } from '../DocContainer';
 import { MethodsSection, PropertiesSection } from '../Sections';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ApiTypeAliasJSON } from '@discordjs/api-extractor-utils';
 import { DocContainer } from '../DocContainer';
 

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

@@ -1,3 +1,5 @@
+'use client';
+
 import type { ApiVariableJSON } from '@discordjs/api-extractor-utils';
 import { DocContainer } from '../DocContainer';
 

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { Alert } from '@discordjs/ui';
 import { StandardTags } from '@microsoft/tsdoc';
 import type { PropsWithChildren } from 'react';

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

@@ -1,3 +1,5 @@
+'use client';
+
 import type {
 	AnyDocNodeJSON,
 	DocPlainTextJSON,
@@ -42,7 +44,6 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 							className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
 							href={codeDestination.path}
 							key={idx}
-							prefetch={false}
 						>
 							{text ?? codeDestination.name}
 						</Link>
@@ -55,7 +56,6 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 							className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
 							href={urlDestination}
 							key={idx}
-							prefetch={false}
 						>
 							{text ?? urlDestination}
 						</Link>