chore: release all packages (#9230)

Co-authored-by: Vlad Frangu <kingdgrizzle@gmail.com>

.dockerignore

@@ -20,19 +20,37 @@ dist/
 # Miscellaneous
 .tmp/
 .vscode/*
-!.vscode/extensions.json
-!.vscode/settings.json
 .idea/
 .DS_Store
 .turbo
 tsconfig.tsbuildinfo
+coverage/
+__tests__/
 
 # yarn
 .pnp.*
 .yarn/*
-!.yarn/cache
 !.yarn/patches
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# Cache
+.prettiercache
+.eslintcache
+
+# Docker specific
+.cliff-jumperrc.json
+api-extractor.json
+.eslintrc.json
+.lintstagedrc.cjs
+.lintstagedrc.cjs
+.prettierignore
+.prettierrc.js
+.prettierrc.cjs
+cliff.toml
+CHANGELOG.md
+README.md
+tsconfig.eslint.json
+docs/

.github/CONTRIBUTING.md

@@ -17,6 +17,25 @@ To get ready to work on the codebase, please do the following:
 5. Run `yarn test` to run ESLint and ensure any JSDoc changes are valid
 6. [Submit a pull request](https://github.com/discordjs/discord.js/compare) (Make sure you follow the [conventional commit format](https://github.com/discordjs/discord.js/blob/main/.github/COMMIT_CONVENTION.md))
 
+## Testing changes locally
+
+If you want to test changes you've made locally, you can do so by using `yarn link`. This will create a symlink to your local copy of the discord.js libraries.
+
+1. Create a new directory `mkdir discordjs-test` and move into it `cd discordjs-test`
+2. Initialize a new yarn 3 project `yarn init -2`
+3. Disable pnp `yarn config set nodeLinker node-modules`
+4. Now link the local discord.js project you cloned earlier `yarn link -A {PATH_TO_DISCORDJS_REPO}`
+5. Install packages you'd like to test locally `yarn add discord.js@latest`, `yarn add @discordjs/rest@latest`, etc. **Note: Make sure you use `latest` tag or else yarn will try to install the remote package from npm**
+6. Import the package in your source code and test them out!
+
+### Working with TypeScript packages
+
+When testing local changes, you may notice you need to manually recompile TypeScript projects on every change in order to get the latest code changes to test locally.
+
+To avoid this you can use the `--watch` parameter in the package build script to automatically recompile the project when changes are detected.
+
+For example, to automatically recompile the `@discordjs/rest` project when changes are detected, run `yarn turbo run build --filter=@discordjs/rest -- --watch` in the root folder of where you cloned the discord.js repo.
+
 ## Adding new packages
 
 If you'd like to create another package under the `@discordjs` organization run the following command:

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -12,11 +12,15 @@ body:
       label: Which package is this bug report for?
       options:
         - discord.js
+        - brokers
         - builders
         - collection
-        - rest
+        - core
+        - formatters
+        - next
         - proxy
         - proxy-container
+        - rest
         - voice
         - ws
     validations:
@@ -116,7 +120,7 @@ body:
         - No Intents
         - Guilds
         - GuildMembers
-        - GuildBans
+        - GuildModeration
         - GuildEmojisAndStickers
         - GuildIntegrations
         - GuildWebhooks
@@ -131,6 +135,8 @@ body:
         - DirectMessageTyping
         - MessageContent
         - GuildScheduledEvents
+        - AutoModerationConfiguration
+        - AutoModerationExecution
       multiple: true
     validations:
       required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -11,14 +11,18 @@ body:
   - type: dropdown
     id: package
     attributes:
-      label: Which package is the feature request for?
+      label: Which package is this feature request for?
       options:
         - discord.js
+        - brokers
         - builders
         - collection
-        - rest
+        - core
+        - formatters
+        - next
         - proxy
         - proxy-container
+        - rest
         - voice
         - ws
     validations:

.github/issue-labeler.yml

@@ -0,0 +1,24 @@
+packages:brokers:
+  - '### Which package is this (bug report|feature request) for\?\n\nbrokers'
+packages:builders:
+  - '### Which package is this (bug report|feature request) for\?\n\nbuilders'
+packages:collection:
+  - '### Which package is this (bug report|feature request) for\?\n\ncollection'
+packages:core:
+  - '### Which package is this (bug report|feature request) for\?\n\ncore'
+packages:discord.js:
+  - '### Which package is this (bug report|feature request) for\?\n\ndiscord.js'
+packages:formatters:
+  - '### Which package is this (bug report|feature request) for\?\n\nformatters'
+packages:next:
+  - '### Which package is this (bug report|feature request) for\?\n\nnext'
+packages:proxy:
+  - '### Which package is this (bug report|feature request) for\?\n\nproxy'
+packages:proxy-container:
+  - '### Which package is this (bug report|feature request) for\?\n\nproxy-container'
+packages:rest:
+  - '### Which package is this (bug report|feature request) for\?\n\nrest'
+packages:voice:
+  - '### Which package is this (bug report|feature request) for\?\n\nvoice'
+packages:ws:
+  - '### Which package is this (bug report|feature request) for\?\n\nws'

.github/labeler.yml

@@ -4,19 +4,30 @@ apps:guide:
 apps:website:
   - apps/website/*
   - apps/website/**/*
-
+packages:brokers:
+  - packages/brokers/*
+  - packages/brokers/**/*
 packages:builders:
   - packages/builders/*
   - packages/builders/**/*
 packages:collection:
   - packages/collection/*
   - packages/collection/**/*
+packages:core:
+  - packages/core/*
+  - packages/core/**/*
 packages:discord.js:
   - packages/discord.js/*
   - packages/discord.js/**/*
+packages:next:
+  - packages/next/*
+  - packages/next/**/*
 packages:docgen:
   - packages/docgen/*
   - packages/docgen/**/*
+packages:formatters:
+  - packages/formatters/*
+  - packages/formatters/**/*
 packages:proxy:
   - packages/proxy/*
   - packages/proxy/**/*
@@ -26,9 +37,9 @@ packages:proxy-container:
 packages:rest:
   - packages/rest/*
   - packages/rest/**/*
-packages/ui:
-  - packages:ui/*
-  - packages:ui/**/*
+packages:ui:
+  - packages/ui/*
+  - packages/ui/**/*
 packages:util:
   - packages/util/*
   - packages/util/**/*

.github/labels.yml

@@ -8,6 +8,8 @@
   color: fbca04
 - name: backlog
   color: 7ef7ef
+- name: backport
+  color: 88aabb
 - name: blocked
   color: fc1423
 - name: bug
@@ -20,10 +22,10 @@
   color: 0075ca
 - name: dependencies
   color: 276bd1
-- name: discussion
-  color: b6b1f9
 - name: discord
   color: '5663e9'
+- name: discussion
+  color: b6b1f9
 - name: documentation
   color: 0075ca
 - name: duplicate
@@ -40,24 +42,32 @@
   color: 4b1f8e
 - name: help wanted
   color: '008672'
-- name: interactions
-  color: 80c042
 - name: in progress
   color: ffccd7
 - name: in review
   color: aed5fc
+- name: interactions
+  color: 80c042
 - name: invalid
   color: e4e669
 - name: need repro
   color: c66037
+- name: packages:brokers
+  color: fbca04
 - name: packages:builders
   color: fbca04
 - name: packages:collection
   color: fbca04
+- name: packages:core
+  color: fbca04
 - name: packages:discord.js
   color: fbca04
+- name: packages:next
+  color: fbca04
 - name: packages:docgen
   color: fbca04
+- name: packages:formatters
+  color: fbca04
 - name: packages:proxy
   color: fbca04
 - name: packages:proxy-container

.github/workflows/documentation.yml

@@ -3,6 +3,8 @@ on:
   push:
     branches:
       - 'main'
+    paths:
+      - 'packages/*/src/**'
     tags:
       - '**'
   workflow_dispatch:
@@ -32,16 +34,15 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
         with:
-          ref: ${{ github.event.inputs.ref || '' }}
+          ref: ${{ inputs.ref || '' }}
 
       - name: Install node.js v16
         uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn --immutable
+        uses: ./packages/actions/src/yarnCache
 
       - name: Build dependencies
         run: yarn build
@@ -68,13 +69,25 @@ jobs:
       max-parallel: 1
       fail-fast: false
       matrix:
-        package: ['builders', 'collection', 'discord.js', 'proxy', 'rest', 'util', 'voice', 'ws']
+        package:
+          [
+            'brokers',
+            'builders',
+            'collection',
+            'core',
+            'discord.js',
+            'next',
+            'formatters',
+            'proxy',
+            'rest',
+            'util',
+            'voice',
+            'ws',
+          ]
     runs-on: ubuntu-latest
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-      BRANCH_NAME: ${{ github.event.inputs.ref || needs.build.outputs.BRANCH_NAME }}
-      BRANCH_OR_TAG: ${{ github.event.inputs.ref_type || needs.build.outputs.BRANCH_OR_TAG }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
@@ -83,10 +96,9 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn --immutable
+        uses: ./packages/actions/src/yarnCache
 
       - name: Build actions
         run: yarn workspace @discordjs/actions build
@@ -111,14 +123,14 @@ jobs:
           path: 'out'
 
       - name: Extract package and semver from tag
-        if: ${{ env.GITHUB_REF_TYPE == 'tag' }}
+        if: ${{ github.ref_type == 'tag' }}
         id: extract-tag
         uses: ./packages/actions/src/formatTag
         with:
-          tag: ${{ env.GITHUB_REF_NAME }}
+          tag: ${{ github.ref_name }}
 
       - name: Move docs to correct directory
-        if: ${{ env.GITHUB_REF_TYPE == 'tag' && matrix.package == steps.extract-tag.outputs.package }}
+        if: ${{ github.ref_type == 'tag' && matrix.package == steps.extract-tag.outputs.package }}
         env:
           PACKAGE: ${{ steps.extract-tag.outputs.package }}
           SEMVER: ${{ steps.extract-tag.outputs.semver }}
@@ -132,7 +144,7 @@ jobs:
           fi
 
       - name: Move docs to correct directory
-        if: ${{ env.GITHUB_REF_TYPE == 'branch' }}
+        if: ${{ github.ref_type == 'branch' }}
         env:
           PACKAGE: ${{ matrix.package }}
         run: |

.github/workflows/issue-triage.yml

@@ -0,0 +1,15 @@
+name: 'Issue Labeler'
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  issue-triage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: github/issue-labeler@v2.5
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          configuration-path: .github/issue-labeler.yml
+          not-before: 2023-01-13T10:25:03.847Z
+          enable-versioned-regex: 0

.github/workflows/nextjs-bundle-analysis.yml

@@ -0,0 +1,102 @@
+name: 'Next.js Bundle Analysis'
+on:
+  push:
+    branches:
+      - 'main'
+  pull_request_target:
+    paths:
+      - 'apps/website/**'
+  workflow_dispatch:
+defaults:
+  run:
+    working-directory: apps/website
+permissions:
+  contents: read
+  actions: read
+  pull-requests: write
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install node.js v16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        uses: ./packages/actions/src/yarnCache
+
+      - name: Restore next build
+        uses: actions/cache@v3
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          path: apps/website/.next/cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Build packages
+        run: yarn run --top-level build
+
+      - name: Build website
+        run: yarn workspace @discordjs/website run build:local
+
+      - name: Analyze bundle
+        run: npx -yes -p github:hashicorp/nextjs-bundle-analysis report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v3
+        with:
+          name: bundle
+          path: apps/website/.next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: nextjs-bundle-analysis.yml
+          commit: ${{ github.event.pull_request.base.sha }}
+          path: apps/website/.next/analyze/base
+
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR .next/analyze/base && npx -yes -p github:hashicorp/nextjs-bundle-analysis compare
+
+      - name: Get comment body
+        id: get-comment-body
+        if: success() && github.event.number
+        uses: actions/github-script@v6
+        with:
+          result-encoding: string
+          script: |
+            const fs = require('fs');
+            const comment = fs.readFileSync('apps/website/.next/analyze/__bundle_analysis_comment.txt', 'utf8');
+            core.setOutput('body', comment);
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: '<!-- __NEXTJS_BUNDLE -->'
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v2
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v2
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/npm-auto-deprecate.yml

@@ -16,12 +16,11 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn --immutable
+        uses: ./packages/actions/src/yarnCache
 
       - name: Deprecate versions
-        run: 'yarn npm-deprecate --name "*dev*" --package @discordjs/builders @discordjs/collection discord.js @discordjs/proxy @discordjs/rest @discordjs/util @discordjs/voice @discordjs/ws'
+        run: 'yarn npm-deprecate --name "*dev*" --package @discordjs/brokers @discordjs/builders @discordjs/collection @discordjs/core @discordjs/formatters discord.js @discordjs/next @discordjs/proxy @discordjs/rest @discordjs/util @discordjs/voice @discordjs/ws'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/publish-dev.yml

@@ -10,12 +10,20 @@ jobs:
       fail-fast: false
       matrix:
         include:
+          - package: '@discordjs/brokers'
+            folder: 'brokers'
           - package: '@discordjs/builders'
             folder: 'builders'
           - package: '@discordjs/collection'
             folder: 'collection'
+          - package: '@discordjs/core'
+            folder: 'core'
+          - package: '@discordjs/formatters'
+            folder: 'formatters'
           - package: 'discord.js'
             folder: 'discord.js'
+          - package: '@discordjs/next'
+            folder: 'next'
           - package: '@discordjs/proxy'
             folder: 'proxy'
           - package: '@discordjs/rest'
@@ -40,10 +48,9 @@ jobs:
         with:
           node-version: 16
           registry-url: https://registry.npmjs.org/
-          cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn --immutable
+        uses: ./packages/actions/src/yarnCache
 
       - name: Build dependencies
         run: yarn build

.github/workflows/publish-release.yml

@@ -0,0 +1,39 @@
+name: Publish Release
+on:
+  release:
+    types: [released]
+jobs:
+  npm-publish:
+    name: npm publish
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    if: github.repository_owner == 'discordjs'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install node.js v16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+
+      - name: Install dependencies
+        uses: ./packages/actions/src/yarnCache
+
+      - name: Build dependencies
+        run: yarn build
+
+      - name: Extract package and semver from tag
+        id: extract-tag
+        uses: ./packages/actions/src/formatTag
+        with:
+          tag: ${{ github.ref_name }}
+
+      - name: Publish package
+        run: |
+          yarn workspace ${{ steps.extract-tag.outputs.subpackage == 'true' && '@discordjs/' || '' }}${{ steps.extract-tag.outputs.package }} npm publish
+        env:
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/tests.yml

@@ -3,7 +3,8 @@ on:
   push:
   pull_request:
 concurrency:
-  group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
+  # Group based on workflow name and PR if it exists, if no PR, let it run so carryforward flags work
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
   cancel-in-progress: true
 jobs:
   tests:
@@ -15,27 +16,48 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
 
       - name: Install node.js v16
         uses: actions/setup-node@v3
         with:
           node-version: 16
-          cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn install --immutable
+        uses: ./packages/actions/src/yarnCache
 
-      - name: Build dependencies
-        run: yarn build
+      - name: Build dependencies (PR)
+        if: ${{ github.event_name != 'push' }}
+        run: yarn build --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]"
 
-      - name: ESLint
-        run: yarn lint
+      - name: Build dependencies (Push)
+        if: ${{ github.event_name == 'push' }}
+        run: yarn build --filter="...[HEAD^1]"
 
-      - name: Tests
-        run: yarn test
+      - name: ESLint (PR)
+        if: ${{ github.event_name != 'push' }}
+        run: yarn lint --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" -- --format=compact
 
-      - name: Docs
-        run: yarn docs
+      - name: ESLint (Push)
+        if: ${{ github.event_name == 'push' }}
+        run: yarn lint --filter="...[HEAD^1]" -- --format=compact
+
+      - name: Tests (PR)
+        if: ${{ github.event_name != 'push' }}
+        run: yarn test --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]"
+
+      - name: Tests (Push)
+        if: ${{ github.event_name == 'push' }}
+        run: yarn test --filter="...[HEAD^1]"
+
+      - name: Docs (PR)
+        if: ${{ github.event_name != 'push' }}
+        run: yarn docs --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]"
+
+      - name: Docs (Push)
+        if: ${{ github.event_name == 'push' }}
+        run: yarn docs --filter="...[HEAD^1]"
 
       - name: Upload Coverage
         if: github.repository_owner == 'discordjs'

