chore(rest): release @discordjs/rest@2.0.1

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.github/CODEOWNERS

@@ -13,6 +13,7 @@
 /packages/builders/ @discordjs/builders
 /packages/collection/ @discordjs/collection
 /packages/core/ @discordjs/core
+/packages/create-discord-bot/ @discordjs/guide
 /packages/discord.js/ @discordjs/core
 /packages/docgen/ @iCrawl
 /packages/formatters/ @discordjs/formatters

.github/CONTRIBUTING.md

@@ -45,4 +45,4 @@ yarn create-package <package-name> [package-description]
 ```
 
 This will create new package directory under `packages/` with the required configuration files. You can
-begin to make changes within the `src/` directory.
+begin to make changes within the `src/` directory. It may also be required to update the CODEOWNERS file.

.github/ISSUE_TEMPLATE/01-package_bug_report.yml

@@ -18,6 +18,7 @@ body:
         - builders
         - collection
         - core
+        - create-discord-bot
         - formatters
         - next
         - proxy
@@ -60,9 +61,9 @@ body:
       label: Versions
       description: List necessary versions here. This includes your package version, runtime version, operating system etc.
       placeholder: |
-        - discord.js 14.9.0 (`npm ls discord.js` or another package)
-        - Node.js 16.9.0 (`node --version`)
-        - TypeScript 5.0.4 (`npm ls typescript` if you use it)
+        - discord.js 14.12.1 (`npm ls discord.js` or another package)
+        - Node.js 16.11.0 (`node --version`)
+        - TypeScript 5.1.6 (`npm ls typescript` if you use it)
         - macOS Ventura 13.3.1
     validations:
       required: true

.github/ISSUE_TEMPLATE/03-feature_request.yml

@@ -20,6 +20,7 @@ body:
         - builders
         - collection
         - core
+        - create-discord-bot
         - formatters
         - next
         - proxy

.github/issue-labeler.yml

@@ -16,6 +16,9 @@ packages:collection:
 packages:core:
   - "### Which (application|package|application or package) is this (bug
     report|feature request) for\\?\\n\\ncore\\n"
+packages:create-discord-bot:
+  - "### Which (application|package|application or package) is this (bug
+    report|feature request) for\\?\\n\\ncreate-discord-bot\\n"
 packages:discord.js:
   - "### Which (application|package|application or package) is this (bug
     report|feature request) for\\?\\n\\ndiscord.js\\n"

.github/labeler.yml

@@ -16,18 +16,21 @@ packages:collection:
 packages:core:
   - packages/core/*
   - packages/core/**/*
+packages:create-discord-bot:
+  - packages/create-discord-bot/*
+  - packages/create-discord-bot/**/*
 packages:discord.js:
   - packages/discord.js/*
   - packages/discord.js/**/*
-packages:next:
-  - packages/next/*
-  - packages/next/**/*
 packages:docgen:
   - packages/docgen/*
   - packages/docgen/**/*
 packages:formatters:
   - packages/formatters/*
   - packages/formatters/**/*
+packages:next:
+  - packages/next/*
+  - packages/next/**/*
 packages:proxy:
   - packages/proxy/*
   - packages/proxy/**/*

.github/labels.yml

@@ -1,7 +1,7 @@
 - name: api changes
-  color: '5663e9'
+  color: 5663e9
 - name: api support
-  color: '5663e9'
+  color: 5663e9
 - name: apps:guide
   color: fbca04
 - name: apps:website
@@ -23,7 +23,7 @@
 - name: dependencies
   color: 276bd1
 - name: discord
-  color: '5663e9'
+  color: 5663e9
 - name: discussion
   color: b6b1f9
 - name: documentation
@@ -41,7 +41,7 @@
 - name: has PR
   color: 4b1f8e
 - name: help wanted
-  color: '008672'
+  color: 008672
 - name: in progress
   color: ffccd7
 - name: in review
@@ -60,14 +60,16 @@
   color: fbca04
 - name: packages:core
   color: fbca04
-- name: packages:discord.js
+- name: packages:create-discord-bot
   color: fbca04
-- name: packages:next
+- name: packages:discord.js
   color: fbca04
 - name: packages:docgen
   color: fbca04
 - name: packages:formatters
   color: fbca04
+- name: packages:next
+  color: fbca04
 - name: packages:proxy
   color: fbca04
 - name: packages:proxy-container

.github/workflows/publish-dev-docker.yml

@@ -29,8 +29,5 @@ jobs:
       - name: Login to DockerHub
         run: echo ${{ secrets.DOCKER_ACCESS_TOKEN }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
 
-      - name: Build the image
-        run: yarn docker build --buildkit @discordjs/proxy-container -t discordjs/proxy:latest
-
-      - name: Push image to DockerHub
-        run: docker push discordjs/proxy:latest
+      - name: Build & push docker image
+        run: yarn docker build --buildkit @discordjs/proxy-container -t discordjs/proxy:latest --push

.github/workflows/publish-dev.yml

@@ -42,6 +42,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
 
       - name: Install node.js v18
         uses: actions/setup-node@v3

.github/workflows/publish-docker.yml

@@ -26,8 +26,5 @@ jobs:
       - name: Login to DockerHub
         run: echo ${{ secrets.DOCKER_ACCESS_TOKEN }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
 
-      - name: Build docker image
-        run: yarn docker build --buildkit @discordjs/proxy-container -t discordjs/proxy:$(cut -d '.' -f1 <<< $(jq --raw-output '.version' packages/proxy-container/package.json))
-
-      - name: Push image to DockerHub
-        run: docker push --all-tags discordjs/proxy
+      - name: Build & push docker image
+        run: yarn docker build --buildkit @discordjs/proxy-container -t discordjs/proxy:$(cut -d '.' -f1 <<< $(jq --raw-output '.version' packages/proxy-container/package.json)) --push

.prettierignore

@@ -1 +1,2 @@
 CODEOWNERS
+CHANGELOG.md

.yarnrc.yml

@@ -1,24 +1,15 @@
 logFilters:
-  # MISSING_PEER_DEPENDENCY
   - code: YN0002
     level: discard
-  # FETCH_NOT_CACHED
   - code: YN0013
     level: discard
-  # NODE_GYP_INJECTED
   - code: YN0032
     level: discard
-  # INCOMPATIBLE_PEER_DEPENDENCY
   - code: YN0060
     level: discard
 
 nodeLinker: node-modules
 
-packageExtensions:
-  '@storybook/core-common@*':
-    dependencies:
-      '@storybook/react-vite': 7.0.8
-
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
@@ -29,4 +20,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-docker-build.cjs
     spec: 'https://github.com/Dcard/yarn-plugins/releases/latest/download/plugin-docker-build.js'
 
-yarnPath: .yarn/releases/yarn-3.5.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.1.cjs

apps/guide/package.json

@@ -44,17 +44,17 @@
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
-		"@code-hike/mdx": "^0.8.3",
+		"@code-hike/mdx": "^0.9.0",
 		"@discordjs/ui": "workspace:^",
 		"@react-icons/all-files": "^4.1.0",
-		"@vercel/analytics": "^1.0.1",
-		"@vercel/edge-config": "^0.1.9",
-		"@vercel/og": "^0.5.4",
+		"@vercel/analytics": "^1.0.2",
+		"@vercel/edge-config": "^0.2.1",
+		"@vercel/og": "^0.5.11",
 		"ariakit": "^2.0.0-next.44",
 		"cmdk": "^0.2.0",
-		"contentlayer": "^0.3.2",
-		"next": "^13.4.0",
-		"next-contentlayer": "^0.3.2",
+		"contentlayer": "0.3.1",
+		"next": "^13.4.17",
+		"next-contentlayer": "0.3.1",
 		"next-themes": "^0.2.1",
 		"react": "^18.2.0",
 		"react-custom-scrollbars-2": "^4.5.0",
@@ -62,37 +62,37 @@
 		"rehype-autolink-headings": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
-		"sharp": "^0.32.1"
+		"sharp": "^0.32.5"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "^13.4.0",
+		"@next/bundle-analyzer": "^13.4.17",
 		"@testing-library/react": "^14.0.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/html-escaper": "^3.0.0",
-		"@types/node": "18.16.4",
-		"@types/react": "^18.2.5",
-		"@types/react-dom": "^18.2.3",
-		"@unocss/cli": "^0.51.8",
-		"@unocss/eslint-config": "^0.51.8",
-		"@unocss/reset": "^0.51.8",
-		"@vitejs/plugin-react": "^4.0.0",
-		"@vitest/coverage-c8": "^0.31.0",
-		"concurrently": "^8.0.1",
+		"@types/node": "18.17.5",
+		"@types/react": "^18.2.20",
+		"@types/react-dom": "^18.2.7",
+		"@unocss/cli": "^0.55.1",
+		"@unocss/eslint-config": "^0.55.1",
+		"@unocss/reset": "^0.55.1",
+		"@vitejs/plugin-react": "^4.0.4",
+		"@vitest/coverage-v8": "^0.34.2",
+		"concurrently": "^8.2.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.39.0",
-		"eslint-config-neon": "^0.1.46",
+		"eslint": "^8.47.0",
+		"eslint-config-neon": "^0.1.47",
 		"eslint-formatter-pretty": "^5.0.0",
-		"happy-dom": "^9.10.9",
+		"happy-dom": "^10.10.2",
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^7.2.0",
 		"html-escaper": "^3.0.3",
-		"lighthouse": "^10.2.0",
+		"lighthouse": "^10.4.0",
 		"prettier": "^2.8.8",
-		"turbo": "^1.9.4-canary.9",
-		"typescript": "^5.0.4",
-		"unocss": "^0.51.8",
-		"vercel": "^29.1.1",
-		"vitest": "^0.31.0"
+		"turbo": "^1.10.12",
+		"typescript": "^5.1.6",
+		"unocss": "^0.55.1",
+		"vercel": "^31.4.0",
+		"vitest": "^0.34.2"
 	},
 	"engines": {
 		"node": ">=18.13.0"

apps/guide/src/app/_global-error.tsx

@@ -3,7 +3,7 @@
 import { Providers } from './providers';
 import { inter } from '~/util/fonts';
 
-export default function GlobalError({ error }: { error: Error }) {
+export default function GlobalError({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

apps/guide/src/app/error.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-export default function Error({ error }: { error: Error }) {
+export default function Error({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

apps/guide/src/app/guide/[...slug]/page.tsx

@@ -6,7 +6,7 @@ export async function generateStaticParams() {
 	return allContents.map((content) => ({ slug: [content.slug] }));
 }
 
-export default function Page({ params }: { params: { slug: string[] } }) {
+export default function Page({ params }: { readonly params: { slug: string[] } }) {
 	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
 
 	if (!content) {
@@ -14,7 +14,7 @@ export default function Page({ params }: { params: { slug: string[] } }) {
 	}
 
 	return (
-		<article className="max-w-none prose">
+		<article className="max-w-none px-5 prose">
 			<Mdx code={content?.body.code ?? ''} />
 		</article>
 	);

apps/guide/src/components/DiscordAPITypesLink.tsx

@@ -0,0 +1,91 @@
+import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
+import type { PropsWithChildren } from 'react';
+import {
+	BASE_URL_DISCORD_API_TYPES,
+	DISCORD_API_TYPES_VERSION,
+	DISCORD_API_TYPES_VOICE_VERSION,
+} from '~/util/constants';
+
+interface DiscordAPITypesLinkOptions {
+	/**
+	 * The initial documentation enum, interface, function etc.
+	 *
+	 * @example `'RESTJSONErrorCodes'`
+	 */
+	readonly parent?: string;
+	/**
+	 * The scope of where this link lives.
+	 *
+	 * @remarks API does not have a scope.
+	 */
+	readonly scope?: 'gateway' | 'globals' | 'payloads' | 'rest' | 'rpc' | 'utils' | 'voice';
+	/**
+	 * The symbol belonging to the parent.
+	 *
+	 * @example '`MaximumNumberOfGuildsReached'`
+	 */
+	readonly symbol?: string;
+	/**
+	 * The type of the {@link DiscordAPITypesLinkOptions.parent}.
+	 *
+	 * @example `'enum'`
+	 * @example `'interface'`
+	 */
+	readonly type?: string;
+}
+
+export function DiscordAPITypesLink({
+	parent,
+	scope,
+	symbol,
+	type,
+	children,
+}: PropsWithChildren<DiscordAPITypesLinkOptions>) {
+	let url = BASE_URL_DISCORD_API_TYPES;
+	let text = 'discord-api-types';
+
+	if (type || parent) {
+		url += `/api/discord-api-types`;
+
+		switch (scope) {
+			case 'globals':
+				url += `-${scope}`;
+				break;
+			case 'gateway':
+			case 'payloads':
+			case 'rest':
+				url += `-${scope}/common`;
+				break;
+			case 'rpc':
+			case 'utils':
+				url += `-${scope}/${DISCORD_API_TYPES_VERSION}`;
+				break;
+			case 'voice':
+				url += `-${scope}/${DISCORD_API_TYPES_VOICE_VERSION}`;
+				break;
+			default:
+				url += `-${DISCORD_API_TYPES_VERSION}`;
+		}
+
+		if (type) {
+			url += `/${type}/${parent}`;
+			if (symbol) url += `#${symbol}`;
+		} else {
+			url += `#${parent}`;
+		}
+
+		text = `${parent}${symbol ? `#${symbol}` : ''}${type?.toUpperCase() === 'FUNCTION' ? '()' : ''}`;
+	}
+
+	return (
+		<a
+			className="inline-flex flex-row place-items-center gap-1"
+			href={url}
+			rel="external noopener noreferrer"
+			target="_blank"
+		>
+			{children ?? text}
+			<FiExternalLink size={18} />
+		</a>
+	);
+}

