chore(core): release @discordjs/core@2.2.0

fix(ClientUser): remove token assignment

.github/.kodiak.toml

@@ -2,7 +2,7 @@ version = 1
 
 [merge]
 require_automerge_label = false
-blocking_labels = ['blocked', 'in review', 'semver:major']
+blocking_labels = ['blocked', 'in review']
 method = 'squash'
 
 [merge.message]

.github/CODEOWNERS

@@ -1,18 +1,13 @@
 # Learn how to add code owners here:
-# https://help.github.com/articles/about-code-owners
+# https://help.github.com/en/articles/about-code-owners
 
 * @iCrawl
 
-package.json @discordjs/core
-pnpm-lock.yaml @discordjs/core
-
 /apps/guide/ @discordjs/website @discordjs/guide
 /apps/guide/src/content/ @discordjs/guide
 /apps/website/ @discordjs/website
 
 /packages/actions/ @discordjs/actions
-/packages/api-extractor/ @discordjs/api-extractor-utils
-/packages/api-extractor-model/ @discordjs/api-extractor-utils
 /packages/api-extractor-utils/ @discordjs/api-extractor-utils
 /packages/brokers/ @discordjs/brokers
 /packages/builders/ @discordjs/builders

.github/ISSUE_TEMPLATE/01-package_bug_report.yml

@@ -62,7 +62,7 @@ body:
       description: List necessary versions here. This includes your package version, runtime version, operating system etc.
       placeholder: |
         - discord.js 14.12.1 (`npm ls discord.js` or another package)
-        - Node.js 22.12.0 (`node --version`)
+        - Node.js 16.11.0 (`node --version`)
         - TypeScript 5.1.6 (`npm ls typescript` if you use it)
         - macOS Ventura 13.3.1
     validations:
@@ -107,7 +107,7 @@ body:
         - Guilds
         - GuildMembers
         - GuildModeration
-        - GuildExpressions
+        - GuildEmojisAndStickers
         - GuildIntegrations
         - GuildWebhooks
         - GuildInvites

.github/labels.yml

@@ -10,8 +10,6 @@
   color: 7ef7ef
 - name: backport
   color: 88aabb
-- name: backport-candidate
-  color: 0075ca
 - name: blocked
   color: fc1423
 - name: bug
@@ -40,6 +38,8 @@
   color: 80c042
 - name: good first issue
   color: 7057ff
+- name: has PR
+  color: 4b1f8e
 - name: help wanted
   color: '008672'
 - name: in progress

.github/workflows/deploy-website.yml

@@ -16,10 +16,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache

.github/workflows/deprecate-version.yml

@@ -36,10 +36,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache

.github/workflows/documentation.yml

@@ -40,10 +40,10 @@ jobs:
         with:
           ref: ${{ inputs.ref || '' }}
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache
@@ -60,11 +60,8 @@ jobs:
       - name: Build main
         if: ${{ inputs.ref && inputs.ref != 'main' }}
         shell: bash
-        env:
-          COREPACK_ENABLE_STRICT: 0
         run: |
           cd main
-          pnpm self-update 10
           pnpm install --frozen-lockfile --prefer-offline --loglevel error
           pnpm run build
           cd ..
@@ -264,10 +261,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache

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

@@ -12,10 +12,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache

.github/workflows/publish-dev.yml

@@ -47,10 +47,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
           registry-url: https://registry.npmjs.org/
 
       - name: Check the current development version

.github/workflows/publish-docker.yml

@@ -9,10 +9,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache

.github/workflows/publish-release.yml

@@ -16,10 +16,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
           registry-url: https://registry.npmjs.org/
 
       - name: Install dependencies

.github/workflows/tests.yml

@@ -19,10 +19,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Install Node.js v22
+      - name: Install Node.js v20
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache

.npmrc

@@ -0,0 +1,6 @@
+auto-install-peers=false
+resolution-mode=highest
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*@rushstack/node-core-library*
+public-hoist-pattern[]=*jju*

.vscode/settings.json

@@ -1,54 +1,32 @@
 {
 	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-	"eslint.useESLintClass": true,
-	"eslint.useFlatConfig": true,
+	"eslint.experimental.useFlatConfig": true,
+	"eslint.workingDirectories": [
+		{ "directory": "${workspaceFolder}" },
+		{ "pattern": "./apps/*/" },
+		{ "pattern": "./packages/*/" }
+	],
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
 		"source.organizeImports": "never",
-		"source.fixAll.eslint": "always",
-		"source.fixAll": "always"
+		"source.fixAll.eslint": "explicit",
+		"source.fixAll": "explicit"
 	},
 	"editor.trimAutoWhitespace": false,
 	"files.associations": {
+		"api-extractor.json": "jsonc",
+		"api-extractor-docs.json": "jsonc",
 		"tsconfig.json": "jsonc",
-		"tsconfig.eslint.json": "jsonc"
+		"tsconfig.eslint.json": "jsonc",
+		"tsconfig.docs.json": "jsonc"
 	},
 	"files.insertFinalNewline": true,
 	"files.eol": "\n",
-	"search.exclude": {
-		"**/.yarn": true,
-		"**/.next": true,
-		"**/dist": true,
-		"**/coverage": true,
-		"**/test-results": true
-	},
-	"search.followSymlinks": false,
-	"search.useParentIgnoreFiles": true,
-	"files.watcherExclude": {
-		"**/.next/*/**": true,
-		"**/.yarn/*/**": true,
-		"**/coverage/*/**": true,
-		"**/dist/*/**": true,
-		"**/test-results/*/**": true
-	},
-	"unocss.disable": true,
 	"npm.packageManager": "pnpm",
 	"typescript.tsdk": "node_modules/typescript/lib",
 	"typescript.enablePromptUseWorkspaceTsdk": true,