.gitignore

@@ -16,6 +16,7 @@ pids
 
 # Dist
 dist/
+dist-docs/
 
 # Miscellaneous
 .tmp/
@@ -27,6 +28,7 @@ dist/
 .turbo
 tsconfig.tsbuildinfo
 coverage/
+out/
 
 # yarn
 .pnp.*
@@ -39,4 +41,4 @@ coverage/
 
 # Cache
 .prettiercache
-.eslintcache
+.eslintcache

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn build && yarn lint-staged
+yarn build:affected && yarn lint-staged

.vscode/extensions.json

@@ -9,6 +9,7 @@
 		"christian-kohler.npm-intellisense",
 		"christian-kohler.path-intellisense",
 		"antfu.unocss",
-		"astro-build.astro-vscode"
+		"astro-build.astro-vscode",
+		"unifiedjs.vscode-mdx"
 	]
 }

.vscode/settings.json

@@ -8,9 +8,12 @@
 		"source.fixAll": true,
 		"source.organizeImports": false
 	},
+	"editor.trimAutoWhitespace": false,
 	"files.associations": {
 		"*.mdx": "markdown"
 	},
-	"unocss.root": "./packages/ui",
+	"files.insertFinalNewline": true,
+	"files.eol": "\n",
+	"npm.packageManager": "yarn",
 	"typescript.tsdk": "node_modules/typescript/lib"
 }

.yarnrc.yml

@@ -2,10 +2,10 @@ nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+    spec: '@yarnpkg/plugin-interactive-tools'
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+    spec: '@yarnpkg/plugin-workspace-tools'
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: "@yarnpkg/plugin-version"
+    spec: '@yarnpkg/plugin-version'
 
-yarnPath: .yarn/releases/yarn-3.2.4.cjs
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

api-extractor.json

@@ -45,7 +45,7 @@
 	 *
 	 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
 	 */