apps/guide/src/components/DocsLink.tsx

@@ -1,4 +1,5 @@
 import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
+import type { PropsWithChildren } from 'react';
 import { BASE_URL, BASE_URL_LEGACY, PACKAGES, VERSION } from '~/util/constants';
 
 interface DocsLinkOptions {
@@ -7,19 +8,19 @@ interface DocsLinkOptions {
 	 *
 	 * @remarks Functions automatically infer this.
 	 */
-	brackets?: boolean;
+	readonly brackets?: boolean;
 	/**
 	 * The package.
 	 *
 	 * @defaultValue `'discord.js'`
 	 */
-	package?: (typeof PACKAGES)[number];
+	readonly package?: (typeof PACKAGES)[number];
 	/**
 	 * The initial documentation class, function, interface etc.
 	 *
 	 * @example `'Client'`
 	 */
-	parent?: string;
+	readonly parent?: string;
 	/**
 	 * Whether to reference a static property.
 	 *
@@ -27,20 +28,20 @@ interface DocsLinkOptions {
 	 * This should only be used for the https://discord.js.org domain
 	 * as static properties are not identified in the URL.
 	 */
-	static?: boolean;
+	readonly static?: boolean;
 	/**
 	 * The symbol belonging to the parent.
 	 *
 	 * @example '`login'`
 	 */
-	symbol?: string;
+	readonly symbol?: string;
 	/**
 	 * The type of the {@link DocsLinkOptions.parent}.
 	 *
 	 * @example `'class'`
 	 * @example `'Function'`
 	 */
-	type?: string;
+	readonly type?: string;
 }
 
 export function DocsLink({
@@ -50,7 +51,8 @@ export function DocsLink({
 	symbol,
 	brackets,
 	static: staticReference,
-}: DocsLinkOptions) {
+	children,
+}: PropsWithChildren<DocsLinkOptions>) {
 	// In the case of no type and no parent, this will default to the entry point of the respective documentation.
 	let url = docs === PACKAGES[0] ? `${BASE_URL_LEGACY}/${VERSION}/general/welcome` : `${BASE_URL}/${docs}/stable`;
 	let text = `${docs === PACKAGES[0] ? '' : '@discordjs/'}${docs}`;
@@ -77,7 +79,7 @@ export function DocsLink({
 
 	return (
 		<a className="inline-flex flex-row place-items-center gap-1" href={url} rel="noopener noreferrer" target="_blank">
-			{text}
+			{children ?? text}
 			<FiExternalLink size={18} />
 		</a>
 	);

apps/guide/src/components/Footer.tsx

@@ -5,92 +5,90 @@ import workersLogo from '~/assets/powered-by-workers.png';
 export default function Footer() {
 	return (
 		<footer className="md:pl-12 md:pr-12">
-			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
-				<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
-					<div className="flex flex-col gap-4 lg:flex-row">
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-							rel="external noopener noreferrer"
-							target="_blank"
-							title="Vercel"
-						>
-							<Image
-								alt="Vercel"
-								blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-								height={44}
-								placeholder="blur"
-								src={vercelLogo}
-								width={212}
-							/>
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://www.cloudflare.com"
-							rel="external noopener noreferrer"
-							target="_blank"
-							title="Cloudflare Workers"
-						>
-							<Image
-								alt="Cloudflare"
-								blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-								height={44}
-								placeholder="blur"
-								priority
-								src={workersLogo}
-							/>
-						</a>
-					</div>
-					<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="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discord.gg/djs"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									Discord
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://github.com/discordjs/discord.js/discussions"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									GitHub discussions
-								</a>
-							</div>
+			<div className="flex flex-col flex-wrap place-content-center gap-6 pt-12 sm:flex-row md:gap-12">
+				<div className="flex flex-wrap place-content-center place-items-center gap-4">
+					<a
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+						rel="external noopener noreferrer"
+						target="_blank"
+						title="Vercel"
+					>
+						<Image
+							alt="Vercel"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							height={44}
+							placeholder="blur"
+							src={vercelLogo}
+							width={212}
+						/>
+					</a>
+					<a
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+						href="https://www.cloudflare.com"
+						rel="external noopener noreferrer"
+						target="_blank"
+						title="Cloudflare Workers"
+					>
+						<Image
+							alt="Cloudflare"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							height={44}
+							placeholder="blur"
+							priority
+							src={workersLogo}
+						/>
+					</a>
+				</div>
+				<div className="flex flex-col place-self-center gap-6 sm:flex-row md:gap-12">
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Community</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.gg/djs"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								Discord
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js/discussions"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								GitHub discussions
+							</a>
 						</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="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://github.com/discordjs/discord.js"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									discord.js
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discord.js.org/docs"
-									rel="noopener noreferrer"
-									target="_blank"
-								>
-									discord.js documentation
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discord-api-types.dev"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									discord-api-types
-								</a>
-							</div>
+					</div>
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Project</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord.js
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.js.org/docs"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								discord.js documentation
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord-api-types.dev"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord-api-types
+							</a>
 						</div>
 					</div>
 				</div>

apps/guide/src/components/Mdx.tsx

@@ -2,6 +2,7 @@
 
 import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
 import { useMDXComponent } from 'next-contentlayer/hooks';
+import { DiscordAPITypesLink } from './DiscordAPITypesLink';
 import { H1 } from './H1';
 import { H2 } from './H2';
 import { H3 } from './H3';
@@ -9,7 +10,7 @@ import { H4 } from './H4';
 import { DocsLink } from '~/components/DocsLink';
 import { ResultingCode } from '~/components/ResultingCode';
 
-export function Mdx({ code }: { code: string }) {
+export function Mdx({ code }: { readonly code: string }) {
 	const Component = useMDXComponent(code);
 
 	return (
@@ -20,6 +21,7 @@ export function Mdx({ code }: { code: string }) {
 				DiscordMessages,
 				DiscordMessage,
 				DiscordMessageEmbed,
+				DiscordAPITypesLink,
 				DocsLink,
 				ResultingCode,
 				h1: H1,

apps/guide/src/components/Outline.tsx

@@ -5,7 +5,7 @@ const LINK_HEIGHT = 30;
 const INDICATOR_SIZE = 10;
 const INDICATOR_OFFSET = (LINK_HEIGHT - INDICATOR_SIZE) / 2;
 
-export function Outline({ headings }: { headings: any[] }) {
+export function Outline({ headings }: { readonly headings: any[] }) {
 	// eslint-disable-next-line react/hook-use-state
 	const [active /* setActive */] = useState(0);
 

apps/guide/src/components/PageButton.tsx

@@ -1,4 +1,12 @@
-export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
+export function PageButton({
+	url,
+	title,
+	direction,
+}: {
+	readonly direction: 'next' | 'prev';
+	readonly title: string;
+	readonly url: string;
+}) {
 	return (
 		<a
 			className="flex flex-row flex-col transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded bg-light-600 px-4 py-3 leading-none no-underline outline-none active:translate-y-px active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"

apps/guide/src/components/Sidebar.tsx

@@ -34,7 +34,7 @@ export function Sidebar() {
 		<div className="flex flex-col gap-3 p-3">
 			{Object.keys(itemsByCategory).map((category, idx) => (
 				<Section
-					buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring"
+					buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring z-10"
 					key={`${category}-${idx}`}
 					title={category}
 				>

apps/guide/src/content/02-installations-and-preparations/01-installing-node-discordjs.mdx

@@ -7,11 +7,11 @@ category: Installations and preparations
 
 ## Installing Node.js
 
-To use discord.js, you'll need to install [Node.js](https://nodejs.org/). discord.js v14 requires Node v16.9.0 or higher.
+To use discord.js, you'll need to install [Node.js](https://nodejs.org/). discord.js v14 requires Node v16.11.0 or higher.
 
 <Alert title="Tip" type="success">
 	To check if you already have Node installed on your machine \(e.g., if you're using a VPS\), run _`node -v`_ in your
-	terminal. If it outputs _`v16.9.0`_ or higher, then you're good to go! Otherwise, continue reading.
+	terminal. If it outputs _`v16.11.0`_ or higher, then you're good to go! Otherwise, continue reading.
 </Alert>
 
 On Windows, it's as simple as installing any other program. Download the latest version from [the Node.js website](https://nodejs.org/), open the downloaded file, and follow the steps from the installer.
@@ -48,7 +48,7 @@ On macOS, either:
 
 On Linux, you can quickly open the terminal with <kbd>Ctrl + Alt + T</kbd>.
 
-With the terminal open, run the _`node -v`_ command to make sure you've successfully installed Node.js. If it outputs _`v16.9.0`_ or higher, great!
+With the terminal open, run the _`node -v`_ command to make sure you've successfully installed Node.js. If it outputs _`v16.11.0`_ or higher, great!
 
 ### Initiating a project folder
 

apps/guide/src/content/04-popular-topics/02-audit-logs.mdx

@@ -162,4 +162,4 @@ client.on(Events.GuildAuditLogEntryCreate, async (auditLog) => {
 
 </CH.Code>
 
-If you want to check who banned a user, it's the same example as above except the _`action`_ should be _`AuditLogEvent.MemberBanAdd`_. You can check the rest of the types over at the [discord-api-types documentation](https://discord-api-types.dev/api/discord-api-types-v10/enum/AuditLogEvent).
+If you want to check who banned a user, it's the same example as above except the _`action`_ should be <DiscordAPITypesLink type="enum" parent="AuditLogEvent" symbol="MemberBanAdd" />. You can check the rest of the possible actions on this page.

apps/guide/src/content/04-popular-topics/03-collectors.mdx

@@ -0,0 +1,223 @@
+---
+title: Collectors
+category: Popular topics
+---
+
+# Collectors
+
+## Message collectors
+
+{/* prettier-ignore */}
+<DocsLink type="class" parent="Collector">Collectors</DocsLink> are useful to enable your bot to obtain _additional_ input after the first command was sent. An example would be initiating a quiz, where the bot will "await" a correct response from somebody.
+
+### Basic message collector
+
+Let's take a look at a basic message collector:
+
+<CH.Code>
+
+```js
+const collectorFilter = (message) => message.content.includes('discord');
+const collector = interaction.channel.createMessageCollector({ filter: collectorFilter, time: 15_000 });
+
+collector.on('collect', (message) => {
+	console.log(`Collected ${message.content}`);
+});
+
+collector.on('end', (collected) => {
+	console.log(`Collected ${collected.size} messages`);
+});
+```
+
+</CH.Code>
+
+You can provide a _`filter`_ key to the object parameter of <DocsLink type="class" parent="TextChannel" symbol="createMessageCollector" brackets />. The value to this key should be a function that returns a boolean value to indicate if this message should be collected or not. To check for multiple conditions in your filter you can connect them using [logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators). If you don't provide a filter all messages in the channel the collector was started on will be collected.
+
+Note that the above example uses [implicit return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) for the filter function and passes it to the options object using the [object property shorthand](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions) notation.
+
+If a message passes through the filter, it will trigger the <DocsLink type="class" parent="Collector" symbol="e-collect" /> event for the _`collector`_ you've created. This message is then passed into the event listener as _`collected`_ and the provided function is executed. In the above example, you simply log the message. Once the collector finishes collecting based on the provided end conditions the <DocsLink type="class" parent="Collector" symbol="e-end" /> event emits.
+
+You can control when a collector ends by supplying additional option keys when creating a collector:
+
+- _`time`_: Amount of time in milliseconds the collector should run for
+- _`max`_: Number of messages to successfully pass the filter
+- _`maxProcessed`_: Number of messages encountered (no matter the filter result)
+
+The benefit of using an event-based collector over _`awaitMessages()`_ (its promise-based counterpart) is that you can do something directly after each message is collected, rather than just after the collector ended. You can also stop the collector manually by calling <DocsLink type="class" parent="Collector" symbol="stop" brackets />.
+
+### Await messages
+
+Using <DocsLink type="class" parent="TextChannel" symbol="awaitMessages" brackets /> can be easier if you understand [Promises](../additional-info/understanding-async-await), and it allows you to have cleaner code overall. It is essentially identical to <DocsLink type="class" parent="TextChannel" symbol="createMessageCollector" brackets />, except promisified. However, the drawback of using this method is that you cannot do things before the Promise is resolved or rejected, either by an error or completion. However, it should do for most purposes, such as awaiting the correct response in a quiz. Instead of taking their example, let's set up a basic quiz command using the _`.awaitMessages()`_ feature.
+
+First, you'll need some questions and answers to choose from, so here's a basic set:
+
+<CH.Code>
+
+```json
+[
+	{
+		"question": "What color is the sky?",
+		"answers": ["blue"]
+	},
+	{
+		"question": "How many letters are there in the alphabet?",
+		"answers": ["26", "twenty-six", "twenty six", "twentysix"]
+	}
+]
+```
+
+</CH.Code>
+
+The provided set allows for responder error with an array of answers permitted. Ideally, it would be best to place this in a JSON file, which you can call _`quiz.json`_ for simplicity.
+
+<CH.Code>
+
+```js
+import quiz from './quiz.json' assert { type: 'json' };
+
+// ...
+
+const item = quiz[Math.floor(Math.random() * quiz.length)];
+
+const collectorFilter = (response) => {
+	return item.answers.some((answer) => answer.toLowerCase() === response.content.toLowerCase());
+};
+
+await interaction.reply({ content: item.question });
+
+try {
+	const collected = await interaction.channel.awaitMessages({
+		filter: collectorFilter,
+		max: 1,
+		time: 30_000,
+		errors: ['time'],
+	});
+
+	await interaction.followUp(`${collected.first().author} got the correct answer!`);
+} catch {
+	await interaction.followUp('Looks like nobody got the answer this time.');
+}
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	If you don't understand how _`.some()`_ works, you can read about it in more detail
+	[here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some).
+</Alert>
+
+In this filter, you iterate through the answers to find what you want. You would like to ignore the case because simple typos can happen, so you convert each answer to its lowercase form and check if it's equal to the response in lowercase form as well. In the options section, you only want to allow one answer to pass through, hence the _`max: 1`_ setting.
+
+The filter looks for messages that match one of the answers in the array of possible answers to pass through the collector. The _`max`_ option (the second parameter) specifies that only a maximum of one message can go through the filter successfully before the Promise successfully resolves. The _`errors`_ section specifies that time will cause it to error out, which will cause the Promise to reject if one correct answer is not received within the time limit of one minute. As you can see, there is no _`collect`_ event, so you are limited in that regard.
+
+## Reaction collectors
+
+### Basic reaction collector
+
+These work quite similarly to message collectors, except that you apply them on a message rather than a channel. This example uses the <DocsLink type="class" parent="Message" symbol="createReactionCollector" brackets /> method. The filter will check for the 👍 emoji–in the default skin tone specifically, so be wary of that. It will also check that the person who reacted shares the same id as the author of the original message that the collector was assigned to.
+
+```js
+const collectorFilter = (reaction, user) => {
+	return reaction.emoji.name === '👍' && user.id === message.author.id;
+};
+
+const collector = message.createReactionCollector({ filter: collectorFilter, time: 15_000 });
+
+collector.on('collect', (reaction, user) => {
+	console.log(`Collected ${reaction.emoji.name} from ${user.tag}`);
+});
+
+collector.on('end', (collected) => {
+	console.log(`Collected ${collected.size} items`);
+});
+```
+
+### Await reactions
+
+<DocsLink type="class" parent="Message" symbol="awaitReactions" brackets /> works almost the same as a reaction collector,
+except it is Promise-based. The same differences apply as with channel collectors.
+
+```js
+const collectorFilter = (reaction, user) => {
+	return reaction.emoji.name === '👍' && user.id === message.author.id;
+};
+
+try {
+	const collected = await message.awaitReactions({ filter: collectorFilter, max: 1, time: 60_000, errors: ['time'] });
+	console.log(collected.size);
+} catch (collected) {
+	console.log(`After a minute, the user did not react.`);
+}
+```
+
+## Interaction collectors
+
+The third type of collector allows you to collect interactions; such as when users activate a slash command or click on a button in a message.
+
+### Basic message component collector
+
+Collecting interactions from message components works similarly to reaction collectors. In the following example, you will check that the interaction came from a button, and that the user clicking the button is the same user that initiated the command.
+
+One important difference to note with interaction collectors is that Discord expects a response to _all_ interactions within 3 seconds - even ones that you don't want to collect. For this reason, you may wish to _`.deferUpdate()`_ all interactions in your filter, or not use a filter at all and handle this behavior in the _`collect`_ event.
+
+```js
+import { ComponentType } from 'discord.js';
+
+const collector = message.createMessageComponentCollector({ componentType: ComponentType.Button, time: 15_000 });
+
+collector.on('collect', (i) => {
+	if (i.user.id === interaction.user.id) {
+		await i.reply(`${i.user.id} clicked on the ${i.customId} button.`);
+	} else {
+		await i.reply({ content: `These buttons aren't for you!`, ephemeral: true });
+	}
+});
+
+collector.on('end', (collected) => {
+	console.log(`Collected ${collected.size} interactions.`);
+});
+```
+
+### Await message component
+
+As before, this works similarly to the message component collector, except it is Promise-based.
+
+Unlike other Promise-based collectors, this method will only ever collect one interaction that passes the filter. If no interactions are collected before the time runs out, the Promise will reject. This behavior aligns with Discord's requirement that actions should immediately receive a response. In this example, you will use _`.deferUpdate()`_ on all interactions in the filter.
+
+```js
+import { ComponentType } from 'discord.js';
+
+const collectorFilter = (i) => {
+	i.deferUpdate();
+	return i.user.id === interaction.user.id;
+};
+
+try {
+	const interaction = await message.awaitMessageComponent({
+		filter: collectorFilter,
+		componentType: ComponentType.StringSelect,
+		time: 60_000,
+	});
+
+	await interaction.editReply(`You selected ${interaction.values.join(', ')}!`);
+} catch (error) {
+	console.log('No interactions were collected.');
+}
+```
+
+### Await modal submit
+
+If you want to wait for the submission of a modal within the context of another command or button execution, you may find the promisified collector <DocsLink type="class" parent="CommandInteraction" symbol="awaitModalSubmit" brackets /> useful.
+
+As Discord does not inform you if the user dismisses the modal, supplying a maximum _`time`_ to wait for is crucial:
+
+```js
+try {
+	const interaction = await initialInteraction.awaitModalSubmit({ time: 60_000, filter });
+	await interaction.editReply('Thank you for your submission!');
+} catch (error) {
+	console.log('No modal submit interaction was collected');
+}
+```
+
+For more information on working with modals, see the [modals section of this guide](../interactions/modals).

apps/guide/src/content/04-popular-topics/04-formatters.mdx

@@ -0,0 +1,95 @@
+---
+title: Formatters
+category: Popular topics
+---
+
+# Formatters
+
+discord.js provides the <DocsLink package="formatters" /> package which contains a variety of utilities you can use when writing your Discord bot.
+
+## Basic Markdown
+
+These functions format strings into all the different markdown styles supported by Discord.
+
+<CH.Code>
+
+```js
+import { bold, italic, strikethrough, underscore, spoiler, quote, blockQuote } from 'discord.js';
+
+const string = 'Hello!';
+const boldString = bold(string);
+const italicString = italic(string);
+const strikethroughString = strikethrough(string);
+const underscoreString = underscore(string);
+const spoilerString = spoiler(string);
+const quoteString = quote(string);
+const blockquoteString = blockQuote(string);
+```
+
+</CH.Code>
+
+## Links
+
+There are also two functions to format hyperlinks. _`hyperlink()`_ will format the URL into a masked markdown link, and _`hideLinkEmbed()`_ will wrap the URL in _`<>`_, preventing it from embedding.
+
+<CH.Code>
+
+```js
+import { hyperlink, hideLinkEmbed } from 'discord.js';
+
+const url = 'https://discord.js.org/';
+const link = hyperlink('discord.js', url);
+const hiddenEmbed = hideLinkEmbed(url);
+```
+
+</CH.Code>
+
+## Code blocks
+
+You can use _`inlineCode()`_ and _`codeBlock()`_ to turn a string into an inline code block or a regular code block with or without syntax highlighting.
+
+<CH.Code>
+
+```js
+import { inlineCode, codeBlock } from 'discord.js';
+
+const jsString = 'const value = true;';
+const inline = inlineCode(jsString);
+const codeblock = codeBlock(jsString);
+const highlighted = codeBlock('js', jsString);
+```
+
+</CH.Code>
+
+## Timestamps
+
+With _`time()`_, you can format Unix timestamps and dates into a Discord time string.
+
+<CH.Code>
+
+```js
+import { time, TimestampStyles } from 'discord.js';
+
+const date = new Date();
+const timeString = time(date);
+const relative = time(date, TimestampStyles.RelativeTime);
+```
+
+</CH.Code>
+
+## Mentions
+
+_`userMention()`_, _`channelMention()`_, and _`roleMention()`_ all exist to format Snowflakes into mentions.
+
+<CH.Code>
+
+```js
+import { channelMention, roleMention, userMention } from 'discord.js';
+
+const id = '123456789012345678';
+const channel = channelMention(id);
+const role = roleMention(id);
+const user = userMention(id);
+```
+
+</CH.Code>

apps/guide/src/content/04-popular-topics/06-webhooks.mdx

@@ -208,8 +208,6 @@ You can use <DocsLink type="class" parent="Webhook" symbol="editMessage" bracket
 ```js
 const message = await webhook.editMessage('123456789012345678', {
 	content: 'Edited!',
-	username: 'some-username',
-	avatarURL: 'https://guide.discordjs.dev/assets/discordjs.png',
 	embeds: [embed],
 });
 ```

apps/guide/src/content/05-additional-info/03-updating-to-v14.mdx

@@ -7,7 +7,7 @@ category: Additional info
 
 ## Before you start
 
-v14 requires Node 16.9 or higher to use, so make sure you're up to date. To check your Node.js version, use _`node --version`_ in your terminal or command prompt, and if it's not high enough, update it! There are many resources online to help you with this step based on your host system.
+v14 requires Node 16.11 or higher to use, so make sure you're up to date. To check your Node.js version, use _`node --version`_ in your terminal or command prompt, and if it's not high enough, update it! There are many resources online to help you with this step based on your host system.
 
 ### Various packages are now included in v14
 
@@ -41,7 +41,7 @@ discord.js v14 makes the switch to Discord API v10!
 
 Any areas that used to accept a _`string`_ or _`number`_ type for an enum parameter will now only accept a _`number`_.
 
-In addition, the old enums exported by discord.js v13 and lower are replaced with new enums from [discord-api-types](https://discord-api-types.dev/api/discord-api-types-v10).
+In addition, the old enums exported by discord.js v13 and lower are replaced with new enums from <DiscordAPITypesLink />.
 
 #### New enum differences
 
@@ -121,7 +121,7 @@ Areas like _`Client`_ initialization, JSON slash commands and JSON message compo
 
 #### Channels
 
-Some channel type guard methods that narrowed to one channel type have been removed. Instead compare the _`type`_ property against a [ChannelType](https://discord-api-types.dev/api/discord-api-types-v10/enum/ChannelType) enum member to narrow channels.
+Some channel type guard methods that narrowed to one channel type have been removed. Instead compare the _`type`_ property against a <DiscordAPITypesLink type="enum" parent="ChannelType" /> enum member to narrow channels.
 
 <CH.Code>
 
@@ -361,7 +361,7 @@ _`IntegrationApplication#summary`_ has been removed as it is no longer supported
 
 ### Interaction
 
-Whenever an interaction is replied to and one fetches the reply, it could possibly give an [APIMessage](https://discord-api-types.dev/api/discord-api-types-v10/interface/APIMessage) if the guild was not cached. However, interaction replies now always return a discord.js <DocsLink type="class" parent="Message"/> object with _`fetchReply`_ as _`true`_.
+Whenever an interaction is replied to and one fetches the reply, it could possibly give an <DiscordAPITypesLink type="interface" parent="APIMessage" /> if the guild was not cached. However, interaction replies now always return a discord.js <DocsLink type="class" parent="Message"/> object with _`fetchReply`_ as _`true`_.
 
 The base interaction class is now <DocsLink type="class" parent="BaseInteraction"/>.
 
@@ -690,7 +690,7 @@ Added support for role connection metadata.
 
 A new <DocsLink type="class" parent="Collector" symbol="e-ignore"/> event has been added which is emitted whenever an element is not collected by the collector.
 
-Component collector options now use the [ComponentType](https://discord-api-types.dev/api/discord-api-types-v10/enum/ComponentType) enum values:
+Component collector options now use the <DiscordAPITypesLink type="enum" parent="ComponentType" /> enum values:
 
 <CH.Code>
 

apps/guide/src/util/constants.ts

@@ -2,6 +2,8 @@ export const BASE_URL = 'https://discord.js.org/docs/packages' as const;
 
 export const BASE_URL_LEGACY = 'https://old.discordjs.dev/#/docs/discord.js' as const;
 
+export const BASE_URL_DISCORD_API_TYPES = 'https://discord-api-types.dev' as const;
+
 export const DESCRIPTION = 'Imagine a guide... that explores the many possibilities for your discord.js bot.';
 
 export const GITHUB_BASE_PAGES_PATH = 'https://github.com/discordjs/discord.js/tree/main/apps/guide/src/pages';
@@ -24,4 +26,14 @@ export const PACKAGES = [
 /**
  * The stable version of discord.js.
  */
-export const VERSION = '14.10.2' as const;
+export const VERSION = '14.11.0' as const;
+
+/**
+ * The API version (for discord-api-types). This is prefixed with a "v".
+ */
+export const DISCORD_API_TYPES_VERSION = 'v10' as const;
+
+/**
+ * The voice API version (for discord-api-types). This is prefixed with a "v".
+ */
+export const DISCORD_API_TYPES_VOICE_VERSION = 'v4' as const;

apps/website/package.json

@@ -49,19 +49,19 @@
 		"@discordjs/api-extractor-utils": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
 		"@discordjs/ui": "workspace:^",
-		"@microsoft/api-extractor-model": "7.26.8",
+		"@microsoft/api-extractor-model": "7.27.6",
 		"@microsoft/tsdoc": "0.14.2",
 		"@planetscale/database": "1.7.0",
 		"@react-icons/all-files": "^4.1.0",
-		"@vercel/analytics": "^1.0.1",
-		"@vercel/edge-config": "^0.1.9",
-		"@vercel/og": "^0.5.4",
+		"@vercel/analytics": "^1.0.2",
+		"@vercel/edge-config": "^0.2.1",
+		"@vercel/og": "^0.5.11",
 		"ariakit": "^2.0.0-next.44",
-		"bright": "^0.8.2",
-		"class-variance-authority": "^0.6.0",
+		"bright": "^0.8.4",
+		"class-variance-authority": "^0.7.0",
 		"cmdk": "^0.2.0",
-		"meilisearch": "^0.32.3",
-		"next": "^13.4.0",
+		"meilisearch": "^0.34.1",
+		"next": "^13.4.17",
 		"next-mdx-remote": "^4.4.1",
 		"next-themes": "^0.2.1",
 		"react": "^18.2.0",
@@ -71,34 +71,34 @@
 		"rehype-raw": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
-		"sharp": "^0.32.1",
-		"swr": "^2.1.5"
+		"sharp": "^0.32.5",
+		"swr": "^2.2.1"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "^13.4.0",
+		"@next/bundle-analyzer": "^13.4.17",
 		"@testing-library/react": "^14.0.0",
 		"@testing-library/user-event": "^14.4.3",
-		"@types/node": "18.16.4",
-		"@types/react": "^18.2.5",
-		"@types/react-dom": "^18.2.3",
-		"@unocss/cli": "^0.51.8",
-		"@unocss/eslint-config": "^0.51.8",
-		"@unocss/reset": "^0.51.8",
-		"@vitejs/plugin-react": "^4.0.0",
-		"@vitest/coverage-c8": "^0.31.0",
-		"concurrently": "^8.0.1",
-		"cpy-cli": "^4.2.0",
+		"@types/node": "18.17.5",
+		"@types/react": "^18.2.20",
+		"@types/react-dom": "^18.2.7",
+		"@unocss/cli": "^0.55.1",
+		"@unocss/eslint-config": "^0.55.1",
+		"@unocss/reset": "^0.55.1",
+		"@vitejs/plugin-react": "^4.0.4",
+		"@vitest/coverage-v8": "^0.34.2",
+		"concurrently": "^8.2.0",
+		"cpy-cli": "^5.0.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.39.0",
-		"eslint-config-neon": "^0.1.46",
+		"eslint": "^8.47.0",
+		"eslint-config-neon": "^0.1.47",
 		"eslint-formatter-pretty": "^5.0.0",
-		"happy-dom": "^9.10.9",
-		"lighthouse": "^10.2.0",
+		"happy-dom": "^10.10.2",
+		"lighthouse": "^10.4.0",
 		"prettier": "^2.8.8",
-		"turbo": "^1.9.4-canary.9",
-		"typescript": "^5.0.4",
-		"vercel": "^29.1.1",
-		"vitest": "^0.31.0"
+		"turbo": "^1.10.12",
+		"typescript": "^5.1.6",
+		"vercel": "^31.4.0",
+		"vitest": "^0.34.2"
 	},
 	"engines": {
 		"node": ">=18.13.0"

apps/website/src/app/_global-error.tsx

@@ -73,7 +73,7 @@ export const metadata: Metadata = {
 	},
 };
 
-export default function GlobalError({ error }: { error: Error }) {
+export default function GlobalError({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

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

@@ -116,7 +116,7 @@ export async function generateStaticParams({ params: { package: packageName, ver
 	}));
 }
 
-function Member({ member }: { member?: ApiItem }) {
+function Member({ member }: { readonly member?: ApiItem }) {
 	switch (member?.kind) {
 		case 'Class':
 			return <Class clazz={member as ApiClass} />;

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

@@ -1,6 +1,6 @@
 'use client';
 
-export default function Error({ error }: { error: Error }) {
+export default function Error({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

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

@@ -27,7 +27,7 @@ export default async function Page({ params }: { params: VersionRouteParams }) {
 
 	return (
 		<div className="max-w-none prose">
-			{/* @ts-expect-error async component */}
+			{/* @ts-expect-error SyntaxHighlighter is assignable */}
 			<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
 		</div>
 	);

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

@@ -36,7 +36,7 @@ export default async function Page({ params }: { params: { package: string } })
 						href={`/docs/packages/${params.package}/${version}`}
 						key={`${version}-${idx}`}
 					>
-						<div className="flex flex-row place-content-between place-items-center gap-4">
+						<div className="flex grow flex-row place-content-between place-items-center gap-4">
 							<div className="flex flex-row place-content-between place-items-center gap-4">
 								<VscVersions size={25} />
 								<h2 className="font-semibold">{version}</h2>

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

@@ -13,16 +13,11 @@ export default function Page() {
 		<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
 			<h1 className="text-2xl font-semibold">Select a package:</h1>
 			<div className="flex flex-col gap-4">
-				<a
-					className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
-					href="https://old.discordjs.dev/#/docs/discord.js"
-				>
+				<a className={buttonVariants({ variant: 'secondary' })} href="https://old.discordjs.dev/#/docs/discord.js">
 					<div className="flex grow flex-row place-content-between place-items-center gap-4">
-						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex flex-row place-content-between place-items-center gap-4">
-								<VscPackage size={25} />
-								<h2 className="font-semibold">discord.js</h2>
-							</div>
+						<div className="flex flex-row place-content-between place-items-center gap-4">
+							<VscPackage size={25} />
+							<h2 className="font-semibold">discord.js</h2>
 						</div>
 						<VscArrowRight size={20} />
 					</div>
@@ -34,31 +29,27 @@ export default function Page() {
 						key={`${pkg}-${idx}`}
 					>
 						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex grow flex-row place-content-between place-items-center gap-4">
-								<div className="flex flex-row place-content-between place-items-center gap-4">
-									<VscPackage size={25} />
-									<h2 className="font-semibold">{pkg}</h2>
-								</div>
-								{/* <Link href={`/docs/packages/${pkg}`}>
-									<div
-										className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-none focus:ring focus:ring-white active:translate-y-px"
-										role="link"
-									>
-										Select version
-									</div>
-								</Link> */}
+							<div className="flex flex-row place-content-between place-items-center gap-4">
+								<VscPackage size={25} />
+								<h2 className="font-semibold">{pkg}</h2>
 							</div>
+							{/* <Link href={`/docs/packages/${pkg}`}>
+								<div
+									className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-none focus:ring focus:ring-white active:translate-y-px"
+									role="link"
+								>
+									Select version
+								</div>
+							</Link> */}
 							<VscArrowRight size={20} />
 						</div>
 					</Link>
 				))}
 				<a className={buttonVariants({ variant: 'secondary' })} href="https://discord-api-types.dev/">
 					<div className="flex grow flex-row place-content-between place-items-center gap-4">
-						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex flex-row place-content-between place-items-center gap-4">
-								<VscPackage size={25} />
-								<h2 className="font-semibold">discord-api-types</h2>
-							</div>
+						<div className="flex flex-row place-content-between place-items-center gap-4">
+							<VscPackage size={25} />
+							<h2 className="font-semibold">discord-api-types</h2>
 						</div>
 						<FiExternalLink size={20} />
 					</div>

apps/website/src/app/error.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-export default function Error({ error }: { error: Error }) {
+export default function Error({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

apps/website/src/app/page.tsx

@@ -20,9 +20,12 @@ export default function Page() {
 							Discord bots.
 						</h1>
 						<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p>
-						<div className="flex gap-4 md:flex-row">
-							<Link className={buttonVariants()} href="/docs">
+						<div className="flex flex-wrap place-content-center gap-4 md:flex-row">
+							<a className={buttonVariants()} href="https://old.discordjs.dev/#/docs" rel="noopener noreferrer">
 								Docs
+							</a>
+							<Link className={buttonVariants()} href="/docs">
+								Module docs
 							</Link>
 							<a
 								className={buttonVariants({ variant: 'secondary' })}

apps/website/src/components/Anchor.tsx

@@ -1,6 +1,6 @@
 import { FiLink } from '@react-icons/all-files/fi/FiLink';
 
-export function Anchor({ href }: { href: string }) {
+export function Anchor({ href }: { readonly href: string }) {
 	return (
 		<a className="mr-1 inline-block rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" href={href}>
 			<FiLink size={20} />

apps/website/src/components/Badges.tsx

@@ -8,7 +8,10 @@ export enum BadgeColor {
 	Warning = 'bg-yellow-500',
 }
 
-export function Badge({ children, color = BadgeColor.Primary }: PropsWithChildren<{ color?: BadgeColor | undefined }>) {
+export function Badge({
+	children,
+	color = BadgeColor.Primary,
+}: PropsWithChildren<{ readonly color?: BadgeColor | undefined }>) {
 	return (
 		<span
 			className={`h-5 flex flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white ${color}`}
@@ -18,7 +21,7 @@ export function Badge({ children, color = BadgeColor.Primary }: PropsWithChildre
 	);
 }
 
-export function Badges({ item }: { item: ApiDocumentedItem }) {
+export function Badges({ item }: { readonly item: ApiDocumentedItem }) {
 	const isStatic = ApiStaticMixin.isBaseClassOf(item) && item.isStatic;
 	const isProtected = ApiProtectedMixin.isBaseClassOf(item) && item.isProtected;
 	const isReadonly = ApiReadonlyMixin.isBaseClassOf(item) && item.isReadonly;

apps/website/src/components/CmdK.tsx

@@ -4,7 +4,6 @@ import type { ApiItemKind } from '@microsoft/api-extractor-model';
 import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
 import { VscSymbolClass } from '@react-icons/all-files/vsc/VscSymbolClass';
 import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
-import { VscSymbolField } from '@react-icons/all-files/vsc/VscSymbolField';
 import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
 import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
@@ -28,7 +27,7 @@ function resolveIcon(item: keyof typeof ApiItemKind) {
 		case 'Property':
 			return <VscSymbolProperty className="shrink-0" size={25} />;
 		case 'TypeAlias':
-			return <VscSymbolField className="shrink-0" size={25} />;
+			return <VscSymbolVariable className="shrink-0" size={25} />;
 		case 'Variable':
 			return <VscSymbolVariable className="shrink-0" size={25} />;
 		default:

apps/website/src/components/CodeHeading.tsx

@@ -5,15 +5,15 @@ export interface CodeListingProps {
 	/**
 	 * The value of this heading.
 	 */
-	children: ReactNode;
+	readonly children: ReactNode;
 	/**
 	 * Additional class names to apply to the root element.
 	 */
-	className?: string | undefined;
+	readonly className?: string | undefined;
 	/**
 	 * The href of this heading.
 	 */
-	href?: string | undefined;
+	readonly href?: string | undefined;
 }
 
 export function CodeHeading({ href, className, children }: CodeListingProps) {

apps/website/src/components/ExcerptText.tsx

@@ -8,11 +8,11 @@ export interface ExcerptTextProps {
 	/**
 	 * The tokens to render.
 	 */
-	excerpt: Excerpt;
+	readonly excerpt: Excerpt;
 	/**
 	 * The model to resolve item references from.
 	 */
-	model: ApiModel;
+	readonly model: ApiModel;
 }
 
 /**
@@ -49,7 +49,7 @@ export function ExcerptText({ model, excerpt }: ExcerptTextProps) {
 						<ItemLink
 							className="text-blurple"
 							itemURI={resolveItemURI(item)}
-							key={`${item.displayName}-${item.containerKey}`}
+							key={`${item.displayName}-${item.containerKey}-${idx}`}
 							packageName={item.getAssociatedPackage()?.displayName.replace('@discordjs/', '')}
 						>
 							{token.text}

apps/website/src/components/Footer.tsx

@@ -5,92 +5,90 @@ import workersLogo from '~/assets/powered-by-workers.png';
 export default function Footer() {
 	return (
 		<footer className="md:pl-12 md:pr-12">
-			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
-				<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
-					<div className="flex flex-col gap-4 lg:flex-row">
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-							rel="external noopener noreferrer"
-							target="_blank"
-							title="Vercel"
-						>
-							<Image
-								alt="Vercel"
-								blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-								height={44}
-								placeholder="blur"
-								src={vercelLogo}
-								width={212}
-							/>
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://www.cloudflare.com"
-							rel="external noopener noreferrer"
-							target="_blank"
-							title="Cloudflare Workers"
-						>
-							<Image
-								alt="Cloudflare"
-								blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-								height={44}
-								placeholder="blur"
-								priority
-								src={workersLogo}
-							/>
-						</a>
-					</div>
-					<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="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discord.gg/djs"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									Discord
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://github.com/discordjs/discord.js/discussions"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									GitHub discussions
-								</a>
-							</div>
+			<div className="flex flex-col flex-wrap place-content-center gap-6 pt-12 sm:flex-row md:gap-12">
+				<div className="flex flex-wrap place-content-center place-items-center gap-4">
+					<a
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+						rel="external noopener noreferrer"
+						target="_blank"
+						title="Vercel"
+					>
+						<Image
+							alt="Vercel"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							height={44}
+							placeholder="blur"
+							src={vercelLogo}
+							width={212}
+						/>
+					</a>
+					<a
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+						href="https://www.cloudflare.com"
+						rel="external noopener noreferrer"
+						target="_blank"
+						title="Cloudflare Workers"
+					>
+						<Image
+							alt="Cloudflare"
+							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+							height={44}
+							placeholder="blur"
+							priority
+							src={workersLogo}
+						/>
+					</a>
+				</div>
+				<div className="flex flex-col place-self-center gap-6 sm:flex-row md:gap-12">
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Community</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.gg/djs"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								Discord
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js/discussions"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								GitHub discussions
+							</a>
 						</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="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://github.com/discordjs/discord.js"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									discord.js
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discordjs.guide"
-									rel="noopener noreferrer"
-									target="_blank"
-								>
-									discord.js guide
-								</a>
-								<a
-									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-									href="https://discord-api-types.dev"
-									rel="external noopener noreferrer"
-									target="_blank"
-								>
-									discord-api-types
-								</a>
-							</div>
+					</div>
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Project</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord.js
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.js.org/docs"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								discord.js documentation
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord-api-types.dev"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord-api-types
+							</a>
 						</div>
 					</div>
 				</div>

apps/website/src/components/InheritanceText.tsx

@@ -2,7 +2,7 @@ import type { ApiDeclaredItem } from '@microsoft/api-extractor-model';
 import { ItemLink } from './ItemLink';
 import { resolveItemURI } from './documentation/util';
 
-export function InheritanceText({ parent }: { parent: ApiDeclaredItem }) {
+export function InheritanceText({ parent }: { readonly parent: ApiDeclaredItem }) {
 	return (
 		<span className="font-semibold">
 			Inherited from{' '}

apps/website/src/components/ItemLink.tsx

@@ -10,17 +10,17 @@ export interface ItemLinkProps
 	extends Omit<LinkProps, 'href'>,
 		RefAttributes<HTMLAnchorElement>,
 		Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> {
-	className?: string;
+	readonly className?: string;
 
 	/**
 	 * The URI of the api item to link to. (e.g. `/RestManager`)
 	 */
-	itemURI: string;
+	readonly itemURI: string;
 
 	/**
 	 * The name of the package the item belongs to.
 	 */
-	packageName?: string | undefined;
+	readonly packageName?: string | undefined;
 }
 
 /**

apps/website/src/components/Nav.tsx

@@ -9,7 +9,7 @@ import { useNav } from '~/contexts/nav';
 const PackageSelect = dynamic(async () => import('./PackageSelect'));
 const VersionSelect = dynamic(async () => import('./VersionSelect'));
 
-export function Nav({ members }: { members: SidebarSectionItemData[] }) {
+export function Nav({ members }: { readonly members: SidebarSectionItemData[] }) {
 	const { opened } = useNav();
 
 	return (

apps/website/src/components/Outline.tsx

@@ -4,7 +4,7 @@ import { Scrollbars } from './Scrollbars';
 import type { TableOfContentsSerialized } from './TableOfContentItems';
 import { TableOfContentItems } from './TableOfContentItems';
 
-export function Outline({ members }: { members: TableOfContentsSerialized[] }) {
+export function Outline({ members }: { readonly members: TableOfContentsSerialized[] }) {
 	return (
 		<aside className="fixed bottom-0 right-0 top-[50px] z-20 hidden h-[calc(100vh_-_65px)] w-64 border-l border-light-800 bg-white pr-2 xl:block dark:border-dark-100 dark:bg-dark-600">
 			<Scrollbars

apps/website/src/components/OverloadSwitcher.tsx

@@ -4,17 +4,52 @@ import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
 import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
 import type { PropsWithChildren, ReactNode } from 'react';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, useEffect } from 'react';
 
 export interface OverloadSwitcherProps {
+	methodName: string;
 	overloads: ReactNode[];
 }
 
-export default function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ overloads: ReactNode[] }>) {
+export default function OverloadSwitcher({
+	methodName,
+	overloads,
+	children,
+}: PropsWithChildren<{ readonly methodName: string; readonly overloads: ReactNode[] }>) {
+	const [hash, setHash] = useState(() => (typeof window === 'undefined' ? '' : window.location.hash));
+	const hashChangeHandler = useCallback(() => {
+		setHash(window.location.hash);
+	}, []);
 	const [overloadIndex, setOverloadIndex] = useState(1);
 	const overloadedNode = overloads[overloadIndex - 1]!;
 	const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
 
+	useEffect(() => {
+		window.addEventListener('hashchange', hashChangeHandler);
+		return () => {
+			window.removeEventListener('hashchange', hashChangeHandler);
+		};
+	});
+
+	useEffect(() => {
+		if (hash) {
+			const elementId = hash.replace('#', '');
+			const [name, idx] = elementId.split(':');
+			if (name && methodName === name) {
+				if (idx) {
+					const hashOverload = Number.parseInt(idx, 10);
+					const resolvedOverload = Math.max(Math.min(hashOverload, overloads.length), 1);
+					setOverloadIndex(Number.isNaN(resolvedOverload) ? 1 : resolvedOverload);
+				}
+
+				const element = document.querySelector(`[id^='${name}']`);
+				if (element) {
+					element.scrollIntoView({ behavior: 'smooth' });
+				}
+			}
+		}
+	}, [hash, methodName, overloads.length]);
+
 	const menuItems = useMemo(
 		() =>
 			overloads.map((_, idx) => (

apps/website/src/components/ParameterTable.tsx

@@ -10,7 +10,7 @@ const columnStyles = {
 	Type: 'font-mono whitespace-pre-wrap break-normal',
 };
 
-export function ParameterTable({ item }: { item: ApiDocumentedItem & ApiParameterListMixin }) {
+export function ParameterTable({ item }: { readonly item: ApiDocumentedItem & ApiParameterListMixin }) {
 	const params = resolveParameters(item);
 
 	const rows = useMemo(

apps/website/src/components/Property.tsx

@@ -16,8 +16,8 @@ export function Property({
 	children,
 	inheritedFrom,
 }: PropsWithChildren<{
-	inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
-	item: ApiProperty | ApiPropertySignature;
+	readonly inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
+	readonly item: ApiProperty | ApiPropertySignature;
 }>) {
 	const hasSummary = Boolean(item.tsdocComment?.summarySection);
 

apps/website/src/components/PropertyList.tsx

@@ -14,7 +14,7 @@ export function isPropertyLike(item: ApiItem): item is ApiProperty | ApiProperty
 	return item.kind === ApiItemKind.Property || item.kind === ApiItemKind.PropertySignature;
 }
 
-export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
+export function PropertyList({ item }: { readonly item: ApiItemContainerMixin }) {
 	const members = resolveMembers(item, isPropertyLike);
 
 	const propertyItems = useMemo(

apps/website/src/components/Sidebar.tsx

@@ -3,7 +3,6 @@
 import type { ApiItemKind } from '@microsoft/api-extractor-model';
 import { VscSymbolClass } from '@react-icons/all-files/vsc/VscSymbolClass';
 import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
-import { VscSymbolField } from '@react-icons/all-files/vsc/VscSymbolField';
 import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
 import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
 import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
@@ -74,7 +73,6 @@ function resolveIcon(item: string) {
 		case 'Interfaces':
 			return <VscSymbolInterface size={20} />;
 		case 'Types':
-			return <VscSymbolField size={20} />;
 		case 'Variables':
 			return <VscSymbolVariable size={20} />;
 		default:
@@ -82,7 +80,7 @@ function resolveIcon(item: string) {
 	}
 }
 
-export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
+export function Sidebar({ members }: { readonly members: SidebarSectionItemData[] }) {
 	const segment = useSelectedLayoutSegment();
 	const { setOpened } = useNav();
 
@@ -94,7 +92,7 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 				.filter((group) => groupItems[group].length)
 				.map((group, idx) => (
 					<Section
-						buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring"
+						buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring z-10"
 						icon={resolveIcon(group)}
 						key={`${group}-${idx}`}
 						title={group}

apps/website/src/components/SignatureText.tsx

@@ -1,9 +1,9 @@
 import type { ApiModel, Excerpt } from '@microsoft/api-extractor-model';
 import { ExcerptText } from './ExcerptText';
 
-export function SignatureText({ excerpt, model }: { excerpt: Excerpt; model: ApiModel }) {
+export function SignatureText({ excerpt, model }: { readonly excerpt: Excerpt; readonly model: ApiModel }) {
 	return (
-		<h4 className="break-all font-mono text-lg font-bold">
+		<h4 className="break-all text-lg font-bold font-mono">
 			<ExcerptText excerpt={excerpt} model={model} />
 		</h4>
 	);

apps/website/src/components/SyntaxHighlighter.tsx

@@ -4,11 +4,9 @@ export function SyntaxHighlighter(props: typeof Code) {
 	return (
 		<>
 			<div data-theme="dark">
-				{/* @ts-expect-error async component */}
 				<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="github-dark-dimmed" />
 			</div>
 			<div className="[&_pre]:border [&_pre]:border-gray-300 [&_pre]:rounded-md" data-theme="light">
-				{/* @ts-expect-error async component */}
 				<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="min-light" />
 			</div>
 		</>

apps/website/src/components/Table.tsx

@@ -7,9 +7,9 @@ export function Table({
 	columns,
 	columnStyles,
 }: {
-	columnStyles?: Record<string, string>;
-	columns: string[];
-	rows: Record<string, ReactNode>[];
+	readonly columnStyles?: Record<string, string>;
+	readonly columns: string[];
+	readonly rows: Record<string, ReactNode>[];
 }) {
 	const cols = useMemo(
 		() =>

apps/website/src/components/TableOfContentItems.tsx

@@ -19,10 +19,10 @@ export interface TableOfContentsSerializedProperty {
 export type TableOfContentsSerialized = TableOfContentsSerializedMethod | TableOfContentsSerializedProperty;
 
 export interface TableOfContentsItemProps {
-	serializedMembers: TableOfContentsSerialized[];
+	readonly serializedMembers: TableOfContentsSerialized[];
 }
 
-export function TableOfContentsPropertyItem({ property }: { property: TableOfContentsSerializedProperty }) {
+export function TableOfContentsPropertyItem({ property }: { readonly property: TableOfContentsSerializedProperty }) {
 	return (
 		<a
 			className="ml-[10px] border-l border-light-800 p-[5px] pl-6.5 text-sm outline-none focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
@@ -35,7 +35,7 @@ export function TableOfContentsPropertyItem({ property }: { property: TableOfCon
 	);
 }
 
-export function TableOfContentsMethodItem({ method }: { method: TableOfContentsSerializedMethod }) {
+export function TableOfContentsMethodItem({ method }: { readonly method: TableOfContentsSerializedMethod }) {
 	if (method.overloadIndex && method.overloadIndex > 1) {
 		return null;
 	}

apps/website/src/components/TypeParamTable.tsx

@@ -10,7 +10,7 @@ const rowElements = {
 	Default: 'font-mono whitespace-pre break-normal',
 };
 
-export function TypeParamTable({ item }: { item: ApiTypeParameterListMixin }) {
+export function TypeParamTable({ item }: { readonly item: ApiTypeParameterListMixin }) {
 	const model = item.getAssociatedModel()!;
 	const rows = useMemo(
 		() =>

apps/website/src/components/documentation/Header.tsx

@@ -19,6 +19,7 @@ function generateIcon(kind: ApiItemKind) {
 		case ApiItemKind.Interface:
 			return <VscSymbolInterface />;
 		case ApiItemKind.TypeAlias:
+		case ApiItemKind.Variable:
 			return <VscSymbolVariable />;
 		default:
 			return <VscSymbolMethod />;
@@ -29,7 +30,7 @@ export function Header({
 	kind,
 	name,
 	sourceURL,
-}: PropsWithChildren<{ kind: ApiItemKind; name: string; sourceURL?: string | undefined }>) {
+}: PropsWithChildren<{ readonly kind: ApiItemKind; readonly name: string; readonly sourceURL?: string | undefined }>) {
 	return (
 		<div className="flex flex-col">
 			<h2 className="flex flex-row place-items-center justify-between gap-2 break-all text-2xl font-bold">

apps/website/src/components/documentation/HierarchyText.tsx

@@ -2,7 +2,13 @@ import type { ApiClass, ApiInterface, Excerpt } from '@microsoft/api-extractor-m
 import { ApiItemKind } from '@microsoft/api-extractor-model';
 import { ExcerptText } from '../ExcerptText';
 
-export function HierarchyText({ item, type }: { item: ApiClass | ApiInterface; type: 'Extends' | 'Implements' }) {
+export function HierarchyText({
+	item,
+	type,
+}: {
+	readonly item: ApiClass | ApiInterface;
+	readonly type: 'Extends' | 'Implements';
+}) {
 	const model = item.getAssociatedModel()!;
 
 	if (

apps/website/src/components/documentation/Members.tsx

@@ -3,7 +3,7 @@ import { MethodsSection } from './section/MethodsSection';
 import { PropertiesSection } from './section/PropertiesSection';
 import { hasProperties, hasMethods } from './util';
 
-export function Members({ item }: { item: ApiDeclaredItem & ApiItemContainerMixin }) {
+export function Members({ item }: { readonly item: ApiDeclaredItem & ApiItemContainerMixin }) {
 	return (
 		<>
 			{hasProperties(item) ? <PropertiesSection item={item} /> : null}

apps/website/src/components/documentation/ObjectHeader.tsx

@@ -4,7 +4,7 @@ import { Header } from './Header';
 import { SummarySection } from './section/SummarySection';
 
 export interface ObjectHeaderProps {
-	item: ApiDeclaredItem;
+	readonly item: ApiDeclaredItem;
 }
 
 export function ObjectHeader({ item }: ObjectHeaderProps) {

apps/website/src/components/documentation/section/ConstructorSection.tsx

@@ -6,7 +6,7 @@ import { parametersString } from '../util';
 import { DocumentationSection } from './DocumentationSection';
 import { CodeHeading } from '~/components/CodeHeading';
 
-export function ConstructorSection({ item }: { item: ApiConstructor }) {
+export function ConstructorSection({ item }: { readonly item: ApiConstructor }) {
 	return (
 		<DocumentationSection icon={<VscSymbolMethod size={20} />} padded title="Constructor">
 			<div className="flex flex-col gap-2">

apps/website/src/components/documentation/section/MethodsSection.tsx

@@ -19,7 +19,7 @@ function isMethodLike(item: ApiItem): item is ApiMethod | ApiMethodSignature {
 	);
 }
 
-export function MethodsSection({ item }: { item: ApiItemContainerMixin }) {
+export function MethodsSection({ item }: { readonly item: ApiItemContainerMixin }) {
 	const members = resolveMembers(item, isMethodLike);
 
 	const methodItems = useMemo(

apps/website/src/components/documentation/section/ParametersSection.tsx

@@ -3,7 +3,7 @@ import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParamete
 import { ParameterTable } from '../../ParameterTable';
 import { DocumentationSection } from './DocumentationSection';
 
-export function ParameterSection({ item }: { item: ApiDocumentedItem & ApiParameterListMixin }) {
+export function ParameterSection({ item }: { readonly item: ApiDocumentedItem & ApiParameterListMixin }) {
 	return (
 		<DocumentationSection icon={<VscSymbolParameter size={20} />} padded title="Parameters">
 			<ParameterTable item={item} />

apps/website/src/components/documentation/section/PropertiesSection.tsx

@@ -3,7 +3,7 @@ import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty'
 import { PropertyList } from '../../PropertyList';
 import { DocumentationSection } from './DocumentationSection';
 
-export function PropertiesSection({ item }: { item: ApiItemContainerMixin }) {
+export function PropertiesSection({ item }: { readonly item: ApiItemContainerMixin }) {
 	return (
 		<DocumentationSection icon={<VscSymbolProperty size={20} />} padded title="Properties">
 			<PropertyList item={item} />

apps/website/src/components/documentation/section/SummarySection.tsx

@@ -3,7 +3,7 @@ import { VscListSelection } from '@react-icons/all-files/vsc/VscListSelection';
 import { TSDoc } from '../tsdoc/TSDoc';
 import { DocumentationSection } from './DocumentationSection';
 
-export function SummarySection({ item }: { item: ApiDeclaredItem }) {
+export function SummarySection({ item }: { readonly item: ApiDeclaredItem }) {
 	return (
 		<DocumentationSection icon={<VscListSelection size={20} />} padded separator title="Summary">
 			{item.tsdocComment?.summarySection ? (

apps/website/src/components/documentation/section/TypeParametersSection.tsx

@@ -3,7 +3,7 @@ import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParamete
 import { TypeParamTable } from '../../TypeParamTable';
 import { DocumentationSection } from './DocumentationSection';
 
-export function TypeParameterSection({ item }: { item: ApiTypeParameterListMixin }) {
+export function TypeParameterSection({ item }: { readonly item: ApiTypeParameterListMixin }) {
 	return (
 		<DocumentationSection icon={<VscSymbolParameter size={20} />} padded title="Type Parameters">
 			<TypeParamTable item={item} />

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

@@ -1,7 +1,7 @@
 import { Alert } from '@discordjs/ui';
 import type { PropsWithChildren } from 'react';
 
-export function Block({ children, title }: PropsWithChildren<{ title: string }>) {
+export function Block({ children, title }: PropsWithChildren<{ readonly title: string }>) {
 	return (
 		<div className="flex flex-col gap-2">
 			<h5 className="font-bold">{title}</h5>
@@ -13,7 +13,7 @@ export function Block({ children, title }: PropsWithChildren<{ title: string }>)
 export function ExampleBlock({
 	children,
 	exampleIndex,
-}: PropsWithChildren<{ exampleIndex?: number | undefined }>): JSX.Element {
+}: PropsWithChildren<{ readonly exampleIndex?: number | undefined }>): JSX.Element {
 	return <Block title={`Example ${exampleIndex ? exampleIndex : ''}`}>{children}</Block>;
 }
 

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

@@ -8,7 +8,7 @@ import { SyntaxHighlighter } from '../../SyntaxHighlighter';
 import { resolveItemURI } from '../util';
 import { DefaultValueBlock, DeprecatedBlock, ExampleBlock, RemarksBlock, ReturnsBlock, SeeBlock } from './BlockComment';
 
-export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.Element {
+export function TSDoc({ item, tsdoc }: { readonly item: ApiItem; readonly tsdoc: DocNode }): JSX.Element {
 	const createNode = useCallback(
 		(tsdoc: DocNode, idx?: number): ReactNode => {
 			switch (tsdoc.kind) {
@@ -66,7 +66,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
 				case DocNodeKind.CodeSpan: {
 					const { code } = tsdoc as DocFencedCode;
 					return (
-						<code className="font-mono text-sm" key={idx}>
+						<code className="text-sm font-mono" key={idx}>
 							{code}
 						</code>
 					);

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

@@ -10,7 +10,7 @@ import { ConstructorSection } from '../documentation/section/ConstructorSection'
 import { TypeParameterSection } from '../documentation/section/TypeParametersSection';
 // import { serializeMembers } from '../documentation/util';
 
-export function Class({ clazz }: { clazz: ApiClass }) {
+export function Class({ clazz }: { readonly clazz: ApiClass }) {
 	const constructor = clazz.members.find((member) => member.kind === ApiItemKind.Constructor) as
 		| ApiConstructor
 		| undefined;

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

@@ -7,7 +7,7 @@ import { ObjectHeader } from '../documentation/ObjectHeader';
 import { TypeParameterSection } from '../documentation/section/TypeParametersSection';
 // import { serializeMembers } from '../documentation/util';
 
-export function Interface({ item }: { item: ApiInterface }) {
+export function Interface({ item }: { readonly item: ApiInterface }) {
 	return (
 		<Documentation>
 			<ObjectHeader item={item} />

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

@@ -4,7 +4,7 @@ import { Documentation } from '../documentation/Documentation';
 import { Header } from '../documentation/Header';
 import { SummarySection } from '../documentation/section/SummarySection';
 
-export function TypeAlias({ item }: { item: ApiTypeAlias }) {
+export function TypeAlias({ item }: { readonly item: ApiTypeAlias }) {
 	return (
 		<Documentation>
 			<Header kind={item.kind} name={item.displayName} sourceURL={item.sourceLocation.fileUrl} />

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

@@ -2,7 +2,7 @@ import type { ApiVariable } from '@microsoft/api-extractor-model';
 import { Documentation } from '../documentation/Documentation';
 import { ObjectHeader } from '../documentation/ObjectHeader';
 
-export function Variable({ item }: { item: ApiVariable }) {
+export function Variable({ item }: { readonly item: ApiVariable }) {
 	return (
 		<Documentation>
 			<ObjectHeader item={item} />

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

@@ -6,7 +6,7 @@ import { ObjectHeader } from '../../documentation/ObjectHeader';
 import { DocumentationSection } from '../../documentation/section/DocumentationSection';
 import { EnumMember } from './EnumMember';
 
-export function Enum({ item }: { item: ApiEnum }) {
+export function Enum({ item }: { readonly item: ApiEnum }) {
 	return (
 		<Documentation>
 			<ObjectHeader item={item} />

apps/website/src/components/model/enum/EnumMember.tsx

@@ -3,7 +3,7 @@ import { SignatureText } from '../../SignatureText';
 import { TSDoc } from '../../documentation/tsdoc/TSDoc';
 import { CodeHeading } from '~/components/CodeHeading';
 
-export function EnumMember({ member }: { member: ApiEnumMember }) {
+export function EnumMember({ member }: { readonly member: ApiEnumMember }) {
 	return (
 		<div className="flex flex-col scroll-mt-30" id={member.displayName}>
 			<CodeHeading className="md:-ml-8.5" href={`#${member.displayName}`}>

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

@@ -5,7 +5,7 @@ import { FunctionBody } from './FunctionBody';
 
 const OverloadSwitcher = dynamic(async () => import('../../OverloadSwitcher'));
 
-export function Function({ item }: { item: ApiFunction }) {
+export function Function({ item }: { readonly item: ApiFunction }) {
 	const header = <Header kind={item.kind} name={item.name} sourceURL={item.sourceLocation.fileUrl} />;
 
 	if (item.getMergedSiblings().length > 1) {
@@ -16,7 +16,7 @@ export function Function({ item }: { item: ApiFunction }) {
 		return (
 			<div>
 				{header}
-				<OverloadSwitcher overloads={overloads} />
+				<OverloadSwitcher methodName={item.displayName} overloads={overloads} />
 			</div>
 		);
 	}

apps/website/src/components/model/function/FunctionBody.tsx

@@ -10,7 +10,7 @@ export interface FunctionBodyProps {
 	overloadDocumentation: React.ReactNode[];
 }
 
-export function FunctionBody({ item }: { item: ApiFunction }) {
+export function FunctionBody({ item }: { readonly item: ApiFunction }) {
 	return (
 		<Documentation>
 			{/* @ts-expect-error async component */}

apps/website/src/components/model/method/Method.tsx

@@ -5,6 +5,7 @@ import type {
 	ApiMethodSignature,
 } from '@microsoft/api-extractor-model';
 import dynamic from 'next/dynamic';
+import { Fragment } from 'react';
 import { MethodDocumentation } from './MethodDocumentation';
 import { MethodHeader } from './MethodHeader';
 
@@ -14,23 +15,20 @@ export function Method({
 	method,
 	inheritedFrom,
 }: {
-	inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
-	method: ApiMethod | ApiMethodSignature;
+	readonly inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
+	readonly method: ApiMethod | ApiMethodSignature;
 }) {
 	if (method.getMergedSiblings().length > 1) {
 		// We have overloads, use the overload switcher, but render
 		// each overload node on the server.
-		const overloads = method
-			.getMergedSiblings()
-			.map((sibling, idx) => (
-				<MethodDocumentation key={`${sibling.displayName}-${idx}`} method={sibling as ApiMethod | ApiMethodSignature} />
-			));
+		const overloads = method.getMergedSiblings().map((sibling, idx) => (
+			<Fragment key={`${sibling.displayName}-${idx}`}>
+				<MethodHeader method={sibling as ApiMethod | ApiMethodSignature} />
+				<MethodDocumentation method={sibling as ApiMethod | ApiMethodSignature} />
+			</Fragment>
+		));
 
-		return (
-			<OverloadSwitcher overloads={overloads}>
-				<MethodHeader method={method} />
-			</OverloadSwitcher>
-		);
+		return <OverloadSwitcher methodName={method.displayName} overloads={overloads} />;
 	}
 
 	// We have just a single method, render it on the server.

apps/website/src/components/model/method/MethodDocumentation.tsx

@@ -9,8 +9,8 @@ import { ParameterTable } from '../../ParameterTable';
 import { TSDoc } from '../../documentation/tsdoc/TSDoc';
 
 export interface MethodDocumentationProps {
-	inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
-	method: ApiMethod | ApiMethodSignature;
+	readonly inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
+	readonly method: ApiMethod | ApiMethodSignature;
 }
 
 export function MethodDocumentation({ method, inheritedFrom }: MethodDocumentationProps) {

apps/website/src/components/model/method/MethodHeader.tsx

@@ -5,7 +5,7 @@ import { CodeHeading } from '~/components/CodeHeading';
 import { ExcerptText } from '~/components/ExcerptText';
 import { parametersString } from '~/components/documentation/util';
 
-export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignature }) {
+export function MethodHeader({ method }: { readonly method: ApiMethod | ApiMethodSignature }) {
 	const key = useMemo(
 		() => `${method.displayName}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`,
 		[method.displayName, method.overloadIndex],

apps/website/src/styles/Button.tsx

@@ -7,7 +7,7 @@ export const buttonVariants = cva(
 			variant: {
 				primary: 'bg-blurple text-white border-0',
 				secondary:
-					'bg-white text-gray-800 border-gray-400 border border-light-900 text-black transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300',
+					'bg-white text-gray-800 border-gray-400 border border-light-900 text-black transition duration-200 active:translate-y-px dark:border-dark-100 hover:border-black active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300 dark:hover:border-white',
 			},
 		},
 		defaultVariants: {

package.json

@@ -46,20 +46,20 @@
 	},
 	"homepage": "https://discord.js.org",
 	"devDependencies": {
-		"@commitlint/cli": "^17.6.3",
-		"@commitlint/config-angular": "^17.6.3",
-		"@favware/cliff-jumper": "^2.0.0",
+		"@commitlint/cli": "^17.7.1",
+		"@commitlint/config-angular": "^17.7.0",
+		"@favware/cliff-jumper": "^2.1.1",
 		"@favware/npm-deprecate": "^1.0.7",
-		"conventional-changelog-cli": "^2.2.2",
+		"conventional-changelog-cli": "^3.0.0",
 		"husky": "^8.0.3",
 		"is-ci": "^3.0.1",
-		"lint-staged": "^13.2.2",
-		"tsup": "^6.7.0",
-		"turbo": "^1.9.4-canary.9",
-		"typescript": "^5.0.4",
-		"unocss": "^0.51.8",
-		"vercel": "^29.1.1",
-		"vitest": "^0.31.0"
+		"lint-staged": "^13.3.0",
+		"tsup": "^7.2.0",
+		"turbo": "^1.10.12",
+		"typescript": "^5.1.6",
+		"unocss": "^0.55.1",
+		"vercel": "^31.4.0",
+		"vitest": "^0.34.2"
 	},
 	"resolutions": {
 		"@microsoft/tsdoc-config@~0.16.1": "patch:@microsoft/tsdoc-config@npm%3A0.16.2#./.yarn/patches/@microsoft-tsdoc-config-npm-0.16.2-30fd115d09.patch",
@@ -71,11 +71,11 @@
 		"yaml@^2.1.1": "patch:yaml@npm%3A2.2.2#./.yarn/patches/yaml-npm-2.2.2-6e3cddb343.patch"
 	},
 	"engines": {
-		"node": ">=16.9.0"
+		"node": ">=16.11.0"
 	},
 	"workspaces": [
 		"apps/*",
 		"packages/*"
 	],
-	"packageManager": "yarn@3.5.1"
+	"packageManager": "yarn@3.6.1"
 }

packages/actions/package.json

@@ -43,24 +43,24 @@
 	"dependencies": {
 		"@actions/core": "^1.10.0",
 		"@actions/glob": "^0.4.0",
-		"@planetscale/database": "^1.7.0",
-		"tslib": "^2.5.0",
-		"undici": "^5.22.0"
+		"@planetscale/database": "^1.10.0",
+		"tslib": "^2.6.1",
+		"undici": "5.22.1"
 	},
 	"devDependencies": {
-		"@types/node": "16.18.25",
-		"@vitest/coverage-c8": "^0.31.0",
+		"@types/node": "16.18.40",
+		"@vitest/coverage-v8": "^0.34.2",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.39.0",
-		"eslint-config-neon": "^0.1.46",
+		"eslint": "^8.47.0",
+		"eslint-config-neon": "^0.1.47",
 		"eslint-formatter-pretty": "^5.0.0",
 		"prettier": "^2.8.8",
-		"tsup": "^6.7.0",
-		"turbo": "^1.9.4-canary.9",
-		"typescript": "^5.0.4",
-		"vitest": "^0.31.0"
+		"tsup": "^7.2.0",
+		"turbo": "^1.10.12",
+		"typescript": "^5.1.6",
+		"vitest": "^0.34.2"
 	},
 	"engines": {
-		"node": ">=16.9.0"
+		"node": ">=16.11.0"
 	}
 }

packages/actions/src/uploadCoverage/action.yml

@@ -39,6 +39,12 @@ runs:
         files: ./packages/discord.js/coverage/cobertura-coverage.xml
         flags: discord.js
 
+    - name: Upload Formatters Coverage
+      uses: codecov/codecov-action@v3
+      with:
+        files: ./packages/formatters/coverage/cobertura-coverage.xml
+        flags: formatters
+
     - name: Upload Next Coverage
       uses: codecov/codecov-action@v3
       with:

packages/api-extractor-utils/package.json

@@ -32,22 +32,22 @@
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
-		"@microsoft/api-extractor-model": "7.26.8",
+		"@microsoft/api-extractor-model": "7.27.6",
 		"@microsoft/tsdoc": "0.14.2"
 	},
 	"devDependencies": {
-		"@types/node": "16.18.25",
+		"@types/node": "16.18.40",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.39.0",
-		"eslint-config-neon": "^0.1.46",
+		"eslint": "^8.47.0",
+		"eslint-config-neon": "^0.1.47",
 		"eslint-formatter-pretty": "^5.0.0",
 		"prettier": "^2.8.8",
-		"tsup": "^6.7.0",
-		"turbo": "^1.9.4-canary.9",
-		"typescript": "^5.0.4"
+		"tsup": "^7.2.0",
+		"turbo": "^1.10.12",
+		"typescript": "^5.1.6"
 	},
 	"engines": {
-		"node": ">=16.9.0"
+		"node": ">=16.11.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/brokers/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file.
 
+# [@discordjs/brokers@0.2.2](https://github.com/discordjs/discord.js/compare/@discordjs/brokers@0.2.1...@discordjs/brokers@0.2.2) - (2023-08-17)
+
+## Documentation
+
+- Update Node.js requirement to 16.11.0 (#9764) ([188877c](https://github.com/discordjs/discord.js/commit/188877c50af70f0d5cffb246620fa277435c6ce6))
+
+# [@discordjs/brokers@0.2.1](https://github.com/discordjs/discord.js/compare/@discordjs/brokers@0.2.0...@discordjs/brokers@0.2.1) - (2023-05-01)
+
+## Bug Fixes
+
+- Fix external links (#9313) ([a7425c2](https://github.com/discordjs/discord.js/commit/a7425c29c4f23f1b31f4c6a463107ca9eb7fd7e2))
+
+## Documentation
+
+- Generate static imports for types with api-extractor ([98a76db](https://github.com/discordjs/discord.js/commit/98a76db482879f79d6bb2fb2e5fc65ac2c34e2d9))
+- Use `@link` in `@see` (#9348) ([d66d113](https://github.com/discordjs/discord.js/commit/d66d1133331b81563588db4500c63a18c3c3dfae))
+
 # [@discordjs/brokers@0.2.1](https://github.com/discordjs/discord.js/compare/@discordjs/brokers@0.2.0...@discordjs/brokers@0.2.1) - (2023-05-01)
 
 ## Bug Fixes

packages/brokers/README.md

@@ -23,7 +23,7 @@
 
 ## Installation
 
-**Node.js 16.9.0 or newer is required.**
+**Node.js 16.11.0 or newer is required.**
 
 ```sh
 npm install @discordjs/brokers

packages/brokers/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@discordjs/brokers",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "Powerful set of message brokers",
 	"scripts": {
 		"test": "vitest run",
@@ -59,26 +59,26 @@
 	"homepage": "https://discord.js.org",
 	"dependencies": {
 		"@msgpack/msgpack": "^3.0.0-beta2",
-		"@vladfrangu/async_event_emitter": "^2.2.1",
+		"@vladfrangu/async_event_emitter": "^2.2.2",
 		"ioredis": "^5.3.2"
 	},
 	"devDependencies": {
-		"@favware/cliff-jumper": "^2.0.0",
-		"@microsoft/api-extractor": "^7.34.8",
-		"@types/node": "16.18.25",
-		"@vitest/coverage-c8": "^0.31.0",
+		"@favware/cliff-jumper": "^2.1.1",
+		"@microsoft/api-extractor": "^7.36.4",
+		"@types/node": "16.18.40",
+		"@vitest/coverage-v8": "^0.34.2",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.39.0",
-		"eslint-config-neon": "^0.1.46",
+		"eslint": "^8.47.0",
+		"eslint-config-neon": "^0.1.47",
 		"eslint-formatter-pretty": "^5.0.0",
 		"prettier": "^2.8.8",
-		"tsup": "^6.7.0",
-		"turbo": "^1.9.4-canary.9",
-		"typescript": "^5.0.4",
-		"vitest": "^0.31.0"
+		"tsup": "^7.2.0",
+		"turbo": "^1.10.12",
+		"typescript": "^5.1.6",
+		"vitest": "^0.34.2"
 	},
 	"engines": {
-		"node": ">=16.9.0"
+		"node": ">=16.11.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/brokers/src/brokers/redis/BaseRedis.ts

@@ -71,7 +71,7 @@ export abstract class BaseRedisBroker<TEvents extends Record<string, any>>
 	 */
 	public async subscribe(group: string, events: (keyof TEvents)[]): Promise<void> {
 		await Promise.all(
-			// eslint-disable-next-line consistent-return
+			// @ts-expect-error: Intended
 			events.map(async (event) => {
 				this.subscribedEvents.add(event as string);
 				try {

packages/builders/CHANGELOG.md

@@ -2,6 +2,54 @@
 
 All notable changes to this project will be documented in this file.
 
+# [@discordjs/builders@1.6.5](https://github.com/discordjs/discord.js/compare/@discordjs/builders@1.6.4...@discordjs/builders@1.6.5) - (2023-08-17)
+
+## Documentation
+
+- Update Node.js requirement to 16.11.0 (#9764) ([188877c](https://github.com/discordjs/discord.js/commit/188877c50af70f0d5cffb246620fa277435c6ce6))
+
+# [@discordjs/builders@1.6.3](https://github.com/discordjs/discord.js/compare/@discordjs/builders@1.6.2...@discordjs/builders@1.6.3) - (2023-05-01)
+
+## Refactor
+
+- Remove `@discordjs/util` re-export (#9488) ([54ceedf](https://github.com/discordjs/discord.js/commit/54ceedf6c535d4641643d4106b6286cbef09de4a))
+
+# [@discordjs/builders@1.6.2](https://github.com/discordjs/discord.js/compare/@discordjs/builders@1.6.1...@discordjs/builders@1.6.2) - (2023-05-01)
+
+## Bug Fixes
+
+- **BaseSelectMenuBuilder:** Modify class to be `abstract` (#9358) ([ca4de2d](https://github.com/discordjs/discord.js/commit/ca4de2d9c6bc204e85d1b7eae7eabd23dbeb4475))
+- Correct `@link` tags that involve parents (#9351) ([fbbce3e](https://github.com/discordjs/discord.js/commit/fbbce3eb4ba20bc0c4806ca2259d1f86001594be))
+- Fix external links (#9313) ([a7425c2](https://github.com/discordjs/discord.js/commit/a7425c29c4f23f1b31f4c6a463107ca9eb7fd7e2))
+
+## Documentation
+
+- Reference package names properly (#9426) ([d6bca9b](https://github.com/discordjs/discord.js/commit/d6bca9bb4d976dc069a5039250db7d5b3e9142ef))
+- Generate static imports for types with api-extractor ([98a76db](https://github.com/discordjs/discord.js/commit/98a76db482879f79d6bb2fb2e5fc65ac2c34e2d9))
+- **builders:** Add some basic documentation (#9359) ([8073561](https://github.com/discordjs/discord.js/commit/8073561824f911d1a18d0b4f1de39f452bc69fa9))
+- Use `@link` in `@see` (#9348) ([d66d113](https://github.com/discordjs/discord.js/commit/d66d1133331b81563588db4500c63a18c3c3dfae))
+
+# [@discordjs/builders@1.6.3](https://github.com/discordjs/discord.js/compare/@discordjs/builders@1.6.2...@discordjs/builders@1.6.3) - (2023-05-01)
+
+## Refactor
+
+- Remove `@discordjs/util` re-export (#9488) ([54ceedf](https://github.com/discordjs/discord.js/commit/54ceedf6c535d4641643d4106b6286cbef09de4a))
+
+# [@discordjs/builders@1.6.2](https://github.com/discordjs/discord.js/compare/@discordjs/builders@1.6.1...@discordjs/builders@1.6.2) - (2023-05-01)
+
+## Bug Fixes
+
+- **BaseSelectMenuBuilder:** Modify class to be `abstract` (#9358) ([ca4de2d](https://github.com/discordjs/discord.js/commit/ca4de2d9c6bc204e85d1b7eae7eabd23dbeb4475))
+- Correct `@link` tags that involve parents (#9351) ([fbbce3e](https://github.com/discordjs/discord.js/commit/fbbce3eb4ba20bc0c4806ca2259d1f86001594be))
+- Fix external links (#9313) ([a7425c2](https://github.com/discordjs/discord.js/commit/a7425c29c4f23f1b31f4c6a463107ca9eb7fd7e2))
+
+## Documentation
+
+- Reference package names properly (#9426) ([d6bca9b](https://github.com/discordjs/discord.js/commit/d6bca9bb4d976dc069a5039250db7d5b3e9142ef))
+- Generate static imports for types with api-extractor ([98a76db](https://github.com/discordjs/discord.js/commit/98a76db482879f79d6bb2fb2e5fc65ac2c34e2d9))
+- **builders:** Add some basic documentation (#9359) ([8073561](https://github.com/discordjs/discord.js/commit/8073561824f911d1a18d0b4f1de39f452bc69fa9))
+- Use `@link` in `@see` (#9348) ([d66d113](https://github.com/discordjs/discord.js/commit/d66d1133331b81563588db4500c63a18c3c3dfae))
+
 # [@discordjs/builders@1.6.3](https://github.com/discordjs/discord.js/compare/@discordjs/builders@1.6.2...@discordjs/builders@1.6.3) - (2023-05-01)
 
 ## Refactor

packages/builders/README.md

@@ -23,7 +23,7 @@
 
 ## Installation
 
-**Node.js 16.9.0 or newer is required.**
+**Node.js 16.11.0 or newer is required.**
 
 ```sh
 npm install @discordjs/builders

packages/builders/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@discordjs/builders",
-	"version": "1.6.3",
+	"version": "1.6.5",
 	"description": "A set of builders that you can use when creating your bot",
 	"scripts": {
 		"test": "vitest run",
@@ -58,31 +58,31 @@
 	"dependencies": {
 		"@discordjs/formatters": "workspace:^",
 		"@discordjs/util": "workspace:^",
-		"@sapphire/shapeshift": "^3.8.2",
-		"discord-api-types": "^0.37.41",
+		"@sapphire/shapeshift": "^3.9.2",
+		"discord-api-types": "0.37.50",
 		"fast-deep-equal": "^3.1.3",
 		"ts-mixer": "^6.0.3",
-		"tslib": "^2.5.0"
+		"tslib": "^2.6.1"
 	},
 	"devDependencies": {
-		"@favware/cliff-jumper": "^2.0.0",
-		"@microsoft/api-extractor": "^7.34.8",
-		"@types/node": "16.18.25",
-		"@vitest/coverage-c8": "^0.31.0",
+		"@favware/cliff-jumper": "^2.1.1",
+		"@microsoft/api-extractor": "^7.36.4",
+		"@types/node": "16.18.40",
+		"@vitest/coverage-v8": "^0.34.2",
 		"cross-env": "^7.0.3",
 		"downlevel-dts": "^0.11.0",
-		"esbuild-plugin-version-injector": "^1.1.0",
-		"eslint": "^8.39.0",
-		"eslint-config-neon": "^0.1.46",
+		"esbuild-plugin-version-injector": "^1.2.0",
+		"eslint": "^8.47.0",
+		"eslint-config-neon": "^0.1.47",
 		"eslint-formatter-pretty": "^5.0.0",
 		"prettier": "^2.8.8",
-		"tsup": "^6.7.0",
-		"turbo": "^1.9.4-canary.9",
-		"typescript": "^5.0.4",
-		"vitest": "^0.31.0"
+		"tsup": "^7.2.0",
+		"turbo": "^1.10.12",
+		"typescript": "^5.1.6",
+		"vitest": "^0.34.2"
 	},
 	"engines": {
-		"node": ">=16.9.0"
+		"node": ">=16.11.0"
 	},
 	"publishConfig": {
 		"access": "public"

packages/builders/src/interactions/slashCommands/mixins/NameAndDescription.ts

@@ -54,7 +54,7 @@ export class SharedNameAndDescription {
 	}
 
 	/**
-	 * SSets a name localization for this command.
+	 * Sets a name localization for this command.
 	 *
 	 * @param locale - The locale to set
 	 * @param localizedName - The localized name for the given `locale`

packages/builders/src/interactions/slashCommands/options/integer.ts

@@ -52,7 +52,7 @@ export class SlashCommandIntegerOption
 			throw new RangeError('Autocomplete and choices are mutually exclusive to each other.');
 		}
 
-		return { ...this };
+		return { ...this } as APIApplicationCommandIntegerOption;
 	}
 }
 

packages/builders/src/interactions/slashCommands/options/number.ts

@@ -52,7 +52,7 @@ export class SlashCommandNumberOption
 			throw new RangeError('Autocomplete and choices are mutually exclusive to each other.');
 		}
 
-		return { ...this };
+		return { ...this } as APIApplicationCommandNumberOption;
 	}
 }