-	"tailwindCSS.experimental.classRegex": [
-		["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]?([^\"'`]+)[\"'`]?"],
-		["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
-		["class:\\s*?[\"'`]([^\"'`]*).*?,"]
-	],
-	"workbench.editor.customLabels.patterns": {
-		"**/app/**/page.tsx": "${dirname} (${filename}.${extname}) - Page",
-		"**/app/**/layout.tsx": "${dirname} (${filename}.${extname}) - Layout",
-		"**/app/**/template.tsx": "${dirname} (${filename}.${extname}) - Template",
-		"**/app/**/error.tsx": "${dirname} (${filename}.${extname}) - Error",
-		"**/app/**/not-found.tsx": "${dirname} (${filename}.${extname}) - Not Found",
-		"**/components/**/page.tsx": "${dirname} (${filename}.${extname}) - Component"
-	},
+	"unocss.disable": true,
 	"deno.enable": false,
 	"deno.enablePaths": ["./packages/create-discord-bot/template/Deno"],
 	"deno.lint": false,

apps/guide/.env.development

@@ -0,0 +1 @@
+METADATA_BASE_URL=http://localhost:3000

apps/guide/.gitignore

@@ -0,0 +1,28 @@
+# Packages
+node_modules
+
+# Log files
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Env
+.env
+.env*.local
+
+# Dist
+.contentlayer
+.next
+public/searchIndex
+src/styles/unocss.css
+
+# Miscellaneous
+.tmp
+.vscode
+lighthouse-results
+

apps/guide/.lintstagedrc.js

@@ -0,0 +1,2 @@
+/** @type {import('lint-staged').Config} */
+module.exports = require('../../.lintstagedrc.json');

apps/guide/.prettierignore

@@ -0,0 +1,7 @@
+.contentlayer
+.next
+.turbo
+.vscode
+coverage
+src/styles/unocss.css
+next-env.d.ts

apps/guide/.prettierrc.js

@@ -0,0 +1,2 @@
+/** @type {import('prettier').Config} */
+module.exports = require('../../.prettierrc.json');

apps/guide/README.md

@@ -0,0 +1,52 @@
+<div align="center">
+	<br />
+	<p>
+		<a href="https://discord.js.org"><img src="https://discord.js.org/static/logo.svg" width="546" alt="discord.js" /></a>
+	</p>
+	<br />
+	<p>
+		<a href="https://discord.gg/djs"><img src="https://img.shields.io/discord/222078108977594368?color=5865F2&logo=discord&logoColor=white" alt="Discord server" /></a>
+		<a href="https://github.com/discordjs/discord.js/actions"><img src="https://github.com/discordjs/discord.js/actions/workflows/test.yml/badge.svg" alt="Build status" /></a>
+	</p>
+	<p>
+		<a href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"><img src="https://raw.githubusercontent.com/discordjs/discord.js/main/.github/powered-by-vercel.svg" alt="Vercel" /></a>
+		<a href="https://www.cloudflare.com"><img src="https://raw.githubusercontent.com/discordjs/discord.js/main/.github/powered-by-workers.png" alt="Cloudflare Workers" height="44" /></a>
+	</p>
+</div>
+
+## About
+
+The official guide for discord.js, made to help you get started easily with the library.
+
+## Links
+
+- [Website][website] ([source][website-source])
+- [Documentation][documentation]
+- [Guide][guide] ([source][guide-source])
+  Also see the v13 to v14 [Update Guide][guide-update], which includes updated and removed items from the library.
+- [discord.js Discord server][discord]
+- [Discord API Discord server][discord-api]
+- [GitHub][source]
+- [Related libraries][related-libs]
+
+## Contributing
+
+Before creating an issue, please ensure that it hasn't already been reported/suggested, and double-check the
+[documentation][documentation].  
+See [the contribution guide][contributing] if you'd like to submit a PR.
+
+## Help
+
+If you don't understand something in the documentation, you are experiencing problems, or you just need a gentle nudge in the right direction, please don't hesitate to join our official [discord.js Server][discord].
+
+[website]: https://discord.js.org
+[website-source]: https://github.com/discordjs/discord.js/tree/main/apps/website
+[documentation]: https://discord.js.org/docs
+[guide]: https://discordjs.guide/
+[guide-source]: https://github.com/discordjs/guide
+[guide-update]: https://discordjs.guide/additional-info/changes-in-v14.html
+[discord]: https://discord.gg/djs
+[discord-api]: https://discord.gg/discord-api
+[source]: https://github.com/discordjs/discord.js/tree/main/apps/guide
+[related-libs]: https://discord.com/developers/docs/topics/community-resources#libraries
+[contributing]: https://github.com/discordjs/discord.js/blob/main/.github/CONTRIBUTING.md

apps/guide/contentlayer.config.ts

@@ -0,0 +1,94 @@
+import { remarkCodeHike } from '@code-hike/mdx';
+import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+import { type Node, toString } from 'hast-util-to-string';
+import { h } from 'hastscript';
+import { escape } from 'html-escaper';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+import codeHikeThemeDarkPlus from './src/styles/code-hike-theme-dark-plus.json';
+
+export const Content = defineDocumentType(() => ({
+	name: 'Content',
+	filePathPattern: `**/*.mdx`,
+	contentType: 'mdx',
+	fields: {
+		title: {
+			type: 'string',
+			required: true,
+		},
+		category: {
+			type: 'string',
+			required: true,
+		},
+	},
+	computedFields: {
+		slug: {
+			type: 'string',
+			// eslint-disable-next-line unicorn/prefer-string-replace-all
+			resolve: (doc) => doc._raw.flattenedPath.replace(/\d+-/g, ''),
+		},
+		url: {
+			type: 'string',
+			// eslint-disable-next-line unicorn/prefer-string-replace-all
+			resolve: (doc) => `/guide/${doc._raw.flattenedPath.replace(/\d+-/g, '')}`,
+		},
+	},
+}));
+
+const LinkIcon = h(
+	'svg',
+	{
+		width: '1.25rem',
+		height: '1.25rem',
+		viewBox: '0 0 24 24',
+		fill: 'none',
+		stroke: 'currentColor',
+		strokeWidth: '2',
+		strokeLinecap: 'round',
+		strokeLinejoin: 'round',
+	},
+	h('path', {
+		// eslint-disable-next-line id-length
+		d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
+	}),
+	h('path', {
+		// eslint-disable-next-line id-length
+		d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+	}),
+);
+
+const createSROnlyLabel = (text: any) => {
+	return h('span', { class: 'sr-only' }, `Section titled ${escape(text)}`);
+};
+
+export default makeSource({
+	contentDirPath: 'src/content',
+	documentTypes: [Content],
+	mdx: {
+		remarkPlugins: [remarkGfm, [remarkCodeHike, { theme: codeHikeThemeDarkPlus, lineNumbers: true }]],
+		rehypePlugins: [
+			rehypeSlug,
+			[
+				rehypeAutolinkHeadings,
+				{
+					properties: {
+						class:
+							'relative inline-flex place-items-center place-content-center outline-none text-black dark:text-white pr-2 -ml-8 opacity-0 group-hover:opacity-100',
+					},
+					behavior: 'prepend',
+					content: (heading: Node) => [
+						h(
+							`span.anchor-icon`,
+							{
+								ariaHidden: 'true',
+							},
+							LinkIcon,
+						),
+						createSROnlyLabel(toString(heading)),
+					],
+				},
+			],
+		],
+	},
+});

apps/guide/next-env.d.ts

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

apps/guide/next.config.js

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
+// import { withContentlayer } from 'next-contentlayer';
+const { withContentlayer } = require('next-contentlayer');
+
+module.exports = withContentlayer({
+	reactStrictMode: true,
+	experimental: {
+		typedRoutes: true,
+	},
+	images: {
+		dangerouslyAllowSVG: true,
+		contentDispositionType: 'attachment',
+		contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
+	},
+	poweredByHeader: false,
+});

apps/guide/package.json

@@ -0,0 +1,99 @@
+{
+	"$schema": "https://json.schemastore.org/package.json",
+	"name": "@discordjs/guide",
+	"version": "0.1.0",
+	"description": "Imagine a guide... that explores the many possibilities for your discord.js bot",
+	"private": true,
+	"scripts": {
+		"test": "vitest run",
+		"build:check": "tsc --noEmit",
+		"build:local": "pnpm run build:prod",
+		"build:prod": "next build",
+		"build:analyze": "cross-env ANALYZE=true pnpm run build:prod",
+		"preview": "next start",
+		"dev": "next dev",
+		"generate:contentlayer": "contentlayer build",
+		"lint": "pnpm run build:check && prettier --check . && cross-env TIMING=1 eslint --format=pretty src",
+		"format": "pnpm run build:check && prettier --write . && cross-env TIMING=1 eslint --fix --format=pretty src",
+		"fmt": "pnpm run format"
+	},
+	"type": "commonjs",
+	"directories": {
+		"lib": "src"
+	},
+	"contributors": [
+		"Crawl <icrawltogo@gmail.com>"
+	],
+	"license": "Apache-2.0",
+	"keywords": [
+		"discord",
+		"api",
+		"bot",
+		"client",
+		"node",
+		"discordapp",
+		"discordjs"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/discordjs/discord.js.git",
+		"directory": "apps/guide"
+	},
+	"bugs": {
+		"url": "https://github.com/discordjs/discord.js/issues"
+	},
+	"homepage": "https://discord.js.org",
+	"funding": "https://github.com/discordjs/discord.js?sponsor",
+	"dependencies": {
+		"@code-hike/mdx": "^0.9.0",
+		"@discordjs/ui": "workspace:^",
+		"@react-icons/all-files": "^4.1.0",
+		"@vercel/analytics": "^1.3.1",
+		"@vercel/edge-config": "^1.1.1",
+		"@vercel/og": "^0.6.2",
+		"ariakit": "2.0.0-next.44",
+		"cmdk": "^1.0.0",
+		"contentlayer": "^0.3.4",
+		"next": "^14.2.3",
+		"next-contentlayer": "^0.3.4",
+		"next-themes": "^0.3.0",
+		"react": "^18.3.1",
+		"react-custom-scrollbars-2": "^4.5.0",
+		"react-dom": "^18.3.1",
+		"rehype-autolink-headings": "^6.1.1",
+		"rehype-slug": "^5.1.0",
+		"remark-gfm": "^3.0.1",
+		"sharp": "^0.33.4"
+	},
+	"devDependencies": {
+		"@testing-library/react": "^15.0.7",
+		"@testing-library/user-event": "^14.5.2",
+		"@types/html-escaper": "^3.0.2",
+		"@types/node": "^18.19.45",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@unocss/eslint-plugin": "^0.60.4",
+		"@unocss/postcss": "^0.60.4",
+		"@unocss/reset": "^0.60.4",
+		"@vitejs/plugin-react": "^4.3.0",
+		"@vitest/coverage-v8": "^2.0.5",
+		"cross-env": "^7.0.3",
+		"eslint": "^8.57.0",
+		"eslint-config-neon": "^0.1.62",
+		"eslint-formatter-pretty": "^6.0.1",
+		"happy-dom": "^14.12.0",
+		"hast-util-to-string": "^2.0.0",
+		"hastscript": "^8.0.0",
+		"html-escaper": "^3.0.3",
+		"postcss": "^8.4.38",
+		"prettier": "^3.3.3",
+		"turbo": "^2.0.14",
+		"typescript": "~5.5.4",
+		"unocss": "^0.60.4",
+		"vercel": "^37.0.0",
+		"vitest": "^2.0.5"
+	},
+	"engines": {
+		"node": ">=18"
+	}
+}

apps/guide/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+	plugins: {
+		'@unocss/postcss': {},
+	},
+};

apps/guide/public/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png"/>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <square310x310logo src="/mstile-310x310.png"/>
+            <wide310x150logo src="/mstile-310x150.png"/>
+            <TileColor>#090a16</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

apps/guide/public/safari-pinned-tab.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 2000 l0 -2000 2000 0 2000 0 0 2000 0 2000 -2000 0 -2000 0 0
+-2000z m1305 795 c219 -47 373 -197 421 -411 24 -109 16 -315 -16 -399 l-23
+-61 -59 -11 c-110 -21 -182 -92 -203 -202 -11 -56 -11 -56 -68 -79 -76 -30
+-201 -42 -464 -42 l-223 0 0 610 0 610 283 0 c210 0 300 -4 352 -15z m890
+-585 c0 -543 -2 -601 -18 -659 -56 -198 -190 -334 -365 -370 -176 -37 -349 5
+-471 115 -48 44 -111 134 -111 161 0 6 19 14 43 18 23 4 73 18 110 32 l68 24
+50 -45 c56 -50 98 -66 175 -66 100 0 207 81 234 178 6 23 10 251 10 625 l0
+588 138 -3 137 -3 0 -595z m930 570 c93 -29 197 -84 252 -134 l44 -41 -61 -75
+c-34 -41 -67 -81 -74 -88 -10 -10 -25 -4 -78 32 -95 63 -154 81 -268 81 -79 0
+-103 -4 -142 -23 -62 -31 -90 -71 -96 -137 -8 -94 28 -137 168 -202 157 -73
+172 -80 240 -108 236 -97 341 -215 356 -400 16 -193 -82 -363 -258 -449 -91
+-45 -187 -66 -303 -66 -191 0 -390 74 -524 195 l-40 37 80 93 80 94 73 -53
+c168 -121 353 -155 491 -92 72 33 108 82 113 155 9 122 -37 162 -323 286 -258
+111 -350 179 -407 300 -69 148 -37 343 75 463 61 65 195 133 300 152 79 14
+222 4 302 -20z m-1367 -977 c45 -34 65 -69 70 -125 4 -61 -19 -106 -77 -145
+-90 -60 -226 3 -238 111 -3 24 -3 56 1 70 8 34 54 86 91 102 40 19 120 12 153
+-13z"/>
+<path d="M967 2543 c-4 -3 -7 -159 -7 -346 l0 -339 128 4 c101 3 136 8 172 24
+106 48 162 145 168 292 10 214 -69 334 -238 361 -73 12 -213 15 -223 4z"/>
+</g>
+</svg>

apps/guide/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+	"name": "discord.js guide",
+	"short_name": "discord.js guide",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-384x384.png",
+			"sizes": "384x384",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#1a1b1e",
+	"background_color": "#1a1b1e",
+	"display": "standalone"
+}

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

@@ -0,0 +1,26 @@
+'use client';
+
+import { inter } from '~/util/fonts';
+import { Providers } from './providers';
+
+import '~/styles/cmdk.css';
+import '~/styles/main.css';
+
+export default function GlobalError({ error }: { readonly error: Error }) {
+	console.error(error);
+
+	return (
+		<html className={inter.variable} lang="en" suppressHydrationWarning>
+			<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
+				<Providers>
+					<main className="mx-auto max-w-2xl min-h-screen">
+						<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+							<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
+							<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
+						</div>
+					</main>
+				</Providers>
+			</body>
+		</html>
+	);
+}