-	"mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
+	"mainEntryPointFilePath": "<projectFolder>/dist-docs/index.d.ts",
 
 	/**
 	 * A list of NPM package names whose exports should be treated as part of this package.
@@ -342,6 +342,12 @@
 			"default": {
 				"logLevel": "warning"
 				// "addToApiReportFile": false
+			},
+
+			// Disable the following warning:
+			// (ae-missing-release-tag) "x" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+			"ae-missing-release-tag": {
+				"logLevel": "none"
 			}
 
 			// "ae-extra-release-tag": {

apps/guide/.prettierrc.cjs

@@ -1 +1,8 @@
-module.exports = require('../../.prettierrc.json');
+module.exports = {
+	...require('../../.prettierrc.json'),
+	plugins: [
+		'prettier-plugin-astro',
+		'prettier-plugin-tailwindcss', // MUST come last
+	],
+	pluginSearchDirs: false,
+};

apps/guide/astro.config.ts

@@ -7,7 +7,7 @@ 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 { type Node, toString } from 'hast-util-to-string';
 import { h } from 'hastscript';
 import { escape } from 'html-escaper';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
@@ -43,10 +43,42 @@ const createSROnlyLabel = (text: string) => {
 	return node;
 };
 
+const rootDir = new URL('../../', import.meta.url);
+
 export default defineConfig({
 	integrations: [
 		react(),
-		mdx(),
+		mdx({
+			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 }: { tagName: string }) =>
+							h('div', {
+								class: `[&>*]:inline-block [&>h1]:m-0 [&>h2]:m-0 [&>h3]:m-0 [&>h4]:m-0 level-${tagName}`,
+								tabIndex: -1,
+							}),
+						content: (heading: Node) => [
+							h(
+								`span.anchor-icon`,
+								{
+									ariaHidden: 'true',
+								},
+								LinkIcon,
+							),
+							createSROnlyLabel(toString(heading)),
+						],
+					},
+				],
+			],
+		}),
 		image({
 			serviceEntryPoint: '@astrojs/image/sharp',
 		}),
@@ -54,60 +86,32 @@ export default defineConfig({
 			throttle: 3,
 		}),
 		Unocss({
-			configFile: fileURLToPath(new URL('../../packages/ui/unocss.config.ts', import.meta.url)),
+			configFile: fileURLToPath(new URL('unocss.config.ts', rootDir)),
 		}),
 		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)),
+				'ariakit/button': fileURLToPath(new URL('node_modules/ariakit/esm/button/index.js', rootDir)),
+				'ariakit/disclosure': fileURLToPath(new URL('node_modules/ariakit/esm/disclosure/index.js', rootDir)),
+				'ariakit/separator': fileURLToPath(new URL('node_modules/ariakit/esm/separator/index.js', rootDir)),
+				'ariakit-utils/dom': fileURLToPath(new URL('node_modules/ariakit-utils/esm/dom.js', rootDir)),
+				'ariakit-utils/events': fileURLToPath(new URL('node_modules/ariakit-utils/esm/events.js', rootDir)),
+				'ariakit-utils/focus': fileURLToPath(new URL('node_modules/ariakit-utils/esm/focus.js', rootDir)),
+				'ariakit-utils/misc': fileURLToPath(new URL('node_modules/ariakit-utils/esm/misc.js', rootDir)),
+				'ariakit-utils/platform': fileURLToPath(new URL('node_modules/ariakit-utils/esm/platform.js', rootDir)),
+				'ariakit-react-utils/hooks': fileURLToPath(new URL('node_modules/ariakit-react-utils/esm/hooks.js', rootDir)),
+				'ariakit-react-utils/misc': fileURLToPath(new URL('node_modules/ariakit-react-utils/esm/misc.js', rootDir)),
+				'ariakit-react-utils/system': fileURLToPath(new URL('node_modules/ariakit-react-utils/esm/system.js', rootDir)),
+				'react-icons/fi': fileURLToPath(new URL('node_modules/react-icons/fi/index.esm.js', rootDir)),
+				'react-icons/vsc': fileURLToPath(new URL('node_modules/react-icons/vsc/index.esm.js', rootDir)),
+				'react-use': fileURLToPath(new URL('node_modules/react-use/esm/index.js', rootDir)),
 			},
 		},
 	},

apps/guide/package.json

@@ -5,11 +5,13 @@
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"build:prod": "yarn workspace @discordjs/ui run build && astro build",
-		"dev": "astro dev",
+		"build:local": "yarn build:prod",
+		"build:prod": "yarn workspaces foreach -ptR run build && astro build",
+		"dev": "yarn workspaces foreach -ptR run build && 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"
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --format=pretty",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix --format=pretty",
+		"fmt": "yarn format"
 	},
 	"type": "module",
 	"contributors": [
@@ -34,53 +36,52 @@
 	},
 	"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",
+		"@code-hike/mdx": "^0.8.0",
 		"@discordjs/ui": "workspace:^",
-		"ariakit": "^2.0.0-next.41",
-		"cmdk": "^0.1.20",
-		"meilisearch": "^0.28.0",
-		"react": "^17.0.2",
+		"ariakit": "^2.0.0-next.43",
+		"react": "^18.2.0",
 		"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"
+		"react-dom": "^18.2.0",
+		"react-icons": "^4.7.1",
+		"react-use": "^17.4.0"
 	},
 	"devDependencies": {
-		"@astrojs/prefetch": "^0.0.8",
-		"@testing-library/react": "^13.4.0",
+		"@astrojs/image": "^0.15.1",
+		"@astrojs/mdx": "^0.17.2",
+		"@astrojs/prefetch": "^0.1.2",
+		"@astrojs/react": "^2.0.2",
+		"@testing-library/react": "^14.0.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",
+		"@types/node": "16.18.13",
+		"@types/react": "^18.0.28",
+		"@types/react-dom": "^18.0.11",
+		"@types/react-syntax-highlighter": "^15.5.6",
+		"@unocss/cli": "^0.50.1",
+		"@unocss/reset": "^0.50.1",
+		"@vitejs/plugin-react": "^3.1.0",
+		"@vitest/coverage-c8": "^0.29.1",
+		"astro": "^1.9.2",
+		"astro-compress": "^1.1.35",
+		"astro-critters": "^1.1.31",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.25.0",
-		"eslint-config-neon": "^0.1.37",
-		"happy-dom": "^7.4.0",
+		"eslint": "^8.35.0",
+		"eslint-config-neon": "^0.1.40",
+		"eslint-formatter-pretty": "^4.1.0",
+		"happy-dom": "^8.9.0",
 		"hast-util-to-string": "^2.0.0",
-		"hastscript": "^7.0.2",
+		"hastscript": "^7.2.0",
 		"html-escaper": "^3.0.3",
-		"prettier": "^2.7.1",
-		"prettier-plugin-astro": "^0.5.5",
-		"prettier-plugin-tailwindcss": "^0.1.13",
+		"prettier": "^2.8.4",
+		"prettier-plugin-astro": "^0.8.0",
+		"prettier-plugin-tailwindcss": "^0.2.3",
 		"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"
+		"rehype-slug": "^5.1.0",
+		"sharp": "^0.31.3",
+		"shiki": "^0.14.1",
+		"typescript": "^4.9.5",
+		"unocss": "^0.50.1",
+		"vercel": "^28.16.7",
+		"vitest": "^0.29.1"
 	},
 	"engines": {
 		"node": ">=16.9.0"

apps/guide/src/components/PageButton.tsx

@@ -0,0 +1,13 @@
+export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
+	return (
+		<a
+			className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple flex transform-gpu cursor-pointer select-none appearance-none flex-row flex-col place-items-center gap-2 rounded py-3 px-4 leading-none no-underline outline-0 focus:ring active:translate-y-px"
+			href={url}
+		>
+			<h3 className="text-md font-semibold">{title}</h3>
+			<p className={`${direction === 'next' ? 'ml-auto' : 'mr-auto'} text-sm text-gray-600 dark:text-gray-400`}>
+				{direction === 'next' ? 'Next Page' : 'Previous Page'}
+			</p>
+		</a>
+	);
+}

apps/guide/src/components/SidebarLayout.astro

@@ -4,13 +4,32 @@ import type { MarkdownLayoutProps } from 'astro';
 import { ExternalLink } from './ExternalLink.jsx';
 import { Navbar } from './Navbar.jsx';
 import { Outline } from './Outline.jsx';
+import { PageButton } from './PageButton.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;
+const { headings, url, frontmatter } = Astro.props;
+
+const groupedPages = pages.reduce<Record<string, typeof pages>>((acc, page) => {
+	const { category } = page.frontmatter;
+	acc[category] ??= [];
+
+	acc[category]?.push(page);
+	return acc;
+}, {});
+
+// @ts-expect-error props is not typed
+const category = frontmatter.category as string;
+
+const curCategoryPages = groupedPages[category];
+const curCategoryIndex = curCategoryPages!.findIndex((page) => page.url === url);
+
+const pagePrev = curCategoryPages![curCategoryIndex - 1];
+// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+const pageNext = curCategoryPages![curCategoryIndex + 1];
 ---
 
 <script>
@@ -56,15 +75,39 @@ const { headings, url } = Astro.props;
 			>
 				<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" />
+			<Separator className="my-5 border-light-800 dark:border-dark-100" />
+			<div class="flex flex-col space-y-5">
+				<div class="flex place-content-end">
+					<ExternalLink client:load href={generateGithubURL(url!)} title="Edit this page on github" />
+				</div>
+				<div class="flex w-full">
+					{
+						pagePrev && (
+							<PageButton
+								direction="prev"
+								title={pagePrev.frontmatter.title}
+								url={pagePrev.url === '' ? '/' : pagePrev.url!}
+							/>
+						)
+					}
+					<div class="ml-auto self-end justify-self-end">
+						{
+							pageNext && (
+								<PageButton
+									direction="next"
+									title={pageNext.frontmatter.title}
+									url={pageNext.url === '' ? '/' : pageNext.url!}
+								/>
+							)
+						}
+					</div>
+				</div>
 			</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"
+			class="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 xl:pr-76 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16"
 		>
 			<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">

apps/guide/src/pages/additional-info/async-await.mdx

@@ -0,0 +1,253 @@
+---
+layout: '../../layouts/SidebarLayout.astro'
+title: Understanding async/await
+category: Additional info
+---
+
+import { CH } from '@code-hike/mdx/components';
+import { Alert } from '@discordjs/ui';
+
+# Understanding async/await
+
+If you aren't very familiar with ECMAScript 2017, you may not know about async/await. It's a useful way to handle Promises in a hoisted manner. It's also slightly faster and increases overall readability.
+
+## How do Promises work?
+
+Before we can get into async/await, you should know what Promises are and how they work because async/await is just a way to handle Promises. If you know what Promises are and how to deal with them, you can skip this part.
+
+Promises are a way to handle asynchronous tasks in JavaScript; they are the newer alternative to callbacks. A Promise has many similarities to a progress bar; they represent an unfinished and ongoing process. An excellent example of this is a request to a server (e.g., discord.js sends requests to Discord's API).
+
+A Promise can have three states; pending, resolved, and rejected
+
+The **pending** state means that the Promise still is ongoing and neither resolved nor rejected.
+The **resolved** state means that the Promise is done and executed without any errors.
+The **rejected** state means that the Promise encountered an error and could not execute correctly.
+
+One important thing to know is that a Promise can only have one state simultaneously; it can never be pending and resolved, rejected and resolved, or pending and rejected. You may be asking, "How would that look in code?". Here is a small example:
+
+<Alert title="Tip" type="success">
+	This example uses ES6 code. If you do not know what that is, you should read up on that
+	[here](/additional-info/es6-syntax.md).
+</Alert>
+
+<CH.Code client:load>
+
+```js
+function deleteMessages(amount) {
+	return new Promise((resolve) => {
+		if (amount > 10) throw new Error("You can't delete more than 10 Messages at a time.");
+		setTimeout(() => resolve('Deleted 10 messages.'), 2000);
+	});
+}
+
+deleteMessages(5)
+	.then((value) => {
+		// `deleteMessages` is complete and has not encountered any errors
+		// the resolved value will be the string "Deleted 10 messages"
+	})
+	.catch((error) => {
+		// `deleteMessages` encountered an error
+		// the error will be an Error Object
+	});
+```
+
+</CH.Code>
+
+In this scenario, the _`deleteMessages`_ function returns a Promise. The _`.then()`_ method will trigger if the Promise resolves, and the _`.catch()`_ method if the Promise rejects. In the _`deleteMessages`_ function, the Promise is resolved after 2 seconds with the string "Deleted 10 messages.", so the _`.catch()`_ method will never be executed. You can also pass the _`.catch()`_ function as the second parameter of _`.then()`_.
+
+## How to implement async/await
+
+### Theory
+
+The following information is essential to know before working with async/await. You can only use the _`await`_ keyword inside a function declared as _`async`_ (you put the _`async`_ keyword before the _`function`_ keyword or before the parameters when using a callback function).
+
+A simple example would be:
+
+<CH.Code client:load>
+
+```js
+async function declaredAsAsync() {
+	// ...
+}
+```
+
+</CH.Code>
+
+or
+
+<CH.Code client:load>
+
+```js
+const declaredAsAsync = async () => {
+	// ...
+};
+```
+
+</CH.Code>
+
+You can use that as well if you use the arrow function as an event listener.
+
+<CH.Code client:load>
+
+```js
+client.on('event', async (first, last) => {
+	// ...
+});
+```
+
+</CH.Code>
+
+An important thing to know is that a function declared as _`async`_ will always return a Promise. In addition to this, if you return something, the Promise will resolve with that value, and if you throw an error, it will reject the Promise with that error.
+
+### Execution with discord.js code
+
+Now that you know how Promises work and what they are used for, let's look at an example that handles multiple Promises. Let's say you want to react with letters (regional indicators) in a specific order. For this example, here's a basic template for a discord.js bot with some ES6 adjustments.
+
+<CH.Code client:load>
+
+```js
+const { Client, GatewayIntentBits } = require('discord.js');
+
+const client = new Client({ intents: [GatewayIntentBits.Guilds] });
+
+client.once('ready', () => {
+	console.log('I am ready!');
+});
+
+client.on('interactionCreate', (interaction) => {
+	if (!interaction.isChatInputCommand()) return;
+
+	if (interaction.commandName === 'react') {
+		// ...
+	}
+});
+
+client.login('your-token-goes-here');
+```
+
+</CH.Code>
+
+If you don't know how Node.js asynchronous execution works, you would probably try something like this:
+
+<CH.Code client:load>
+
+```js mark=4:7
+client.on('interactionCreate', (interaction) => {
+	// ...
+	if (commandName === 'react') {
+		const message = interaction.reply({ content: 'Reacting!', fetchReply: true });
+		message.react('🇦');
+		message.react('🇧');
+		message.react('🇨');
+	}
+});
+```
+
+</CH.Code>
+
+But since all of these methods are started at the same time, it would just be a race to which server request finished first, so there would be no guarantee that it would react at all (if the message isn't fetched) or in the order you wanted it to. In order to make sure it reacts after the message is sent and in order (a, b, c), you'd need to use the _`.then()`_ callback from the Promises that these methods return. The code would look like this:
+
+<CH.Code client:load>
+
+```js mark=4:12
+client.on('interactionCreate', (interaction) => {
+	// ...
+	if (commandName === 'react') {
+		interaction.reply({ content: 'Reacting!', fetchReply: true }).then((message) => {
+			message
+				.react('🇦')
+				.then(() => message.react('🇧'))
+				.then(() => message.react('🇨'))
+				.catch((error) => {
+					// handle failure of any Promise rejection inside here
+				});
+		});
+	}
+});
+```
+
+</CH.Code>
+
+In this piece of code, the Promises are [chain resolved](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Chaining) with each other, and if one of the Promises gets rejected, the function passed to _`.catch()`_ gets called. Here's the same code but with async/await:
+
+<CH.Code client:load>
+
+```js mark=1,4:7
+client.on('interactionCreate', async (interaction) => {
+	// ...
+	if (commandName === 'react') {
+		const message = await interaction.reply({ content: 'Reacting!', fetchReply: true });
+		await message.react('🇦');
+		await message.react('🇧');
+		await message.react('🇨');
+	}
+});
+```
+
+</CH.Code>
+
+It's mostly the same code, but how would you catch Promise rejections now since _`.catch()`_ isn't there anymore? That is also a useful feature with async/await; the error will be thrown if you await it so that you can wrap the awaited Promises inside a try/catch, and you're good to go.
+
+<CH.Code client:load>
+
+```js mark=1,4:11
+client.on('interactionCreate', async (interaction) => {
+	if (commandName === 'react') {
+		try {
+			const message = await interaction.reply({ content: 'Reacting!', fetchReply: true });
+			await message.react('🇦');
+			await message.react('🇧');
+			await message.react('🇨');
+		} catch (error) {
+			// handle failure of any Promise rejection inside here
+		}
+	}
+});
+```
+
+</CH.Code>
+
+This code looks clean and is also easy to read.
+
+So you may be asking, "How would I get the value the Promise resolved with?".
+
+Let's look at an example where you want to delete a sent reply.
+
+<CH.Code client:load>
+
+```js mark=3:10
+client.on('interactionCreate', (interaction) => {
+	// ...
+	if (commandName === 'delete') {
+		interaction
+			.reply({ content: 'This message will be deleted.', fetchReply: true })
+			.then((replyMessage) => setTimeout(() => replyMessage.delete(), 10000))
+			.catch((error) => {
+				// handle error
+			});
+	}
+});
+```
+
+</CH.Code>
+
+The return value of a _`.reply()`_ with the _`fetchReply`_ option set to _`true`_ is a Promise which resolves with the reply when it has been sent, but how would the same code with async/await look?
+
+<CH.Code client:load>
+
+```js mark=1,4:10
+client.on('interactionCreate', async (interaction) => {
+	if (commandName === 'delete') {
+		try {
+			const replyMessage = await interaction.reply({ content: 'This message will be deleted.', fetchReply: true });
+			setTimeout(() => replyMessage.delete(), 10000);
+		} catch (error) {
+			// handle error
+		}
+	}
+});
+```
+
+</CH.Code>
+
+With async/await, you can assign the awaited function to a variable representing the returned value. Now you know how you use async/await.

apps/guide/src/pages/additional-info/collections.mdx

@@ -0,0 +1,127 @@
+---
+layout: '../../layouts/SidebarLayout.astro'
+title: Collections
+category: Additional info
+---
+
+import { CH } from '@code-hike/mdx/components';
+import { Alert } from '@discordjs/ui';
+
+# Collections
+
+discord.js comes with a utility class known as _`Collection`_.
+It extends JavaScript's native _`Map`_ class, so it has all the _`Map`_ features and more!
+
+<Alert title="Warning" type="warning">
+	If you're not familiar with _`Map`_, read [MDN's page on
+	it](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) before continuing. You
+	should be familiar with _`Array`_
+	[methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) as well. We will
+	also use some ES6 features, so read up [here](/additional-info/es6-syntax.md) if you do not know what they are.
+</Alert>
+
+A _`Map`_ allows for an association between unique keys and their values.
+For example, how can you transform every value or filter the entries in a _`Map`_ easily?
+This is the point of the _`Collection`_ class!
+
+## Array-like Methods
+
+Many of the methods on _`Collection`_ correspond to their namesake in _`Array`_. One of them is _`find`_:
+
+<CH.Code client:load>
+
+```js
+// Assume we have an array of users and a collection of the same users.
+array.find((u) => u.discriminator === '1000');
+collection.find((u) => u.discriminator === '1000');
+```
+
+</CH.Code>
+
+The interface of the callback function is very similar between the two.
+For arrays, callbacks usually pass the parameters _`(value, index, array)`_, where _`value`_ is the value iterated to,
+_`index`_ is the current index, and _`array`_ is the array. For collections, you would have _`(value, key, collection)`_.
+Here, _`value`_ is the same, but _`key`_ is the key of the value, and _`collection`_ is the collection itself instead.
+
+Methods that follow this philosophy of staying close to the _`Array`_ interface are as follows:
+
+- _`find`_
+- _`filter`_ - Note that this returns a _`Collection`_ rather than an _`Array`_.
+- _`map`_ - Yet this returns an _`Array`_ of values instead of a _`Collection`_!
+- _`every`_
+- _`some`_
+- _`reduce`_
+- _`concat`_
+- _`sort`_
+
+## Converting to Array
+
+Since _`Collection`_ extends _`Map`_, it is an [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols), and can be converted to an _`Array`_ through either _`Array.from()`_ or spread syntax (_`...collection`_).
+
+<CH.Code client:load>
+
+```js
+// For values.
+Array.from(collection.values());
+[...collection.values()];
+
+// For keys.
+Array.from(collection.keys());
+[...collection.keys()];
+
+// For [key, value] pairs.
+Array.from(collection);
+[...collection];
+```
+
+</CH.Code>
+
+<Alert title="Warning" type="warning">
+	Many people convert Collections to Arrays way too much! This can lead to unnecessary and confusing code. Before you
+	use _`Array.from()`_ or similar, ask yourself if whatever you are trying to do can't be done with the given _`Map`_ or
+	_`Collection`_ methods or with a for-of loop.
+</Alert>
+
+## Extra Utilities
+
+Some methods are not from _`Array`_ and are instead entirely new to standard JavaScript.
+
+<CH.Code client:load>
+
+```js
+// A random value.
+collection.random();
+
+// The first value.
+collection.first();
+
+// The first 5 values.
+collection.first(5);
+
+// Similar to `first`, but from the end.
+collection.last();
+collection.last(2);
+
+// Removes anything that meets the condition from the collection.
+// Sort of like `filter`, but in-place.
+collection.sweep((user) => user.username === 'Bob');
+```
+
+</CH.Code>
+
+A more complicated method is _`partition`_, which splits a single Collection into two new Collections based on the provided function.
+You can think of it as two \_`filter`\_s, but done at the same time:
+
+<CH.Code client:load>
+
+```js
+// `bots` is a Collection of users where their `bot` property was true.
+// `humans` is a Collection where the property was false instead!
+const [bots, humans] = collection.partition((u) => u.bot);
+
+// Both return true.
+bots.every((b) => b.bot);
+humans.every((h) => !h.bot);
+```
+
+</CH.Code>

apps/guide/src/pages/creating-your-bot/creating-commands.mdx

@@ -19,13 +19,15 @@ import { ResultingCode } from '../../components/ResultingCode.jsx';
 	<DiscordMessage
 		interaction={{
 			author: {
-				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 				username: 'Crawl',
 			},
 			command: 'ping',
 		}}
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 			username: 'Crawl',
 			time: 'Today at 21:00',
 		}}
@@ -42,15 +44,15 @@ This section will cover only the bare minimum to get you started, but you can re
 
 ### 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.
+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.
+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
+- _`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
@@ -92,7 +94,7 @@ rest
 
 </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).
+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
@@ -101,9 +103,9 @@ Once you fill in these values, run `node deploy-commands.js` in your project dir
 
 ## 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.
+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>.
+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>
 
@@ -130,7 +132,7 @@ client.login(token);
 
 ### 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`.
+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>
 
@@ -154,13 +156,15 @@ client.on('interactionCreate', async (interaction) => {
 	<DiscordMessage
 		interaction={{
 			author: {
-				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 				username: 'Crawl',
 			},
 			command: 'server',
 		}}
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 			username: 'Crawl',
 			time: 'Today at 21:00',
 		}}
@@ -170,7 +174,7 @@ client.on('interactionCreate', async (interaction) => {
 	</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.
+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!
@@ -178,7 +182,7 @@ You could also display the date the server was created, or the server's verifica
 
 ### 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`.
+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>
 
@@ -202,13 +206,15 @@ client.on('interactionCreate', async (interaction) => {
 	<DiscordMessage
 		interaction={{
 			author: {
-				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 				username: 'Crawl',
 			},
 			command: 'user',
 		}}
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 			username: 'Crawl',
 			time: 'Today at 21:00',
 		}}
@@ -224,9 +230,9 @@ client.on('interactionCreate', async (interaction) => {
 
 And there you have it!
 
-## The problem with `if`/`else if`
+## 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.
+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:
 

apps/guide/src/pages/creating-your-bot/index.mdx

@@ -15,13 +15,13 @@ Once you [add your bot to a server](/preparations/adding-your-bot-to-servers.md)
 
 ## 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.
+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`
+### 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()`.
+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>
 
@@ -43,16 +43,16 @@ console.log(token);
 
 <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).
+	_`.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.
+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.
+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>
 
@@ -72,9 +72,9 @@ console.log(process.env.DISCORD_TOKEN);
 
 #### 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.
+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`:
+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>
 
@@ -114,7 +114,7 @@ console.log(process.env.DISCORD_TOKEN);
 
 <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).
+	_`.gitignore`_](/creating-your-bot/#git-and-gitignore).
 </Alert>
 
 <Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter>
@@ -126,11 +126,11 @@ While we generally do not recommend using online editors as hosting solutions, b
 
 </Section>
 
-### Git and `.gitignore`
+### 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:
+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>
 
@@ -143,15 +143,15 @@ 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!
+	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.
+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:
 
@@ -176,16 +176,16 @@ 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.
+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!
+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
+	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>
 

apps/guide/src/pages/test.mdx

@@ -9,13 +9,15 @@ import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs
 	<DiscordMessage
 		reply={{
 			author: {
-				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 				username: 'Crawl',
 			},
 			content: 'Test',
 		}}
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 			username: 'Crawl',
 			time: 'Today at 21:00',
 		}}
@@ -24,7 +26,8 @@ import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs
 	</DiscordMessage>
 	<DiscordMessage
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 			username: 'Crawl',
 			time: 'Today at 21:00',
 		}}
@@ -39,13 +42,15 @@ import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs
 	<DiscordMessage
 		reply={{
 			author: {
-				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 				username: 'Crawl',
 			},
 			content: 'Test',
 		}}
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 			username: 'Crawl',
 			time: 'Today at 21:00',
 		}}
@@ -58,13 +63,15 @@ import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs
 	<DiscordMessage
 		reply={{
 			author: {
-				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 				username: 'Crawl',
 			},
 			content: 'Test',
 		}}
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 			username: 'Crawl',
 			time: 'Today at 21:00',
 		}}
@@ -72,7 +79,8 @@ import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs
 		<>
 			<DiscordMessageEmbed
 				author={{
-					avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+					avatar:
+						'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 					username: 'Crawl',
 				}}
 			/>
@@ -80,7 +88,8 @@ import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs
 			<DiscordMessageEmbed footer={{ content: 'Footer' }} />
 			<DiscordMessageEmbed
 				author={{
-					avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+					avatar:
+						'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 					username: 'Crawl',
 				}}
 				title={{ title: 'Title' }}

apps/guide/src/pages/whats-new.mdx

@@ -4,6 +4,7 @@ title: What's new
 category: Home
 ---
 
+import { CH } from '@code-hike/mdx/components';
 import { DiscordMessages, DiscordMessage } from '@discordjs/ui';
 
 # What's new
@@ -12,7 +13,8 @@ import { DiscordMessages, DiscordMessage } from '@discordjs/ui';
 	<DiscordMessage
 		interaction={{
 			author: {
-				avatar: 'https://cdn.discordapp.com/avatars/81440962496172032/81c0df2befe565b05018da6b026babb0.webp?size=160',
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
 				username: 'Crawl',
 			},
 			command: 'upgrade',
@@ -53,10 +55,10 @@ All content has been updated to use discord.js v14 syntax. The v13 version of th
 ### 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
+- [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')`
+- _`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>

apps/website/.gitignore

@@ -19,12 +19,13 @@ dist/
 typings/
 .cache/
 build/
-api/
 src/styles/unocss.css
 .next/
+src/assets/readme/
 
 # Miscellaneous
 .tmp/
 coverage/
 .vercel
 public/searchIndex
+.vscode

apps/website/.prettierignore

@@ -13,3 +13,4 @@ api/
 .next/
 .vercel/
 .cache/
+public/searchIndex

apps/website/.prettierrc.cjs

@@ -1 +1,7 @@
-module.exports = require('../../.prettierrc.json');
+module.exports = {
+	...require('../../.prettierrc.json'),
+	plugins: [
+		'prettier-plugin-tailwindcss', // MUST come last
+	],
+	pluginSearchDirs: false,
+};

apps/website/next-env.d.ts

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

apps/website/next.config.js

@@ -1,17 +1,28 @@
 /* eslint-disable tsdoc/syntax */
