chore: move website and guide out of packages

2026-03-09 16:13:31 +01:00 · 2022-10-10 01:22:48 +02:00
parent 0a9d57b011
commit 3ed668e539
175 changed files with 428 additions and 487 deletions
--- a/apps/guide/.eslintrc.json
+++ b/apps/guide/.eslintrc.json
@@ -0,0 +1,11 @@
+{
+	"extends": ["../../.eslintrc.json", "neon/react", "neon/astro", "neon/prettier"],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"rules": {
+		"react/jsx-filename-extension": [1, { "extensions": [".tsx", ".astro"] }]
+	}
+}
--- a/apps/guide/.gitignore
+++ b/apps/guide/.gitignore
@@ -0,0 +1,30 @@
+# Packages
+node_modules/
+
+# Log files
+logs/
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Env
+.env
+
+# Dist
+dist/
+typings/
+.cache/
+build/
+api/
+src/styles/unocss.css
+.next/
+
+# Miscellaneous
+.tmp/
+coverage/
+.vercel
+public/searchIndex
--- a/apps/guide/.lintstagedrc.cjs
+++ b/apps/guide/.lintstagedrc.cjs
@@ -0,0 +1 @@
+module.exports = require('../../.lintstagedrc.json');
--- a/apps/guide/.prettierignore
+++ b/apps/guide/.prettierignore
@@ -0,0 +1,15 @@
+# Autogenerated
+CHANGELOG.md
+.turbo
+dist/
+docs/**/*
+!docs/index.yml
+!docs/README.md
+coverage/
+.cache
+build/
+src/styles/unocss.css
+api/
+.next/
+.vercel/
+.cache/
--- a/apps/guide/.prettierrc.cjs
+++ b/apps/guide/.prettierrc.cjs
@@ -0,0 +1 @@
+module.exports = require('../../.prettierrc.json');
--- a/apps/guide/README.md
+++ b/apps/guide/README.md
@@ -0,0 +1,46 @@
+<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>
+	</p>
+</div>
+
+## Links
+
+- [Website][website] ([source][website-source])
+- [Documentation][documentation]
+- [Guide][guide] ([source][guide-source])
+  See also the [Update Guide][guide-update], including updated and removed items in the library.
+- [discord.js Discord server][discord]
+- [Discord API Discord server][discord-api]
+- [GitHub][source]
+- [Related libraries][related-libs]
+
+## Contributing
+
+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/
+[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
--- a/apps/guide/astro.config.ts
+++ b/apps/guide/astro.config.ts
@@ -0,0 +1,114 @@
+import { fileURLToPath, URL } from 'node:url';
+import image from '@astrojs/image';
+import mdx from '@astrojs/mdx';
+import prefetch from '@astrojs/prefetch';
+import react from '@astrojs/react';
+import { remarkCodeHike } from '@code-hike/mdx';
+import { defineConfig } from 'astro/config';
+import compress from 'astro-compress';
+import critters from 'astro-critters';
+import { 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 shikiThemeDarkPlus from 'shiki/themes/dark-plus.json' assert { type: 'json' };
+import Unocss from 'unocss/astro';
+
+const LinkIcon = h(
+	'svg',
+	{
+		width: '1rem',
+		height: '1rem',
+		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: string) => {
+	const node = h('span.sr-only', `Section titled ${escape(text)}`);
+	node.properties!['is:raw'] = true;
+	return node;
+};
+
+export default defineConfig({
+	integrations: [
+		react(),
+		mdx(),
+		image({
+			serviceEntryPoint: '@astrojs/image/sharp',
+		}),
+		prefetch({
+			throttle: 3,
+		}),
+		Unocss({
+			configFile: fileURLToPath(new URL('../../packages/ui/unocss.config.ts', import.meta.url)),
+		}),
+		critters(),
+		compress(),
+	],
+	markdown: {
+		remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],
+		rehypePlugins: [
+			rehypeSlug,
+			[
+				rehypeAutolinkHeadings,
+				{
+					properties: {
+						class:
+							'relative inline-flex w-6 h-6 place-items-center place-content-center outline-0 text-black dark:text-white ml-2',
+					},
+					behavior: 'after',
+					group: ({ tagName }) =>
+						h('div', {
+							class: `[&>*]:inline-block [&>h1]:m-0 [&>h2]:m-0 [&>h3]:m-0 [&>h4]:m-0 level-${tagName}`,
+							tabIndex: -1,
+						}),
+					content: (heading) => [
+						h(
+							`span.anchor-icon`,
+							{
+								ariaHidden: 'true',
+							},
+							LinkIcon,
+						),
+						createSROnlyLabel(toString(heading)),
+					],
+				},
+			],
+		],
+		extendDefaultPlugins: true,
+		syntaxHighlight: false,
+	},
+	vite: {
+		resolve: {
+			alias: {
+				'ariakit/button': fileURLToPath(new URL('node_modules/ariakit/esm/button/index.js', import.meta.url)),
+				'ariakit/disclosure': fileURLToPath(new URL('node_modules/ariakit/esm/disclosure/index.js', import.meta.url)),
+				'ariakit/separator': fileURLToPath(new URL('node_modules/ariakit/esm/separator/index.js', import.meta.url)),
+				'ariakit-utils/dom': fileURLToPath(new URL('node_modules/ariakit-utils/esm/dom.js', import.meta.url)),
+				'ariakit-utils/events': fileURLToPath(new URL('node_modules/ariakit-utils/esm/events.js', import.meta.url)),
+				'ariakit-utils/focus': fileURLToPath(new URL('node_modules/ariakit-utils/esm/focus.js', import.meta.url)),
+				'ariakit-utils/hooks': fileURLToPath(new URL('node_modules/ariakit-utils/esm/hooks.js', import.meta.url)),
+				'ariakit-utils/misc': fileURLToPath(new URL('node_modules/ariakit-utils/esm/misc.js', import.meta.url)),
+				'ariakit-utils/platform': fileURLToPath(new URL('node_modules/ariakit-utils/esm/platform.js', import.meta.url)),
+				'ariakit-utils/system': fileURLToPath(new URL('node_modules/ariakit-utils/esm/system.js', import.meta.url)),
+				'react-icons/fi': fileURLToPath(new URL('node_modules/react-icons/fi/index.esm.js', import.meta.url)),
+				'react-icons/vsc': fileURLToPath(new URL('node_modules/react-icons/vsc/index.esm.js', import.meta.url)),
+				'react-use': fileURLToPath(new URL('node_modules/react-use/esm/index.js', import.meta.url)),
+			},
+		},
+	},
+});
--- a/apps/guide/package.json
+++ b/apps/guide/package.json
@@ -0,0 +1,88 @@
+{
+	"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:prod": "yarn workspace @discordjs/ui run build && astro build",
+		"dev": "astro dev",
+		"preview": "astro preview",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix"
+	},
+	"type": "module",
+	"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"
+	},
+	"bugs": {
+		"url": "https://github.com/discordjs/discord.js/issues"
+	},
+	"homepage": "https://discord.js.org",
+	"dependencies": {
+		"@astrojs/image": "^0.9.2",
+		"@astrojs/mdx": "^0.11.4",
+		"@astrojs/react": "^1.1.4",
+		"@code-hike/mdx": "^0.7.4",
+		"@discordjs/ui": "workspace:^",
+		"ariakit": "^2.0.0-next.41",
+		"cmdk": "^0.1.20",
+		"meilisearch": "^0.28.0",
+		"react": "^17.0.2",
+		"react-custom-scrollbars-2": "^4.5.0",
+		"react-dom": "^17.0.2",
+		"react-icons": "^4.4.0",
+		"react-use": "^17.4.0",
+		"sharp": "^0.31.1",
+		"shiki": "^0.11.1"
+	},
+	"devDependencies": {
+		"@astrojs/prefetch": "^0.0.8",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/node": "^16.11.64",
+		"@types/react": "^17.0.50",
+		"@types/react-dom": "^17.0.17",
+		"@types/react-syntax-highlighter": "^15.5.5",
+		"@unocss/cli": "^0.45.29",
+		"@unocss/reset": "^0.45.29",
+		"@vitejs/plugin-react": "^2.1.0",
+		"@vitest/coverage-c8": "^0.24.0",
+		"astro": "^1.4.6",
+		"astro-compress": "^1.0.11",
+		"astro-critters": "^1.0.5",
+		"cross-env": "^7.0.3",
+		"eslint": "^8.25.0",
+		"eslint-config-neon": "^0.1.37",
+		"happy-dom": "^7.4.0",
+		"hast-util-to-string": "^2.0.0",
+		"hastscript": "^7.0.2",
+		"html-escaper": "^3.0.3",
+		"prettier": "^2.7.1",
+		"prettier-plugin-astro": "^0.5.5",
+		"prettier-plugin-tailwindcss": "^0.1.13",
+		"rehype-autolink-headings": "^6.1.1",
+		"rehype-slug": "^5.0.1",
+		"typescript": "^4.8.4",
+		"unocss": "^0.45.29",
+		"vercel": "^28.4.8",
+		"vitest": "^0.24.0"
+	},
+	"engines": {
+		"node": ">=16.9.0"
+	}
+}
--- a/apps/guide/public/android-chrome-192x192.png
+++ b/apps/guide/public/android-chrome-192x192.png
--- a/apps/guide/public/android-chrome-384x384.png
+++ b/apps/guide/public/android-chrome-384x384.png
--- a/apps/guide/public/apple-touch-icon-120x120-precomposed.png
+++ b/apps/guide/public/apple-touch-icon-120x120-precomposed.png
--- a/apps/guide/public/apple-touch-icon-120x120.png
+++ b/apps/guide/public/apple-touch-icon-120x120.png
--- a/apps/guide/public/apple-touch-icon-152x152-precomposed.png
+++ b/apps/guide/public/apple-touch-icon-152x152-precomposed.png
--- a/apps/guide/public/apple-touch-icon-152x152.png
+++ b/apps/guide/public/apple-touch-icon-152x152.png
--- a/apps/guide/public/apple-touch-icon-180x180-precomposed.png
+++ b/apps/guide/public/apple-touch-icon-180x180-precomposed.png
--- a/apps/guide/public/apple-touch-icon-180x180.png
+++ b/apps/guide/public/apple-touch-icon-180x180.png
--- a/apps/guide/public/apple-touch-icon-60x60-precomposed.png
+++ b/apps/guide/public/apple-touch-icon-60x60-precomposed.png
--- a/apps/guide/public/apple-touch-icon-60x60.png
+++ b/apps/guide/public/apple-touch-icon-60x60.png
--- a/apps/guide/public/apple-touch-icon-76x76-precomposed.png
+++ b/apps/guide/public/apple-touch-icon-76x76-precomposed.png
--- a/apps/guide/public/apple-touch-icon-76x76.png
+++ b/apps/guide/public/apple-touch-icon-76x76.png
--- a/apps/guide/public/apple-touch-icon-precomposed.png
+++ b/apps/guide/public/apple-touch-icon-precomposed.png
--- a/apps/guide/public/apple-touch-icon.png
+++ b/apps/guide/public/apple-touch-icon.png
--- a/apps/guide/public/browserconfig.xml
+++ b/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>
--- a/apps/guide/public/favicon-16x16.png
+++ b/apps/guide/public/favicon-16x16.png
--- a/apps/guide/public/favicon-32x32.png
+++ b/apps/guide/public/favicon-32x32.png
--- a/apps/guide/public/favicon.ico
+++ b/apps/guide/public/favicon.ico
--- a/apps/guide/public/mstile-150x150.png
+++ b/apps/guide/public/mstile-150x150.png
--- a/apps/guide/public/mstile-310x150.png
+++ b/apps/guide/public/mstile-310x150.png
--- a/apps/guide/public/mstile-310x310.png
+++ b/apps/guide/public/mstile-310x310.png
--- a/apps/guide/public/mstile-70x70.png
+++ b/apps/guide/public/mstile-70x70.png
--- a/apps/guide/public/open-graph.png
+++ b/apps/guide/public/open-graph.png
--- a/apps/guide/public/powered-by-vercel.svg
+++ b/apps/guide/public/powered-by-vercel.svg
--- a/apps/guide/public/safari-pinned-tab.svg
+++ b/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>
--- a/apps/guide/public/site.webmanifest
+++ b/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"
+}
--- a/apps/guide/src/components/DocsLink.tsx
+++ b/apps/guide/src/components/DocsLink.tsx
@@ -0,0 +1,3 @@
+export function DocsLink() {
+	return null;
+}
--- a/apps/guide/src/components/ExternalLink.tsx
+++ b/apps/guide/src/components/ExternalLink.tsx
@@ -0,0 +1,10 @@
+import { FiExternalLink } from 'react-icons/fi';
+
+export function ExternalLink({ href, title }: { href: string; title: string }) {
+	return (
+		<a className="text-blurple inline-flex place-items-center gap-2 text-sm font-semibold" href={href}>
+			<p>{title}</p>
+			<FiExternalLink size={18} />
+		</a>
+	);
+}
--- a/apps/guide/src/components/Navbar.tsx
+++ b/apps/guide/src/components/Navbar.tsx
@@ -0,0 +1,70 @@
+import { Button } from 'ariakit/button';
+import { useState, useEffect } from 'react';
+import { FiCommand } from 'react-icons/fi';
+import { VscColorMode, VscGithubInverted, VscMenu, VscSearch } from 'react-icons/vsc';
+import { useMedia } from 'react-use';
+import { Sidebar } from './Sidebar.jsx';
+import type { MDXPage } from './SidebarItems.jsx';
+
+export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
+	const matches = useMedia('(min-width: 992px)', false);
+	const [opened, setOpened] = useState(false);
+
+	useEffect(() => {
+		if (matches) {
+			setOpened(false);
+		}
+	}, [matches]);
+
+	return (
+		<>
+			<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+				<div className="h-18 block px-6">
+					<div className="flex h-full flex-row place-content-between place-items-center">
+						<Button
+							aria-label="Menu"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
+							onClick={() => setOpened((open) => !open)}
+						>
+							<VscMenu size={24} />
+						</Button>
+						<div className="hidden md:flex md:flex-row">Placeholder</div>
+						<div className="flex flex-row place-items-center gap-4">
+							<Button
+								as="div"
+								className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
+								// onClick={() => dialog?.toggle()}
+							>
+								<div className="flex flex-row place-items-center gap-4">
+									<VscSearch size={18} />
+									<span className="opacity-65">Search...</span>
+									<div className="opacity-65 flex flex-row place-items-center gap-2">
+										<FiCommand size={18} /> K
+									</div>
+								</div>
+							</Button>
+							<Button
+								aria-label="GitHub"
+								as="a"
+								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+								href="https://github.com/discordjs/discord.js"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								<VscGithubInverted size={24} />
+							</Button>
+							<Button
+								aria-label="Toggle theme"
+								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+								// onClick={() => toggleTheme()}
+							>
+								<VscColorMode size={24} />
+							</Button>
+						</div>
+					</div>
+				</div>
+			</header>
+			<Sidebar opened={opened} pages={pages} />
+		</>
+	);
+}
--- a/apps/guide/src/components/Outline.tsx
+++ b/apps/guide/src/components/Outline.tsx
@@ -0,0 +1,72 @@
+import type { MarkdownHeading } from 'astro';
+import { useEffect, useMemo, useState } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { VscListSelection } from 'react-icons/vsc';
+import { useLocation } from 'react-use';
+
+const LINK_HEIGHT = 30;
+const INDICATOR_SIZE = 10;
+const INDICATOR_OFFSET = (LINK_HEIGHT - INDICATOR_SIZE) / 2;
+
+export function Outline({ headings }: { headings: MarkdownHeading[] }) {
+	const state = useLocation();
+	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-0 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="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+			renderTrackVertical={(props) => (
+				<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
+			)}
+			universal
+		>
+			<div className="flex flex-col break-all p-3 pb-8">
+				<div className="mt-4 ml-2 flex flex-row gap-2">
+					<VscListSelection size={25} />
+					<span className="font-semibold">Contents</span>
+				</div>
+				<div className="mt-4 ml-2 flex flex-col gap-2">
+					<div className="relative flex flex-col">
+						<div
+							className="bg-blurple absolute h-[10px] w-[10px] rounded-full border-2 border-black dark:border-white"
+							style={{
+								left: INDICATOR_SIZE / 2 + 0.5,
+								transform: `translateY(${active * LINK_HEIGHT + INDICATOR_OFFSET}px)`,
+							}}
+						/>
+						{headingItems}
+					</div>
+				</div>
+			</div>
+		</Scrollbars>
+	);
+}
--- a/apps/guide/src/components/ResultingCode.tsx
+++ b/apps/guide/src/components/ResultingCode.tsx
@@ -0,0 +1,3 @@
+export function ResultingCode() {
+	return null;
+}
--- a/apps/guide/src/components/Sidebar.tsx
+++ b/apps/guide/src/components/Sidebar.tsx
@@ -0,0 +1,24 @@
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import type { MDXPage } from './SidebarItems.jsx';
+
+export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) {
+	return (
+		<nav
+			className={`h-[calc(100vh - 73px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 w-full border-r bg-white ${
+				opened ? 'block' : 'hidden'
+			} lg:w-76 lg:max-w-76 lg:block`}
+		>
+			<Scrollbars
+				autoHide
+				hideTracksWhenNotNeeded
+				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+				renderTrackVertical={(props) => (
+					<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
+				)}
+				universal
+			>
+				{pages ?? null}
+			</Scrollbars>
+		</nav>
+	);
+}
--- a/apps/guide/src/components/SidebarItems.tsx
+++ b/apps/guide/src/components/SidebarItems.tsx
@@ -0,0 +1,51 @@
+import { Section } from '@discordjs/ui';
+import type { MDXInstance } from 'astro';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-use';
+
+export type MDXPage = MDXInstance<{ category: string; title: string }>;
+
+export function SidebarItems({ pages }: { pages: MDXPage[] }) {
+	const state = useLocation();
+	const [active, setActive] = useState<string | undefined>('');
+
+	const categories = useMemo(
+		() =>
+			pages.reduce<Record<string, MDXPage[]>>((acc, page) => {
+				if (acc[page.frontmatter.category]) {
+					acc[page.frontmatter.category]?.push(page);
+				} else {
+					acc[page.frontmatter.category] = [page];
+				}
+
+				return acc;
+			}, {}),
+		[pages],
+	);
+
+	useEffect(() => {
+		setActive(state.pathname);
+	}, [state]);
+
+	return Object.keys(categories).map((category, idx) => (
+		<Section key={idx} title={category}>
+			{categories[category]?.map((member, index) => (
+				<a
+					className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
+						(member.url || '/') === active
+							? 'bg-blurple text-white'
+							: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
+					}`}
+					// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+					href={member.url || '/'}
+					key={index}
+					title={member.frontmatter.title}
+				>
+					<div className="flex flex-row place-items-center gap-2 lg:text-sm">
+						<span className="truncate">{member.frontmatter.title}</span>
+					</div>
+				</a>
+			)) ?? null}
+		</Section>
+	));
+}
--- a/apps/guide/src/components/SidebarLayout.astro
+++ b/apps/guide/src/components/SidebarLayout.astro
@@ -0,0 +1,137 @@
+---
+import { Separator } from 'ariakit/separator';
+import type { MarkdownLayoutProps } from 'astro';
+import { ExternalLink } from './ExternalLink.jsx';
+import { Navbar } from './Navbar.jsx';
+import { Outline } from './Outline.jsx';
+import { SidebarItems } from './SidebarItems.jsx';
+import { generateGithubURL } from '~/util/url.js';
+
+const pages = await Astro.glob<{ category: string; title: string }>('../pages/**/*.mdx');
+
+type Props = MarkdownLayoutProps<{}>;
+const { headings, url } = Astro.props;
+---
+
+<script>
+	window.addEventListener('load', () => {
+		const headings = document.querySelectorAll(
+			'div.level-h1 > h1, div.level-h2 > h2, div.level-h3 > h3, div.level-h4 > h4',
+		);
+
+		const headingsObserver = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						const location = window.location.toString().split('#')[0];
+						history.replaceState(null, '', location + '#' + entry.target.id);
+					}
+				});
+			},
+			{
+				root: null,
+				rootMargin: '-100px 0% -66%',
+				threshold: 1.0,
+			},
+		);
+
+		headings.forEach((heading) => headingsObserver.observe(heading));
+	});
+</script>
+
+<Navbar client:load>
+	<div class="flex flex-col gap-3 p-3 pb-32 lg:pb-12" slot="pages">
+		<SidebarItems client:load pages={pages} />
+	</div>
+</Navbar>
+<main class="pt-18 lg:pl-76 xl:pr-64">
+	<article class="dark:bg-dark-600 bg-light-600">
+		<div class="dark:bg-dark-800 relative z-10 min-h-[calc(100vh_-_70px)] bg-white p-6 pb-20 shadow">
+			<div class="prose max-w-full">
+				<slot />
+			</div>
+
+			<div
+				class="h-[calc(100vh - 72px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[72px] right-0 bottom-0 z-20 hidden w-64 border-l bg-white pr-2 xl:block"
+			>
+				<Outline client:load headings={headings} />
+			</div>
+			<Separator className="my-5" />
+			<div class="flex place-content-end">
+				<ExternalLink client:load href={generateGithubURL(url!)} title="Edit this page on github" />
+			</div>
+		</div>
+
+		<div class="h-76 md:h-52"></div>
+		<footer
+			class="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16 xl:pr-76"
+		>
+			<div class="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
+				<div class="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
+					<a
+						class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+						rel="noopener noreferrer"
+						target="_blank"
+						title="Vercel"
+					>
+						<img alt="Vercel" src="/powered-by-vercel.svg" />
+					</a>
+					<div class="flex flex-row gap-6 md:gap-12">
+						<div class="flex flex-col gap-2">
+							<div class="text-lg font-semibold">Community</div>
+							<div class="flex flex-col gap-1">
+								<a
+									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discord.gg/djs"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									Discord
+								</a>
+								<a
+									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://github.com/discordjs/discord.js/discussions"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									GitHub discussions
+								</a>
+							</div>
+						</div>
+						<div class="flex flex-col gap-2">
+							<div class="text-lg font-semibold">Project</div>
+							<div class="flex flex-col gap-1">
+								<a
+									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://github.com/discordjs/discord.js"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord.js
+								</a>
+								<a
+									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discordjs.guide"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord.js guide
+								</a>
+								<a
+									class="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+									href="https://discord-api-types.dev"
+									rel="noopener noreferrer"
+									target="_blank"
+								>
+									discord-api-types
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</footer>
+	</article>
+	<div>Test</div>
+</main>
--- a/apps/guide/src/layouts/SidebarLayout.astro
+++ b/apps/guide/src/layouts/SidebarLayout.astro
@@ -0,0 +1,63 @@
+---
+import '../styles/main.css';
+import '@code-hike/mdx/styles.css';
+import '../styles/ch.css';
+import type { MarkdownLayoutProps } from 'astro';
+import SidebarLayout from '../components/SidebarLayout.astro';
+import { DESCRIPTION } from '../util/constants.js';
+
+type Props = MarkdownLayoutProps<{}>;
+const props = Astro.props;
+---
+
+<html lang="en">
+	<head>
+		<link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
+		<link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
+		<link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
+		<link href="/site.webmanifest" rel="manifest" />
+		<link color="#090a16" href="/safari-pinned-tab.svg" rel="mask-icon" />
+		<meta content="light dark" name="color-scheme" />
+		<meta content="discord.js" name="apple-mobile-web-app-title" />
+		<meta content="discord.js" name="application-name" />
+		<meta content="#090a16" name="msapplication-TileColor" />
+		<meta content={DESCRIPTION} name="description" />
+		<meta content="discord.js" property="og:site_name" />
+		<meta content="website" property="og:type" />
+		<meta content="discord.js guide" property="og:title" />
+		<meta content={DESCRIPTION} name="og:description" />
+		<meta content="https://discordjs.dev/open-graph.png" property="og:image" />
+		<meta content="summary_large_image" name="twitter:card" />
+		<meta content="@iCrawlToGo" name="twitter:creator" />
+
+		<title>discord.js</title>
+		<meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
+		<meta content="#5865f2" name="theme-color" />
+	</head>
+	<body class="dark:bg-dark-800 bg-white">
+		<script is:inline>
+			function setTheme(prefersDarkMode, persistedColorPreference) {
+				if (persistedColorPreference === 'dark' || (prefersDarkMode && persistedColorPreference !== 'light')) {
+					document.documentElement.classList.toggle('dark', true);
+				} else {
+					document.documentElement.classList.toggle('dark', false);
+				}
+			}
+
+			(() => {
+				const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+				const persistedColorPreference = localStorage.getItem('theme') || 'auto';
+				setTheme(prefersDarkMode, persistedColorPreference);
+
+				const listener =
+					window.matchMedia &&
+					window
+						.matchMedia('(prefers-color-scheme: dark)')
+						.addEventListener('change', (ev) => setTheme(ev.matches, persistedColorPreference));
+			})();
+		</script>
+		<SidebarLayout {...props}>
+			<slot />
+		</SidebarLayout>
+	</body>
+</html>
--- a/apps/guide/src/pages/creating-your-bot/creating-commands.mdx
+++ b/apps/guide/src/pages/creating-your-bot/creating-commands.mdx
@@ -0,0 +1,244 @@
+---
+layout: '../../layouts/SidebarLayout.astro'
+title: Creating commands
+category: Creating your bot
+---
+
+import { CH } from '@code-hike/mdx/components';
+import { Alert, DiscordMessages, DiscordMessage } from '@discordjs/ui';
+import { DocsLink } from '../../components/DocsLink.jsx';
+import { ResultingCode } from '../../components/ResultingCode.jsx';
+
+# Creating commands
+
+<Alert title="Tip" type="success">
+	This page is a follow-up and bases its code on [the previous page](/creating-your-bot/).
+</Alert>
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				username: 'Crawl',
+			},
+			command: 'ping',
+		}}
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		Pong!
+	</DiscordMessage>
+</DiscordMessages>
+
+Discord allows developers to register [slash commands](https://discord.com/developers/docs/interactions/application-commands), which provide users a first-class way of interacting directly with your application. Before being able to reply to a command, you must first register it.
+
+## Registering commands
+
+This section will cover only the bare minimum to get you started, but you can refer to our [in-depth page on registering slash commands](/interactions/slash-commands.md#registering-slash-commands) for further details. It covers guild commands, global commands, options, option types, and choices.
+
+### Command deployment script
+
+Create a `deploy-commands.js` file in your project directory. This file will be used to register and update the slash commands for your bot application.
+
+Since commands only need to be registered once, and updated when the definition (description, options etc) is changed, it's not necessary to connect a whole client to the gateway or do this on every `ready` event. As such, a standalone script using the lighter REST manager is preferred.
+
+Below is a deployment script you can use. Focus on these variables:
+
+- `clientId`: Your application's client id
+- `guildId`: Your development server's id
+- `commands`: An array of commands to register. The [slash command builder](/popular-topics/builders.md#slash-command-builders) from `discord.js` is used to build the data for your commands
+
+<Alert title="Tip" type="success">
+	In order to get your application's client id, go to [Discord Developer
+	Portal](https://discord.com/developers/applications) and choose your application. Find the id under "Application ID"
+	in General Information subpage. To get guild id, open Discord and go to your settings. On the "Advanced" page, turn on
+	"Developer Mode". This will enable a "Copy ID" button in the context menu when you right-click on a server icon, a
+	user's profile, etc.
+</Alert>
+
+<CH.Code client:load>
+
+```js deploy-commands.js mark=4,6:10
+const { REST, SlashCommandBuilder, Routes } = require('discord.js');
+const { clientId, guildId, token } = require('./config.json');
+
+const commands = [
+	new SlashCommandBuilder().setName('ping').setDescription('Replies with pong!'),
+	new SlashCommandBuilder().setName('server').setDescription('Replies with server info!'),
+	new SlashCommandBuilder().setName('user').setDescription('Replies with user info!'),
+].map((command) => command.toJSON());
+
+const rest = new REST({ version: '10' }).setToken(token);
+
+rest
+	.put(Routes.applicationGuildCommands(clientId, guildId), { body: commands })
+	.then((data) => console.log(`Successfully registered ${data.length} application commands.`))
+	.catch(console.error);
+```
+
+---
+
+```json config.json mark=2:3
+{
+	"clientId": "123456789012345678",
+	"guildId": "876543210987654321",
+	"token": "your-token-goes-here"
+}
+```
+
+</CH.Code>
+
+Once you fill in these values, run `node deploy-commands.js` in your project directory to register your commands to a single guild. It's also possible to [register commands globally](/interactions/slash-commands.md#global-commands).
+
+<Alert title="Tip" type="success">
+	You only need to run `node deploy-commands.js` once. You should only run it again if you add or edit existing
+	commands.
+</Alert>
+
+## Replying to commands
+
+Once you've registered your commands, you can listen for interactions via <DocsLink path="class/Client?scrollTo=e-interactionCreate" /> in your `index.js` file.
+
+You should first check if an interaction is a chat input command via <DocsLink path="class/Interaction?scrollTo=isChatInputCommand" type="method">`.isChatInputCommand()`</DocsLink>, and then check the <DocsLink path="class/CommandInteraction?scrollTo=commandName">`.commandName`</DocsLink> property to know which command it is. You can respond to interactions with <DocsLink path="class/CommandInteraction?scrollTo=reply">`.reply()`</DocsLink>.
+
+<CH.Code client:load>
+
+```js mark=5:16
+client.once('ready', () => {
+	console.log('Ready!');
+});
+
+client.on('interactionCreate', async (interaction) => {
+	if (!interaction.isChatInputCommand()) return;
+	const { commandName } = interaction;
+	if (commandName === 'ping') {
+		await interaction.reply('Pong!');
+	} else if (commandName === 'server') {
+		await interaction.reply('Server info.');
+	} else if (commandName === 'user') {
+		await interaction.reply('User info.');
+	}
+});
+client.login(token);
+```
+
+</CH.Code>
+
+### Server info command
+
+Note that servers are referred to as "guilds" in the Discord API and discord.js library. `interaction.guild` refers to the guild the interaction was sent in (a <DocsLink path="class/Guild" /> instance), which exposes properties such as `.name` or `.memberCount`.
+
+<CH.Code client:load>
+
+```js focus=7
+client.on('interactionCreate', async (interaction) => {
+	if (!interaction.isChatInputCommand()) return;
+	const { commandName } = interaction;
+	if (commandName === 'ping') {
+		await interaction.reply('Pong!');
+	} else if (commandName === 'server') {
+		await interaction.reply(`Server name: ${interaction.guild.name}\nTotal members: ${interaction.guild.memberCount}`);
+	} else if (commandName === 'user') {
+		await interaction.reply('User info.');
+	}
+});
+```
+
+</CH.Code>
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				username: 'Crawl',
+			},
+			command: 'server',
+		}}
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		<p>Server name: discord.js Guide</p>
+		<p>Total members: 2</p>
+	</DiscordMessage>
+</DiscordMessages>
+
+You could also display the date the server was created, or the server's verification level. You would do those in the same manner – use `interaction.guild.createdAt` or `interaction.guild.verificationLevel`, respectively.
+
+<Alert title="Tip" type="success">
+	Refer to the <DocsLink path="class/Guild" /> documentation for a list of all the available properties and methods!
+</Alert>
+
+### User info command
+
+A "user" refers to a Discord user. `interaction.user` refers to the user the interaction was sent by (a <DocsLink path="class/User" /> instance), which exposes properties such as `.tag` or `.id`.
+
+<CH.Code client:load>
+
+```js focus=9
+client.on('interactionCreate', async (interaction) => {
+	if (!interaction.isChatInputCommand()) return;
+	const { commandName } = interaction;
+	if (commandName === 'ping') {
+		await interaction.reply('Pong!');
+	} else if (commandName === 'server') {
+		await interaction.reply(`Server name: ${interaction.guild.name}\nTotal members: ${interaction.guild.memberCount}`);
+	} else if (commandName === 'user') {
+		await interaction.reply(`Your tag: ${interaction.user.tag}\nYour id: ${interaction.user.id}`);
+	}
+});
+```
+
+</CH.Code>
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				username: 'Crawl',
+			},
+			command: 'user',
+		}}
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		<p>Your tag: User#0001</p>
+		<p>Your id: 123456789012345678</p>
+	</DiscordMessage>
+</DiscordMessages>
+
+<Alert title="Tip" type="success">
+	Refer to the <DocsLink path="class/User" /> documentation for a list of all the available properties and methods!
+</Alert>
+
+And there you have it!
+
+## The problem with `if`/`else if`
+
+If you don't plan on making more than a couple commands, then using an `if`/`else if` chain is fine; however, this isn't always the case. Using a giant `if`/`else if` chain will only hinder your development process in the long run.
+
+Here's a small list of reasons why you shouldn't do so:
+
+- Takes longer to find a piece of code you want;
+- Easier to fall victim to [spaghetti code](https://en.wikipedia.org/wiki/Spaghetti_code);
+- Difficult to maintain as it grows;
+- Difficult to debug;
+- Difficult to organize;
+- General bad practice.
+
+Next, we'll be diving into something called a "command handler" – code that makes handling commands easier and much more efficient. This allows you to move your commands into individual files.
+
+## Resulting code
+
+<ResultingCode />
--- a/apps/guide/src/pages/creating-your-bot/index.mdx
+++ b/apps/guide/src/pages/creating-your-bot/index.mdx
@@ -0,0 +1,194 @@
+---
+layout: '../../layouts/SidebarLayout.astro'
+title: Initial files
+category: Creating your bot
+---
+
+import { CH } from '@code-hike/mdx/components';
+import { Alert, Section } from '@discordjs/ui';
+import { DocsLink } from '../../components/DocsLink.jsx';
+import { ResultingCode } from '../../components/ResultingCode.jsx';
+
+# Initial files
+
+Once you [add your bot to a server](/preparations/adding-your-bot-to-servers.md), the next step is to start coding and get it online! Let's start by creating a config file for your client token and a main file for your bot application.
+
+## Creating configuration files
+
+As explained in the ["What is a token, anyway?"](/preparations/setting-up-a-bot-application.md#what-is-a-token-anyway) section, your token is essentially your bot's password, and you should protect it as best as possible. This can be done through a `config.json` file or by using environment variables.
+
+Open your application in the [Discord Developer Portal](https://discord.com/developers/applications) and go to the "Bot" page to copy your token.
+
+### Using `config.json`
+
+Storing data in a `config.json` file is a common way of keeping your sensitive values safe. Create a `config.json` file in your project directory and paste in your token. You can access your token inside other files by using `require()`.
+
+<CH.Code client:load>
+
+```json config.json
+{
+	"token": "your-token-goes-here"
+}
+```
+
+---
+
+```js Usage
+const { token } = require('./config.json');
+
+console.log(token);
+```
+
+</CH.Code>
+
+<Alert title="Caution" type="danger">
+	If you're using Git, you should not commit this file and should [ignore it via
+	`.gitignore`](/creating-your-bot/#git-and-gitignore).
+</Alert>
+
+### Using environment variables
+
+Environment variables are special values for your environment (e.g., terminal session, Docker container, or environment variable file). You can pass these values into your code's scope so that you can use them.
+
+One way to pass in environment variables is via the command line interface. When starting your app, instead of `node index.js`, use `TOKEN=your-token-goes-here node index.js`. You can repeat this pattern to expose other values as well.
+
+You can access the set values in your code via the `process.env` global variable, accessible in any file. Note that values passed this way will always be strings and that you might need to parse them to a number, if using them to do calculations.
+
+<CH.Code client:load>
+
+```shellscript Command line
+A=123 B=456 DISCORD_TOKEN=your-token-goes-here node index.js
+```
+
+---
+
+```js Usage
+console.log(process.env.A);
+console.log(process.env.B);
+console.log(process.env.DISCORD_TOKEN);
+```
+
+</CH.Code>
+
+#### Using dotenv
+
+Another common approach is storing these values in a `.env` file. This spares you from always copying your token into the command line. Each line in a `.env` file should hold a `KEY=value` pair.
+
+You can use the [`dotenv` package](https://www.npmjs.com/package/dotenv) for this. Once installed, require and use the package to load your `.env` file and attach the variables to `process.env`:
+
+<CH.Code client:load>
+
+```shellscript npm
+npm install dotenv
+```
+
+```shellscript yarn
+yarn add dotenv
+```
+
+```shellscript pnpm
+pnpm add dotenv
+```
+
+---
+
+```text .env
+A=123
+B=456
+DISCORD_TOKEN=your-token-goes-here
+```
+
+---
+
+```js Usage
+const dotenv = require('dotenv');
+
+dotenv.config();
+
+console.log(process.env.A);
+console.log(process.env.B);
+console.log(process.env.DISCORD_TOKEN);
+```
+
+</CH.Code>
+
+<Alert title="Caution" type="danger">
+	If you're using Git, you should not commit this file and should [ignore it via
+	`.gitignore`](/creating-your-bot/#git-and-gitignore).
+</Alert>
+
+<Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter>
+While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
+
+- Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18)
+- Heroku: [Configuration variables](https://devcenter.heroku.com/articles/config-vars)
+- Replit: [Secrets and environment variables](https://docs.replit.com/repls/secrets-environment-variables)
+
+</Section>
+
+### Git and `.gitignore`
+
+Git is a fantastic tool to keep track of your code changes and allows you to upload progress to services like [GitHub](https://github.com/), [GitLab](https://about.gitlab.com/), or [Bitbucket](https://bitbucket.org/product). While this is super useful to share code with other developers, it also bears the risk of uploading your configuration files with sensitive values!
+
+You can specify files that Git should ignore in its versioning systems with a `.gitignore` file. Create a `.gitignore` file in your project directory and add the names of the files and folders you want to ignore:
+
+<CH.Code client:load>
+
+```
+node_modules
+.env
+config.json
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="success">
+	Aside from keeping credentials safe, `node_modules` should be included here. Since this directory can be restored
+	based on the entries in your `package.json` and `package-lock.json` files by running `npm install`, it does not need
+	to be included in Git. You can specify quite intricate patterns in `.gitignore` files, check out the [Git
+	documentation on `.gitignore`](https://git-scm.com/docs/gitignore) for more information!
+</Alert>
+
+## Creating the main file
+
+Open your code editor and create a new file. We suggest that you save the file as `index.js`, but you may name it whatever you wish.
+
+Here's the base code to get you started:
+
+<CH.Code client:load>
+
+```js
+// Require the necessary discord.js classes
+const { Client, GatewayIntentBits } = require('discord.js');
+const { token } = require('./config.json');
+
+// Create a new client instance
+const client = new Client({ intents: [GatewayIntentBits.Guilds] });
+
+// When the client is ready, run this code (only once)
+client.once('ready', () => {
+	console.log('Ready!');
+});
+
+// Login to Discord with your client's token
+client.login(token);
+```
+
+</CH.Code>
+
+This is how you create a client instance for your Discord bot and login to Discord. The `GatewayIntentBits.Guilds` intents option is necessary for your client to work properly, as it ensures that the caches for guilds, channels and roles are populated and available for internal use.
+
+Intents also define which events Discord should send to your bot, and you may wish to enable more than just the minimum. You can read more about the other intents on the [Intents topic](/popular-topics/intents).
+
+Open your terminal and run `node index.js` to start the process. If you see "Ready!" after a few seconds, you're good to go!
+
+<Alert title="Tip" type="success">
+	You can open your `package.json` file and edit the `"main": "index.js"` field to point to your main file. You can then
+	run `node .` in your terminal to start the process! After closing the process with `Ctrl + C`, you can press the up
+	arrow on your keyboard to bring up the latest commands you've run. Pressing up and then enter after closing the
+	process is a quick way to start it up again.
+</Alert>
+
+## Resulting code
+
+<ResultingCode path="creating-your-bot/initial-files" />
--- a/apps/guide/src/pages/index.mdx
+++ b/apps/guide/src/pages/index.mdx
@@ -0,0 +1,36 @@
+---
+layout: '../layouts/SidebarLayout.astro'
+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](/preparations/) from scratch;
+- How to properly [create](/creating-your-bot/), [organize](/creating-your-bot/command-handling.md), and expand on your commands;
+- In-depth explanations and examples regarding popular topics (e.g. [reactions](/popular-topics/reactions.md), [embeds](/popular-topics/embeds.md), [canvas](/popular-topics/canvas.md));
+- Working with databases (e.g. [sequelize](/sequelize/) and [keyv](/keyv/));
+- Getting started with [sharding](/sharding/);
+- 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, then.
+
+## 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://www.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/en-US/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!
--- a/apps/guide/src/pages/requesting-more-content.mdx
+++ b/apps/guide/src/pages/requesting-more-content.mdx
@@ -0,0 +1,20 @@
+---
+layout: '../layouts/SidebarLayout.astro'
+title: Requesting more content
+category: Home
+---
+
+import { Alert } from '@discordjs/ui';
+
+# Requesting more content
+
+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](/popular-topics/faq.html) page", or as elaborate as "add a page regarding [sharding](/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 repo's issue tracker](https://github.com/discordjs/guide/issues) and [create a new issue](https://github.com/discordjs/guide/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="success">
+	Remember that you can always [fork the repo](https://github.com/discordjs/guide) and [make a pull
+	request](https://github.com/discordjs/guide/pulls) if you want to add anything to the guide yourself!
+</Alert>
--- a/apps/guide/src/pages/test.mdx
+++ b/apps/guide/src/pages/test.mdx
@@ -0,0 +1,93 @@
+---
+title: Test
+category: Test
+---
+
+import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
+
+<DiscordMessages>
+	<DiscordMessage
+		reply={{
+			author: {
+				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				username: 'Crawl',
+			},
+			content: 'Test',
+		}}
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		1234
+	</DiscordMessage>
+	<DiscordMessage
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+		followUp
+		time="21:02"
+	>
+		1234
+	</DiscordMessage>
+</DiscordMessages>
+
+<DiscordMessages>
+	<DiscordMessage
+		reply={{
+			author: {
+				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				username: 'Crawl',
+			},
+			content: 'Test',
+		}}
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		1234
+	</DiscordMessage>
+</DiscordMessages>
+
+<DiscordMessages>
+	<DiscordMessage
+		reply={{
+			author: {
+				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				username: 'Crawl',
+			},
+			content: 'Test',
+		}}
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		<>
+			<DiscordMessageEmbed
+				author={{
+					avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+					username: 'Crawl',
+				}}
+			/>
+			<DiscordMessageEmbed title={{ title: 'Title' }} />
+			<DiscordMessageEmbed footer={{ content: 'Footer' }} />
+			<DiscordMessageEmbed
+				author={{
+					avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+					username: 'Crawl',
+				}}
+				title={{ title: 'Title' }}
+				footer={{ content: 'Footer' }}
+			>
+				Test
+			</DiscordMessageEmbed>
+		</>
+	</DiscordMessage>
+</DiscordMessages>
--- a/apps/guide/src/pages/whats-new.mdx
+++ b/apps/guide/src/pages/whats-new.mdx
@@ -0,0 +1,73 @@
+---
+layout: '../layouts/SidebarLayout.astro'
+title: What's new
+category: Home
+---
+
+import { DiscordMessages, DiscordMessage } from '@discordjs/ui';
+
+# What's new
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				username: 'Crawl',
+			},
+			command: 'upgrade',
+		}}
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/474807795183648809/7f239a0776ff928b2182906a2b3743c9.webp?size=160',
+			bot: true,
+			username: 'Guide Bot',
+			time: 'Today at 21:00',
+		}}
+	>
+		discord.js v14 has released and the guide has been updated!
+		<br />
+		This includes additions and changes made in Discord, such as slash commands and message components.
+	</DiscordMessage>
+</DiscordMessages>
+
+## Site
+
+- Upgraded to [VuePress v2](https://v2.vuepress.vuejs.org/)
+- New theme made to match the [discord.js documentation site](https://discord.js.org/)
+- Discord message components upgraded to [@discord-message-components/vue](https://github.com/Danktuary/discord-message-components/blob/main/packages/vue/README.md)
+- Many fixes in code blocks, grammar, consistency, etc.
+
+## Pages
+
+All content has been updated to use discord.js v14 syntax. The v13 version of the guide can be found at [https://v13.discordjs.guide/](https://v13.discordjs.guide/).
+
+### New
+
+- [Updating from v13 to v14](/additional-info/changes-in-v14.md): A list of the changes from discord.js v13 to v14
+- [Slash commands](/interactions/slash-commands.md): Registering, replying to slash commands and permissions
+- [Buttons](/interactions/buttons.md): Building, sending, and receiving buttons
+- [Select menus](/interactions/select-menus.md): Building, sending, and receiving select menus
+- [Threads](/popular-topics/threads.md): Creating and managing threads
+- [Builders](/popular-topics/builders.md): A collection of builders to use with your bot
+
+### Updated
+
+- Commando: Replaced with [Sapphire](https://sapphirejs.dev/docs/Guide/getting-started/getting-started-with-sapphire)
+- [Voice](/voice/): Rewritten to use the [`@discordjs/voice`](https://github.com/discordjs/discord.js/tree/main/packages/voice) package
+- [Command handling](/creating-your-bot/command-handling.md/): Updated to use slash commands
+  - Obsolete sections removed
+- `client.on('message')` snippets updated to `client.on('interactionCreate')`
+  - [Message content will become a new privileged intent on August 31, 2022](https://support-dev.discord.com/hc/en-us/articles/4404772028055)
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/474807795183648809/7f239a0776ff928b2182906a2b3743c9.webp?size=160',
+			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>
--- a/apps/guide/src/styles/ch.css
+++ b/apps/guide/src/styles/ch.css
@@ -0,0 +1,3 @@
+.ch-frame-buttons {
+	display: none;
+}
--- a/apps/guide/src/styles/main.css
+++ b/apps/guide/src/styles/main.css
@@ -0,0 +1,16 @@
+@import url('https://rsms.me/inter/inter.css');
+
+:root {
+	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+		'Noto Color Emoji';
+	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+}
+
+@supports (font-variation-settings: normal) {
+	:root {
+		font-family: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+			'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+			'Noto Color Emoji';
+	}
+}
--- a/apps/guide/src/util/constants.ts
+++ b/apps/guide/src/util/constants.ts
@@ -0,0 +1,3 @@
+export const DESCRIPTION = 'Imagine a guide... that explores the many possibilities for your discord.js bot.';
+
+export const GITHUB_BASE_PAGES_PATH = 'https://github.com/discordjs/discord.js/tree/main/packages/guide/src/pages';
--- a/apps/guide/src/util/url.ts
+++ b/apps/guide/src/util/url.ts
@@ -0,0 +1,5 @@
+import { GITHUB_BASE_PAGES_PATH } from './constants.js';
+
+export function generateGithubURL(pageURL: string) {
+	return `${GITHUB_BASE_PAGES_PATH}${pageURL}.mdx`;
+}
--- a/apps/guide/tsconfig.eslint.json
+++ b/apps/guide/tsconfig.eslint.json
@@ -0,0 +1,22 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true
+	},
+	"include": [
+		"**/*.ts",
+		"**/*.tsx",
+		"**/*.js",
+		"**/*.cjs",
+		"**/*.mjs",
+		"**/*.jsx",
+		"**/*.astro",
+		"**/*.test.ts",
+		"**/*.test.js",
+		"**/*.test.mjs",
+		"**/*.spec.ts",
+		"**/*.spec.js",
+		"**/*.spec.mjs"
+	],
+	"exclude": []
+}
--- a/apps/guide/tsconfig.json
+++ b/apps/guide/tsconfig.json
@@ -0,0 +1,19 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"lib": ["ESNext", "DOM", "DOM.Iterable"],
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"baseUrl": ".",
+		"noEmit": true,
+		"allowJs": false,
+		"incremental": true,
+		"skipLibCheck": true,
+		"types": ["@astrojs/image/client"],
+		"paths": {
+			"~/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*.ts", "src/**/*.tsx", "types.d.ts"],
+	"exclude": ["node_modules"]
+}
--- a/apps/guide/types.d.ts
+++ b/apps/guide/types.d.ts
@@ -0,0 +1 @@
+declare module '*.css';
--- a/apps/guide/vercel.json
+++ b/apps/guide/vercel.json
@@ -0,0 +1,3 @@
+{
+	"cleanUrls": true
+}
--- a/apps/website/.env.development
+++ b/apps/website/.env.development
@@ -0,0 +1 @@
+NEXT_PUBLIC_LOCAL_DEV=true
--- a/apps/website/.eslintrc.json
+++ b/apps/website/.eslintrc.json
@@ -0,0 +1,12 @@
+{
+	"extends": ["../../.eslintrc.json", "neon/react", "neon/next", "neon/edge", "neon/prettier"],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"rules": {
+		"react/react-in-jsx-scope": 0,
+		"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
+	}
+}
--- a/apps/website/.gitignore
+++ b/apps/website/.gitignore
@@ -0,0 +1,30 @@
+# Packages
+node_modules/
+
+# Log files
+logs/
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Env
+.env
+
+# Dist
+dist/
+typings/
+.cache/
+build/
+api/
+src/styles/unocss.css
+.next/
+
+# Miscellaneous
+.tmp/
+coverage/
+.vercel
+public/searchIndex
--- a/apps/website/.lintstagedrc.cjs
+++ b/apps/website/.lintstagedrc.cjs
@@ -0,0 +1 @@
+module.exports = require('../../.lintstagedrc.json');
--- a/apps/website/.prettierignore
+++ b/apps/website/.prettierignore
@@ -0,0 +1,15 @@
+# Autogenerated
+CHANGELOG.md
+.turbo
+dist/
+docs/**/*
+!docs/index.yml
+!docs/README.md
+coverage/
+.cache
+build/
+src/styles/unocss.css
+api/
+.next/
+.vercel/
+.cache/
--- a/apps/website/.prettierrc.cjs
+++ b/apps/website/.prettierrc.cjs
@@ -0,0 +1 @@
+module.exports = require('../../.prettierrc.json');
--- a/apps/website/LICENSE
+++ b/apps/website/LICENSE
@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2022 Noel Buechler
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/apps/website/README.md
+++ b/apps/website/README.md
@@ -0,0 +1,46 @@
+<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>
+	</p>
+</div>
+
+## Links
+
+- [Website][website] ([source][website-source])
+- [Documentation][documentation]
+- [Guide][guide] ([source][guide-source])
+  See also the [Update Guide][guide-update], including updated and removed items in the library.
+- [discord.js Discord server][discord]
+- [Discord API Discord server][discord-api]
+- [GitHub][source]
+- [Related libraries][related-libs]
+
+## Contributing
+
+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/
+[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/website
+[related-libs]: https://discord.com/developers/docs/topics/community-resources#libraries
+[contributing]: https://github.com/discordjs/discord.js/blob/main/.github/CONTRIBUTING.md
--- a/apps/website/next-env.d.ts
+++ b/apps/website/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.
--- a/apps/website/next.config.js
+++ b/apps/website/next.config.js
@@ -0,0 +1,22 @@
+/* eslint-disable tsdoc/syntax */
+import { URL, fileURLToPath } from 'node:url';
+
+/**
+ * @type {import('next').NextConfig}
+ */
+export default {
+	reactStrictMode: true,
+	swcMinify: true,
+	eslint: {
+		ignoreDuringBuilds: true,
+	},
+	cleanDistDir: true,
+	experimental: {
+		outputFileTracingRoot: fileURLToPath(new URL('../../', import.meta.url)),
+		fallbackNodePolyfills: false,
+	},
+	images: {
+		dangerouslyAllowSVG: true,
+		contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+	},
+};
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -0,0 +1,97 @@
+{
+	"name": "@discordjs/website",
+	"version": "0.1.0",
+	"description": "Imagine a bot... the most popular way to build discord bots",
+	"private": true,
+	"scripts": {
+		"test": "vitest run",
+		"build:local": "yarn run --top-level docs --force && cross-env NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
+		"build:prod": "yarn workspace @discordjs/api-extractor-utils run build && yarn workspace @discordjs/scripts run build && yarn workspace @discordjs/ui run build && yarn build:css && yarn build:next",
+		"build:next": "next build",
+		"build:css": "yarn generate:css",
+		"build:search_indicies": "yarn node scripts/generateAllIndicies.js",
+		"dev": "yarn run --top-level docs && concurrently 'yarn dev:css' 'yarn dev:next'",
+		"dev:next": "next dev",
+		"dev:css": "yarn generate:css --watch",
+		"generate:css": "unocss 'src/**/*.tsx' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../packages/ui/unocss.config.ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix"
+	},
+	"type": "module",
+	"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"
+	},
+	"bugs": {
+		"url": "https://github.com/discordjs/discord.js/issues"
+	},
+	"homepage": "https://discord.js.org",
+	"dependencies": {
+		"@discordjs/api-extractor-utils": "workspace:^",
+		"@discordjs/scripts": "workspace:^",
+		"@discordjs/ui": "workspace:^",
+		"@microsoft/api-extractor-model": "7.24.0",
+		"@microsoft/tsdoc": "0.14.1",
+		"@vscode/codicons": "^0.0.32",
+		"ariakit": "^2.0.0-next.41",
+		"cmdk": "^0.1.20",
+		"meilisearch": "^0.28.0",
+		"next": "^12.3.1",
+		"next-mdx-remote": "^4.1.0",
+		"next-progress": "^2.2.0",
+		"next-themes": "^0.2.1",
+		"react": "^18.2.0",
+		"react-custom-scrollbars-2": "^4.5.0",
+		"react-dom": "^18.2.0",
+		"react-icons": "^4.4.0",
+		"react-syntax-highlighter": "^15.5.0",
+		"react-use": "^17.4.0",
+		"rehype-ignore": "^1.0.1",
+		"rehype-pretty-code": "^0.3.2",
+		"rehype-raw": "^6.1.1",
+		"rehype-slug": "^5.0.1",
+		"remark-gfm": "^3.0.1",
+		"sharp": "^0.31.1",
+		"shiki": "^0.11.1",
+		"swr": "^1.3.0"
+	},
+	"devDependencies": {
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/node": "^16.11.64",
+		"@types/react": "^18.0.21",
+		"@types/react-dom": "^18.0.6",
+		"@types/react-syntax-highlighter": "^15.5.5",
+		"@unocss/cli": "^0.45.29",
+		"@unocss/reset": "^0.45.29",
+		"@vitejs/plugin-react": "^2.1.0",
+		"@vitest/coverage-c8": "^0.24.0",
+		"concurrently": "^7.4.0",
+		"cross-env": "^7.0.3",
+		"eslint": "^8.25.0",
+		"eslint-config-neon": "^0.1.37",
+		"happy-dom": "^7.4.0",
+		"prettier": "^2.7.1",
+		"prettier-plugin-tailwindcss": "^0.1.13",
+		"typescript": "^4.8.4",
+		"unocss": "^0.45.29",
+		"vercel": "^28.4.8",
+		"vitest": "^0.24.0"
+	},
+	"engines": {
+		"node": ">=16.9.0"
+	}
+}
--- a/apps/website/public/android-chrome-192x192.png
+++ b/apps/website/public/android-chrome-192x192.png
--- a/apps/website/public/android-chrome-384x384.png
+++ b/apps/website/public/android-chrome-384x384.png
--- a/apps/website/public/apple-touch-icon-120x120-precomposed.png
+++ b/apps/website/public/apple-touch-icon-120x120-precomposed.png
--- a/apps/website/public/apple-touch-icon-120x120.png
+++ b/apps/website/public/apple-touch-icon-120x120.png
--- a/apps/website/public/apple-touch-icon-152x152-precomposed.png
+++ b/apps/website/public/apple-touch-icon-152x152-precomposed.png
--- a/apps/website/public/apple-touch-icon-152x152.png
+++ b/apps/website/public/apple-touch-icon-152x152.png
--- a/apps/website/public/apple-touch-icon-180x180-precomposed.png
+++ b/apps/website/public/apple-touch-icon-180x180-precomposed.png
--- a/apps/website/public/apple-touch-icon-180x180.png
+++ b/apps/website/public/apple-touch-icon-180x180.png
--- a/apps/website/public/apple-touch-icon-60x60-precomposed.png
+++ b/apps/website/public/apple-touch-icon-60x60-precomposed.png
--- a/apps/website/public/apple-touch-icon-60x60.png
+++ b/apps/website/public/apple-touch-icon-60x60.png
--- a/apps/website/public/apple-touch-icon-76x76-precomposed.png
+++ b/apps/website/public/apple-touch-icon-76x76-precomposed.png
--- a/apps/website/public/apple-touch-icon-76x76.png
+++ b/apps/website/public/apple-touch-icon-76x76.png
--- a/apps/website/public/apple-touch-icon-precomposed.png
+++ b/apps/website/public/apple-touch-icon-precomposed.png
--- a/apps/website/public/apple-touch-icon.png
+++ b/apps/website/public/apple-touch-icon.png
--- a/apps/website/public/browserconfig.xml
+++ b/apps/website/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>
--- a/apps/website/public/favicon-16x16.png
+++ b/apps/website/public/favicon-16x16.png
--- a/apps/website/public/favicon-32x32.png
+++ b/apps/website/public/favicon-32x32.png
--- a/apps/website/public/favicon.ico
+++ b/apps/website/public/favicon.ico
--- a/apps/website/public/mstile-150x150.png
+++ b/apps/website/public/mstile-150x150.png
--- a/apps/website/public/mstile-310x150.png
+++ b/apps/website/public/mstile-310x150.png
--- a/apps/website/public/mstile-310x310.png
+++ b/apps/website/public/mstile-310x310.png
--- a/apps/website/public/mstile-70x70.png
+++ b/apps/website/public/mstile-70x70.png
--- a/apps/website/public/open-graph.png
+++ b/apps/website/public/open-graph.png
--- a/apps/website/public/safari-pinned-tab.svg
+++ b/apps/website/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>
--- a/apps/website/public/site.webmanifest
+++ b/apps/website/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+	"name": "discord.js",
+	"short_name": "discord.js",
+	"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"
+}
--- a/apps/website/scripts/generateAllIndicies.js
+++ b/apps/website/scripts/generateAllIndicies.js
@@ -0,0 +1,5 @@
+import { generateAllIndicies } from '@discordjs/scripts';
+
+console.log('Generating all indicies...');
+await generateAllIndicies();
+console.log('Generated all indicies.');
--- a/apps/website/src/assets/powered-by-vercel.svg
+++ b/apps/website/src/assets/powered-by-vercel.svg
--- a/apps/website/src/components/CmdK.tsx
+++ b/apps/website/src/components/CmdK.tsx
@@ -0,0 +1,136 @@
+import type { ApiItemKind } from '@microsoft/api-extractor-model';
+import { Dialog } from 'ariakit/dialog';
+import { Command } from 'cmdk';
+import { useRouter } from 'next/router';
+import { useEffect, useMemo, useState } from 'react';
+import {
+	VscArrowRight,
+	VscSymbolClass,
+	VscSymbolEnum,
+	VscSymbolField,
+	VscSymbolInterface,
+	VscSymbolMethod,
+	VscSymbolProperty,
+	VscSymbolVariable,
+} from 'react-icons/vsc';
+import { useKey } from 'react-use';
+import { useCmdK } from '~/contexts/cmdK';
+import { client } from '~/util/search';
+
+function resolveIcon(item: keyof ApiItemKind) {
+	switch (item) {
+		case 'Class':
+			return <VscSymbolClass className="shrink-0" size={25} />;
+		case 'Enum':
+			return <VscSymbolEnum className="shrink-0" size={25} />;
+		case 'Interface':
+			return <VscSymbolInterface className="shrink-0" size={25} />;
+		case 'Property':
+			return <VscSymbolProperty className="shrink-0" size={25} />;
+		case 'TypeAlias':
+			return <VscSymbolField className="shrink-0" size={25} />;
+		case 'Variables':
+			return <VscSymbolVariable className="shrink-0" size={25} />;
+		default:
+			return <VscSymbolMethod className="shrink-0" size={25} />;
+	}
+}
+
+export function CmdKDialog({
+	currentPackageName,
+	currentVersion,
+}: {
+	currentPackageName?: string | undefined;
+	currentVersion?: string | undefined;
+}) {
+	const router = useRouter();
+	const dialog = useCmdK();
+	const [search, setSearch] = useState('');
+	const [searchResults, setSearchResults] = useState<any[]>([]);
+
+	const searchResultItems = useMemo(
+		() =>
+			searchResults?.map((item) => (
+				<Command.Item
+					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 [&[aria-selected]]:ring my-1 flex flex transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white"
+					key={item.id}
+					onSelect={() => {
+						void router.push(item.path);
+						dialog!.setOpen(false);
+					}}
+				>
+					<div className="flex grow flex-row place-content-between place-items-center gap-4">
+						<div className="flex flex-row place-items-center gap-4">
+							{resolveIcon(item.kind)}
+							<div className="w-50 sm:w-100 flex flex-col">
+								<h2 className="font-semibold">{item.name}</h2>
+								<div className="line-clamp-1 text-sm font-normal">{item.summary}</div>
+								<div className="line-clamp-1 hidden text-xs font-light opacity-75 dark:opacity-50 sm:block">
+									{item.path}
+								</div>
+							</div>
+						</div>
+						<VscArrowRight className="shrink-0" size={20} />
+					</div>
+				</Command.Item>
+			)) ?? [],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[searchResults],
+	);
+
+	useKey(
+		(event) => {
+			if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				return true;
+			}
+
+			return false;
+		},
+		dialog!.toggle,
+		{ event: 'keydown', options: {} },
+		[],
+	);
+
+	useEffect(() => {
+		if (!dialog!.open) {
+			setSearch('');
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [dialog!.open]);
+
+	useEffect(() => {
+		const searchDoc = async (searchString: string, version: string) => {
+			const res = await client.index(`${currentPackageName}-${version}`).search(searchString, { limit: 5 });
+			setSearchResults(res.hits);
+		};
+
+		if (search && currentPackageName) {
+			void searchDoc(search, currentVersion?.replaceAll('.', '-') ?? 'main');
+		} else {
+			setSearchResults([]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [search]);
+
+	return (
+		<Dialog className="fixed top-1/4 left-1/2 z-50 -translate-x-1/2" state={dialog!}>
+			<Command
+				className="dark:bg-dark-300 min-w-xs sm:min-w-lg max-w-xs rounded bg-white sm:max-w-lg"
+				label="Command Menu"
+				shouldFilter={false}
+			>
+				<Command.Input
+					className="dark:bg-dark-300 caret-blurple placeholder:text-dark-300/75 focus:ring-width-2 focus:ring-blurple w-full rounded border-0 bg-white p-4 text-lg outline-0 outline-0 focus:ring dark:placeholder:text-white/75"
+					onValueChange={setSearch}
+					placeholder="Quick search..."
+					value={search}
+				/>
+				<Command.List className="pt-0">
+					<Command.Empty className="p-4 text-center">No results found</Command.Empty>
+					{search ? searchResultItems : null}
+				</Command.List>
+			</Command>
+		</Dialog>
+	);
+}
--- a/apps/website/src/components/CodeListing.tsx
+++ b/apps/website/src/components/CodeListing.tsx
@@ -0,0 +1,86 @@
+import type { TokenDocumentation, ApiItemJSON, AnyDocNodeJSON, InheritanceData } from '@discordjs/api-extractor-utils';
+import type { PropsWithChildren } from 'react';
+import { FiLink } from 'react-icons/fi';
+import { HyperlinkedText } from './HyperlinkedText';
+import { InheritanceText } from './InheritanceText';
+import { TSDoc } from './tsdoc/TSDoc';
+
+export enum CodeListingSeparatorType {
+	Type = ':',
+	Value = '=',
+}
+
+export function CodeListing({
+	name,
+	separator = CodeListingSeparatorType.Type,
+	typeTokens,
+	readonly = false,
+	optional = false,
+	summary,
+	children,
+	comment,
+	deprecation,
+	inheritanceData,
+}: PropsWithChildren<{
+	comment?: AnyDocNodeJSON | null;
+	deprecation?: AnyDocNodeJSON | null;
+	inheritanceData?: InheritanceData | null;
+	name: string;
+	optional?: boolean;
+	readonly?: boolean;
+	separator?: CodeListingSeparatorType;
+	summary?: ApiItemJSON['summary'];
+	typeTokens: TokenDocumentation[];
+}>) {
+	return (
+		<div className="scroll-mt-30 flex flex-col gap-4" id={name}>
+			<div className="md:-ml-8.5 flex flex-col gap-0.5 md:flex-row md:place-items-center md:gap-2">
+				<a
+					aria-label="Anchor"
+					className="focus:ring-width-2 focus:ring-blurple hidden rounded outline-0 focus:ring md:inline-block"
+					href={`#${name}`}
+				>
+					<FiLink size={20} />
+				</a>
+				{deprecation || readonly || optional ? (
+					<div className="flex flex-row gap-1">
+						{deprecation ? (
+							<div className="flex h-5 place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
+								Deprecated
+							</div>
+						) : null}
+						{readonly ? (
+							<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								Readonly
+							</div>
+						) : null}
+						{optional ? (
+							<div className="bg-blurple flex h-5 place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								Optional
+							</div>
+						) : null}
+					</div>
+				) : null}
+				<div className="flex flex-row flex-wrap place-items-center gap-1">
+					<h4 className="break-all font-mono text-lg font-bold">
+						{name}
+						{optional ? '?' : ''}
+					</h4>
+					<h4 className="font-mono text-lg font-bold">{separator}</h4>
+					<h4 className="break-all font-mono text-lg font-bold">
+						<HyperlinkedText tokens={typeTokens} />
+					</h4>
+				</div>
+			</div>
+			{summary || inheritanceData ? (
+				<div className="flex flex-col gap-4">
+					{deprecation ? <TSDoc node={deprecation} /> : null}
+					{summary ? <TSDoc node={summary} /> : null}
+					{comment ? <TSDoc node={comment} /> : null}
+					{inheritanceData ? <InheritanceText data={inheritanceData} /> : null}
+					{children}
+				</div>
+			) : null}
+		</div>
+	);
+}
--- a/apps/website/src/components/DocContainer.tsx
+++ b/apps/website/src/components/DocContainer.tsx
@@ -0,0 +1,135 @@
+import type {
+	ApiItemJSON,
+	TokenDocumentation,
+	TypeParameterData,
+	ApiClassJSON,
+	ApiInterfaceJSON,
+} from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
+import type { ReactNode } from 'react';
+import { Fragment, type PropsWithChildren } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import {
+	VscSymbolClass,
+	VscSymbolMethod,
+	VscSymbolEnum,
+	VscSymbolInterface,
+	VscSymbolVariable,
+	VscListSelection,
+	VscSymbolParameter,
+} from 'react-icons/vsc';
+import { useMedia } from 'react-use';
+import { HyperlinkedText } from './HyperlinkedText';
+import { SyntaxHighlighter } from './SyntaxHighlighter';
+import { TableOfContentItems } from './TableOfContentItems';
+import { TypeParamTable } from './TypeParamTable';
+import { TSDoc } from './tsdoc/TSDoc';
+
+type DocContainerProps = PropsWithChildren<{
+	excerpt: string;
+	extendsTokens?: TokenDocumentation[] | null;
+	implementsTokens?: TokenDocumentation[][];
+	kind: string;
+	methods?: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] | null;
+	name: string;
+	properties?: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] | null;
+	subHeading?: ReactNode;
+	summary?: ApiItemJSON['summary'];
+	typeParams?: TypeParameterData[];
+}>;
+
+function generateIcon(kind: string) {
+	const icons = {
+		Class: <VscSymbolClass />,
+		Method: <VscSymbolMethod />,
+		Function: <VscSymbolMethod />,
+		Enum: <VscSymbolEnum />,
+		Interface: <VscSymbolInterface />,
+		TypeAlias: <VscSymbolVariable />,
+	};
+
+	return icons[kind as keyof typeof icons];
+}
+
+export function DocContainer({
+	name,
+	kind,
+	excerpt,
+	summary,
+	typeParams,
+	children,
+	extendsTokens,
+	implementsTokens,
+	methods,
+	properties,
+	subHeading,
+}: DocContainerProps) {
+	const matches = useMedia('(max-width: 768px)', true);
+
+	return (
+		<>
+			<div className="flex flex-col gap-4">
+				<h2 className="flex flex-row place-items-center gap-2 break-all text-2xl font-bold">
+					<span>{generateIcon(kind)}</span>
+					{name}
+				</h2>
+				{subHeading}
+				<Section dense={matches} icon={<VscListSelection size={20} />} padded title="Summary">
+					{summary ? <TSDoc node={summary} /> : <span>No summary provided.</span>}
+					<div className="border-light-900 dark:border-dark-100 -mx-8 mt-6 border-t-2" />
+				</Section>
+				<SyntaxHighlighter code={excerpt} />
+				{extendsTokens?.length ? (
+					<div className="flex flex-row place-items-center gap-4">
+						<h3 className="text-xl font-bold">Extends</h3>
+						<span className="break-all font-mono">
+							<HyperlinkedText tokens={extendsTokens} />
+						</span>
+					</div>
+				) : null}
+				{implementsTokens?.length ? (
+					<div className="flex flex-row place-items-center gap-4">
+						<h3 className="text-xl font-bold">Implements</h3>
+						<span className="break-all font-mono">
+							{implementsTokens.map((token, idx) => (
+								<Fragment key={idx}>
+									<HyperlinkedText tokens={token} />
+									{idx < implementsTokens.length - 1 ? ', ' : ''}
+								</Fragment>
+							))}
+						</span>
+					</div>
+				) : null}
+				<div className="flex flex-col gap-4">
+					{typeParams?.length ? (
+						<Section
+							defaultClosed
+							dense={matches}
+							icon={<VscSymbolParameter size={20} />}
+							padded
+							title="Type Parameters"
+						>
+							<TypeParamTable data={typeParams} />
+						</Section>
+					) : null}
+					{children}
+				</div>
+			</div>
+			{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
+				<aside className="dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[72px] right-0 bottom-0 z-20 hidden h-[calc(100vh_-_72px)] w-64 border-l bg-white pr-2 xl:block">
+					<Scrollbars
+						autoHide
+						hideTracksWhenNotNeeded
+						renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+						renderTrackVertical={(props) => (
+							<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
+						)}
+						universal
+					>
+						<TableOfContentItems methods={methods ?? []} properties={properties ?? []} />
+					</Scrollbars>
+				</aside>
+			) : null}
+		</>
+	);
+}
--- a/apps/website/src/components/HyperlinkedText.tsx
+++ b/apps/website/src/components/HyperlinkedText.tsx
@@ -0,0 +1,22 @@
+import type { TokenDocumentation } from '@discordjs/api-extractor-utils';
+import Link from 'next/link';
+
+export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
+	return (
+		<>
+			{tokens.map((token, idx) => {
+				if (token.path) {
+					return (
+						<Link href={token.path} key={idx} prefetch={false}>
+							<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring">
+								{token.text}
+							</a>
+						</Link>
+					);
+				}
+
+				return <span key={idx}>{token.text}</span>;
+			})}
+		</>
+	);
+}
--- a/apps/website/src/components/InheritanceText.tsx
+++ b/apps/website/src/components/InheritanceText.tsx
@@ -0,0 +1,15 @@
+import type { InheritanceData } from '@discordjs/api-extractor-utils';
+import Link from 'next/link';
+
+export function InheritanceText({ data }: { data: InheritanceData }) {
+	return (
+		<span className="font-semibold">
+			Inherited from{' '}
+			<Link href={data.path} prefetch={false}>
+				<a className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring">
+					{data.parentName}
+				</a>
+			</Link>
+		</span>
+	);
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`module.exports = require('../../.lintstagedrc.json');`
				`@@ -0,0 +1 @@`
				`module.exports = require('../../.prettierrc.json');`