apps/guide/src/app/error.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+export default function Error({ error }: { readonly error: Error }) {
+	console.error(error);
+
+	return (
+		<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
+			<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
+		</div>
+	);
+}

apps/guide/src/app/guide/[...slug]/not-found.tsx

@@ -0,0 +1 @@
+export { default } from '~/app/not-found';

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

@@ -0,0 +1,21 @@
+import { notFound } from 'next/navigation';
+import { allContents } from 'contentlayer/generated';
+import { Mdx } from '~/components/Mdx';
+
+export async function generateStaticParams() {
+	return allContents.map((content) => ({ slug: [content.slug] }));
+}
+
+export default function Page({ params }: { readonly params: { slug: string[] } }) {
+	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
+
+	if (!content) {
+		notFound();
+	}
+
+	return (
+		<article className="max-w-none px-5 prose">
+			<Mdx code={content?.body.code ?? ''} />
+		</article>
+	);
+}

apps/guide/src/app/guide/layout.tsx

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+import Footer from '~/components/Footer';
+import Header from '~/components/Header';
+import { Nav } from '~/components/Nav';
+import { Providers } from './providers';
+
+export default function Layout({ children }: PropsWithChildren) {
+	return (
+		<Providers>
+			<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
+				<Header />
+				<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
+					<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
+						<Nav />
+					</div>
+
+					<div className="mx-auto max-w-5xl min-w-xs w-full pb-10">
+						{children}
+						<Footer />
+					</div>
+				</div>
+			</main>
+		</Providers>
+	);
+}

apps/guide/src/app/guide/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+	return null;
+}

apps/guide/src/app/guide/providers.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { PropsWithChildren } from 'react';
+import { NavProvider } from '~/contexts/nav';
+
+export function Providers({ children }: PropsWithChildren) {
+	return <NavProvider>{children}</NavProvider>;
+}

apps/guide/src/app/layout.tsx

@@ -0,0 +1,84 @@
+import { Analytics } from '@vercel/analytics/react';
+import type { Metadata, Viewport } from 'next';
+import type { PropsWithChildren } from 'react';
+import { DESCRIPTION } from '~/util/constants';
+import { inter, jetBrainsMono } from '~/util/fonts';
+import { Providers } from './providers';
+
+import '~/styles/cmdk.css';
+import '@code-hike/mdx/styles.css';
+import '~/styles/ch.css';
+import '~/styles/main.css';
+
+export const viewport: Viewport = {
+	themeColor: [
+		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
+		{ media: '(prefers-color-scheme: dark)', color: '#181818' },
+	],
+	colorScheme: 'light dark',
+};
+
+export const metadata: Metadata = {
+	metadataBase: new URL(
+		process.env.METADATA_BASE_URL ? process.env.METADATA_BASE_URL : `http://localhost:${process.env.PORT ?? 3_000}`,
+	),
+	title: 'discord.js',
+	description: DESCRIPTION,
+	icons: {
+		other: [
+			{
+				url: '/favicon-32x32.png',
+				sizes: '32x32',
+				type: 'image/png',
+			},
+			{
+				url: '/favicon-16x16.png',
+				sizes: '16x16',
+				type: 'image/png',
+			},
+		],
+		apple: [
+			'/apple-touch-icon.png',
+			{
+				url: '/safari-pinned-tab.svg',
+				rel: 'mask-icon',
+			},
+		],
+	},
+
+	manifest: '/site.webmanifest',
+
+	appleWebApp: {
+		title: 'discord.js',
+	},
+
+	applicationName: 'discord.js',
+
+	openGraph: {
+		siteName: 'discord.js',
+		type: 'website',
+		title: 'discord.js',
+		description: DESCRIPTION,
+		images: 'https://discordjs.dev/api/open-graph.png',
+	},
+
+	twitter: {
+		card: 'summary_large_image',
+		creator: '@iCrawlToGo',
+	},
+
+	other: {
+		'msapplication-TileColor': '#090a16',
+	},
+};
+
+export default function RootLayout({ children }: PropsWithChildren) {
+	return (
+		<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
+			<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
+				<Providers>{children}</Providers>
+				<Analytics />
+			</body>
+		</html>
+	);
+}

apps/guide/src/app/loading.tsx

@@ -0,0 +1,20 @@
+export default function Loading() {
+	return (
+		<div className="mx-4 min-h-screen flex flex-col items-center justify-center gap-4">
+			<svg
+				className="h-9 w-9 animate-spin text-black dark:text-white"
+				fill="none"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+				<path
+					className="opacity-75 dark:opacity-100"
+					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					fill="currentColor"
+				/>
+			</svg>
+			<div className="text-lg font-medium">Loading...</div>
+		</div>
+	);
+}

apps/guide/src/app/not-found.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+	return (
+		<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
+			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
+			<Link
+				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base text-white font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+				href="/guide"
+			>
+				Take me back
+			</Link>
+		</div>
+	);
+}

apps/guide/src/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+	return null;
+}

apps/guide/src/app/providers.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import type { PropsWithChildren } from 'react';
+
+export function Providers({ children }: PropsWithChildren) {
+	return <ThemeProvider attribute="class">{children}</ThemeProvider>;
+}

apps/guide/src/assets/powered-by-vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="212" height="44" fill="none"><rect width="212" height="44" fill="#000" rx="8"/><path fill="#fff" d="M60.438 15.227V26.5h1.406v-4.023h2.836c2.117 0 3.625-1.493 3.625-3.602 0-2.148-1.477-3.648-3.61-3.648h-4.257Zm1.406 1.25h2.484c1.633 0 2.531.851 2.531 2.398 0 1.492-.93 2.352-2.53 2.352h-2.485v-4.75Zm11.5 10.171c2.399 0 3.883-1.656 3.883-4.359 0-2.71-1.484-4.36-3.883-4.36-2.398 0-3.883 1.65-3.883 4.36 0 2.703 1.485 4.36 3.883 4.36Zm0-1.21c-1.594 0-2.492-1.157-2.492-3.149 0-2 .898-3.148 2.492-3.148 1.594 0 2.492 1.148 2.492 3.148 0 1.992-.898 3.148-2.492 3.148Zm15.954-7.36h-1.352l-1.656 6.735h-.125l-1.883-6.735h-1.29l-1.882 6.735h-.125l-1.656-6.735h-1.36l2.36 8.422h1.36l1.874-6.516h.125l1.883 6.516h1.367l2.36-8.422Zm4.523 1.04c1.336 0 2.227.984 2.258 2.476h-4.64c.101-1.492 1.039-2.477 2.382-2.477Zm2.219 5.202c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.36-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.46 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H96.04Zm3.242 2.18h1.344v-5.219c0-1.187.93-2.047 2.211-2.047.266 0 .75.047.86.078V17.97a5.77 5.77 0 0 0-.672-.04c-1.117 0-2.086.579-2.336 1.4h-.125v-1.25h-1.281V26.5Zm8.899-7.383c1.336 0 2.227.985 2.258 2.477h-4.641c.102-1.492 1.04-2.477 2.383-2.477Zm2.219 5.203c-.352.742-1.086 1.14-2.172 1.14-1.43 0-2.359-1.054-2.43-2.718v-.062h6.055v-.516c0-2.617-1.383-4.234-3.656-4.234-2.313 0-3.797 1.718-3.797 4.367 0 2.664 1.461 4.351 3.797 4.351 1.844 0 3.156-.89 3.547-2.328H110.4Zm6.36 2.328c1.164 0 2.164-.554 2.695-1.492h.125V26.5h1.281V14.734h-1.343v4.672h-.118c-.476-.922-1.468-1.476-2.64-1.476-2.141 0-3.539 1.718-3.539 4.36 0 2.648 1.382 4.358 3.539 4.358Zm.312-7.507c1.524 0 2.477 1.218 2.477 3.148 0 1.945-.946 3.148-2.477 3.148-1.539 0-2.461-1.18-2.461-3.148 0-1.96.93-3.148 2.461-3.148Zm14.462 7.507c2.133 0 3.531-1.726 3.531-4.359 0-2.648-1.391-4.36-3.531-4.36-1.156 0-2.18.571-2.641 1.477h-.125v-4.672h-1.344V26.5h1.282v-1.344h.125c.531.938 1.531 1.492 2.703 1.492Zm-.313-7.507c1.539 0 2.453 1.18 2.453 3.148 0 1.969-.914 3.148-2.453 3.148-1.531 0-2.484-1.203-2.484-3.148s.953-3.148 2.484-3.148Zm6.04 10.406c1.492 0 2.164-.578 2.882-2.531l3.29-8.938h-1.43l-2.305 6.93h-.125l-2.312-6.93h-1.453l3.117 8.43-.157.5c-.351 1.015-.773 1.383-1.546 1.383-.188 0-.399-.008-.563-.04V29.5c.188.031.422.047.602.047Zm17.391-3.047 3.898-11.273h-2.148l-2.813 8.921h-.132l-2.836-8.921h-2.227l3.938 11.273h2.32Zm8.016-7.18c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078Zm1.984 4.828c-.281.633-.945.985-1.906.985-1.273 0-2.094-.89-2.141-2.313v-.101h5.969v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.031 4.414c2.016 0 3.446-.969 3.797-2.524h-1.836Zm3.547 2.352h1.938v-4.938c0-1.195.875-1.976 2.133-1.976.328 0 .843.055.992.11v-1.798c-.18-.054-.524-.085-.805-.085-1.101 0-2.023.625-2.258 1.468h-.132v-1.328h-1.868V26.5Zm13.501-5.672c-.203-1.797-1.532-3.047-3.727-3.047-2.57 0-4.078 1.649-4.078 4.422 0 2.813 1.516 4.469 4.086 4.469 2.164 0 3.508-1.203 3.719-2.992h-1.844c-.203.89-.875 1.367-1.883 1.367-1.32 0-2.117-1.047-2.117-2.844 0-1.773.789-2.797 2.117-2.797 1.063 0 1.703.594 1.883 1.422h1.844Zm5.117-1.508c1.164 0 1.93.813 1.969 2.078h-4.024c.086-1.25.899-2.078 2.055-2.078Zm1.985 4.828c-.282.633-.946.985-1.907.985-1.273 0-2.093-.89-2.14-2.313v-.101h5.968v-.625c0-2.696-1.461-4.313-3.898-4.313-2.477 0-4.016 1.727-4.016 4.477s1.516 4.414 4.032 4.414c2.015 0 3.445-.969 3.796-2.524h-1.835Zm3.625 2.352h1.937V14.648h-1.937V26.5ZM23.325 13l9.325 16H14l9.325-16Z"/><path stroke="#5E5E5E" d="M43.5 0v44"/></svg>

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