-import { URL, fileURLToPath } from 'node:url';
+import { fileURLToPath } from 'node:url';
+import bundleAnalyzer from '@next/bundle-analyzer';
+
+const withBundleAnalyzer = bundleAnalyzer({
+	enabled: process.env.ANALYZE === 'true',
+});
 
 /**
  * @type {import('next').NextConfig}
  */
-export default {
+export default withBundleAnalyzer({
 	reactStrictMode: true,
-	swcMinify: true,
 	eslint: {
 		ignoreDuringBuilds: true,
 	},
+	// Until Next.js fixes their type issues
+	typescript: {
+		ignoreBuildErrors: true,
+	},
 	cleanDistDir: true,
+	outputFileTracing: true,
 	experimental: {
+		appDir: true,
+		serverComponentsExternalPackages: ['@microsoft/api-extractor-model', 'jju', 'shiki'],
 		outputFileTracingRoot: fileURLToPath(new URL('../../', import.meta.url)),
 		fallbackNodePolyfills: false,
 	},
@@ -19,4 +30,4 @@ export default {
 		dangerouslyAllowSVG: true,
 		contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
 	},
-};
+});

apps/website/package.json

@@ -5,17 +5,20 @@
 	"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:copy_readme": "cpy '../../packages/*/README.md' 'src/assets/readme' --rename='home-{{basename}}'",
+		"build:local": "yarn run --top-level docs --force && yarn build:copy_readme && cross-env-shell NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
+		"build:prod": "yarn workspaces foreach -ptR run build && yarn build:copy_readme && yarn build:css && yarn build:next",
 		"build:next": "next build",
 		"build:css": "yarn generate:css",
-		"build:search_indicies": "yarn node scripts/generateAllIndicies.js",
+		"build:search_indices": "yarn node scripts/generateAllIndices.js",
+		"build:analyze": "yarn run --top-level docs --force && cross-env-shell ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
 		"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"
+		"generate:css": "unocss 'src/**/*.tsx' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../unocss.config.ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --format=pretty",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix --format=pretty",
+		"fmt": "yarn format"
 	},
 	"type": "module",
 	"contributors": [
@@ -43,55 +46,63 @@
 		"@discordjs/api-extractor-utils": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
 		"@discordjs/ui": "workspace:^",
-		"@microsoft/api-extractor-model": "7.24.0",
-		"@microsoft/tsdoc": "0.14.1",
+		"@microsoft/api-extractor-model": "7.25.3",
+		"@microsoft/tsdoc": "0.14.2",
+		"@react-icons/all-files": "^4.1.0",
+		"@vercel/og": "^0.2.0",
 		"@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",
+		"ariakit": "^2.0.0-next.43",
+		"cmdk": "^0.1.22",
+		"meilisearch": "^0.31.1",
+		"next": "^13.2.1",
+		"next-mdx-remote": "^4.3.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-ignore": "^1.0.4",
+		"rehype-pretty-code": "^0.9.4",
 		"rehype-raw": "^6.1.1",
-		"rehype-slug": "^5.0.1",
+		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
-		"sharp": "^0.31.1",
-		"shiki": "^0.11.1",
-		"swr": "^1.3.0"
+		"sharp": "^0.31.3",
+		"shiki": "^0.14.1",
+		"swr": "^2.0.4"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^13.4.0",
+		"@next/bundle-analyzer": "^13.2.1",
+		"@testing-library/react": "^14.0.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",
+		"@types/node": "16.18.13",
+		"@types/react": "^18.0.28",
+		"@types/react-dom": "^18.0.11",
+		"@types/react-syntax-highlighter": "^15.5.6",
+		"@unocss/cli": "^0.50.1",
+		"@unocss/reset": "^0.50.1",
+		"@vitejs/plugin-react": "^3.1.0",
+		"@vitest/coverage-c8": "^0.29.1",
+		"concurrently": "^7.6.0",
+		"cpy-cli": "^4.2.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"
+		"eslint": "^8.35.0",
+		"eslint-config-neon": "^0.1.40",
+		"eslint-formatter-pretty": "^4.1.0",
+		"happy-dom": "^8.9.0",
+		"prettier": "^2.8.4",
+		"prettier-plugin-tailwindcss": "^0.2.3",
+		"typescript": "^4.9.5",
+		"unocss": "^0.50.1",
+		"vercel": "^28.16.7",
+		"vitest": "^0.29.1"
 	},
 	"engines": {
 		"node": ">=16.9.0"
+	},
+	"nextBundleAnalysis": {
+		"budget": 358400,
+		"budgetPercentIncreaseRed": 20,
+		"showDetails": true
 	}
 }

apps/website/scripts/generateAllIndices.js

@@ -0,0 +1,5 @@
+import { generateAllIndices } from '@discordjs/scripts';
+
+console.log('Generating all indices...');
+await generateAllIndices();
+console.log('Generated all indices.');

apps/website/scripts/generateAllIndicies.js

@@ -1,5 +0,0 @@
-import { generateAllIndicies } from '@discordjs/scripts';
-
-console.log('Generating all indicies...');
-await generateAllIndicies();
-console.log('Generated all indicies.');

apps/website/src/app/docAPI.ts

@@ -0,0 +1,26 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+export async function fetchVersions(packageName: string): Promise<string[]> {
+	const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, {
+		next: { revalidate: 3_600 },
+	});
+
+	return response.json();
+}
+
+export async function fetchModelJSON(packageName: string, version: string): Promise<unknown> {
+	if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
+		const res = await readFile(
+			join(process.cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'),
+			'utf8',
+		);
+		return JSON.parse(res);
+	}
+
+	const response = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${version}.api.json`, {
+		next: { revalidate: 3_600 },
+	});
+
+	return response.json();
+}

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

@@ -0,0 +1,89 @@
+import { createApiModel, tryResolveSummaryText } from '@discordjs/scripts';
+import type {
+	ApiDeclaredItem,
+	ApiEnum,
+	ApiItem,
+	ApiItemContainerMixin,
+	ApiMethod,
+	ApiMethodSignature,
+	ApiProperty,
+	ApiPropertySignature,
+} from '@microsoft/api-extractor-model';
+import { ApiItemKind } from '@microsoft/api-extractor-model';
+import type { ItemRouteParams } from './page';
+import { fetchModelJSON } from '~/app/docAPI';
+import { OVERLOAD_SEPARATOR } from '~/util/constants';
+import { findMember } from '~/util/model.server';
+
+async function fetchMember({ package: packageName, version, item }: ItemRouteParams): Promise<ApiItem | undefined> {
+	const modelJSON = await fetchModelJSON(packageName, version);
+	const model = createApiModel(modelJSON);
+	const pkg = model.tryGetPackageByName(packageName);
+	const entry = pkg?.entryPoints[0];
+
+	if (!entry) {
+		return undefined;
+	}
+
+	const [memberName] = decodeURIComponent(item).split(OVERLOAD_SEPARATOR);
+
+	return findMember(model, packageName, memberName);
+}
+
+function resolveMemberSearchParams(packageName: string, member: ApiItem): URLSearchParams {
+	const params = new URLSearchParams({
+		pkg: packageName,
+		kind: member?.kind,
+		name: member?.displayName,
+	});
+
+	switch (member?.kind) {
+		case ApiItemKind.Interface:
+		case ApiItemKind.Class: {
+			const typedMember = member as ApiItemContainerMixin;
+
+			const properties = typedMember.members.filter((member) =>
+				[ApiItemKind.Property, ApiItemKind.PropertySignature].includes(member.kind),
+			) as (ApiProperty | ApiPropertySignature)[];
+			const methods = typedMember.members.filter((member) =>
+				[ApiItemKind.Method, ApiItemKind.Method].includes(member.kind),
+			) as (ApiMethod | ApiMethodSignature)[];
+
+			params.append('methods', methods.length.toString());
+			params.append('props', properties.length.toString());
+			break;
+		}
+
+		case ApiItemKind.Enum: {
+			const typedMember = member as ApiEnum;
+			params.append('members', typedMember.members.length.toString());
+			break;
+		}
+
+		default:
+			break;
+	}
+
+	return params;
+}
+
+export default async function Head({ params }: { params: ItemRouteParams }) {
+	const member = (await fetchMember(params))!;
+	const name = `discord.js${member?.displayName ? ` | ${member.displayName}` : ''}`;
+	const ogTitle = `${params.package ?? 'discord.js'}${member?.displayName ? ` | ${member.displayName}` : ''}`;
+	const searchParams = resolveMemberSearchParams(params.package, member);
+	const url = new URL('https://discordjs.dev/api/og_model');
+	url.search = searchParams.toString();
+	const ogImage = url.toString();
+	const description = tryResolveSummaryText(member as ApiDeclaredItem);
+
+	return (
+		<>
+			<title key="title">{name}</title>
+			<meta content={description ?? ''} key="description" name="description" />
+			<meta content={ogTitle} key="og_title" property="og:title" />
+			<meta content={description ?? ''} key="og_description" property="og:description" />
+			<meta content={ogImage} key="og_image" property="og:image" />
+		</>
+	);
+}

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

@@ -0,0 +1,12 @@
+import type { PropsWithChildren } from 'react';
+import { Providers } from './providers';
+import { CmdKDialog } from '~/components/CmdK';
+
+export default function ItemLayout({ children }: PropsWithChildren) {
+	return (
+		<Providers>
+			<>{children}</>
+			<CmdKDialog />
+		</Providers>
+	);
+}

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

@@ -0,0 +1,114 @@
+/* eslint-disable no-case-declarations */
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+// eslint-disable-next-line n/prefer-global/process
+import process, { cwd } from 'node:process';
+import { createApiModel } from '@discordjs/scripts';
+import type {
+	ApiClass,
+	ApiEnum,
+	ApiInterface,
+	ApiItem,
+	ApiTypeAlias,
+	ApiVariable,
+} from '@microsoft/api-extractor-model';
+import { ApiFunction } from '@microsoft/api-extractor-model';
+import { notFound } from 'next/navigation';
+import { fetchModelJSON } from '~/app/docAPI';
+import { Class } from '~/components/model/Class';
+import { Interface } from '~/components/model/Interface';
+import { TypeAlias } from '~/components/model/TypeAlias';
+import { Variable } from '~/components/model/Variable';
+import { Enum } from '~/components/model/enum/Enum';
+import { Function } from '~/components/model/function/Function';
+import { OVERLOAD_SEPARATOR, PACKAGES } from '~/util/constants';
+import { findMember, findMemberByKey } from '~/util/model.server';
+
+export interface ItemRouteParams {
+	item: string;
+	package: string;
+	version: string;
+}
+
+export async function generateStaticParams({ params: { package: packageName, version } }: { params: ItemRouteParams }) {
+	const modelJSON = await fetchModelJSON(packageName, version);
+	const model = createApiModel(modelJSON);
+
+	const pkg = model.tryGetPackageByName(packageName);
+	const entry = pkg?.entryPoints[0];
+
+	if (!entry) {
+		return notFound();
+	}
+
+	return entry.members.map((member) => ({
+		item: member.displayName,
+	}));
+}
+
+async function fetchMember({ package: packageName, version: branchName = 'main', item }: ItemRouteParams) {
+	if (!PACKAGES.includes(packageName)) {
+		notFound();
+	}
+
+	let data;
+	try {
+		if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
+			const res = await readFile(join(cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'), 'utf8');
+			data = JSON.parse(res);
+		} else {
+			const res = await fetch(`https://docs.discordjs.dev/docs/${packageName}/${branchName}.api.json`);
+			data = await res.json();
+		}
+	} catch {
+		notFound();
+	}
+
+	const [memberName, overloadIndex] = decodeURIComponent(item).split(OVERLOAD_SEPARATOR);
+	const model = createApiModel(data);
+
+	// eslint-disable-next-line prefer-const
+	let { containerKey, displayName: name } = findMember(model, packageName, memberName) ?? {};
+	if (name && overloadIndex && !Number.isNaN(Number.parseInt(overloadIndex, 10))) {
+		containerKey = ApiFunction.getContainerKey(name, Number.parseInt(overloadIndex, 10));
+	}
+
+	return memberName && containerKey ? findMemberByKey(model, packageName, containerKey) ?? null : null;
+}
+
+function Member({ member }: { member?: ApiItem }) {
+	switch (member?.kind) {
+		case 'Class':
+			return <Class clazz={member as ApiClass} />;
+		case 'Function':
+			return <Function item={member as ApiFunction} key={member.containerKey} />;
+		case 'Interface':
+			return <Interface item={member as ApiInterface} />;
+		case 'TypeAlias':
+			return <TypeAlias item={member as ApiTypeAlias} />;
+		case 'Variable':
+			return <Variable item={member as ApiVariable} />;
+		case 'Enum':
+			return <Enum item={member as ApiEnum} />;
+		default:
+			return <div>Cannot render that item type</div>;
+	}
+}
+
+export default async function Page({ params }: { params: ItemRouteParams }) {
+	const member = await fetchMember(params);
+
+	return (
+		<main
+			className={
+				(member?.kind === 'Class' || member?.kind === 'Interface') && (member as ApiClass | ApiInterface).members.length
+					? 'xl:pr-64'
+					: ''
+			}
+		>
+			<article className="dark:bg-dark-600 bg-light-600">
+				<div className="dark:bg-dark-800  bg-white p-6 pb-20 shadow">{member ? <Member member={member} /> : null}</div>
+			</article>
+		</main>
+	);
+}

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