@@ -0,0 +1,86 @@
+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 {
+	/**
+	 * Whether to apply brackets to the end of the symbol to denote a method.
+	 *
+	 * @remarks Functions automatically infer this.
+	 */
+	readonly brackets?: boolean;
+	/**
+	 * The package.
+	 *
+	 * @defaultValue `'discord.js'`
+	 */
+	readonly package?: (typeof PACKAGES)[number];
+	/**
+	 * The initial documentation class, function, interface etc.
+	 *
+	 * @example `'Client'`
+	 */
+	readonly parent?: string;
+	/**
+	 * Whether to reference a static property.
+	 *
+	 * @remarks
+	 * This should only be used for the https://discord.js.org domain
+	 * as static properties are not identified in the URL.
+	 */
+	readonly static?: boolean;
+	/**
+	 * The symbol belonging to the parent.
+	 *
+	 * @example '`login'`
+	 */
+	readonly symbol?: string;
+	/**
+	 * The type of the {@link DocsLinkOptions.parent}.
+	 *
+	 * @example `'class'`
+	 * @example `'Function'`
+	 */
+	readonly type?: string;
+}
+
+export function DocsLink({
+	package: docs = PACKAGES[0],
+	type,
+	parent,
+	symbol,
+	brackets,
+	static: staticReference,
+	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}`;
+
+	// If there is a type and parent, we need to do some parsing.
+	if (type && parent) {
+		const bracketText = brackets || type?.toUpperCase() === 'FUNCTION' ? '()' : '';
+
+		// Legacy discord.js documentation parsing.
+		if (docs === PACKAGES[0]) {
+			url = `${BASE_URL_LEGACY}/${VERSION}/${type}/${parent}`;
+			if (symbol) url += `?scrollTo=${symbol}`;
+
+			text = `${parent}${symbol ? (symbol.startsWith('s-') ? '.' : '#') : ''}${
+				// eslint-disable-next-line prefer-named-capture-group
+				symbol ? `${symbol.replace(/(e|s)-/, '')}` : ''
+			}${bracketText}`;
+		} else {
+			url += `/${parent}:${type}`;
+			if (symbol) url += `#${symbol}`;
+			text = `${parent}${symbol ? `${staticReference ? '.' : '#'}${symbol}` : ''}${bracketText}`;
+		}
+	}
+
+	return (
+		<a className="inline-flex flex-row place-items-center gap-1" href={url} rel="noopener noreferrer" target="_blank">
+			{children ?? text}
+			<FiExternalLink size={18} />
+		</a>
+	);
+}

apps/guide/src/components/Footer.tsx

@@ -0,0 +1,98 @@
+import Image from 'next/image';
+import vercelLogo from '~/assets/powered-by-vercel.svg';
+import workersLogo from '~/assets/powered-by-workers.png';
+
+export default function Footer() {
+	return (
+		<footer className="md:pl-12 md:pr-12">
+			<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>
+					<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>
+			</div>
+		</footer>
+	);
+}

apps/guide/src/components/H1.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export function H1({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h1 className={`group ${className}`} {...props}>
+			{children}
+		</h1>
+	);
+}

apps/guide/src/components/H2.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export function H2({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h2 className={`group ${className}`} {...props}>
+			{children}
+		</h2>
+	);
+}

apps/guide/src/components/H3.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export function H3({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h3 className={`group ${className}`} {...props}>
+			{children}
+		</h3>
+	);
+}