@@ -0,0 +1,27 @@
+'use client';
+
+// import { ThemeProvider } from 'next-themes';
+import type { PropsWithChildren } from 'react';
+import { CmdKProvider } from '~/contexts/cmdK';
+import { NavProvider } from '~/contexts/nav';
+
+export function Providers({ children }: PropsWithChildren) {
+	return (
+		<NavProvider>
+			<CmdKProvider>
+				{/* <ThemeProvider
+					attribute="class"
+					cookieName="theme"
+					defaultTheme="system"
+					disableTransitionOnChange
+					value={{
+						light: 'light',
+						dark: 'dark',
+					}}
+				> */}
+				{children}
+				{/* </ThemeProvider> */}
+			</CmdKProvider>
+		</NavProvider>
+	);
+}

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

@@ -0,0 +1,143 @@
+import { createApiModel } from '@discordjs/scripts';
+import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
+import Image from 'next/image';
+import { notFound } from 'next/navigation';
+import type { PropsWithChildren } from 'react';
+import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
+import vercelLogo from '~/assets/powered-by-vercel.svg';
+import { Header } from '~/components/Header';
+import { Nav } from '~/components/Nav';
+import type { SidebarSectionItemData } from '~/components/Sidebar';
+import { resolveItemURI } from '~/components/documentation/util';
+import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
+
+export interface VersionRouteParams {
+	package: string;
+	version: string;
+}
+
+export async function generateStaticParams() {
+	const params: VersionRouteParams[] = [];
+
+	await Promise.all(
+		PACKAGES.map(async (packageName) => {
+			const versions = (await fetchVersions(packageName)).slice(-N_RECENT_VERSIONS);
+
+			params.push(...versions.map((version) => ({ package: packageName, version })));
+		}),
+	);
+
+	return params;
+}
+
+function serializeIntoSidebarItemData(item: ApiItem): SidebarSectionItemData {
+	return {
+		kind: item.kind,
+		name: item.displayName,
+		href: resolveItemURI(item),
+		overloadIndex: 'overloadIndex' in item ? (item.overloadIndex as number) : undefined,
+	};
+}
+
+export default async function PackageLayout({ children, params }: PropsWithChildren<{ params: VersionRouteParams }>) {
+	const modelJSON = await fetchModelJSON(params.package, params.version);
+	const model = createApiModel(modelJSON);
+
+	const pkg = model.tryGetPackageByName(params.package);
+
+	if (!pkg) {
+		return notFound();
+	}
+
+	const entry = pkg.entryPoints[0];
+
+	if (!entry) {
+		return notFound();
+	}
+
+	const members = entry.members.filter((member) => {
+		if (member.kind !== 'Function') {
+			return true;
+		}
+
+		return (member as ApiFunction).overloadIndex === 1;
+	});
+
+	return (
+		<>
+			<Header />
+			<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
+			<article className="pt-18 lg:pl-76">
+				<div className="relative z-10 min-h-[calc(100vh_-_70px)]">{children}</div>
+				<div className="h-76 md:h-52" />
+				<footer className="dark:bg-dark-600 h-76 lg:pl-84 bg-light-600 fixed bottom-0 left-0 right-0 md:h-52 md:pl-4 md:pr-16">
+					<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
+						<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
+							<a
+								className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+								href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+								rel="noopener noreferrer"
+								target="_blank"
+								title="Vercel"
+							>
+								<Image alt="Vercel" src={vercelLogo} />
+							</a>
+							<div className="flex flex-row gap-6 md:gap-12">
+								<div className="flex flex-col gap-2">
+									<div className="text-lg font-semibold">Community</div>
+									<div className="flex flex-col gap-1">
+										<a
+											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+											href="https://discord.gg/djs"
+											rel="noopener noreferrer"
+											target="_blank"
+										>
+											Discord
+										</a>
+										<a
+											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+											href="https://github.com/discordjs/discord.js/discussions"
+											rel="noopener noreferrer"
+											target="_blank"
+										>
+											GitHub discussions
+										</a>
+									</div>
+								</div>
+								<div className="flex flex-col gap-2">
+									<div className="text-lg font-semibold">Project</div>
+									<div className="flex flex-col gap-1">
+										<a
+											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+											href="https://github.com/discordjs/discord.js"
+											rel="noopener noreferrer"
+											target="_blank"
+										>
+											discord.js
+										</a>
+										<a
+											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+											href="https://discordjs.guide"
+											rel="noopener noreferrer"
+											target="_blank"
+										>
+											discord.js guide
+										</a>
+										<a
+											className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
+											href="https://discord-api-types.dev"
+											rel="noopener noreferrer"
+											target="_blank"
+										>
+											discord-api-types
+										</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</footer>
+			</article>
+		</>
+	);
+}

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

@@ -0,0 +1,67 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { serialize } from 'next-mdx-remote/serialize';
+import rehypeIgnore from 'rehype-ignore';
+import rehypePrettyCode, { type Options } from 'rehype-pretty-code';
+import rehypeRaw from 'rehype-raw';
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+import { getHighlighter } from 'shiki';
+import shikiLangJavascript from 'shiki/languages/javascript.tmLanguage.json';
+import shikiLangTypescript from 'shiki/languages/typescript.tmLanguage.json';
+import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json';
+import shikiThemeLightPlus from 'shiki/themes/light-plus.json';
+import type { VersionRouteParams } from './layout';
+import { MDXRemote } from '~/components/MDXRemote';
+
+async function loadREADME(packageName: string) {
+	return readFile(join(process.cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
+}
+
+async function generateMDX(readme: string) {
+	return serialize(readme, {
+		mdxOptions: {
+			remarkPlugins: [remarkGfm],
+			remarkRehypeOptions: { allowDangerousHtml: true },
+			rehypePlugins: [
+				rehypeRaw,
+				rehypeIgnore,
+				rehypeSlug,
+				[
+					rehypePrettyCode,
+					{
+						theme: {
+							dark: shikiThemeDarkPlus,
+							light: shikiThemeLightPlus,
+						},
+						getHighlighter: async (options?: Partial<Options>) =>
+							getHighlighter({
+								...options,
+								langs: [
+									// @ts-expect-error: Working as intended
+									{ id: 'javascript', aliases: ['js'], scopeName: 'source.js', grammar: shikiLangJavascript },
+									// @ts-expect-error: Working as intended
+									{ id: 'typescript', aliases: ['ts'], scopeName: 'source.ts', grammar: shikiLangTypescript },
+								],
+							}),
+					},
+				],
+			],
+			format: 'md',
+		},
+	});
+}
+
+export default async function Page({ params }: { params: VersionRouteParams }) {
+	const { package: packageName } = params;
+	const readmeSource = await loadREADME(packageName);
+	const mdxSource = await generateMDX(readmeSource);
+
+	return (
+		<article className="dark:bg-dark-600 bg-white p-10">
+			<div className="prose max-w-none">
+				<MDXRemote {...mdxSource} />
+			</div>
+		</article>
+	);
+}

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

@@ -0,0 +1,54 @@
+import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
+import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
+import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { PACKAGES } from '~/util/constants';
+
+async function getData(pkg: string) {
+	if (!PACKAGES.includes(pkg)) {
+		notFound();
+	}
+
+	const res = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`, { next: { revalidate: 3_600 } });
+	const data: string[] = await res.json();
+
+	if (!data.length) {
+		throw new Error('Failed to fetch data');
+	}
+
+	return data.reverse();
+}
+
+export default async function Page({ params }: { params: { package: string } }) {
+	const data = await getData(params.package);
+
+	return (
+		<div className="min-w-xs sm:w-md mx-auto flex h-full flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+			<div className="flex grow flex-col place-content-center gap-4">
+				<h1 className="text-2xl font-semibold">Select a version:</h1>
+				{data.map((version) => (
+					<Link
+						className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
+						href={`/docs/packages/${params.package}/${version}`}
+						key={version}
+					>
+						<div className="flex flex-row place-content-between place-items-center gap-4">
+							<div className="flex flex-row place-content-between place-items-center gap-4">
+								<VscVersions size={25} />
+								<h2 className="font-semibold">{version}</h2>
+							</div>
+							<VscArrowRight size={20} />
+						</div>
+					</Link>
+				)) ?? null}
+				<Link
+					className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
+					href="/docs/packages"
+				>
+					<VscArrowLeft size={20} /> Go back
+				</Link>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,75 @@
+import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
+import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
+import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
+import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
+import Link from 'next/link';
+import { PACKAGES } from '~/util/constants';
+
+export default async function Page() {
+	return (
+		<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-row place-content-center place-items-center gap-8 py-0 px-4 lg:py-0 lg:px-6">
+			<div className="flex grow flex-col place-content-center gap-4">
+				<h1 className="text-2xl font-semibold">Select a package:</h1>
+				<a
+					className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
+					href="https://discord.js.org/#/docs/discord.js"
+				>
+					<div className="flex grow flex-row place-content-between place-items-center gap-4">
+						<div className="flex grow flex-row place-content-between place-items-center gap-4">
+							<div className="flex flex-row place-content-between place-items-center gap-4">
+								<VscPackage size={25} />
+								<h2 className="font-semibold">discord.js</h2>
+							</div>
+						</div>
+						<VscArrowRight size={20} />
+					</div>
+				</a>
+				{PACKAGES.map((pkg) => (
+					<Link
+						className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
+						href={`/docs/packages/${pkg}`}
+						key={pkg}
+					>
+						<div className="flex grow flex-row place-content-between place-items-center gap-4">
+							<div className="flex grow flex-row place-content-between place-items-center gap-4">
+								<div className="flex flex-row place-content-between place-items-center gap-4">
+									<VscPackage size={25} />
+									<h2 className="font-semibold">{pkg}</h2>
+								</div>
+								{/* <Link href={`/docs/packages/${pkg}`}>
+									<div
+										className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-0 focus:ring focus:ring-white active:translate-y-px"
+										role="link"
+									>
+										Select version
+									</div>
+								</Link> */}
+							</div>
+							<VscArrowRight size={20} />
+						</div>
+					</Link>
+				))}
+				<a
+					className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-transparent p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
+					href="https://discord-api-types.dev/"
+				>
+					<div className="flex grow flex-row place-content-between place-items-center gap-4">
+						<div className="flex grow flex-row place-content-between place-items-center gap-4">
+							<div className="flex flex-row place-content-between place-items-center gap-4">
+								<VscPackage size={25} />
+								<h2 className="font-semibold">discord-api-types</h2>
+							</div>
+						</div>
+						<FiExternalLink size={20} />
+					</div>
+				</a>
+				<Link
+					className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
+					href="/"
+				>
+					<VscArrowLeft size={20} /> Go back
+				</Link>
+			</div>
+		</div>
+	);
+}

apps/website/src/app/head.tsx

@@ -0,0 +1,28 @@
+import { DESCRIPTION } from '~/util/constants';
+
+export default function Head() {
+	return (
+		<>
+			<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} key="description" name="description" />
+			<meta content="discord.js" property="og:site_name" />
+			<meta content="website" property="og:type" />
+			<meta content="discord.js" key="og_title" property="og:title" />
+			<meta content={DESCRIPTION} key="og_description" property="og:description" />
+			<meta content="https://discordjs.dev/api/og" key="og_image" property="og:image" />
+			<meta content="summary_large_image" name="twitter:card" />
+			<meta content="@iCrawlToGo" name="twitter:creator" />
+			<title key="title">discord.js</title>
+			<meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
+			<meta content="#5865f2" name="theme-color" />
+		</>
+	);
+}

apps/website/src/app/layout.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+
+import '@unocss/reset/tailwind.css';
+import '../styles/inter.css';
+import '../styles/unocss.css';
+import '../styles/cmdk.css';
+import '../styles/main.css';
+
+export default function RootLayout({ children }: PropsWithChildren) {
+	return (
+		<html lang="en">
+			<body className="dark:bg-dark-800 bg-white">{children}</body>
+		</html>
+	);
+}

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

@@ -1,20 +1,21 @@
-import Head from 'next/head';
+// import Head from 'next/head';
 import Link from 'next/link';
 
-export default function FourOhFourPage() {
+export default function NotFound() {
 	return (
 		<>
-			<Head>
+			{/* <Head>
 				<title key="title">discord.js | 404</title>
 				<meta content="discord.js | 404" key="og_title" property="og:title" />
-			</Head>
+			</Head> */}
 			<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 py-16 px-8 lg:py-0 lg:px-6">
 				<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
 				<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
-				<Link href="/docs/packages" prefetch={false}>
-					<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
-						Take me back
-					</a>
+				<Link
+					className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
+					href="/docs/packages"
+				>
+					Take me back
 				</Link>
 			</div>
 		</>

apps/website/src/app/page.tsx

@@ -1,11 +1,11 @@
-import Image from 'next/future/image';
+import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
+import Image from 'next/image';
 import Link from 'next/link';
-import { FiExternalLink } from 'react-icons/fi';
 import vercelLogo from '../assets/powered-by-vercel.svg';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 import { CODE_EXAMPLE } from '~/util/constants';
 
-export default function IndexRoute() {
+export default function Page() {
 	return (
 		<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 py-16 px-8 lg:h-full lg:place-content-center lg:py-0 lg:px-6">
 			<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
@@ -20,13 +20,15 @@ export default function IndexRoute() {
 						significantly tidier and easier to comprehend.
 					</p>
 					<div className="flex flex-row gap-4">
-						<Link href="/docs" prefetch={false}>
-							<a className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px">
-								Docs
-							</a>
+						<Link
+							className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
+							href="/docs"
+							prefetch={false}
+						>
+							Docs
 						</Link>
 						<a
-							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
+							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
 							href="https://discordjs.guide"
 							rel="noopener noreferrer"
 							target="_blank"
@@ -34,7 +36,7 @@ export default function IndexRoute() {
 							Guide <FiExternalLink />
 						</a>
 						<a
-							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
+							className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none appearance-none flex-row place-items-center gap-2 rounded border bg-transparent px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
 							href="https://github.com/discordjs/discord.js"
 							rel="noopener noreferrer"
 							target="_blank"
@@ -45,7 +47,7 @@ export default function IndexRoute() {
 				</div>
 				<SyntaxHighlighter code={CODE_EXAMPLE} />
 			</div>
-			<div className="flex place-content-center">
+			<div className="flex flex-row place-content-center">
 				<a
 					className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
 					href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"

apps/website/src/components/Anchor.tsx

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

apps/website/src/components/CmdK.tsx

@@ -1,23 +1,23 @@
+'use client';
+
 import type { ApiItemKind } from '@microsoft/api-extractor-model';
+import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
+import { VscSymbolClass } from '@react-icons/all-files/vsc/VscSymbolClass';
+import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
+import { VscSymbolField } from '@react-icons/all-files/vsc/VscSymbolField';
+import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
+import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
 import { Dialog } from 'ariakit/dialog';
 import { Command } from 'cmdk';
-import { useRouter } from 'next/router';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import {
-	VscArrowRight,
-	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) {
+function resolveIcon(item: keyof typeof ApiItemKind) {
 	switch (item) {
 		case 'Class':
 			return <VscSymbolClass className="shrink-0" size={25} />;
@@ -29,33 +29,31 @@ function resolveIcon(item: keyof ApiItemKind) {
 			return <VscSymbolProperty className="shrink-0" size={25} />;
 		case 'TypeAlias':
 			return <VscSymbolField className="shrink-0" size={25} />;
-		case 'Variables':
+		case 'Variable':
 			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;
-}) {
+export function CmdKDialog() {
+	const pathname = usePathname();
 	const router = useRouter();
 	const dialog = useCmdK();
 	const [search, setSearch] = useState('');
 	const [searchResults, setSearchResults] = useState<any[]>([]);
 
+	const packageName = pathname?.split('/').slice(3, 4)[0];
+	const branchName = pathname?.split('/').slice(4, 5)[0];
+
 	const searchResultItems = useMemo(
 		() =>
 			searchResults?.map((item) => (
 				<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"
+					className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-4 my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white [&[aria-selected]]:ring"
 					key={item.id}
 					onSelect={() => {
-						void router.push(item.path);
+						router.push(item.path);
 						dialog!.setOpen(false);
 					}}
 				>
@@ -101,12 +99,12 @@ export function CmdKDialog({
 
 	useEffect(() => {
 		const searchDoc = async (searchString: string, version: string) => {
-			const res = await client.index(`${currentPackageName}-${version}`).search(searchString, { limit: 5 });
+			const res = await client.index(`${packageName}-${version}`).search(searchString, { limit: 5 });
 			setSearchResults(res.hits);
 		};
 
-		if (search && currentPackageName) {
-			void searchDoc(search, currentVersion?.replaceAll('.', '-') ?? 'main');
+		if (search && packageName) {
+			void searchDoc(search, branchName?.replaceAll('.', '-') ?? 'main');
 		} else {
 			setSearchResults([]);
 		}

apps/website/src/components/CodeListing.tsx

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

apps/website/src/components/DocContainer.tsx

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

apps/website/src/components/ExcerptText.tsx

@@ -0,0 +1,42 @@
+import type { ApiModel, Excerpt } from '@microsoft/api-extractor-model';
+import { ExcerptTokenKind } from '@microsoft/api-extractor-model';
+import { ItemLink } from './ItemLink';
+import { resolveItemURI } from './documentation/util';
+
+export interface ExcerptTextProps {
+	/**
+	 * The tokens to render.
+	 */
+	excerpt: Excerpt;
+	/**
+	 * The model to resolve item references from.
+	 */
+	model: ApiModel;
+}
+
+/**
+ * A component that renders excerpt tokens from an api item.
+ */
+export function ExcerptText({ model, excerpt }: ExcerptTextProps) {
+	return (
+		<>
+			{excerpt.spannedTokens.map((token) => {
+				if (token.kind === ExcerptTokenKind.Reference) {
+					const item = model.resolveDeclarationReference(token.canonicalReference!, model).resolvedApiItem;
+
+					if (!item) {
+						return token.text;
+					}
+
+					return (
+						<ItemLink className="text-blurple" itemURI={resolveItemURI(item)} key={item.containerKey}>
+							{token.text}
+						</ItemLink>
+					);
+				}
+
+				return token.text;
+			})}
+		</>
+	);
+}

apps/website/src/components/Header.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { FiCommand } from '@react-icons/all-files/fi/FiCommand';
+// import { VscColorMode } from '@react-icons/all-files/vsc/VscColorMode';
+import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
+import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
+import { VscSearch } from '@react-icons/all-files/vsc/VscSearch';
+import { Button } from 'ariakit/button';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+// import { useTheme } from 'next-themes';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+import { useCmdK } from '~/contexts/cmdK';
+import { useNav } from '~/contexts/nav';
+
+export function Header() {
+	const pathname = usePathname();
+	// eslint-disable-next-line @typescript-eslint/unbound-method
+	const { setOpened } = useNav();
+	// const { resolvedTheme, setTheme } = useTheme();
+	const dialog = useCmdK();
+	// const toggleTheme = () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light');
+	const [asPathWithoutQueryAndAnchor, setAsPathWithoutQueryAndAnchor] = useState('');
+
+	useEffect(() => {
+		setAsPathWithoutQueryAndAnchor(pathname?.split('?')[0]?.split('#')[0] ?? '');
+	}, [pathname]);
+
+	const asPathWithoutContainerKey = useMemo(
+		() => asPathWithoutQueryAndAnchor?.split(':')[0] ?? '',
+		[asPathWithoutQueryAndAnchor],
+	);
+
+	const pathElements = useMemo(
+		() =>
+			asPathWithoutContainerKey
+				.split('/')
+				.slice(1)
+				.map((path, idx, original) => (
+					<Link
+						className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
+						href={`/${original.slice(0, idx + 1).join('/')}`}
+						key={idx}
+					>
+						{path}
+					</Link>
+				)),
+		[asPathWithoutContainerKey],
+	);
+
+	const breadcrumbs = useMemo(
+		() =>
+			pathElements.flatMap((el, idx, array) => {
+				if (idx === 0) {
+					return (
+						<Fragment key={idx}>
+							<div className="mx-2">/</div>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				if (idx !== array.length - 1) {
+					return (
+						<Fragment key={idx}>
+							{el}
+							<div className="mx-2">/</div>
+						</Fragment>
+					);
+				}
+
+				return <Fragment key={idx}>{el}</Fragment>;
+			}),
+		[pathElements],
+	);
+
+	return (
+		<header className="dark:bg-dark-600 dark:border-dark-100 bg-light-600 border-light-800 fixed top-0 left-0 z-20 w-full border-b">
+			<div className="h-18 block px-6">
+				<div className="flex h-full flex-row place-content-between place-items-center">
+					<Button
+						aria-label="Menu"
+						className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
+						onClick={() => setOpened((open) => !open)}
+					>
+						<VscMenu size={24} />
+					</Button>
+					<div className="hidden md:flex md:flex-row md:overflow-hidden">{breadcrumbs}</div>
+					<div className="flex flex-row place-items-center gap-4">
+						<Button
+							as="div"
+							className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
+							onClick={() => dialog?.toggle()}
+						>
+							<div className="flex flex-row place-items-center gap-4">
+								<VscSearch size={18} />
+								<span className="opacity-65">Search...</span>
+								<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
+									<FiCommand size={18} /> K
+								</div>
+							</div>
+						</Button>
+						<Button
+							aria-label="GitHub"
+							as="a"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+							href="https://github.com/discordjs/discord.js"
+							rel="noopener noreferrer"
+							target="_blank"
+						>
+							<VscGithubInverted size={24} />
+						</Button>
+						{/* <Button
+							aria-label="Toggle theme"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded-full rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+							onClick={() => toggleTheme()}
+						>
+							<VscColorMode size={24} />
+						</Button> */}
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}

apps/website/src/components/HyperlinkedText.tsx

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

apps/website/src/components/InheritanceText.tsx

@@ -1,15 +1,17 @@
-import type { InheritanceData } from '@discordjs/api-extractor-utils';
-import Link from 'next/link';
+import type { ApiDeclaredItem } from '@microsoft/api-extractor-model';
+import { ItemLink } from './ItemLink';
+import { resolveItemURI } from './documentation/util';
 
-export function InheritanceText({ data }: { data: InheritanceData }) {
+export function InheritanceText({ parent }: { parent: ApiDeclaredItem }) {
 	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>
+			<ItemLink
+				className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
+				itemURI={resolveItemURI(parent)}
+			>
+				{parent.displayName}
+			</ItemLink>
 		</span>
 	);
 }

apps/website/src/components/ItemLink.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import type { LinkProps } from 'next/link';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import type { PropsWithChildren } from 'react';
+
+export interface ItemLinkProps
+	extends Omit<LinkProps, 'href'>,
+		React.RefAttributes<HTMLAnchorElement>,
+		Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> {
+	className?: string;
+
+	/**
+	 * The URI of the api item to link to. (e.g. `/RestManager`)
+	 */
+	itemURI: string;
+}
+
+/**
+ * A component that renders a link to an api item.
+ *
+ * @remarks
+ * This component only needs the relative path to the item, and will automatically
+ * generate the full path to the item client-side.
+ */
+export function ItemLink(props: PropsWithChildren<ItemLinkProps>) {
+	const path = usePathname();
+
+	if (!path) {
+		throw new Error('ItemLink must be used inside a Next.js page. (e.g. /docs/packages/foo/main)');
+	}
+
+	// Check if the item is already in the current path, if so keep the current path
+	const end = path?.split('/')?.length < 6 ? path?.length : -1;
+
+	const pathPrefix = path?.split('/').slice(0, end).join('/');
+
+	const { itemURI, ...linkProps } = props;
+
+	return <Link href={`${pathPrefix}${itemURI}`} {...linkProps} />;
+}

apps/website/src/components/MDXRemote.tsx

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

apps/website/src/components/MethodItem.tsx

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

apps/website/src/components/MethodList.tsx

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

apps/website/src/components/NameText.tsx

@@ -0,0 +1,3 @@
+export function NameText({ name }: { name: string }) {
+	return <h4 className="break-all font-mono text-lg font-bold">{name}</h4>;
+}

apps/website/src/components/Nav.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { PackageSelect } from './PackageSelect';
+import { Sidebar } from './Sidebar';
+import type { SidebarSectionItemData } from './Sidebar';
+import { VersionSelect } from './VersionSelect';
+import { useNav } from '~/contexts/nav';
+
+export function Nav({ members }: { members: SidebarSectionItemData[] }) {
+	// eslint-disable-next-line @typescript-eslint/unbound-method
+	const { opened } = useNav();
+
+	return (
+		<nav
+			className={`dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 h-[calc(100vh_-_73px)] w-full border-r bg-white ${
+				opened ? 'block' : 'hidden'
+			} lg:w-76 lg:max-w-76 lg:block`}
+		>
+			<Scrollbars
+				autoHide
+				hideTracksWhenNotNeeded
+				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+				renderTrackVertical={(props) => (
+					<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
+				)}
+				universal
+			>
+				<div className="flex flex-col gap-3 px-3 pt-3">
+					<PackageSelect />
+					<VersionSelect />
+				</div>
+				<Sidebar members={members} />
+			</Scrollbars>
+		</nav>
+	);
+}

apps/website/src/components/Outline.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Scrollbars } from './Scrollbars';
+import type { TableOfContentsSerialized } from './TableOfContentItems';
+import { TableOfContentItems } from './TableOfContentItems';
+
+export function Outline({ members }: { members: TableOfContentsSerialized[] }) {
+	return (
+		<aside className="dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[57px] 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 serializedMembers={members} />
+			</Scrollbars>
+		</aside>
+	);
+}

apps/website/src/components/OverloadSwitcher.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
+import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit';
+import type { PropsWithChildren, ReactNode } from 'react';
+import { useState } from 'react';
+
+export interface OverloadSwitcherProps {
+	overloads: ReactNode[];
+}
+
+export function OverloadSwitcher({ overloads, children }: PropsWithChildren<{ overloads: ReactNode[] }>) {
+	const [overloadIndex, setOverloadIndex] = useState(1);
+	const overloadedNode = overloads[overloadIndex - 1]!;
+	const menu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
+
+	return (
+		<div className="flex flex-col place-items-start gap-2">
+			<MenuButton
+				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+				state={menu}
+			>
+				<div className="flex flex-row place-content-between place-items-center gap-2">
+					<VscVersions size={20} />
+					<div>
+						<span className="font-semibold">{`Overload ${overloadIndex}`}</span>
+						{` of ${overloads.length}`}
+					</div>
+					<VscChevronDown
+						className={`transform transition duration-150 ease-in-out ${menu.open ? 'rotate-180' : 'rotate-0'}`}
+						size={20}
+					/>
+				</div>
+			</MenuButton>
+			<Menu
+				className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
+				state={menu}
+			>
+				{overloads.map((_, idx) => (
+					<MenuItem
+						className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
+						key={idx}
+						onClick={() => setOverloadIndex(idx + 1)}
+					>
+						{`Overload ${idx + 1}`}
+					</MenuItem>
+				))}
+			</Menu>
+			{children}
+			{overloadedNode}
+		</div>
+	);
+}

apps/website/src/components/PackageSelect.tsx

@@ -0,0 +1,68 @@
+import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
+import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useMemo } from 'react';
+import { PACKAGES } from '~/util/constants';
+
+export function PackageSelect() {
+	const pathname = usePathname();
+	const packageName = pathname?.split('/').slice(3, 4)[0];
+
+	const packageMenu = useMenuState({ gutter: 8, sameWidth: true, fitViewport: true });
+
+	const packageMenuItems = useMemo(
+		() => [
+			<a href="https://discord.js.org/#/docs/discord.js" key="discord.js">
+				<MenuItem
+					className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
+					id="discord-js"
+					onClick={() => packageMenu.setOpen(false)}
+					state={packageMenu}
+				>
+					discord.js
+				</MenuItem>
+			</a>,
+			...PACKAGES.map((pkg) => (
+				<Link href={`/docs/packages/${pkg}/main`} key={pkg}>
+					<MenuItem
+						className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
+						id={pkg}
+						onClick={() => packageMenu.setOpen(false)}
+						state={packageMenu}
+					>
+						{pkg}
+					</MenuItem>
+				</Link>
+			)),
+		],
+		[packageMenu],
+	);
+
+	return (
+		<>
+			<MenuButton
+				className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+				state={packageMenu}
+			>
+				<div className="flex flex-row place-content-between place-items-center">
+					<div className="flex flex-row place-items-center gap-3">
+						<VscPackage size={20} />
+						<span className="font-semibold">{packageName}</span>
+					</div>
+					<VscChevronDown
+						className={`transform transition duration-150 ease-in-out ${packageMenu.open ? 'rotate-180' : 'rotate-0'}`}
+						size={20}
+					/>
+				</div>
+			</MenuButton>
+			<Menu
+				className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
+				state={packageMenu}
+			>
+				{packageMenuItems}
+			</Menu>
+		</>
+	);
+}

apps/website/src/components/Panel.tsx

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from 'react';
+
+export function Panel({ children }: PropsWithChildren) {
+	return (
+		<>
+			{children}
+			<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
+		</>
+	);
+}

apps/website/src/components/ParameterTable.tsx

@@ -1,24 +1,24 @@
-import type { ParameterDocumentation } from '@discordjs/api-extractor-utils';
+import type { ApiParameterListMixin } from '@microsoft/api-extractor-model';
 import { useMemo } from 'react';
-import { HyperlinkedText } from './HyperlinkedText';
+import { ExcerptText } from './ExcerptText';
 import { Table } from './Table';
-import { TSDoc } from './tsdoc/TSDoc';
+import { TSDoc } from './documentation/tsdoc/TSDoc';
 
 const columnStyles = {
 	Name: 'font-mono whitespace-nowrap',
 	Type: 'font-mono whitespace-pre-wrap break-normal',
 };
 
-export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
+export function ParameterTable({ item }: { item: ApiParameterListMixin }) {
 	const rows = useMemo(
 		() =>
-			data.map((param) => ({
+			item.parameters.map((param) => ({
 				Name: param.name,
-				Type: <HyperlinkedText tokens={param.tokens} />,
+				Type: <ExcerptText excerpt={param.parameterTypeExcerpt} model={item.getAssociatedModel()!} />,
 				Optional: param.isOptional ? 'Yes' : 'No',
-				Description: param.paramCommentBlock ? <TSDoc node={param.paramCommentBlock} /> : 'None',
+				Description: param.tsdocParamBlock ? <TSDoc item={item} tsdoc={param.tsdocParamBlock.content} /> : 'None',
 			})),
-		[data],
+		[item],
 	);
 
 	return (

apps/website/src/components/Property.tsx

@@ -0,0 +1,69 @@
+import type { ApiDeclaredItem, ApiItemContainerMixin, ApiPropertyItem } from '@microsoft/api-extractor-model';
+import type { PropsWithChildren } from 'react';
+import { Anchor } from './Anchor';
+import { ExcerptText } from './ExcerptText';
+import { InheritanceText } from './InheritanceText';
+import { TSDoc } from './documentation/tsdoc/TSDoc';
+
+export enum PropertySeparatorType {
+	Type = ':',
+	Value = '=',
+}
+
+export function Property({
+	item,
+	children,
+	separator,
+	inheritedFrom,
+}: PropsWithChildren<{
+	inheritedFrom?: (ApiDeclaredItem & ApiItemContainerMixin) | undefined;
+	item: ApiPropertyItem;
+	separator?: PropertySeparatorType;
+}>) {
+	const isDeprecated = Boolean(item.tsdocComment?.deprecatedBlock);
+	const hasSummary = Boolean(item.tsdocComment?.summarySection);
+
+	return (
+		<div className="scroll-mt-30 flex flex-col gap-4" id={item.displayName}>
+			<div className="md:-ml-8.5 flex flex-col gap-2 md:flex-row md:place-items-center">
+				<Anchor href={`#${item.displayName}`} />
+				{isDeprecated || item.isReadonly || item.isOptional ? (
+					<div className="flex flex-row gap-1">
+						{isDeprecated ? (
+							<div className="flex h-5 flex-row 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}
+						{item.isReadonly ? (
+							<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
+								Readonly
+							</div>
+						) : null}
+						{item.isOptional ? (
+							<div className="bg-blurple flex h-5 flex-row 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">
+						{item.displayName}
+						{item.isOptional ? '?' : ''}
+					</h4>
+					<h4 className="font-mono text-lg font-bold">{separator}</h4>
+					<h4 className="break-all font-mono text-lg font-bold">
+						<ExcerptText excerpt={item.propertyTypeExcerpt} model={item.getAssociatedModel()!} />
+					</h4>
+				</div>
+			</div>
+			{hasSummary || inheritedFrom ? (
+				<div className="mb-4 flex flex-col gap-4">
+					{item.tsdocComment ? <TSDoc item={item} tsdoc={item.tsdocComment} /> : null}
+					{inheritedFrom ? <InheritanceText parent={inheritedFrom} /> : null}
+					{children}
+				</div>
+			) : null}
+		</div>
+	);
+}

apps/website/src/components/PropertyList.tsx

@@ -1,26 +1,38 @@
-import type { ApiPropertyItemJSON } from '@discordjs/api-extractor-utils';
+import type {
+	ApiDeclaredItem,
+	ApiItem,
+	ApiItemContainerMixin,
+	ApiProperty,
+	ApiPropertyItem,
+	ApiPropertySignature,
+} from '@microsoft/api-extractor-model';
+import { ApiItemKind } from '@microsoft/api-extractor-model';
 import { Fragment, useMemo } from 'react';
-import { CodeListing } from './CodeListing';
+import { Property, PropertySeparatorType } from './Property';
+import { resolveMembers } from '~/util/members';
+
+export function isPropertyLike(item: ApiItem): item is ApiProperty | ApiPropertySignature {
+	return item.kind === ApiItemKind.Property || item.kind === ApiItemKind.PropertySignature;
+}
+
+export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
+	const members = resolveMembers(item, isPropertyLike);
 
-export function PropertyList({ data }: { data: ApiPropertyItemJSON[] }) {
 	const propertyItems = useMemo(
 		() =>
-			data.map((prop) => (
-				<Fragment key={prop.name}>
-					<CodeListing
-						comment={prop.comment}
-						deprecation={prop.deprecated}
-						inheritanceData={prop.inheritanceData}
-						name={prop.name}
-						optional={prop.optional}
-						readonly={prop.readonly}
-						summary={prop.summary}
-						typeTokens={prop.propertyTypeTokens}
-					/>
-					<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
-				</Fragment>
-			)),
-		[data],
+			members.map((prop) => {
+				return (
+					<Fragment key={prop.item.displayName}>
+						<Property
+							inheritedFrom={prop.inherited as ApiDeclaredItem & ApiItemContainerMixin}
+							item={prop.item as ApiPropertyItem}
+							separator={PropertySeparatorType.Type}
+						/>
+						<div className="border-light-900 dark:border-dark-100 -mx-8 border-t-2" />
+					</Fragment>
+				);
+			}),
+		[members],
 	);
 
 	return <div className="flex flex-col gap-4">{propertyItems}</div>;

apps/website/src/components/Scrollbars.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import type { ScrollbarProps } from 'react-custom-scrollbars-2';
+import { Scrollbars as ReactScrollbars2 } from 'react-custom-scrollbars-2';
+
+export function Scrollbars(props: ScrollbarProps) {
+	return <ReactScrollbars2 {...props} />;
+}

apps/website/src/components/Section.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { Section as DJSSection, type SectionOptions } from '@discordjs/ui';
+import type { PropsWithChildren } from 'react';
+import { useMedia } from 'react-use';
+
+// This is wrapper around the Section component from @discordjs/ui,
+// it simply automatically sets the dense prop to true if the screen
+// width is less than 768px. This is done to separate client-side logic
+// from server-side rendering.
+export function Section(options: PropsWithChildren<SectionOptions>) {
+	const matches = useMedia('(max-width: 768px)', true);
+	const modifiedOptions = { ...options, dense: matches };
+
+	return <DJSSection {...modifiedOptions} />;
+}

apps/website/src/components/Sections.tsx

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