apps/guide/src/components/H4.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+
+export function H4({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
+	return (
+		<h4 className={`group ${className}`} {...props}>
+			{children}
+		</h4>
+	);
+}

apps/guide/src/components/Header.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
+import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
+import { Button } from 'ariakit/button';
+import type { Route } from 'next';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Fragment, useMemo } from 'react';
+import { useNav } from '~/contexts/nav';
+
+const ThemeSwitcher = dynamic(async () => import('./ThemeSwitcher'));
+
+export default function Header() {
+	const pathname = usePathname();
+	const { setOpened } = useNav();
+
+	const pathElements = useMemo(
+		() =>
+			pathname
+				.split('/')
+				.slice(1)
+				.map((path, idx, original) => (
+					<Link
+						className="rounded outline-none hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
+						href={`/${original.slice(0, idx + 1).join('/')}` as Route}
+						key={`${path}-${idx}`}
+					>
+						{path}
+					</Link>
+				)),
+		[pathname],
+	);
+
+	const breadcrumbs = useMemo(
+		() =>
+			pathElements.flatMap((el, idx, array) => {
+				if (idx === 0) {
+					return (
+						<Fragment key={`${el.key}-${idx}`}>
+							<div className="mx-2">/</div>
+							<div>{el}</div>
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				if (idx !== array.length - 1) {
+					return (
+						<Fragment key={`${el.key}-${idx}`}>
+							<div>{el}</div>
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				return <div key={`${el.key}-${idx}`}>{el}</div>;
+			}),
+		[pathElements],
+	);
+
+	return (
+		<header className="sticky top-4 z-20 border border-light-900 rounded-md bg-white/75 shadow backdrop-blur-md dark:border-dark-100 dark:bg-dark-600/75">
+			<div className="block h-16 px-6">
+				<div className="h-full flex flex-row place-content-between place-items-center gap-8">
+					<Button
+						aria-label="Menu"
+						className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+						onClick={() => setOpened((open) => !open)}
+					>
+						<VscMenu size={24} />
+					</Button>
+					<div className="hidden lg:flex lg:grow lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
+					<div className="flex flex-row place-items-center gap-4">
+						<Button
+							aria-label="GitHub"
+							as="a"
+							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+							href="https://github.com/discordjs/discord.js"
+							rel="external noopener noreferrer"
+							target="_blank"
+						>
+							<VscGithubInverted size={24} />
+						</Button>
+						<ThemeSwitcher />
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}

apps/guide/src/components/Mdx.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+import { DocsLink } from '~/components/DocsLink';
+import { ResultingCode } from '~/components/ResultingCode';
+import { DiscordAPITypesLink } from './DiscordAPITypesLink';
+import { H1 } from './H1';
+import { H2 } from './H2';
+import { H3 } from './H3';
+import { H4 } from './H4';
+
+export function Mdx({ code }: { readonly code: string }) {
+	const Component = useMDXComponent(code);
+
+	return (
+		<Component
+			components={{
+				Alert,
+				Section,
+				DiscordMessages,
+				DiscordMessage,
+				DiscordMessageEmbed,
+				DiscordAPITypesLink,
+				DocsLink,
+				ResultingCode,
+				h1: H1,
+				h2: H2,
+				h3: H3,
+				h4: H4,
+			}}
+		/>
+	);
+}

apps/guide/src/components/Nav.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { useNav } from '~/contexts/nav';
+import { Sidebar } from './Sidebar';
+
+export function Nav() {
+	const { opened } = useNav();
+
+	return (
+		<nav
+			className={`dark:bg-dark-600/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
+				opened ? 'block' : 'hidden'
+			} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
+		>
+			<Scrollbars
+				autoHide
+				className="[&>div]:overscroll-none"
+				hideTracksWhenNotNeeded
+				renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
+				renderTrackVertical={(props) => (
+					<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
+				)}
+				universal
+			>
+				<div className="flex flex-col gap-4 p-3">
+					<Sidebar />
+				</div>
+			</Scrollbars>
+		</nav>
+	);
+}

apps/guide/src/components/Outline.tsx

@@ -0,0 +1,69 @@
+import { useMemo, useState } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+
+const LINK_HEIGHT = 30;
+const INDICATOR_SIZE = 10;
+const INDICATOR_OFFSET = (LINK_HEIGHT - INDICATOR_SIZE) / 2;
+
+export function Outline({ headings }: { readonly headings: any[] }) {
+	// eslint-disable-next-line react/hook-use-state
+	const [active /* setActive */] = useState(0);
+
+	const headingItems = useMemo(
+		() =>
+			headings.map((heading, idx) => (
+				<a
+					className={`dark:border-dark-100 border-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] border-l p-[5px] text-sm outline-none focus:rounded focus:border-0 focus:ring ${
+						idx === active
+							? 'bg-blurple text-white'
+							: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
+					}`}
+					href={`#${heading.slug}`}
+					key={heading.slug}
+					style={{ paddingLeft: `${heading.depth * 14}px` }}
+					title={heading.text}
+				>
+					<span className="line-clamp-1">{heading.text}</span>
+				</a>
+			)),
+		[headings, active],
+	);
+
+	// useEffect(() => {
+	// 	const idx = headings.findIndex((heading) => heading.slug === state.hash?.slice(1));
+	// 	if (idx >= 0) {
+	// 		setActive(idx);
+	// 	}
+	// }, [state, headings]);
+
+	return (
+		<Scrollbars
+			autoHide
+			hideTracksWhenNotNeeded
+			renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
+			renderTrackVertical={(props) => (
+				<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
+			)}
+			universal
+		>
+			<div className="flex flex-col break-all p-3 pb-8">
+				<div className="ml-2 mt-4 flex flex-row gap-2">
+					{/* <VscListSelection size={25} /> */}
+					<span className="font-semibold">Contents</span>
+				</div>
+				<div className="ml-2 mt-4 flex flex-col gap-2">
+					<div className="relative flex flex-col">
+						<div
+							className="absolute h-[10px] w-[10px] border-2 border-black rounded-full bg-blurple dark:border-white"
+							style={{
+								left: INDICATOR_SIZE / 2 + 0.5,
+								transform: `translateY(${active * LINK_HEIGHT + INDICATOR_OFFSET}px)`,
+							}}
+						/>
+						{headingItems}
+					</div>
+				</div>
+			</div>
+		</Scrollbars>
+	);
+}

apps/guide/src/components/PageButton.tsx

@@ -0,0 +1,21 @@
+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"
+			href={url}
+		>
+			<h3 className="text-md font-semibold">{title}</h3>
+			<p className={`${direction === 'next' ? 'ml-auto' : 'mr-auto'} text-sm text-gray-600 dark:text-gray-400`}>
+				{direction === 'next' ? 'Next Page' : 'Previous Page'}
+			</p>
+		</a>
+	);
+}

apps/guide/src/components/ResultingCode.tsx

@@ -0,0 +1,3 @@
+export function ResultingCode() {
+	return null;
+}

apps/guide/src/components/Section.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { Section as DJSSection, type SectionOptions } from '@discordjs/ui';
+import type { PropsWithChildren } from 'react';
+
+export function Section(options: PropsWithChildren<SectionOptions>) {
+	return <DJSSection {...options} />;
+}

apps/guide/src/components/Sidebar.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import type { Route } from 'next';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { allContents } from 'contentlayer/generated';
+import { useNav } from '~/contexts/nav';
+import { Section } from './Section';
+
+const items = allContents.map((content) => ({
+	title: content.title,
+	category: content.category,
+	slug: content.slug,
+	href: content.url,
+}));
+
+function transformItemsByCategory(allContents: typeof items) {
+	return allContents.reduce<Record<string, typeof items>>((accumulator: any, content) => {
+		if (!accumulator[content.category]) {
+			accumulator[content.category] = [];
+		}
+
+		accumulator[content.category].push(content);
+		return accumulator;
+	}, {});
+}
+
+const itemsByCategory = transformItemsByCategory(items);
+
+export function Sidebar() {
+	const pathname = usePathname();
+	const { setOpened } = useNav();
+
+	return (
+		<div className="flex flex-col gap-4">
+			{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 z-10"
+					key={`${category}-${idx}`}
+					title={category}
+				>
+					{itemsByCategory[category]?.map((member, index) => (
+						<Link
+							className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l first:mt-1 p-[5px] pl-6 outline-none focus:rounded focus:border-0 focus:ring ${
+								decodeURIComponent(pathname ?? '') === member.href
+									? 'bg-blurple text-white'
+									: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
+							}`}
+							href={member.href as Route}
+							key={`${member.title}-${index}`}
+							onClick={() => setOpened(false)}
+							title={member.title}
+						>
+							<div className="flex flex-row place-items-center gap-2 lg:text-sm">
+								<span className="truncate">{member.title}</span>
+							</div>
+						</Link>
+					))}
+				</Section>
+			))}
+		</div>
+	);
+}

apps/guide/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
+import { Button } from 'ariakit/button';
+import { useTheme } from 'next-themes';
+
+export default function ThemeSwitcher() {
+	const { resolvedTheme, setTheme } = useTheme();
+	const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+
+	return (
+		<Button
+			aria-label="Toggle theme"
+			className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+			onClick={() => toggleTheme()}
+		>
+			<VscColorMode size={24} />
+		</Button>
+	);
+}

apps/guide/src/content/01-home/01-introduction.mdx

@@ -0,0 +1,32 @@
+---
+title: Introduction
+category: Home
+---
+
+# Introduction
+
+If you're reading this, it probably means you want to learn how to make a bot with discord.js. Awesome! You've come to the right place.
+This guide will teach you things such as:
+
+- How to get a bot [up and running](../getting-started/starting-out) from scratch;
+- In-depth explanations regarding features and concepts of the API (e.g. [intents](../topics/intents), [threads](../topics/threads), [webhooks](../topics/webhooks));
+- And much more.
+
+This guide will also cover subjects like common errors and how to solve them, keeping your code clean, setting up a proper development environment, etc.
+Sounds good? Great! Let's get started.
+
+## Before you begin...
+
+Alright, making a bot is cool and all, but there are some prerequisites to it. To create a bot with discord.js, you should have a fairly decent grasp of JavaScript itself.
+While you _can_ make a bot with very little JavaScript and programming knowledge, trying to do so without understanding the language first will only hinder you. You may get stuck on many uncomplicated issues, struggle with solutions to incredibly easy problems, and all-in-all end up frustrated. Sounds pretty annoying.
+
+If you don't know JavaScript but would like to learn about it, here are a few links to help get you started:
+
+- [Eloquent JavaScript, a free online book](http://eloquentjavascript.net)
+- [JavaScript.info, a modern javascript tutorial](https://javascript.info)
+- [Codecademy's interactive JavaScript course](https://codecademy.com/learn/introduction-to-javascript)
+- [Nodeschool, for both JavaScript and Node.js lessons](https://nodeschool.io)
+- [MDN's JavaScript guide and full documentation](https://developer.mozilla.org/docs/Web/JavaScript)
+- [Google, your best friend](https://google.com)
+
+Take your pick, learn some JavaScript, and once you feel like you're confident enough to make a bot, come back and get started!

apps/guide/src/content/01-home/02-whats-new.mdx

@@ -0,0 +1,49 @@
+---
+title: What's new
+category: Home
+---
+
+# What's new
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar: '/assets/old-guide.png',
+				username: 'discord.js',
+			},
+			command: '/upgrade',
+		}}
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: true,
+			username: 'Guide Bot',
+			time: 'Today at 21:00',
+		}}
+	>
+		This website is new! We will no longer be updating the old guide website.
+	</DiscordMessage>
+</DiscordMessages>
+
+## Site
+
+We have moved from VuePress to [Next.js](https://nextjs.org/)! The source can be found [here](https://github.com/discordjs/discord.js/tree/main/apps/guide).
+
+## Pages
+
+- Pages have been revamped to account for our new [create-discord-bot](https://github.com/discordjs/discord.js/tree/main/packages/create-discord-bot) command-line interface.
+- Popular topic are now simply "topics" that detail usage of a particular concept of the API.
+- Focus is primarily on discord.js, so irrelevant topics have been removed. It may be better to visit the documentation of the package you are using to learn how to use them.
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: true,
+			username: 'Guide Bot',
+			time: 'Today at 21:00',
+		}}
+	>
+		Thank you to all of those that contributed to the development of discord.js and the guide!
+	</DiscordMessage>
+</DiscordMessages>

apps/guide/src/content/01-home/03-how-to-contribute.mdx

@@ -0,0 +1,198 @@
+---
+title: How to contribute
+category: Home
+---
+
+# How to contribute
+
+Since this guide is made specifically for the discord.js community, we want to be sure to provide the most relevant and up-to-date content. We will, of course, make additions to the current pages and add new ones as we see fit, but fulfilling requests is how we know we're providing content you all want the most.
+
+Requests may be as simple as "add an example to the [frequently asked questions](../topics/frequently-asked-questions) page", or as elaborate as "add a page regarding [sharding](../topics/sharding)". We'll do our best to fulfill all requests, as long as they're reasonable.
+
+To make a request, simply head over to [the repository's issue tracker](https://github.com/discordjs/discord.js/issues) and [create a new issue](https://github.com/discordjs/discord.js/issues/new)! Title it appropriately, and let us know exactly what you mean inside the issue description. Make sure that you've looked around the site before making a request; what you want to request might already exist!
+
+<Alert title="Tip" type="info">
+	Remember that you can always [fork the repository](https://github.com/discordjs/discord.js/fork) and [make a pull
+	request](https://github.com/discordjs/discord.js/pulls) if you want to add anything to the guide yourself!
+</Alert>
+
+We'll also get into some of the more advanced features this guide uses below. We recommended you have a look at the [source](https://github.com/discordjs/discord.js/blob/main/apps/guide/src/content/01-home/03-how-to-contribute.mdx) of this page to see exactly how they work.
+
+## Components
+
+Throughout the guide, you'll see some components from the _`@discordjs/ui`_ package:
+
+- _`Alert`_
+- _`Section`_
+- _`DiscordMessages`_, _`DiscordMessage`_, and _`DiscordMessageEmbed`_
+
+Check the source of this page to see them in action!
+
+### Alert
+
+This component may take a _`title`_ and a _`type`_ of _`'danger' | 'info' | 'success' | 'warning'`_.
+
+This uses _`title="Alert" type="info"`_:
+
+<Alert title="Alert" type="info">
+	Use these appropriately!
+</Alert>
+
+### Section
+
+<Section title="Expand me!" padding defaultClosed background gutter>
+Well, hello there!
+
+Whenever some text does not need to be in the main body, you can put it here.
+
+- _`title`_: The title that'll appear.
+- _`padding`_: Adds padding.
+  - _`dense`_: When _`padding`_ is specified, _`dense`_ could make it appear, well, dense.
+- _`defaultClosed`_ Whether the section is closed by default. This one was.
+- _`background`_ Adds background to the content.
+- _`gutter`_: This adds a very small appealing space between the expansion of the section and its content.
+
+</Section>
+
+### DiscordMessages, DiscordMessage, and DiscordMessageEmbed
+
+<DiscordMessages>
+	<DiscordMessage
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: true,
+			time: 'Today at 21:00',
+			username: 'Guide Bot',
+		}}
+	>
+		A _`DiscordMessage`_ must be within _`DiscordMessages`_.
+	</DiscordMessage>
+	<DiscordMessage
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: true,
+			time: 'Today at 21:01',
+			username: 'Guide Bot',
+		}}
+		reply={{
+			author: {
+				avatar: '/assets/discordjs.png',
+				bot: true,
+				username: 'Guide Bot',
+			},
+			content: 'A _`DiscordMessage`_ must be within _`DiscordMessages`_.',
+		}}
+		time="21:02"
+	>
+		It's much better to see the source code of this page to replicate and learn!
+	</DiscordMessage>
+	<DiscordMessage
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: true,
+			time: 'Today at 21:02',
+			username: 'Guide Bot',
+		}}
+	>
+		This message depicts the use of embeds.
+		<>
+			<DiscordMessageEmbed
+				author={{
+					avatar: '/assets/discordjs.png',
+					username: 'Guide Bot',
+				}}
+				footer={{ content: 'Sometimes, titles just have to be.' }}
+				title={{ title: 'An amazing title' }}
+			>
+				This is a description. You can put a description here. It must be descriptive!
+			</DiscordMessageEmbed>
+			<DiscordMessageEmbed
+				author={{
+					avatar: '/assets/discordjs.png',
+					username: 'Guide Bot',
+				}}
+				footer={{ content: "When one amazing title just wasn't enough." }}
+				title={{ title: 'Another amazing title' }}
+			>
+				Multiple embeds!
+			</DiscordMessageEmbed>
+		</>
+	</DiscordMessage>
+	<DiscordMessage
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: true,
+			time: 'Today at 21:03',
+			username: 'Guide Bot',
+		}}
+		interaction={{
+			author: {
+				avatar: '/assets/discordjs.png',
+				bot: true,
+				username: 'Guide Bot',
+			},
+			command: '/interaction',
+		}}
+	>
+		Interactions are supported! I definitely used a command.
+	</DiscordMessage>
+	<DiscordMessage
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: true,
+			color: 'text-red-500',
+			time: 'Today at 21:04',
+			username: 'Guide Bot',
+		}}
+		reply={{
+			author: {
+				avatar: '/assets/snek-bot.jpeg',
+				bot: true,
+				verified: true,
+				color: 'text-blue-500',
+				username: 'Snek Bot',
+			},
+			content: 'You can also have verified bots, like me!',
+		}}
+	>
+		Display colors are supported as well!
+	</DiscordMessage>
+</DiscordMessages>
+
+## Code blocks
+
+We use [Code Hike](https://codehike.org). Here are some example code blocks, which should be easy to grasp and learn upon reading the source code of this page:
+
+<CH.Code>
+
+```ts
+const HELLO = 'hello' as const;
+console.log(HELLO);
+// "ts" is the language of the code block.
+```
+
+</CH.Code>
+
+<CH.Code>
+
+```ts fileName
+const FILE_NAME = 'fileName' as const;
+if (FILE_NAME.includes(' ')) throw new Error('Spaces cannot be used in file names.');
+```
+
+```ts anotherFileName
+const FILE_NAME_2 = 'anotherFileName' as const;
+// Putting code blocks together makes them appear in tabs, just like in your editor.
+```
+
+---
+
+```ts requiredName
+const FILE_NAME_3 = 'requiredName' as const;
+if (!FILE_NAME) throw new Error('There must be a file name to use panels!');
+// The --- divider was used to create a panel.
+```
+
+</CH.Code>
+
+For more information, be sure to check out the [documentation](https://codehike.org/docs/ch-code).

apps/guide/src/content/02-getting-started/01-starting-out.mdx

@@ -0,0 +1,64 @@
+---
+title: Starting out
+category: Getting started
+---
+
+# Starting out
+
+Our [create-discord-bot](https://github.com/discordjs/discord.js/tree/main/packages/create-discord-bot) command-line interface sets up a basic Discord bot to help you get started on your journey.
+
+## Creating your bot
+
+To use discord.js, you'll need to install [Node.js](https://nodejs.org), [Deno](https://deno.com), or [Bun](https://bun.sh). discord.js v14 requires Node.js v16.11.0 or higher, but the long-term support (LTS) version is always recommended. For the purposes of this guide, we will be using Node.js.
+
+<Alert title="Tip" type="info">
+	To check if you already have Node.js installed, run _`node --version`_ in your terminal. If it outputs _`v16.11.0`_ or
+	higher, then you're good to go!
+</Alert>
+
+### Windows
+
+- Download from the [Node.js website](https://nodejs.org).
+- Use [fnm](https://github.com/Schniz/fnm).
+- Use [Volta](https://volta.sh).
+
+### macOS
+
+- Download from the [Node.js website](https://nodejs.org/).
+- Use [fnm](https://github.com/Schniz/fnm).
+- Use [Homebrew](https://formulae.brew.sh/formula/node).
+- Use [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating).
+- Use [Volta](https://volta.sh).
+
+### Linux
+
+- Visit [this page](https://nodejs.org/en/download/package-manager) to determine how you should install Node.js.
+- Use [fnm](https://github.com/Schniz/fnm).
+- Use [nvm](https://github.com/nvm-sh/nvm).
+- Use [Volta](https://volta.sh).
+
+After installing Node.js, you'll be able to create a new application from your desired package manager. If you're starting out fresh, installing Node.js will also install npm, a package manager for Node.js.
+
+<CH.Code lineNumbers={false} showCopyButton={true}>
+
+```sh npm
+npm create discord-bot
+```
+
+```sh yarn
+yarn create discord-bot
+```
+
+```sh pnpm
+pnpm create discord-bot
+```
+
+```sh bun
+bun create discord-bot
+```
+
+</CH.Code>
+
+You'll be asked the directory to create the application in, as well as whether TypeScript should be used. Dependencies will automatically be installed for you. After this, you've just got your startup Discord bot template _nearly_ ready!
+
+In the next section, we will explain how to create an application to interact with Discord's API.

apps/guide/src/content/02-getting-started/02-setting-up-an-application.mdx

@@ -0,0 +1,64 @@
+---
+title: Setting up an application
+category: Getting started
+---
+
+# Setting up an application
+
+You'll need to create an application on Discord's developer portal so your bot has a token to interact with Discord's API.
+
+## Creating the application
+
+Follow these steps:
+
+1. Open the [Discord developer portal](https://discord.com/developers/applications). You'll need to be logged in.
+2. Click on the "New Application" button.
+3. Enter a name and confirm the pop-up window by clicking the "Create" button.
+   - You'll need to agree to the [Developer Terms of Service](https://discord.com/developers/docs/policies-and-agreements/terms-of-service) and [Developer Policy](https://discord.com/developers/docs/policies-and-agreements/developer-policy).
+
+You should see a page like this:
+
+![Successfully created application](/assets/create-app.png)
+
+You can edit your application's name, description, and avatar here. Copy the application id and paste it in the .env file after _`APPLICATION_ID=`_.
+
+Once you've saved your changes, move on by selecting the "Bot" tab in the left pane.
+
+## Your bot's token
+
+<Alert title="Important" type="danger">
+	This section is critical, so pay close attention. It explains what your bot token is, as well as the security aspects
+	of it.
+</Alert>
+
+On the bot tab, you'll see a section like this:
+
+![Bot application](/assets/bot-user.png)
+
+In this panel, you can give your bot a snazzy avatar, set its username, and make it public or private. Your bot's token will be revealed when you press the "Reset Token" button and confirm. Once you've done this, copy it and paste it in the .env file after _`DISCORD_TOKEN=`_.
+
+If you happen to lose this token at some point, you will need to come back to this page and reset it, which will reveal the new token, invalidating all old ones.
+
+### Bot token explanation
+
+A token is essentially your bot's password; it's what your bot uses to login to Discord. With that said, **it is vital that you do not ever share this token with anybody, purposely or accidentally**. If someone does manage to get a hold of your bot's token, they can use your bot as if it were theirs—this means they can perform malicious acts with it.
+
+Tokens look like this: _`NzkyNzE1NDU0MTk2MDg4ODQy.X-hvzA.Ovy4MCQywSkoMRRclStW4xAYK7I`_ (don't worry, we immediately reset this token before even posting it here!). If it's any shorter and looks more like this: _`kxbsDRU5UfAaiO7ar9GFMHSlmTwYaIYn`_, you copied your client secret instead. Make sure to copy the token if you want your bot to work!
+
+### Token leak scenario
+
+Let's imagine that you have a bot on over 1,000 servers, and it took you many, many months of coding and patience to get it on that amount. Your bot's token gets leaked somewhere, and now someone else has it. That person can:
+
+- Spam every server your bot is on;
+- DM spam as many users as possible;
+- Delete as many channels as possible;
+- Kick or ban as many server members as possible;
+- Make your bot leave all of the servers it has joined;
+
+All that and much, much more. Sounds pretty terrible, right? So make sure to keep your bot's token as safe as possible!
+
+<Alert title="Compromised tokens" type="danger">
+	If your bot token has been compromised by committing it to a public repository, posting it in discord.js support etc.
+	or otherwise see your bot's token in danger, return to this page and press "Reset Token". This will invalidate all old
+	tokens belonging to your bot. Keep in mind that you will need to update your bot's token where you used it before.
+</Alert>

apps/guide/src/content/02-getting-started/03-adding-your-bot-to-a-server.mdx

@@ -0,0 +1,48 @@
+---
+title: Adding your bot to a server
+category: Getting started
+---
+
+# Adding your bot to a server
+
+After you [set up an application](./setting-up-an-application), you'll notice it's not in any servers yet. So, how does that work?
+
+Before you're able to see your bot in a server, you will need to add it by using an invite link.
+
+## Bot invite links
+
+The basic version of one such link looks like this:
+
+<CH.Code lineNumbers={false}>
+
+```
+https://discord.com/api/oauth2/authorize?client_id=123456789012345678&permissions=0&scope=bot
+```
+
+</CH.Code>
+
+The structure of the URL is quite simple:
+
+- _`https://discord.com/api/oauth2/authorize`_ is Discord's standard structure for authorizing an OAuth2 application (such as your bot application) for entry to a Discord server.
+- _`client_id=...`_ is to specify _which_ application you want to authorize. You'll need to replace this part with your client's id to create a valid invite link.
+- _`permissions=...`_ describes the permissions that your bot will request to be granted by default upon joining the server you are adding it to.
+- _`scope=bot`_ specifies that you want to add this application as a Discord bot with the ability to create slash commands.
+
+<Alert title="Warning" type="warning">
+	If you get an error message saying "Bot requires a code grant", head over to your application's settings and disable
+	the "Requires OAuth2 Code Grant" option. You shouldn't enable this option unless you know why you need to.
+</Alert>
+
+## Creating and using your invite link
+
+To create an invite link, head back to the [developer portal](https://discord.com/developers/applications), click on your bot application, and open the OAuth2 page.
+
+In the sidebar, you'll find the URL generator. Select the _`bot`_ option. Once you select the _`bot`_ option, a list of permissions will appear, allowing you to configure the permissions your bot needs.
+
+Grab the link via the "Copy" button and send it in a channel in Discord. Click on the link you just sent which should reveal this:
+
+![Bot Authorization page](/assets/bot-auth-page.png)
+
+Choose the server you want to add the bot to and click "Authorize". Congratulations! You've successfully added your bot to your Discord server.
+
+At this point, you should have a Discord bot you created with [create-discord-bot](https://github.com/discordjs/discord.js/tree/main/packages/create-discord-bot) with your .env file populated and your Discord bot in a server. You are now ready to do what you like.

apps/guide/src/content/03-topics/01-frequently-asked-questions.mdx

@@ -0,0 +1,496 @@
+---
+title: Frequently asked questions
+category: Topics
+---
+
+# Frequently asked questions
+
+## Legend
+
+- _`client`_ is a placeholder for the <DocsLink type="class" parent="Client" /> object:  
+  _`const client = new Client({ intents: [GatewayIntentBits.Guilds] });`_.
+
+- _`interaction`_ is a placeholder for the <DocsLink type="class" parent="BaseInteraction" />:  
+  _`client.on(Events.InteractionCreate, interaction => { ... });`_.
+
+- _`guild`_ is a placeholder for the <DocsLink type="class" parent="Guild" /> object:  
+  _`interaction.guild`_ or _`client.guilds.cache.get('id')`_
+
+- _`voiceChannel`_ is a placeholder for the <DocsLink type="class" parent="VoiceChannel" />:  
+  _`interaction.member.voice.channel`_.
+
+For a more detailed explanation of the notations commonly used in this guide, the docs, and the support server, see [here](/additional-info/notation.md).
+
+## Administrative
+
+### How do I ban a user?
+
+<CH.Code>
+
+```js
+const user = interaction.options.getUser('target');
+await guild.members.ban(user);
+```
+
+</CH.Code>
+
+### How do I unban a user?
+
+<CH.Code>
+
+```js
+const user = interaction.options.getUser('target');
+await guild.members.unban(user);
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	Discord validates and resolves user ids for users not on the server in user slash command options. To retrieve and use
+	the full structure from the resulting interaction, you can use the{' '}
+	<DocsLink type="class" parent="CommandInteractionOptionResolver" symbol="getUser" brackets /> method.
+</Alert>
+
+### How do I kick a guild member?
+
+<CH.Code>
+
+```js
+const member = interaction.options.getMember('target');
+await member.kick();
+```
+
+</CH.Code>
+
+### How do I timeout a guild member?
+
+<CH.Code>
+
+```js
+const member = interaction.options.getMember('target');
+await member.timeout(60_000); // Timeout for one minute
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	Timeout durations are measured by the millisecond. The maximum timeout duration you can set is 28 days. To remove a
+	timeout set on a member, pass _`null`_ instead of a timeout duration.
+</Alert>
+
+### How do I add a role to a guild member?
+
+<CH.Code>
+
+```js
+const role = interaction.options.getRole('role');
+const member = interaction.options.getMember('target');
+await member.roles.add(role);
+```
+
+</CH.Code>
+
+### How do I check if a guild member has a specific role?
+
+<CH.Code>
+
+```js
+const role = interaction.options.getRole('role');
+const member = interaction.options.getMember('target');
+
+if (member.roles.cache.has(role.id) {
+	// ...
+}
+```
+
+</CH.Code>
+
+### How do I limit a command to a single user?
+
+<CH.Code>
+
+```js
+if (interaction.user.id === 'id') {
+	// ...
+}
+```
+
+</CH.Code>
+
+## Bot Configuration and Utility
+
+### How do I set my bot's username?
+
+<CH.Code>
+
+```js
+await client.user.setUsername('username');
+```
+
+</CH.Code>
+
+### How do I set my bot's avatar?
+
+<CH.Code>
+
+```js
+await client.user.setAvatar('URL or path');
+```
+
+</CH.Code>
+
+### How do I set my playing status?
+
+<CH.Code>
+
+```js
+client.user.setActivity('activity');
+```
+
+</CH.Code>
+
+### How do I set my status to "Watching/Listening to/Competing in ..."?
+
+<CH.Code>
+
+```js
+import { ActivityType } from 'discord.js';
+
+client.user.setActivity('activity', { type: ActivityType.Watching });
+client.user.setActivity('activity', { type: ActivityType.Listening });
+client.user.setActivity('activity', { type: ActivityType.Competing });
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	If you would like to set your activity upon startup, you can use the{' '}
+	<DocsLink type="typedef" parent="ClientOptions" /> object to set the appropriate
+	<DocsLink type="typedef" parent="PresenceData" />.
+</Alert>
+
+### How do I make my bot display online/idle/dnd/invisible?
+
+<CH.Code>
+
+```js
+client.user.setStatus('online');
+client.user.setStatus('idle');
+client.user.setStatus('dnd');
+client.user.setStatus('invisible');
+```
+
+</CH.Code>
+
+### How do I set both status and activity in one go?
+
+<CH.Code>
+
+```js
+client.user.setPresence({ activities: [{ name: 'activity' }], status: 'idle' });
+```
+
+</CH.Code>
+
+## Miscellaneous
+
+### How do I send a message to a specific channel?
+
+<CH.Code>
+
+```js
+const channel = client.channels.cache.get('id');
+await channel.send('content');
+```
+
+</CH.Code>
+
+### How do I create a post in a forum channel?
+
+<Alert title="Tip" type="info">
+	Currently, the only way to get tag ids is programmatically through{' '}
+	<DocsLink type="class" parent="ForumChannel" symbol="availableTags" />.
+</Alert>
+
+<CH.Code>
+
+```js
+const channel = client.channels.cache.get('id');
+
+await channel.threads.create({
+	name: 'Post name',
+	message: { content: 'Message content' },
+	appliedTags: ['tagId', 'anotherTagId'],
+});
+```
+
+</CH.Code>
+
+### How do I DM a specific user?
+
+<CH.Code>
+
+```js
+await client.users.send('id', 'content');
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	If you want to send a direct message to the user who sent the interaction, you can use _`interaction.user.send()`_.
+</Alert>
+
+### How do I mention a specific user in a message?
+
+<CH.Code>
+
+```js
+const user = interaction.options.getUser('target');
+await interaction.reply(`Hi, ${user}.`);
+await interaction.followUp(`Hi, <@${user.id}>.`);
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	Mentions in embeds may resolve correctly in embed titles, descriptions and field values but will never notify the
+	user. Other areas do not support mentions at all.
+</Alert>
+
+### How do I control which users and/or roles are mentioned in a message?
+
+Controlling which mentions will send a ping is done via the _`allowedMentions`_ option, which replaces _`disableMentions`_.
+
+This can be set as a default in <DocsLink type="typedef" parent="ClientOptions" />, and controlled per-message sent by your bot.
+
+<CH.Code>
+
+```js
+new Client({ allowedMentions: { parse: ['users', 'roles'] } });
+```
+
+</CH.Code>
+
+Even more control can be achieved by listing specific _`users`_ or _`roles`_ to be mentioned by id, e.g.:
+
+<CH.Code>
+
+```js
+await channel.send({
+	content: '<@123456789012345678> <@987654321098765432> <@&102938475665748392>',
+	allowedMentions: { users: ['123456789012345678'], roles: ['102938475665748392'] },
+});
+```
+
+</CH.Code>
+
+### How do I prompt the user for additional input?
+
+<CH.Code>
+
+```js
+await interaction.reply('Please enter more input.');
+const filter = (m) => interaction.user.id === m.author.id;
+
+try {
+	const messages = await interaction.channel.awaitMessages({ filter, time: 60000, max: 1, errors: ['time'] });
+	await interaction.followUp(`You've entered: ${messages.first().content}`);
+} catch {
+	await interaction.followUp('You did not enter any input!');
+}
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	If you want to learn more about this syntax or other types of collectors, check out [this dedicated guide page for
+	collectors](/popular-topics/collectors.md)!
+</Alert>
+
+### How do I block a user from using my bot?
+
+<CH.Code>
+
+```js
+const blockedUsers = ['id1', 'id2'];
+
+client.on(Events.InteractionCreate, (interaction) => {
+	if (blockedUsers.includes(interaction.user.id)) return;
+});
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	You do not need to have a constant local variable like _`blockedUsers`_ above. If you have a database system that you
+	use to store ids of blocked users, you can query the database instead.
+</Alert>
+
+<CH.Code>
+
+```js
+client.on(Events.InteractionCreate, async (interaction) => {
+	const blockedUsers = await database.query('SELECT user_id FROM blocked_users;');
+	if (blockedUsers.includes(interaction.user.id)) return;
+});
+```
+
+</CH.Code>
+
+Note that this is just a showcase of how you could do such a check.
+
+### How do I react to the message my bot sent?
+
+<CH.Code>
+
+```js
+const sentMessage = await interaction.channel.send('My message to react to.');
+// Unicode emoji
+await sentMessage.react('👍');
+
+// Custom emoji
+await sentMessage.react('123456789012345678');
+await sentMessage.react('<emoji:123456789012345678>');
+await sentMessage.react('<a:emoji:123456789012345678>');
+await sentMessage.react('emoji:123456789012345678');
+await sentMessage.react('a:emoji:123456789012345678');
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	If you want to learn more about reactions, check out [this dedicated guide on
+	reactions](/popular-topics/reactions.md)!
+</Alert>
+
+### How do I restart my bot with a command?
+
+<CH.Code>
+
+```js
+process.exit();
+```
+
+</CH.Code>
+
+<Alert title="Warning" type="warning">
+	_`process.exit()`_ will only kill your Node process, but when using [PM2](https://pm2.keymetrics.io/), it will restart
+	the process whenever it gets killed. You can read our guide on PM2 [here](/improving-dev-environment/pm2.md).
+</Alert>
+
+### What is the difference between a User and a GuildMember?
+
+A User represents a global Discord user, and a GuildMember represents a Discord user on a specific server. That means only GuildMembers can have permissions, roles, and nicknames, for example, because all of these things are server-bound information that could be different on each server that the user is in.
+
+### How do I find all online members of a guild?
+
+<CH.Code>
+
+```js
+// First use guild.members.fetch to make sure all members are cached
+const fetchedMembers = await guild.members.fetch({ withPresences: true });
+const totalOnline = fetchedMembers.filter((member) => member.presence?.status === 'online');
+// Now you have a collection with all online member objects in the totalOnline variable
+console.log(`There are currently ${totalOnline.size} members online in this guild!`);
+```
+
+</CH.Code>
+
+<Alert title="Warning" type="warning">
+	This only works correctly if you have the _`GuildPresences`_ intent enabled for your application and client. If you
+	want to learn more about intents, check out [this dedicated guide on intents](/popular-topics/intents.md)!
+</Alert>
+
+### How do I check which role was added/removed and for which member?
+
+<CH.Code>
+
+```js
+// Start by declaring a guildMemberUpdate listener
+// This code should be placed outside of any other listener callbacks to prevent listener nesting
+client.on(Events.GuildMemberUpdate, (oldMember, newMember) => {
+	// If the role(s) are present on the old member object but no longer on the new one (i.e role(s) were removed)
+	const removedRoles = oldMember.roles.cache.filter((role) => !newMember.roles.cache.has(role.id));
+
+	if (removedRoles.size > 0) {
+		console.log(`The roles ${removedRoles.map((r) => r.name)} were removed from ${oldMember.displayName}.`);
+	}
+
+	// If the role(s) are present on the new member object but are not on the old one (i.e role(s) were added)
+	const addedRoles = newMember.roles.cache.filter((role) => !oldMember.roles.cache.has(role.id));
+
+	if (addedRoles.size > 0) {
+		console.log(`The roles ${addedRoles.map((r) => r.name)} were added to ${oldMember.displayName}.`);
+	}
+});
+```
+
+</CH.Code>
+
+### How do I check the bot's ping?
+
+There are two common measurements for bot pings. The first, **websocket heartbeat**, is the average interval of a regularly sent signal indicating the healthy operation of the websocket connection the library receives events over:
+
+<CH.Code>
+
+```js
+await interaction.reply(`Websocket heartbeat: ${client.ws.ping}ms.`);
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+	If you're using [sharding](/sharding/), a specific shard's heartbeat can be found on the WebSocketShard instance,
+	accessible at _`client.ws.shards.get(id).ping`_.
+</Alert>
+
+The second, **Roundtrip Latency**, describes the amount of time a full API roundtrip (from the creation of the command message to the creation of the response message) takes. You then edit the response to the respective value to avoid needing to send yet another message:
+
+<CH.Code>
+
+```js
+const sent = await interaction.reply({ content: 'Pinging...', fetchReply: true });
+await interaction.editReply(`Roundtrip latency: ${sent.createdTimestamp - interaction.createdTimestamp}ms`);
+```
+
+</CH.Code>
+
+### Why do some emojis behave weirdly?
+
+If you've tried using [the usual method of retrieving unicode emojis](./reactions.md#unicode-emojis), you may have noticed that some characters don't provide the expected results. Here's a short snippet that'll help with that issue. You can toss this into a file of its own and use it anywhere you need! Alternatively feel free to simply copy-paste the characters from below:
+
+<CH.Code>
+
+```js index.js
+import { emojiCharacters } from './emojiCharacters.js';
+
+console.log(emojiCharacters.a); // 🇦
+console.log(emojiCharacters[10]); // 🔟
+console.log(emojiCharacters['!']); // ❗
+```
+
+{/* prettier-ignore */}
+```js emojiCharacters.js
+export const emojiCharacters = {
+	a: '🇦', b: '🇧', c: '🇨', d: '🇩',
+	e: '🇪', f: '🇫', g: '🇬', h: '🇭',
+	i: '🇮', j: '🇯', k: '🇰', l: '🇱',
+	m: '🇲', n: '🇳', o: '🇴', p: '🇵',
+	q: '🇶', r: '🇷', s: '🇸', t: '🇹',
+	u: '🇺', v: '🇻', w: '🇼', x: '🇽',
+	y: '🇾', z: '🇿', 0: '0️⃣', 1: '1️⃣',
+	2: '2️⃣', 3: '3️⃣', 4: '4️⃣', 5: '5️⃣',
+	6: '6️⃣', 7: '7️⃣', 8: '8️⃣', 9: '9️⃣',
+	10: '🔟', '#': '#️⃣', '*': '*️⃣',
+	'!': '❗', '?': '❓',
+};
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="info">
+You can use the <kbd>⌃ Control</kbd> <kbd>⌘ Command</kbd> <kbd>Space</kbd> keyboard shortcut to open up an emoji picker that can be used for quick, easy access to all the Unicode emojis available to you.
+
+On Windows, the shortcut is <kbd>⊞</kbd> <kbd>.</kbd>.
+
+</Alert>

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

@@ -0,0 +1,165 @@
+---
+title: Audit logs
+category: Topics
+---
+
+# Audit logs
+
+## A Quick Background
+
+Audit logs are an excellent moderation tool offered by Discord to know what happened in a server and usually by whom. Making use of audit logs requires the _`ViewAuditLog`_ permission. Audit logs may be fetched on a server, or they may be received via the gateway event <DocsLink type="class" parent="Client" symbol="e-guildAuditLogEntryCreate"/> which requires the _`GuildModeration`_ intent.
+
+There are quite a few cases where you may use audit logs. This guide will limit itself to the most common use cases. Feel free to consult the [relevant Discord API page](https://discord.com/developers/docs/resources/audit-log) for more information.
+
+Keep in mind that these examples explore a straightforward case and are by no means exhaustive. Their purpose is to teach you how audit logs work, and expansion of these examples is likely needed to suit your specific use case.
+
+## Fetching Audit Logs
+
+Let's start by glancing at the <DocsLink type="class" parent="Guild" symbol="fetchAuditLogs" brackets /> method and how to work with it. Like many discord.js methods, it returns a [Promise](../additional-info/understanding-async-await) containing the <DocsLink type="class" parent="GuildAuditLogs"/> object. This object has one property, _`entries`_, which holds a [Collection](../additional-info/collections) of <DocsLink type="class" parent="GuildAuditLogsEntry"/> objects, and consequently, the information you want to retrieve.
+
+Here is the most basic fetch to look at some entries.
+
+<CH.Code>
+
+```js
+const fetchedLogs = await guild.fetchAuditLogs();
+const firstEntry = fetchedLogs.entries.first();
+```
+
+</CH.Code>
+
+Simple, right? Now, let's look at utilizing its options:
+
+<CH.Code>
+
+```js
+import { AuditLogEvent } from 'discord.js';
+
+const fetchedLogs = await guild.fetchAuditLogs({
+	type: AuditLogEvent.InviteCreate,
+	limit: 1,
+});
+
+const firstEntry = fetchedLogs.entries.first();
+```
+
+</CH.Code>
+
+This will return the first entry where an invite was created. You used _`limit: 1`_ here to specify only one entry.
+
+## Receiving Audit Logs
+
+Audit logs may be received via the gateway event <DocsLink type="class" parent="Client" symbol="e-guildAuditLogEntryCreate"/>.
+This is the best way to receive audit logs if you want to monitor them. As soon as an audit log entry is created,
+your application will receive an instance of this event. A common use case is to find out _who_ did the action that
+caused the audit log event to happen.
+
+### Who deleted a message?
+
+One of the most common use cases for audit logs is understanding who deleted a message in a Discord server. If a user deleted another user's message, you can find out who did that as soon as you receive the corresponding audit log event.
+
+<Alert title="Tip" type="info">
+	Messages deleted by their author or bots (excluding bulk deletes) do not generate audit log entries.
+</Alert>
+
+<CH.Code>
+
+```js JavaScript
+import { AuditLogEvent, Events } from 'discord.js';
+
+client.on(Events.GuildAuditLogEntryCreate, async (auditLog) => {
+	// Define your variables.
+	// The extra information here will be the channel.
+	const { action, extra: channel, executorId, targetId } = auditLog;
+
+	// Check only for deleted messages.
+	if (action !== AuditLogEvent.MessageDelete) return;
+
+	// Ensure the executor is cached.
+	const executor = await client.users.fetch(executorId);
+
+	// Ensure the author whose message was deleted is cached.
+	const target = await client.users.fetch(targetId);
+
+	// Log the output.
+	console.log(`A message by ${target.tag} was deleted by ${executor.tag} in ${channel}.`);
+});
+```
+
+```ts TypeScript
+import { AuditLogEvent, Events } from 'discord.js';
+
+client.on(Events.GuildAuditLogEntryCreate, async (auditLog) => {
+	// Define your variables.
+	// The extra information here will be the channel.
+	const { action, extra: channel, executorId, targetId } = auditLog;
+
+	// Check only for deleted messages.
+	if (action !== AuditLogEvent.MessageDelete) return;
+
+	// Ensure the executor is cached. The id definitely exists.
+	const executor = await client.users.fetch(executorId!);
+
+	// Ensure the author whose message was deleted is cached. The id definitely exists.
+	const target = await client.users.fetch(targetId!);
+
+	// Log the output.
+	console.log(`A message by ${target.tag} was deleted by ${executor.tag} in ${channel}.`);
+});
+```
+
+</CH.Code>
+
+With this, you now have a very simple logger telling you who deleted a message authored by another person.
+
+### Who kicked a user?
+
+This is very similar to the example above.
+
+<CH.Code>
+
+```js JavaScript
+import { AuditLogEvent, Events } from 'discord.js';
+
+client.on(Events.GuildAuditLogEntryCreate, async (auditLog) => {
+	// Define your variables.
+	const { action, executorId, targetId } = auditLog;
+
+	// Check only for kicked users.
+	if (action !== AuditLogEvent.MemberKick) return;
+
+	// Ensure the executor is cached.
+	const executor = await client.users.fetch(executorId);
+
+	// Ensure the kicked guild member is cached.
+	const kickedUser = await client.users.fetch(targetId);
+
+	// Now you can log the output!
+	console.log(`${kickedUser.tag} was kicked by ${executor.tag}.`);
+});
+```
+
+```ts TypeScript
+import { AuditLogEvent, Events } from 'discord.js';
+
+client.on(Events.GuildAuditLogEntryCreate, async (auditLog) => {
+	// Define your variables.
+	const { action, executorId, targetId } = auditLog;
+
+	// Check only for kicked users.
+	if (action !== AuditLogEvent.MemberKick) return;
+
+	// Ensure the executor is cached. The id definitely exists.
+	const executor = await client.users.fetch(executorId!);
+
+	// Ensure the kicked guild member is cached. The id definitely exists.
+	const kickedUser = await client.users.fetch(targetId!);
+
+	// Now you can log the output!
+	console.log(`${kickedUser.tag} was kicked by ${executor.tag}.`);
+});
+```
+
+</CH.Code>
+
+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.