chore(ws): release @discordjs/ws@0.8.0

* feat: describe private properties

* Update packages/discord.js/src/structures/GuildMember.js

Co-authored-by: MrMythicalYT <91077061+MrMythicalYT@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: MrMythicalYT <91077061+MrMythicalYT@users.noreply.github.com>

* Apply suggestions from code review

---------

Co-authored-by: MrMythicalYT <91077061+MrMythicalYT@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.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/

.eslintrc.json

@@ -1,9 +1,12 @@
 {
 	"root": true,
-	"extends": "marine/prettier/node",
+	"extends": ["neon/common", "neon/node", "neon/typescript", "neon/prettier"],
 	"parserOptions": {
 		"project": "./tsconfig.eslint.json"
 	},
+	"rules": {
+		"@typescript-eslint/consistent-type-definitions": ["error", "interface"]
+	},
 	"ignorePatterns": ["**/dist/*"],
 	"env": {
 		"jest": true

.github/CONTRIBUTING.md

@@ -16,3 +16,33 @@ To get ready to work on the codebase, please do the following:
 4. Code your heart out!
 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:
+
+```sh
+yarn create-package <package-name> [package-description]
+```
+
+This will create new package directory under `packages/` with the required configuration files. You can
+begin to make changes within the `src/` directory.

.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:
@@ -52,7 +56,7 @@ body:
     id: djs-version
     attributes:
       label: Package version
-      description: Which version of are you using? Run `npm list <package>` in your project directory and paste the output.
+      description: Which version of the package are you using? Run `npm list <package>` in your project directory and paste the output.
       placeholder: We no longer support version 12 or earlier of discord.js
     validations:
       required: true
@@ -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

@@ -5,20 +5,24 @@ body:
   - type: markdown
     attributes:
       value: |
-        We can only implement features that Discord publishes, documents and merges into the Discord API documentation.
+        We can only implement features that Discord publishes, documents, and merges into the Discord API documentation.
         We do not implement unreleased features.
         Use Discord for questions: https://discord.gg/djs
   - 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

@@ -1,39 +1,51 @@
-'packages:builders':
+apps:guide:
+  - apps/guide/*
+  - 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/collection/**/*
-
-'packages:discord.js':
+packages:core:
+  - packages/core/*
+  - packages/core/**/*
+packages:discord.js:
   - packages/discord.js/*
   - packages/discord.js/**/*
-
-'packages:docgen':
+packages:next:
+  - packages/next/*
+  - packages/next/**/*
+packages:docgen:
   - packages/docgen/*
   - packages/docgen/**/*
-
-'packages:proxy':
+packages:formatters:
+  - packages/formatters/*
+  - packages/formatters/**/*
+packages:proxy:
   - packages/proxy/*
   - packages/proxy/**/*
-
-'packages:proxy-container':
+packages:proxy-container:
   - packages/proxy-container/*
   - packages/proxy-container/**/*
-
-'packages:rest':
+packages:rest:
   - packages/rest/*
   - packages/rest/**/*
-
-'packages:voice':
+packages:ui:
+  - packages/ui/*
+  - packages/ui/**/*
+packages:util:
+  - packages/util/*
+  - packages/util/**/*
+packages:voice:
   - packages/voice/*
   - packages/voice/**/*
-
-'packages:website':
-  - packages/website/*
-  - packages/website/**/*
-
-'packages:ws':
+packages:ws:
   - packages/ws/*
   - packages/ws/**/*

.github/labels.yml

@@ -1,102 +1,118 @@
-- name: 'api changes'
+- name: api changes
   color: '5663e9'
-- name: 'api support'
+- name: api support
   color: '5663e9'
-- name: 'backlog'
-  color: '7ef7ef'
-- name: 'blocked'
-  color: 'fc1423'
-- name: 'bug'
-  color: 'd73a4a'
-- name: 'caching'
-  color: '80c042'
-- name: 'chore'
-  color: 'ffffff'
-- name: 'ci'
-  color: '0075ca'
-- name: 'dependencies'
-  color: '276bd1'
-- name: 'discussion'
-  color: 'b6b1f9'
-- name: 'discord'
+- name: apps:guide
+  color: fbca04
+- name: apps:website
+  color: fbca04
+- name: backlog
+  color: 7ef7ef
+- name: backport
+  color: 88aabb
+- name: blocked
+  color: fc1423
+- name: bug
+  color: d73a4a
+- name: caching
+  color: 80c042
+- name: chore
+  color: ffffff
+- name: ci
+  color: 0075ca
+- name: dependencies
+  color: 276bd1
+- name: discord
   color: '5663e9'
-- name: 'documentation'
-  color: '0075ca'
-- name: 'duplicate'
-  color: 'cfd3d7'
-- name: 'error handling'
-  color: '80c042'
-- name: 'feature request'
-  color: 'fcf95a'
-- name: 'gateway'
-  color: '80c042'
-- name: 'good first issue'
-  color: '7057ff'
-- name: 'has PR'
-  color: '4b1f8e'
-- name: 'help wanted'
+- name: discussion
+  color: b6b1f9
+- name: documentation
+  color: 0075ca
+- name: duplicate
+  color: cfd3d7
+- name: error handling
+  color: 80c042
+- name: feature request
+  color: fcf95a
+- name: gateway
+  color: 80c042
+- name: good first issue
+  color: 7057ff
+- name: has PR
+  color: 4b1f8e
+- name: help wanted
   color: '008672'
-- name: 'interactions'
-  color: '80c042'
-- name: 'in progress'
-  color: 'ffccd7'
-- name: 'in review'
-  color: 'aed5fc'
-- name: 'invalid'
-  color: 'e4e669'
-- name: 'need repro'
-  color: 'c66037'
-- name: 'packages:builders'
-  color: 'fbca04'
-- name: 'packages:collection'
-  color: 'fbca04'
-- name: 'packages:discord.js'
-  color: 'fbca04'
-- name: 'packages:docgen'
-  color: 'fbca04'
-- name: 'packages:proxy'
-  color: 'fbca04'
-- name: 'packages:proxy-container'
-  color: 'fbca04'
-- name: 'packages:rest'
-  color: 'fbca04'
-- name: 'packages:voice'
-  color: 'fbca04'
-- name: 'packages:website'
-  color: 'fbca04'
-- name: 'packages:ws'
-  color: 'fbca04'
-- name: 'performance'
-  color: '80c042'
-- name: 'permissions'
-  color: '80c042'
-- name: 'priority:high'
-  color: 'fc1423'
-- name: 'question (please use Discord instead)'
-  color: 'd876e3'
-- name: 'ratelimits'
-  color: '80c042'
-- name: 'refactor'
-  color: '1d637f'
-- name: 'regression'
-  color: 'ea8785'
-- name: 'REST'
-  color: '80c042'
-- name: 'semver:major'
-  color: 'c10f47'
-- name: 'semver:minor'
-  color: 'e4f486'
-- name: 'semver:patch'
-  color: 'e8be8b'
-- name: 'sharding'
-  color: '80c042'
-- name: 'tests'
-  color: 'f06dff'
-- name: 'threads'
-  color: '80c042'
-- name: 'typings'
-  color: '80c042'
-- name: 'utility'
-  color: '80c042'
-- name: 'wontfix'
-  color: 'ffffff'
+- 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
+  color: fbca04
+- name: packages:rest
+  color: fbca04
+- name: packages:ui
+  color: fbca04
+- name: packages:util
+  color: fbca04
+- name: packages:voice
+  color: fbca04
+- name: packages:ws
+  color: fbca04
+- name: performance
+  color: 80c042
+- name: permissions
+  color: 80c042
+- name: priority:high
+  color: fc1423
+- name: question (please use Discord instead)
+  color: d876e3
+- name: ratelimits
+  color: 80c042
+- name: refactor
+  color: 1d637f
+- name: regression
+  color: ea8785
+- name: REST
+  color: 80c042
+- name: semver:major
+  color: c10f47
+- name: semver:minor
+  color: e4f486
+- name: semver:patch
+  color: e8be8b
+- name: sharding
+  color: 80c042
+- name: tests
+  color: f06dff
+- name: threads
+  color: 80c042
+- name: typings
+  color: 80c042
+- name: utility
+  color: 80c042
+- name: wontfix
+  color: ffffff

.github/workflows/documentation.yml

@@ -3,6 +3,8 @@ on:
   push:
     branches:
       - 'main'
+    paths:
+      - 'packages/*/src/**'
     tags:
       - '**'
   workflow_dispatch:
@@ -27,25 +29,20 @@ jobs:
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-    outputs:
-      BRANCH_NAME: ${{ steps.env.outputs.BRANCH_NAME }}
-      BRANCH_OR_TAG: ${{ steps.env.outputs.BRANCH_OR_TAG }}
-      SHA: ${{ steps.env.outputs.SHA }}
     if: github.repository_owner == 'discordjs'
     steps:
       - 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
@@ -65,13 +62,6 @@ jobs:
           name: api-extractor
           path: packages/*/docs/docs.api.json
 
-      - name: Set outputs for upload job
-        id: env
-        run: |
-          echo "::set-output name=BRANCH_NAME::${GITHUB_REF_NAME}"
-          echo "::set-output name=BRANCH_OR_TAG::${GITHUB_REF_TYPE}"
-          echo "::set-output name=SHA::${GITHUB_SHA}"
-
   upload:
     name: Upload Documentation
     needs: build
@@ -79,14 +69,25 @@ jobs:
       max-parallel: 1
       fail-fast: false
       matrix:
-        package: ['builders', 'collection', 'discord.js', 'proxy', 'rest', '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 }}
-      SHA: ${{ needs.build.outputs.SHA }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
@@ -95,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
@@ -123,34 +123,55 @@ jobs:
           path: 'out'
 
       - name: Extract package and semver from tag
-        if: ${{ github.event.inputs.ref_type == 'tag' || env.BRANCH_OR_TAG == 'tag' }}
+        if: ${{ github.ref_type == 'tag' }}
         id: extract-tag
         uses: ./packages/actions/src/formatTag
         with:
-          tag: ${{ env.BRANCH_NAME }}
+          tag: ${{ github.ref_name }}
 
       - name: Move docs to correct directory
-        if: ${{ (github.event.inputs.ref_type == 'tag' || env.BRANCH_OR_TAG == '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 }}
         run: |
           mkdir -p out/${PACKAGE}
-          mv docs/${PACKAGE}/docs/docs.json out/${PACKAGE}/${SEMVER}.json
+          if [[ $PACKAGE == "discord.js" ]]; then
+            mv docs/${PACKAGE}/docs/docs.json out/${PACKAGE}/${SEMVER}.json
+          fi
           if [[ $PACKAGE != "discord.js" ]]; then
             mv docs/${PACKAGE}/docs/docs.api.json out/${PACKAGE}/${SEMVER}.api.json
           fi
 
+      - name: Upload documentation to database
+        if: ${{ github.ref_type == 'tag' && matrix.package == steps.extract-tag.outputs.package }}
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}
+        uses: ./packages/actions/src/uploadDocumentation
+        with:
+          package: ${{ steps.extract-tag.outputs.package }}
+          version: ${{ steps.extract-tag.outputs.semver }}
+
       - name: Move docs to correct directory
-        if: ${{ github.event.inputs.ref_type == 'branch' || env.BRANCH_OR_TAG == 'branch' }}
+        if: ${{ github.ref_type == 'branch' }}
         env:
           PACKAGE: ${{ matrix.package }}
         run: |
           mkdir -p out/${PACKAGE}
-          mv docs/${PACKAGE}/docs/docs.json out/${PACKAGE}/${BRANCH_NAME}.json
-          if [[ $PACKAGE != "discord.js" ]]; then
-            mv docs/${PACKAGE}/docs/docs.api.json out/${PACKAGE}/${BRANCH_NAME}.api.json
+          if [[ $PACKAGE == "discord.js" ]]; then
+            mv docs/${PACKAGE}/docs/docs.json out/${PACKAGE}/${GITHUB_REF_NAME}.json
           fi
+          if [[ $PACKAGE != "discord.js" ]]; then
+            mv docs/${PACKAGE}/docs/docs.api.json out/${PACKAGE}/${GITHUB_REF_NAME}.api.json
+          fi
+
+      - name: Upload documentation to database
+        if: ${{ github.ref_type == 'branch' }}
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}
+        uses: ./packages/actions/src/uploadDocumentation
+        with:
+          package: ${{ matrix.package }}
 
       - name: Commit and push
         run: |
@@ -158,5 +179,5 @@ jobs:
           git config user.name github-actions[bot]
           git config user.email 41898282+github-actions[bot]@users.noreply.github.com
           git add .
-          git commit -m "Docs build for ${BRANCH_OR_TAG} ${BRANCH_NAME}: ${SHA}" || true
+          git commit -m "Docs build for ${GITHUB_REF_TYPE} ${GITHUB_REF_NAME}: ${GITHUB_SHA}" || true
           git push

.github/workflows/issue-triage.yml

@@ -0,0 +1,14 @@
+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/lighthouse-main.yml

@@ -0,0 +1,20 @@
+name: 'Lighthouse Audit (main)'
+on:
+  workflow_dispatch:
+jobs:
+  lighthouse_audit_main:
+    name: 'Lighthouse Audit (main)'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Audit production URLs with Lighthouse
+        id: lighthouse_audit
+        uses: treosh/lighthouse-ci-action@v9
+        with:
+          urls: |
+            https://discordjs.dev
+            https://guide.discordjs.dev
+          uploadArtifacts: true
+          temporaryPublicStorage: true

.github/workflows/lighthouse.yml

@@ -0,0 +1,88 @@
+name: 'Lighthouse Audit'
+on:
+  issue_comment:
+    types: [created, edited]
+jobs:
+  lighthouse_audit:
+    name: 'Lighthouse Audit'
+    if: ${{ github.event.issue.pull_request }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get Vercel preview URL
+        id: get_preview_url
+        uses: actions/github-script@v3
+        with:
+          script: |
+            const comment = context.payload.comment;
+            const regex = /https:\/\/[a-z0-9-]+\.vercel\.app/g;
+            const matches = comment.body.match(regex);
+            let previewUrl = "";
+            if (matches && matches.length) {
+              previewUrl = matches[0];
+              console.log('Preview url found:', previewUrl);
+            }
+            console.log("No preview url found.");
+            core.setOutput('vercel_preview_url', previewUrl);
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Add comment to PR
+        if: ${{ steps.get_preview_url.outputs.vercel_preview_url != '' }}
+        id: loading_comment_to_pr
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          number: ${{ github.event.issue.number }}
+          header: lighthouse
+          message: |
+            Running Lighthouse audit...
+
+      - name: Checkout repository
+        if: ${{ steps.get_preview_url.outputs.vercel_preview_url != '' }}
+        uses: actions/checkout@v3
+
+      - name: Audit preview URL with Lighthouse
+        if: ${{ steps.get_preview_url.outputs.vercel_preview_url != '' }}
+        id: lighthouse_audit
+        uses: treosh/lighthouse-ci-action@v9
+        with:
+          urls: |
+            ${{ steps.get_preview_url.outputs.vercel_preview_url }}
+          uploadArtifacts: true
+          temporaryPublicStorage: true
+
+      - name: Format lighthouse score
+        if: ${{ steps.get_preview_url.outputs.vercel_preview_url != '' }}
+        id: format_lighthouse_score
+        uses: actions/github-script@v3
+        with:
+          script: |
+            const result = ${{ steps.lighthouse_audit.outputs.manifest }}[0].summary
+            const links = ${{ steps.lighthouse_audit.outputs.links }}
+            const formatResult = (res) => Math.round((res * 100))
+            Object.keys(result).forEach(key => result[key] = formatResult(result[key]))
+            const score = res => res >= 90 ? '🟢' : res >= 50 ? '🟠' : '🔴'
+            const comment = [
+                `⚡️ [Lighthouse report](${Object.values(links)[0]}) for the changes in this PR:`,
+                '| Category | Score |',
+                '| --- | --- |',
+                `| ${score(result.performance)} Performance | ${result.performance} |`,
+                `| ${score(result.accessibility)} Accessibility | ${result.accessibility} |`,
+                `| ${score(result['best-practices'])} Best practices | ${result['best-practices']} |`,
+                `| ${score(result.seo)} SEO | ${result.seo} |`,
+                `| ${score(result.pwa)} PWA | ${result.pwa} |`,
+                ' ',
+                `*Lighthouse ran on [${Object.keys(links)[0]}](${Object.keys(links)[0]})*`
+            ].join('\n')
+             core.setOutput("comment", comment);
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Add comment to PR
+        if: ${{ steps.get_preview_url.outputs.vercel_preview_url != '' }}
+        id: comment_to_pr
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          number: ${{ github.event.issue.number }}
+          header: lighthouse
+          message: |
+            ${{ steps.format_lighthouse_score.outputs.comment }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lock.yml

@@ -0,0 +1,19 @@
+name: Lock Ancient Issues
+on:
+  schedule:
+    - cron: '0 16 * * *'
+  workflow_dispatch:
+permissions:
+  issues: write
+concurrency:
+  group: lock
+jobs:
+  action:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dessant/lock-threads@v4
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          issue-inactive-days: 365
+          issue-lock-reason: resolved
+          process-only: issues

.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/voice'
+        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/pr-triage.yml

@@ -14,4 +14,4 @@ jobs:
 
       - name: Automatically assign reviewers
         if: github.event.action == 'opened'
-        uses: kentaro-m/auto-assign-action@v1.2.1
+        uses: kentaro-m/auto-assign-action@v1.2.3

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

@@ -12,6 +12,17 @@ jobs:
       - 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: Build dependencies
+        run: yarn build
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
 
@@ -19,7 +30,7 @@ jobs:
         run: echo ${{ secrets.DOCKER_ACCESS_TOKEN }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
 
       - name: Build the image
-        run: docker build -t discordjs/proxy:latest -f packages/proxy-container/Dockerfile .
+        run: yarn docker build @discordjs/proxy-container -t discordjs/proxy:latest
 
       - name: Push image to DockerHub
         run: docker push discordjs/proxy:latest

.github/workflows/publish-dev.yml

@@ -10,16 +10,26 @@ 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'
             folder: 'rest'
+          - package: '@discordjs/util'
+            folder: 'util'
           - package: '@discordjs/voice'
             folder: 'voice'
           - package: '@discordjs/ws'
@@ -38,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-docker.yml

@@ -9,6 +9,17 @@ jobs:
       - 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: Build dependencies
+        run: yarn build
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
 
@@ -16,7 +27,7 @@ jobs:
         run: echo ${{ secrets.DOCKER_ACCESS_TOKEN }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
 
       - name: Build docker image
-        run: docker build -t discordjs/proxy:latest -f packages/proxy-container/Dockerfile .
+        run: yarn docker build @discordjs/proxy-container -t discordjs/proxy:latest
 
       - name: Tag image with major
         run: docker tag discordjs/proxy discordjs/proxy:$(cut -d '.' -f1 <<< $(jq --raw-output '.version' packages/proxy-container/package.json))

.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:
@@ -12,28 +13,51 @@ jobs:
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-      NEXT_PUBLIC_LOCAL_DEV: true
     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: 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,5 @@ coverage/
 
 # Cache
 .prettiercache
-.eslintcache
+.eslintcache
+.vercel

.husky/pre-commit

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

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
 	"*": "prettier --ignore-unknown --write",
-	"{src/**,__tests__/**}.{mjs,js,ts}": "eslint --ext mjs,js,ts --fix",
-	"src/**.ts": "vitest related --run"
+	"{src/**,__tests__/**}.{mjs,js,cjs,ts,tsx,astro}": "eslint --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix",
+	"src/**.ts": "vitest related --run --config ../../vitest.config.ts"
 }

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,11 +1,19 @@
 {
-	"eslint.workingDirectories": [{ "pattern": "./packages/*" }],
+	"eslint.workingDirectories": [{ "pattern": "./apps/*" }, { "pattern": "./packages/*" }],
+	"eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"],
+	"prettier.documentSelectors": ["**/*.astro"],
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
 		"source.fixAll": true,
 		"source.organizeImports": false
 	},
-	"unocss.root": "./packages/website",
+	"editor.trimAutoWhitespace": false,
+	"files.associations": {
+		"*.mdx": "markdown"
+	},
+	"files.insertFinalNewline": true,
+	"files.eol": "\n",
+	"npm.packageManager": "yarn",
 	"typescript.tsdk": "node_modules/typescript/lib"
 }

.yarn/patches/@microsoft-tsdoc-config-npm-0.16.1-81031b1bbf.patch

@@ -1,14 +0,0 @@
-diff --git a/lib/TSDocConfigFile.js b/lib/TSDocConfigFile.js
-index caf3515d60fd386c5909db5a0aa8b4180b10d602..6fa4f1984b6ba6b3a7aecd05e54477ebf141af94 100644
---- a/lib/TSDocConfigFile.js
-+++ b/lib/TSDocConfigFile.js
-@@ -31,8 +31,7 @@ const ajv_1 = __importDefault(require("ajv"));
- const jju = __importStar(require("jju"));
- const ajv = new ajv_1.default({ verbose: true });
- function initializeSchemaValidator() {
--    const jsonSchemaPath = resolve.sync('@microsoft/tsdoc/schemas/tsdoc.schema.json', { basedir: __dirname });
--    const jsonSchemaContent = fs.readFileSync(jsonSchemaPath).toString();
-+    const jsonSchemaContent = "{\"title\":\"TSDoc Configuration\",\"description\":\"Describes the TSDoc configuration for a TypeScript project\",\"type\":\"object\",\"properties\":{\"$schema\":{\"description\":\"Part of the JSON Schema standard, this optional keyword declares the URL of the schema that the file conforms to. Editors may download the schema and use it to perform syntax highlighting.\",\"type\":\"string\"},\"extends\":{\"description\":\"Optionally specifies one or more JSON config files that will be combined with this file.  This provides a way for standard settings to be shared across multiple projects.  Important: The \\\"extends\\\" paths are resolved using NodeJS module resolution, so a path to a local file MUST be prefixed with \\\"./\\\".\",\"type\":\"array\",\"items\":{\"type\":\"string\"}},\"noStandardTags\":{\"description\":\"By default, the config file loader will predefine all of the standardized TSDoc tags.  To disable this and start with a completely empty configuration, set \\\"noStandardTags\\\"=true.\",\"type\":\"boolean\"},\"tagDefinitions\":{\"description\":\"Additional tags to support when parsing documentation comments with TSDoc.\",\"type\":\"array\",\"items\":{\"$ref\":\"#/definitions/tsdocTagDefinition\"}},\"supportedHtmlElements\":{\"description\":\"The HTML element names that are supported in this configuration. Used in conjunction with the \\\"reportUnsupportedHtmlElements\\\" setting.\",\"type\":\"array\",\"items\":{\"type\":\"string\",\"pattern\":\"^[a-zA-Z0-9-]+$\"}},\"reportUnsupportedHtmlElements\":{\"description\":\"Whether an error should be reported when an unsupported HTML element is encountered in a doc comment. Defaults to \\\"true\\\" if the \\\"supportedHtmlElements\\\" field is present in this file, \\\"false\\\" if not.\",\"type\":\"boolean\"},\"supportForTags\":{\"description\":\"A collection of key/value pairs.  The key is a TSDoc tag name (e.g. \\\"@myTag\\\") that must be defined in this configuration.  The value is a boolean indicating whether the tag is supported.  The TSDoc parser may report warnings when unsupported tags are encountered.  If \\\"supportForTags\\\" is specified for at least one tag, then the \\\"reportUnsupportedTags\\\" validation check is enabled by default.\",\"type\":\"object\",\"patternProperties\":{\"@[a-zA-Z][a-zA-Z0-9]*$\":{\"type\":\"boolean\"}},\"additionalItems\":false}},\"required\":[\"$schema\"],\"additionalProperties\":false,\"definitions\":{\"tsdocTagDefinition\":{\"description\":\"Configuration for a custom supported TSDoc tag.\",\"type\":\"object\",\"properties\":{\"tagName\":{\"description\":\"Name of the custom tag. TSDoc tag names start with an at-sign (@) followed by ASCII letters using camelCase capitalization.\",\"type\":\"string\"},\"syntaxKind\":{\"description\":\"Syntax kind of the custom tag. \\\"inline\\\" means that this tag can appear inside other documentation sections (example: {@link}). \\\"block\\\" means that this tag starts a new documentation section (example: @remarks). \\\"modifier\\\" means that this tag's presence indicates an aspect of the associated API item (example: @internal).\",\"type\":\"string\",\"enum\":[\"inline\",\"block\",\"modifier\"]},\"allowMultiple\":{\"description\":\"If true, then this tag may appear multiple times in a doc comment. By default, a tag may only appear once.\",\"type\":\"boolean\"}},\"required\":[\"tagName\",\"syntaxKind\"],\"additionalProperties\":false}}}";
-     const jsonSchema = jju.parse(jsonSchemaContent, { mode: 'cjson' });
-     return ajv.compile(jsonSchema);
- }

.yarn/patches/@microsoft-tsdoc-config-npm-0.16.2-30fd115d09.patch

@@ -0,0 +1,14 @@
+diff --git a/lib/TSDocConfigFile.js b/lib/TSDocConfigFile.js
+index caf3515d60fd386c5909db5a0aa8b4180b10d602..5f7cfed7611e3fe660b5265ff99c5da0beb7caec 100644
+--- a/lib/TSDocConfigFile.js
++++ b/lib/TSDocConfigFile.js
+@@ -31,8 +31,7 @@ const ajv_1 = __importDefault(require("ajv"));
+ const jju = __importStar(require("jju"));
+ const ajv = new ajv_1.default({ verbose: true });
+ function initializeSchemaValidator() {
+-    const jsonSchemaPath = resolve.sync('@microsoft/tsdoc/schemas/tsdoc.schema.json', { basedir: __dirname });
+-    const jsonSchemaContent = fs.readFileSync(jsonSchemaPath).toString();
++    const jsonSchemaContent = '{\"title\":\"TSDoc Configuration\",\"description\":\"Describes the TSDoc configuration for a TypeScript project\",\"type\":\"object\",\"properties\":{\"$schema\":{\"description\":\"Part of the JSON Schema standard, this optional keyword declares the URL of the schema that the file conforms to. Editors may download the schema and use it to perform syntax highlighting.\",\"type\":\"string\"},\"extends\":{\"description\":\"Optionally specifies one or more JSON config files that will be combined with this file.  This provides a way for standard settings to be shared across multiple projects.  Important: The \\\"extends\\\" paths are resolved using NodeJS module resolution, so a path to a local file MUST be prefixed with \\\".\/\\\".\",\"type\":\"array\",\"items\":{\"type\":\"string\"}},\"noStandardTags\":{\"description\":\"By default, the config file loader will predefine all of the standardized TSDoc tags.  To disable this and start with a completely empty configuration, set \\\"noStandardTags\\\"=true.\",\"type\":\"boolean\"},\"tagDefinitions\":{\"description\":\"Additional tags to support when parsing documentation comments with TSDoc.\",\"type\":\"array\",\"items\":{\"$ref\":\"#\/definitions\/tsdocTagDefinition\"}},\"supportedHtmlElements\":{\"description\":\"The HTML element names that are supported in this configuration. Used in conjunction with the \\\"reportUnsupportedHtmlElements\\\" setting.\",\"type\":\"array\",\"items\":{\"type\":\"string\",\"pattern\":\"^[a-zA-Z0-9-]+$\"}},\"reportUnsupportedHtmlElements\":{\"description\":\"Whether an error should be reported when an unsupported HTML element is encountered in a doc comment. Defaults to \\\"true\\\" if the \\\"supportedHtmlElements\\\" field is present in this file, \\\"false\\\" if not.\",\"type\":\"boolean\"},\"supportForTags\":{\"description\":\"A collection of key\/value pairs.  The key is a TSDoc tag name (e.g. \\\"@myTag\\\") that must be defined in this configuration.  The value is a boolean indicating whether the tag is supported.  The TSDoc parser may report warnings when unsupported tags are encountered.  If \\\"supportForTags\\\" is specified for at least one tag, then the \\\"reportUnsupportedTags\\\" validation check is enabled by default.\",\"type\":\"object\",\"patternProperties\":{\"@[a-zA-Z][a-zA-Z0-9]*$\":{\"type\":\"boolean\"}},\"additionalItems\":false}},\"required\":[\"$schema\"],\"additionalProperties\":false,\"definitions\":{\"tsdocTagDefinition\":{\"description\":\"Configuration for a custom supported TSDoc tag.\",\"type\":\"object\",\"properties\":{\"tagName\":{\"description\":\"Name of the custom tag. TSDoc tag names start with an at-sign (@) followed by ASCII letters using camelCase capitalization.\",\"type\":\"string\"},\"syntaxKind\":{\"description\":\"Syntax kind of the custom tag. \\\"inline\\\" means that this tag can appear inside other documentation sections (example: {@link}). \\\"block\\\" means that this tag starts a new documentation section (example: @remarks). \\\"modifier\\\" means that this tag\'s presence indicates an aspect of the associated API item (example: @internal).\",\"type\":\"string\",\"enum\":[\"inline\",\"block\",\"modifier\"]},\"allowMultiple\":{\"description\":\"If true, then this tag may appear multiple times in a doc comment. By default, a tag may only appear once.\",\"type\":\"boolean\"}},\"required\":[\"tagName\",\"syntaxKind\"],\"additionalProperties\":false}}}';
+     const jsonSchema = jju.parse(jsonSchemaContent, { mode: 'cjson' });
+     return ajv.compile(jsonSchema);
+ }

.yarn/plugins/@yarnpkg/plugin-docker-build.cjs

@@ -0,0 +1,257 @@
+/* eslint-disable */
+module.exports = {
+	name: '@yarnpkg/plugin-docker-build',
+	factory: function (require) {
+		var plugin;
+		(() => {
+			'use strict';
+			var t = {
+					d: (e, o) => {
+						for (var r in o) t.o(o, r) && !t.o(e, r) && Object.defineProperty(e, r, { enumerable: !0, get: o[r] });
+					},
+					o: (t, e) => Object.prototype.hasOwnProperty.call(t, e),
+					r: (t) => {
+						'undefined' != typeof Symbol &&
+							Symbol.toStringTag &&
+							Object.defineProperty(t, Symbol.toStringTag, { value: 'Module' }),
+							Object.defineProperty(t, '__esModule', { value: !0 });
+					},
+				},
+				e = {};
+			t.r(e), t.d(e, { default: () => u });
+			const o = require('@yarnpkg/cli'),
+				r = require('clipanion'),
+				i = require('@yarnpkg/core'),
+				a = require('@yarnpkg/plugin-patch'),
+				n = require('@yarnpkg/fslib');
+			const s = require('@yarnpkg/plugin-pack');
+			async function c({ workspace: t, destination: e, report: o }) {
+				await s.packUtils.prepareForPack(t, { report: o }, async () => {
+					const r = await s.packUtils.genPackList(t),
+						a = i.Report.progressViaCounter(r.length),
+						c = o.reportProgress(a);
+					try {
+						for (const i of r) {
+							const r = n.ppath.join(t.cwd, i),
+								s = n.ppath.join(e, t.relativeCwd, i);
+							o.reportInfo(null, i), await n.xfs.copyPromise(s, r, { overwrite: !0 }), a.tick();
+						}
+					} finally {
+						c.stop();
+					}
+				});
+			}
+			function p(t, e) {
+				const o = (0, n.toFilename)(e);
+				return n.ppath.isAbsolute(o) ? n.ppath.relative(t, o) : o;
+			}
+			const l = /^builtin<([^>]+)>$/;
+			var d = function (t, e, o, r) {
+				var i,
+					a = arguments.length,
+					n = a < 3 ? e : null === r ? (r = Object.getOwnPropertyDescriptor(e, o)) : r;
+				if ('object' == typeof Reflect && 'function' == typeof Reflect.decorate) n = Reflect.decorate(t, e, o, r);
+				else
+					for (var s = t.length - 1; s >= 0; s--)
+						(i = t[s]) && (n = (a < 3 ? i(n) : a > 3 ? i(e, o, n) : i(e, o)) || n);
+				return a > 3 && n && Object.defineProperty(e, o, n), n;
+			};
+			class f extends o.BaseCommand {
+				constructor() {
+					super(...arguments), (this.args = []);
+				}
+				async execute() {
+					const t = await i.Configuration.find(this.context.cwd, this.context.plugins),
+						{ project: e } = await i.Project.find(t, this.context.cwd),
+						o = e.getWorkspaceByIdent(i.structUtils.parseIdent(this.workspaceName)),
+						r = (function ({
+							project: t,
+							workspaces: e,
+							production: o = !1,
+							scopes: r = o ? ['dependencies'] : i.Manifest.hardDependencies,
+						}) {
+							const a = new Set([...e]);
+							for (const e of a)
+								for (const o of r) {
+									const r = e.manifest.getForScope(o).values();
+									for (const e of r) {
+										const o = t.tryWorkspaceByDescriptor(e);
+										o && a.add(o);
+									}
+								}
+							for (const e of t.workspaces)
+								a.has(e)
+									? o && e.manifest.devDependencies.clear()
+									: (e.manifest.dependencies.clear(),
+									  e.manifest.devDependencies.clear(),
+									  e.manifest.peerDependencies.clear());
+							return a;
+						})({ project: e, workspaces: [o], production: this.production }),
+						s = await (async function (t, e = 'Dockerfile') {
+							const o = (0, n.toFilename)(e);
+							if (n.ppath.isAbsolute(o)) return o;
+							const r = [n.ppath.join(t.cwd, o), n.ppath.join(t.project.cwd, o)];
+							for (const t of r) if (await n.xfs.existsPromise(t)) return t;
+							throw new Error('Dockerfile is required');
+						})(o, this.dockerFilePath),
+						d = await i.Cache.find(t);
+					return (
+						await i.StreamReport.start(
+							{ configuration: t, stdout: this.context.stdout, includeLogs: !this.context.quiet },
+							async (t) => {
+								await t.startTimerPromise('Resolution Step', async () => {
+									await e.resolveEverything({ report: t, cache: d });
+								}),
+									await t.startTimerPromise('Fetch Step', async () => {
+										await e.fetchEverything({ report: t, cache: d });
+									}),
+									await n.xfs.mktempPromise(async (o) => {
+										const f = n.ppath.join(o, (0, n.toFilename)('manifests')),
+											u = n.ppath.join(o, (0, n.toFilename)('packs'));
+										await t.startTimerPromise('Copy files', async () => {
+											await (async function ({ destination: t, project: e, report: o }) {
+												const r = e.configuration.get('rcFilename');
+												o.reportInfo(null, r),
+													await n.xfs.copyPromise(n.ppath.join(t, r), n.ppath.join(e.cwd, r), { overwrite: !0 });
+											})({ destination: f, project: e, report: t }),
+												await (async function ({ destination: t, project: e, report: o }) {
+													const r = n.ppath.join((0, n.toFilename)('.yarn'), (0, n.toFilename)('plugins'));
+													o.reportInfo(null, r),
+														await n.xfs.copyPromise(n.ppath.join(t, r), n.ppath.join(e.cwd, r), { overwrite: !0 });
+												})({ destination: f, project: e, report: t }),
+												await (async function ({ destination: t, project: e, report: o }) {
+													const r = e.configuration.get('yarnPath'),
+														i = n.ppath.relative(e.cwd, r),
+														a = n.ppath.join(t, i);
+													o.reportInfo(null, i), await n.xfs.copyPromise(a, r, { overwrite: !0 });
+												})({ destination: f, project: e, report: t }),
+												await (async function ({ destination: t, workspaces: e, report: o }) {
+													for (const r of e) {
+														const e = n.ppath.join(r.relativeCwd, i.Manifest.fileName),
+															a = n.ppath.join(t, e),
+															s = {};
+														r.manifest.exportTo(s),
+															o.reportInfo(null, e),
+															await n.xfs.mkdirpPromise(n.ppath.dirname(a)),
+															await n.xfs.writeJsonPromise(a, s);
+													}
+												})({ destination: f, workspaces: e.workspaces, report: t }),
+												await (async function ({ destination: t, report: e, project: o, parseDescriptor: r }) {
+													const a = new Set();
+													for (const s of o.storedDescriptors.values()) {
+														const c = r(
+															i.structUtils.isVirtualDescriptor(s) ? i.structUtils.devirtualizeDescriptor(s) : s,
+														);
+														if (!c) continue;
+														const { parentLocator: p, paths: d } = c;
+														for (const r of d) {
+															if (l.test(r)) continue;
+															if (n.ppath.isAbsolute(r)) continue;
+															const i = o.getWorkspaceByLocator(p),
+																s = n.ppath.join(i.relativeCwd, r);
+															if (a.has(s)) continue;
+															a.add(s);
+															const c = n.ppath.join(i.cwd, r),
+																d = n.ppath.join(t, s);
+															e.reportInfo(null, s),
+																await n.xfs.mkdirpPromise(n.ppath.dirname(d)),
+																await n.xfs.copyFilePromise(c, d);
+														}
+													}
+												})({
+													destination: f,
+													report: t,
+													project: e,
+													parseDescriptor: (t) => {
+														if (t.range.startsWith('exec:')) {
+															const e = (function (t) {
+																const { params: e, selector: o } = i.structUtils.parseRange(t),
+																	r = n.npath.toPortablePath(o);
+																return {
+																	parentLocator:
+																		e && 'string' == typeof e.locator ? i.structUtils.parseLocator(e.locator) : null,
+																	path: r,
+																};
+															})(t.range);
+															if (!e || !e.parentLocator) return;
+															return { parentLocator: e.parentLocator, paths: [e.path] };
+														}
+														if (t.range.startsWith('patch:')) {
+															const { parentLocator: e, patchPaths: o } = a.patchUtils.parseDescriptor(t);
+															if (!e) return;
+															return { parentLocator: e, paths: o };
+														}
+													},
+												}),
+												await (async function ({ destination: t, project: e, cache: o, report: r }) {
+													for (const i of o.markedFiles) {
+														const o = n.ppath.relative(e.cwd, i);
+														(await n.xfs.existsPromise(i)) &&
+															(r.reportInfo(null, o), await n.xfs.copyPromise(n.ppath.join(t, o), i));
+													}
+												})({ destination: f, project: e, cache: d, report: t }),
+												await (async function ({ destination: t, project: e, report: o }) {
+													const r = (0, n.toFilename)(e.configuration.get('lockfileFilename')),
+														i = n.ppath.join(t, r);
+													o.reportInfo(null, r),
+														await n.xfs.mkdirpPromise(n.ppath.dirname(i)),
+														await n.xfs.writeFilePromise(i, e.generateLockfile());
+												})({ destination: f, project: e, report: t }),
+												this.copyFiles &&
+													this.copyFiles.length &&
+													(await (async function ({ destination: t, files: e, dockerFilePath: o, report: r }) {
+														const i = n.ppath.dirname(o);
+														for (const o of e) {
+															const e = p(i, o),
+																a = n.ppath.join(i, e),
+																s = n.ppath.join(t, e);
+															r.reportInfo(null, e), await n.xfs.copyPromise(s, a);
+														}
+													})({ destination: f, files: this.copyFiles, dockerFilePath: s, report: t }));
+										});
+										for (const e of r) {
+											const o = e.manifest.name ? i.structUtils.stringifyIdent(e.manifest.name) : '';
+											await t.startTimerPromise('Pack workspace ' + o, async () => {
+												await c({ workspace: e, report: t, destination: u });
+											});
+										}
+										await i.execUtils.pipevp('docker', ['build', ...this.args, '-f', s, '.'], {
+											cwd: o,
+											strict: !0,
+											stdin: this.context.stdin,
+											stdout: this.context.stdout,
+											stderr: this.context.stderr,
+										});
+									});
+							},
+						)
+					).exitCode();
+				}
+			}
+			(f.usage = r.Command.Usage({
+				category: 'Docker-related commands',
+				description: 'Build a Docker image for a workspace',
+				details:
+					'\n      This command will build a efficient Docker image which only contains necessary dependencies for the specified workspace.\n\n      You have to create a Dockerfile in your workspace or your project. You can also specify the path to Dockerfile using the "-f, --file" option.\n\n      Additional arguments can be passed to "docker build" directly, please check the Docker docs for more info: https://docs.docker.com/engine/reference/commandline/build/\n\n      You can copy additional files or folders to a Docker image using the "--copy" option. This is useful for secret keys or configuration files. The files will be copied to "manifests" folder. The path can be either a path relative to the Dockerfile or an absolute path.\n    ',
+				examples: [
+					['Build a Docker image for a workspace', 'yarn docker build @foo/bar'],
+					['Pass additional arguments to docker build command', 'yarn docker build @foo/bar -t image-tag'],
+					[
+						'Copy additional files to a Docker image',
+						'yarn docker build --copy secret.key --copy config.json @foo/bar',
+					],
+					['Install production dependencies only', 'yarn docker build --production @foo/bar'],
+				],
+			})),
+				d([r.Command.String()], f.prototype, 'workspaceName', void 0),
+				d([r.Command.Proxy()], f.prototype, 'args', void 0),
+				d([r.Command.String('-f,--file')], f.prototype, 'dockerFilePath', void 0),
+				d([r.Command.Array('--copy')], f.prototype, 'copyFiles', void 0),
+				d([r.Command.Boolean('--production')], f.prototype, 'production', void 0),
+				d([r.Command.Path('docker', 'build')], f.prototype, 'execute', null);
+			const u = { commands: [f] };
+			plugin = e;
+		})();
+		return plugin;
+	},
+};

.yarnrc.yml

@@ -2,10 +2,12 @@ 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'
+  - path: .yarn/plugins/@yarnpkg/plugin-docker-build.cjs
+    spec: 'https://github.com/Dcard/yarn-plugins/releases/latest/download/plugin-docker-build.js'
 
-yarnPath: .yarn/releases/yarn-3.2.1.cjs
+yarnPath: .yarn/releases/yarn-3.5.0.cjs

README.md

@@ -18,113 +18,69 @@
 
 ## About
 
-discord.js is a powerful [Node.js](https://nodejs.org) module that allows you to easily interact with the
-[Discord API](https://discord.com/developers/docs/intro).
+This repository contains multiple packages with separate [releases][github-releases]. You can find the assembled Discord API wrapper at [`discord.js`][source]. It is a powerful [Node.js](https://nodejs.org/en) module that allows you to easily interact with the [Discord API](https://discord.com/developers/docs/intro).
 
-- Object-oriented
-- Predictable abstractions
-- Performant
-- 100% coverage of the Discord API
+## Packages
 
-## Installation
-
-**Node.js 16.9.0 or newer is required.**
-
-```sh-session
-npm install discord.js
-yarn add discord.js
-pnpm add discord.js
-```
-
-### Optional packages
-
-- [zlib-sync](https://www.npmjs.com/package/zlib-sync) for WebSocket data compression and inflation (`npm install zlib-sync`)
-- [erlpack](https://github.com/discord/erlpack) for significantly faster WebSocket data (de)serialisation (`npm install discord/erlpack`)
-- [bufferutil](https://www.npmjs.com/package/bufferutil) for a much faster WebSocket connection (`npm install bufferutil`)
-- [utf-8-validate](https://www.npmjs.com/package/utf-8-validate) in combination with `bufferutil` for much faster WebSocket processing (`npm install utf-8-validate`)
-- [@discordjs/voice](https://www.npmjs.com/package/@discordjs/voice) for interacting with the Discord Voice API (`npm install @discordjs/voice`)
-
-## Example usage
-
-Install discord.js:
-
-```sh-session
-npm install discord.js
-yarn add discord.js
-pnpm add discord.js
-```
-
-Register a slash command against the Discord API:
-
-```js
-const { REST, Routes } = require('discord.js');
-
-const commands = [
-	{
-		name: 'ping',
-		description: 'Replies with Pong!',
-	},
-];
-
-const rest = new REST({ version: '10' }).setToken('token');
-
-(async () => {
-	try {
-		console.log('Started refreshing application (/) commands.');
-
-		await rest.put(Routes.applicationCommands(CLIENT_ID), { body: commands });
-
-		console.log('Successfully reloaded application (/) commands.');
-	} catch (error) {
-		console.error(error);
-	}
-})();
-```
-
-Afterwards we can create a quite simple example bot:
-
-```js
-const { Client, GatewayIntentBits } = require('discord.js');
-const client = new Client({ intents: [GatewayIntentBits.Guilds] });
-
-client.on('ready', () => {
-	console.log(`Logged in as ${client.user.tag}!`);
-});
-
-client.on('interactionCreate', async (interaction) => {
-	if (!interaction.isChatInputCommand()) return;
-
-	if (interaction.commandName === 'ping') {
-		await interaction.reply('Pong!');
-	}
-});
-
-client.login('token');
-```
+- `discord.js` ([source][source]) - A powerful Node.js module for interacting with the Discord API
+- `@discordjs/brokers` ([source][brokers-source]) - A collection of brokers for use with discord.js
+- `@discordjs/builders` ([source][builders-source]) - A utility package for easily building Discord API payloads
+- `@discordjs/collection` ([source][collection-source]) - A powerful utility data structure
+- `@discordjs/core` ([source][core-source]) - A thinly abstracted wrapper around the core components of the Discord API
+- `@discordjs/formatters` ([source][formatters-source]) - A collection of functions for formatting strings
+- `@discordjs/proxy` ([source][proxy-source]) - A wrapper around `@discordjs/rest` for running an HTTP proxy
+- `@discordjs/rest` ([source][rest-source]) - A module for interacting with the Discord REST API
+- `@discordjs/voice` ([source][voice-source]) - A module for interacting with the Discord Voice API
+- `@discordjs/util` ([source][util-source]) - A collection of utility functions
+- `@discordjs/ws` ([source][ws-source]) - A wrapper around Discord's gateway
 
 ## Links
 
-- [Website](https://discord.js.org/) ([source](https://github.com/discordjs/discord.js/tree/main/packages/website))
-- [Documentation](https://discord.js.org/#/docs)
-- [Guide](https://discordjs.guide/) ([source](https://github.com/discordjs/guide))
-  See also the [Update Guide](https://discordjs.guide/additional-info/changes-in-v14.html), including updated and removed items in the library.
-- [discord.js Discord server](https://discord.gg/djs)
-- [Discord API Discord server](https://discord.gg/discord-api)
-- [GitHub](https://github.com/discordjs/discord.js)
-- [npm](https://www.npmjs.com/package/discord.js)
-- [Related libraries](https://discord.com/developers/docs/topics/community-resources#libraries)
+- [Website][website] ([source][website-source])
+- [Documentation][documentation]
+- [Guide][guide] ([source][guide-source])
+  Also see the v13 to v14 [Update Guide][guide-update], which includes updated and removed items from the library.
+- [discord.js Discord server][discord]
+- [Discord API Discord server][discord-api]
+- [GitHub][source]
+- [npm][npm]
+- [Related libraries][related-libs]
 
 ### Extensions
 
-- [RPC](https://www.npmjs.com/package/discord-rpc) ([source](https://github.com/discordjs/RPC))
+- [RPC][rpc] ([source][rpc-source])
 
 ## Contributing
 
-Before creating an issue, please ensure that it hasn't already been reported/suggested, and double-check the
-[documentation](https://discord.js.org/#/docs).  
-See [the contribution guide](https://github.com/discordjs/discord.js/blob/main/.github/CONTRIBUTING.md) if you'd like to submit a PR.
+Please read through our [contribution guidelines][contributing] before starting a pull request. We welcome contributions of all kinds, not just code! If you're stuck for ideas, look for the [good first issue][good-first-issue] label on issues in the repository. If you have any questions about the project, feel free to ask them on [Discord][discord]. Before creating your own issue or pull request, always check to see if one already exists! Don't rush contributions, take your time and ensure you're doing it correctly.
 
 ## Help
 
-If you don't understand something in the documentation, you are experiencing problems, or you just need a gentle
-nudge in the right direction, please don't hesitate to join our official [discord.js Server](https://discord.gg/djs).
+If you don't understand something in the documentation, you are experiencing problems, or you just need a gentle nudge in the right direction, please join our [Discord server][discord].
+
+[website]: https://discord.js.org
+[website-source]: https://github.com/discordjs/discord.js/tree/main/apps/website
+[documentation]: https://discord.js.org/docs
+[guide]: https://discordjs.guide/
+[guide-source]: https://github.com/discordjs/guide
+[guide-update]: https://discordjs.guide/additional-info/changes-in-v14.html
+[discord]: https://discord.gg/djs
+[discord-api]: https://discord.gg/discord-api
+[source]: https://github.com/discordjs/discord.js/tree/main/packages/discord.js
+[npm]: https://www.npmjs.com/package/discord.js
+[related-libs]: https://discord.com/developers/docs/topics/community-resources#libraries
+[rpc]: https://www.npmjs.com/package/discord-rpc
+[rpc-source]: https://github.com/discordjs/RPC
+[contributing]: https://github.com/discordjs/discord.js/blob/main/.github/CONTRIBUTING.md
+[github-releases]: https://github.com/discordjs/discord.js/releases
+[brokers-source]: https://github.com/discordjs/discord.js/tree/main/packages/brokers
+[builders-source]: https://github.com/discordjs/discord.js/tree/main/packages/builders
+[collection-source]: https://github.com/discordjs/discord.js/tree/main/packages/collection
+[core-source]: https://github.com/discordjs/discord.js/tree/main/packages/core
+[formatters-source]: https://github.com/discordjs/discord.js/tree/main/packages/formatters
+[proxy-source]: https://github.com/discordjs/discord.js/tree/main/packages/proxy
+[rest-source]: https://github.com/discordjs/discord.js/tree/main/packages/rest
+[voice-source]: https://github.com/discordjs/discord.js/tree/main/packages/voice
+[util-source]: https://github.com/discordjs/discord.js/tree/main/packages/util
+[ws-source]: https://github.com/discordjs/discord.js/tree/main/packages/ws
+[good-first-issue]: https://github.com/discordjs/discord.js/contribute

api-extractor.json

@@ -0,0 +1,382 @@
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+
+	/**
+	 * Optionally specifies another JSON config file that this file extends from.  This provides a way for
+	 * standard settings to be shared across multiple projects.
+	 *
+	 * If the path starts with "./" or "../", the path is resolved relative to the folder of the file that contains
+	 * the "extends" field.  Otherwise, the first path segment is interpreted as an NPM package name, and will be
+	 * resolved using NodeJS require().
+	 *
+	 * SUPPORTED TOKENS: none
+	 * DEFAULT VALUE: ""
+	 */
+	// "extends": "./shared/api-extractor-base.json"
+	// "extends": "my-package/include/api-extractor-base.json"
+
+	/**
+	 * Determines the "<projectFolder>" token that can be used with other config file settings.  The project folder
+	 * typically contains the tsconfig.json and package.json config files, but the path is user-defined.
+	 *
+	 * The path is resolved relative to the folder of the config file that contains the setting.
+	 *
+	 * The default value for "projectFolder" is the token "<lookup>", which means the folder is determined by traversing
+	 * parent folders, starting from the folder containing api-extractor.json, and stopping at the first folder
+	 * that contains a tsconfig.json file.  If a tsconfig.json file cannot be found in this way, then an error
+	 * will be reported.
+	 *
+	 * SUPPORTED TOKENS: <lookup>
+	 * DEFAULT VALUE: "<lookup>"
+	 */
+	// "projectFolder": "..",
+
+	/**
+	 * (REQUIRED) Specifies the .d.ts file to be used as the starting point for analysis.  API Extractor
+	 * analyzes the symbols exported by this module.
+	 *
+	 * The file extension must be ".d.ts" and not ".ts".
+	 *
+	 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+	 * prepend a folder token such as "<projectFolder>".
+	 *
+	 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+	 */
+	"mainEntryPointFilePath": "<projectFolder>/dist-docs/index.d.ts",
+
+	/**
+	 * A list of NPM package names whose exports should be treated as part of this package.
+	 *
+	 * For example, suppose that Webpack is used to generate a distributed bundle for the project "library1",
+	 * and another NPM package "library2" is embedded in this bundle.  Some types from library2 may become part
+	 * of the exported API for library1, but by default API Extractor would generate a .d.ts rollup that explicitly
+	 * imports library2.  To avoid this, we can specify:
+	 *
+	 *   "bundledPackages": [ "library2" ],
+	 *
+	 * This would direct API Extractor to embed those types directly in the .d.ts rollup, as if they had been
+	 * local files for library1.
+	 */
+	"bundledPackages": [],
+
+	/**
+	 * Determines how the TypeScript compiler engine will be invoked by API Extractor.
+	 */
+	"compiler": {
+		/**
+		 * Specifies the path to the tsconfig.json file to be used by API Extractor when analyzing the project.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * Note: This setting will be ignored if "overrideTsconfig" is used.
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/tsconfig.json"
+		 */
+		// "tsconfigFilePath": "<projectFolder>/tsconfig.json",
+		/**
+		 * Provides a compiler configuration that will be used instead of reading the tsconfig.json file from disk.
+		 * The object must conform to the TypeScript tsconfig schema:
+		 *
+		 * http://json.schemastore.org/tsconfig
+		 *
+		 * If omitted, then the tsconfig.json file will be read from the "projectFolder".
+		 *
+		 * DEFAULT VALUE: no overrideTsconfig section
+		 */
+		// "overrideTsconfig": {
+		//   . . .
+		// }
+		/**
+		 * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
+		 * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
+		 * dependencies contain declarations that are incompatible with the TypeScript engine that API Extractor uses
+		 * for its analysis.  Where possible, the underlying issue should be fixed rather than relying on skipLibCheck.
+		 *
+		 * DEFAULT VALUE: false
+		 */
+		// "skipLibCheck": true,
+	},
+
+	/**
+	 * Configures how the API report file (*.api.md) will be generated.
+	 */
+	"apiReport": {
+		/**
+		 * (REQUIRED) Whether to generate an API report.
+		 */
+		"enabled": false
+
+		/**
+		 * The filename for the API report files.  It will be combined with "reportFolder" or "reportTempFolder" to produce
+		 * a full file path.
+		 *
+		 * The file extension should be ".api.md", and the string should not contain a path separator such as "\" or "/".
+		 *
+		 * SUPPORTED TOKENS: <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<unscopedPackageName>.api.md"
+		 */
+		// "reportFileName": "<unscopedPackageName>.api.md",
+
+		/**
+		 * Specifies the folder where the API report file is written.  The file name portion is determined by
+		 * the "reportFileName" setting.
+		 *
+		 * The API report file is normally tracked by Git.  Changes to it can be used to trigger a branch policy,
+		 * e.g. for an API review.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/temp/"
+		 */
+		// "reportFolder": "<projectFolder>/temp/",
+
+		/**
+		 * Specifies the folder where the temporary report file is written.  The file name portion is determined by
+		 * the "reportFileName" setting.
+		 *
+		 * After the temporary file is written to disk, it is compared with the file in the "reportFolder".
+		 * If they are different, a production build will fail.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/temp/"
+		 */
+		// "reportTempFolder": "<projectFolder>/temp/"
+	},
+
+	/**
+	 * Configures how the doc model file (*.api.json) will be generated.
+	 */
+	"docModel": {
+		/**
+		 * (REQUIRED) Whether to generate a doc model file.
+		 */
+		"enabled": true,
+
+		/**
+		 * The output path for the doc model file.  The file extension should be ".api.json".
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/temp/<unscopedPackageName>.api.json"
+		 */
+		"apiJsonFilePath": "<projectFolder>/docs/docs.api.json"
+	},
+
+	/**
+	 * Configures how the .d.ts rollup file will be generated.
+	 */
+	"dtsRollup": {
+		/**
+		 * (REQUIRED) Whether to generate the .d.ts rollup file.
+		 */
+		"enabled": false
+
+		/**
+		 * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
+		 * This file will include all declarations that are exported by the main entry point.
+		 *
+		 * If the path is an empty string, then this file will not be written.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
+		 */
+		// "untrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts",
+
+		/**
+		 * Specifies the output path for a .d.ts rollup file to be generated with trimming for an "alpha" release.
+		 * This file will include only declarations that are marked as "@public", "@beta", or "@alpha".
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: ""
+		 */
+		// "alphaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-alpha.d.ts",
+
+		/**
+		 * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "beta" release.
+		 * This file will include only declarations that are marked as "@public" or "@beta".
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: ""
+		 */
+		// "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-beta.d.ts",
+
+		/**
+		 * Specifies the output path for a .d.ts rollup file to be generated with trimming for a "public" release.
+		 * This file will include only declarations that are marked as "@public".
+		 *
+		 * If the path is an empty string, then this file will not be written.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: ""
+		 */
+		// "publicTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts",
+
+		/**
+		 * When a declaration is trimmed, by default it will be replaced by a code comment such as
+		 * "Excluded from this release type: exampleMember".  Set "omitTrimmingComments" to true to remove the
+		 * declaration completely.
+		 *
+		 * DEFAULT VALUE: false
+		 */
+		// "omitTrimmingComments": true
+	},
+
+	/**
+	 * Configures how the tsdoc-metadata.json file will be generated.
+	 */
+	"tsdocMetadata": {
+		/**
+		 * Whether to generate the tsdoc-metadata.json file.
+		 *
+		 * DEFAULT VALUE: true
+		 */
+		// "enabled": true,
+		/**
+		 * Specifies where the TSDoc metadata file should be written.
+		 *
+		 * The path is resolved relative to the folder of the config file that contains the setting; to change this,
+		 * prepend a folder token such as "<projectFolder>".
+		 *
+		 * The default value is "<lookup>", which causes the path to be automatically inferred from the "tsdocMetadata",
+		 * "typings" or "main" fields of the project's package.json.  If none of these fields are set, the lookup
+		 * falls back to "tsdoc-metadata.json" in the package folder.
+		 *
+		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
+		 * DEFAULT VALUE: "<lookup>"
+		 */
+		// "tsdocMetadataFilePath": "<projectFolder>/dist/tsdoc-metadata.json"
+	},
+
+	/**
+	 * Specifies what type of newlines API Extractor should use when writing output files.  By default, the output files
+	 * will be written with Windows-style newlines.  To use POSIX-style newlines, specify "lf" instead.
+	 * To use the OS's default newline kind, specify "os".
+	 *
+	 * DEFAULT VALUE: "crlf"
+	 */
+	"newlineKind": "lf",
+
+	/**
+	 * Configures how API Extractor reports error and warning messages produced during analysis.
+	 *
+	 * There are three sources of messages:  compiler messages, API Extractor messages, and TSDoc messages.
+	 */
+	"messages": {
+		/**
+		 * Configures handling of diagnostic messages reported by the TypeScript compiler engine while analyzing
+		 * the input .d.ts files.
+		 *
+		 * TypeScript message identifiers start with "TS" followed by an integer.  For example: "TS2551"
+		 *
+		 * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+		 */
+		"compilerMessageReporting": {
+			/**
+			 * Configures the default routing for messages that don't match an explicit rule in this table.
+			 */
+			"default": {
+				/**
+				 * Specifies whether the message should be written to the the tool's output log.  Note that
+				 * the "addToApiReportFile" property may supersede this option.
+				 *
+				 * Possible values: "error", "warning", "none"
+				 *
+				 * Errors cause the build to fail and return a nonzero exit code.  Warnings cause a production build fail
+				 * and return a nonzero exit code.  For a non-production build (e.g. when "api-extractor run" includes
+				 * the "--local" option), the warning is displayed but the build will not fail.
+				 *
+				 * DEFAULT VALUE: "warning"
+				 */
+				"logLevel": "warning"
+
+				/**
+				 * When addToApiReportFile is true:  If API Extractor is configured to write an API report file (.api.md),
+				 * then the message will be written inside that file; otherwise, the message is instead logged according to
+				 * the "logLevel" option.
+				 *
+				 * DEFAULT VALUE: false
+				 */
+				// "addToApiReportFile": false
+			}
+
+			// "TS2551": {
+			//   "logLevel": "warning",
+			//   "addToApiReportFile": true
+			// },
+			//
+			// . . .
+		},
+
+		/**
+		 * Configures handling of messages reported by API Extractor during its analysis.
+		 *
+		 * API Extractor message identifiers start with "ae-".  For example: "ae-extra-release-tag"
+		 *
+		 * DEFAULT VALUE: See api-extractor-defaults.json for the complete table of extractorMessageReporting mappings
+		 */
+		"extractorMessageReporting": {
+			"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": {
+			//   "logLevel": "warning",
+			//   "addToApiReportFile": true
+			// },
+			//
+			// . . .
+		},
+
+		/**
+		 * Configures handling of messages reported by the TSDoc parser when analyzing code comments.
+		 *
+		 * TSDoc message identifiers start with "tsdoc-".  For example: "tsdoc-link-tag-unescaped-text"
+		 *
+		 * DEFAULT VALUE:  A single "default" entry with logLevel=warning.
+		 */
+		"tsdocMessageReporting": {
+			"default": {
+				"logLevel": "warning"
+				// "addToApiReportFile": false
+			}
+
+			// "tsdoc-link-tag-unescaped-text": {
+			//   "logLevel": "warning",
+			//   "addToApiReportFile": true
+			// },
+			//
+			// . . .
+		}
+	}
+}

apps/guide/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+	"extends": ["../../.eslintrc.json", "neon/react", "neon/next", "neon/edge", "neon/prettier"],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"rules": {
+		"react/react-in-jsx-scope": 0,
+		"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
+	}
+}

apps/guide/.gitignore

@@ -13,13 +13,13 @@ pids
 
 # Env
 .env
+.env*.local
 
 # Dist
 dist/
 typings/
 .cache/
 build/
-api/
 src/styles/unocss.css
 .next/
 
@@ -27,3 +27,7 @@ src/styles/unocss.css
 .tmp/
 coverage/
 .vercel
+public/searchIndex
+.vscode
+lighthouse-results/
+.contentlayer

apps/guide/.prettierrc.cjs

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

apps/guide/README.md

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

apps/guide/contentlayer.config.ts

@@ -0,0 +1,100 @@
+import { remarkCodeHike } from '@code-hike/mdx';
+import { defineDocumentType, makeSource } from 'contentlayer/source-files';
+// import { type Node, toString } from 'hast-util-to-string';
+// import { h } from 'hastscript';
+// import { escape } from 'html-escaper';
+// import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+
+export const Content = defineDocumentType(() => ({
+	name: 'Content',
+	filePathPattern: `**/*.mdx`,
+	contentType: 'mdx',
+	fields: {
+		title: {
+			type: 'string',
+			required: true,
+		},
+		summary: {
+			type: 'string',
+		},
+		image: {
+			type: 'string',
+		},
+	},
+	computedFields: {
+		slug: {
+			type: 'string',
+			resolve: (doc) => doc._raw.flattenedPath,
+		},
+		url: {
+			type: 'string',
+			resolve: (post) => `/posts/${post._raw.flattenedPath}`,
+		},
+	},
+}));
+
+// const LinkIcon = h(
+// 	'svg',
+// 	{
+// 		width: '1rem',
+// 		height: '1rem',
+// 		viewBox: '0 0 24 24',
+// 		fill: 'none',
+// 		stroke: 'currentColor',
+// 		strokeWidth: '2',
+// 		strokeLinecap: 'round',
+// 		strokeLinejoin: 'round',
+// 	},
+// 	h('path', {
+// 		// eslint-disable-next-line id-length
+// 		d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
+// 	}),
+// 	h('path', {
+// 		// eslint-disable-next-line id-length
+// 		d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+// 	}),
+// );
+
+// const createSROnlyLabel = (text: any) => {
+// 	const node = h('span.sr-only', `Section titled ${escape(text)}`);
+// 	node.properties!['is:raw'] = true;
+// 	return node;
+// };
+
+export default makeSource({
+	contentDirPath: 'src/content',
+	documentTypes: [Content],
+	mdx: {
+		remarkPlugins: [remarkGfm, [remarkCodeHike, { theme: 'css-variables', 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: async ({ 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)),
+			// 		],
+			// 	},
+			// ],
+		],
+	},
+});

apps/guide/next.config.js

@@ -0,0 +1,32 @@
+// import { fileURLToPath } from 'node:url';
+// import bundleAnalyzer from '@next/bundle-analyzer';
+// import { withContentlayer } from 'next-contentlayer';
+const { fileURLToPath } = require('node:url');
+const bundleAnalyzer = require('@next/bundle-analyzer');
+const { withContentlayer } = require('next-contentlayer');
+
+const withBundleAnalyzer = bundleAnalyzer({
+	enabled: process.env.ANALYZE === 'true',
+});
+
+module.exports = withContentlayer(
+	withBundleAnalyzer({
+		reactStrictMode: true,
+		eslint: {
+			ignoreDuringBuilds: true,
+		},
+		// Until Next.js fixes their type issues
+		typescript: {
+			ignoreBuildErrors: true,
+		},
+		experimental: {
+			appDir: true,
+			fallbackNodePolyfills: false,
+		},
+		images: {
+			dangerouslyAllowSVG: true,
+			contentDispositionType: 'attachment',
+			contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
+		},
+	}),
+);

apps/guide/package.json

@@ -0,0 +1,102 @@
+{
+	"name": "@discordjs/guide",
+	"version": "0.1.0",
+	"description": "Imagine a guide... that explores the many possibilities for your discord.js bot",
+	"private": true,
+	"scripts": {
+		"test": "vitest run",
+		"test:lighthouse": "lighthouse http://localhost:3000 --output-path=./lighthouse-results",
+		"build:local": "yarn build:prod",
+		"build:prod": "yarn workspaces foreach -ptR run build && yarn build:css && yarn build:next",
+		"build:next": "next build",
+		"build:css": "yarn generate:css",
+		"build:analyze": "cross-env-shell ANALYZE=true yarn build:prod",
+		"preview": "next start",
+		"dev": "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 ../../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": "commonjs",
+	"contributors": [
+		"Crawl <icrawltogo@gmail.com>"
+	],
+	"license": "Apache-2.0",
+	"keywords": [
+		"discord",
+		"api",
+		"bot",
+		"client",
+		"node",
+		"discordapp",
+		"discordjs"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/discordjs/discord.js.git"
+	},
+	"bugs": {
+		"url": "https://github.com/discordjs/discord.js/issues"
+	},
+	"homepage": "https://discord.js.org",
+	"dependencies": {
+		"@code-hike/mdx": "^0.7.5-next.0",
+		"@discordjs/ui": "workspace:^",
+		"@react-icons/all-files": "^4.1.0",
+		"@vercel/analytics": "^0.1.11",
+		"@vercel/edge-config": "^0.1.5",
+		"@vercel/og": "^0.5.0",
+		"ariakit": "^2.0.0-next.43",
+		"cmdk": "^0.2.0",
+		"contentlayer": "^0.3.1",
+		"next": "^13.2.4",
+		"next-contentlayer": "^0.3.1",
+		"next-themes": "^0.2.1",
+		"react": "^18.2.0",
+		"react-custom-scrollbars-2": "^4.5.0",
+		"react-dom": "^18.2.0",
+		"react-icons": "^4.8.0",
+		"react-use": "^17.4.0",
+		"rehype-autolink-headings": "^6.1.1",
+		"rehype-ignore": "^1.0.4",
+		"rehype-raw": "^6.1.1",
+		"rehype-slug": "^5.1.0",
+		"remark-gfm": "^3.0.1",
+		"sharp": "^0.32.0"
+	},
+	"devDependencies": {
+		"@next/bundle-analyzer": "^13.2.4",
+		"@testing-library/react": "^14.0.0",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/node": "18.15.11",
+		"@types/react": "^18.0.31",
+		"@types/react-dom": "^18.0.11",
+		"@unocss/cli": "^0.50.6",
+		"@unocss/reset": "^0.50.6",
+		"@vitejs/plugin-react": "^3.1.0",
+		"@vitest/coverage-c8": "^0.29.8",
+		"concurrently": "^8.0.1",
+		"cross-env": "^7.0.3",
+		"eslint": "^8.37.0",
+		"eslint-config-neon": "^0.1.41",
+		"eslint-formatter-pretty": "^5.0.0",
+		"happy-dom": "^8.9.0",
+		"hast-util-to-string": "^2.0.0",
+		"hastscript": "^7.2.0",
+		"html-escaper": "^3.0.3",
+		"lighthouse": "^10.1.0",
+		"prettier": "^2.8.7",
+		"prettier-plugin-astro": "^0.8.0",
+		"prettier-plugin-tailwindcss": "^0.2.6",
+		"typescript": "^5.0.3",
+		"unocss": "^0.50.6",
+		"vercel": "^28.18.3",
+		"vitest": "^0.29.8"
+	},
+	"engines": {
+		"node": ">=18.13.0"
+	}
+}

apps/guide/public/browserconfig.xml

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

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

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

apps/guide/public/site.webmanifest

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

apps/guide/src/app/error.tsx

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

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

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

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

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

apps/guide/src/app/layout.tsx

@@ -0,0 +1,83 @@
+import { Analytics } from '@vercel/analytics/react';
+import type { Metadata } from 'next/types';
+import type { PropsWithChildren } from 'react';
+import { Providers } from './providers';
+import { DESCRIPTION } from '~/util/constants';
+import { inter, jetBrainsMono } from '~/util/fonts';
+
+import '@unocss/reset/tailwind-compat.css';
+import '~/styles/unocss.css';
+import '~/styles/cmdk.css';
+import '@code-hike/mdx/styles.css';
+import '~/styles/ch.css';
+import '~/styles/main.css';
+
+export const metadata: Metadata = {
+	title: 'discord.js',
+	description: DESCRIPTION,
+	viewport: {
+		minimumScale: 1,
+		initialScale: 1,
+		width: 'device-width',
+	},
+	icons: {
+		other: [
+			{
+				url: '/favicon-32x32.png',
+				sizes: '32x32',
+				type: 'image/png',
+			},
+			{
+				url: '/favicon-16x16.png',
+				sizes: '16x16',
+				type: 'image/png',
+			},
+		],
+		apple: [
+			'/apple-touch-icon.png',
+			{
+				url: '/safari-pinned-tab.svg',
+				rel: 'mask-icon',
+			},
+		],
+	},
+
+	manifest: '/site.webmanifest',
+
+	themeColor: '#5865f2',
+	colorScheme: 'light dark',
+
+	appleWebApp: {
+		title: 'discord.js',
+	},
+
+	applicationName: 'discord.js',
+
+	openGraph: {
+		siteName: 'discord.js',
+		type: 'website',
+		title: 'discord.js',
+		description: DESCRIPTION,
+		images: 'https://discordjs.dev/api/open-graph.png',
+	},
+
+	twitter: {
+		card: 'summary_large_image',
+		creator: '@iCrawlToGo',
+	},
+
+	other: {
+		'msapplication-TileColor': '#090a16',
+	},
+};
+
+export default function RootLayout({ children }: PropsWithChildren) {
+	return (
+		<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
+			<body className="dark:bg-dark-800 bg-light-600">
+				<Providers>{children}</Providers>
+				<Analytics />
+			</body>
+		</html>
+	);
+}

apps/guide/src/app/loading.tsx

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

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

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+	return (
+		<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
+			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
+			<Link
+				className="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/guide/src/app/page.tsx

@@ -0,0 +1,26 @@
+import Image from 'next/image';
+import vercelLogo from '~/assets/powered-by-vercel.svg';
+
+export default function Page() {
+	return (
+		<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
+			<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"
+					rel="noopener noreferrer"
+					target="_blank"
+					title="Vercel"
+				>
+					<Image
+						alt="Vercel"
+						blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+						placeholder="blur"
+						priority
+						src={vercelLogo}
+					/>
+				</a>
+			</div>
+		</div>
+	);
+}

apps/guide/src/app/providers.tsx

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

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

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

apps/guide/src/components/DocsLink.tsx

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

apps/guide/src/components/ExternalLink.tsx

@@ -0,0 +1,10 @@
+import { FiExternalLink } from 'react-icons/fi';
+
+export function ExternalLink({ href, title }: { href: string; title: string }) {
+	return (
+		<a className="text-blurple inline-flex place-items-center gap-2 text-sm font-semibold" href={href}>
+			<p>{title}</p>
+			<FiExternalLink size={18} />
+		</a>
+	);
+}

apps/guide/src/components/Mdx.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+import { DocsLink } from '~/components/DocsLink';
+import { ResultingCode } from '~/components/ResultingCode';
+
+export function Mdx({ code }: { code: string }) {
+	const Component = useMDXComponent(code);
+
+	return (
+		<Component
+			components={{ Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed, DocsLink, ResultingCode }}
+		/>
+	);
+}

apps/guide/src/components/Navbar.tsx

@@ -0,0 +1,70 @@
+import { Button } from 'ariakit/button';
+import { useState, useEffect } from 'react';
+import { FiCommand } from 'react-icons/fi';
+import { VscColorMode, VscGithubInverted, VscMenu, VscSearch } from 'react-icons/vsc';
+import { useMedia } from 'react-use';
+import { Sidebar } from './Sidebar.jsx';
+import type { MDXPage } from './SidebarItems.jsx';
+
+export function Navbar({ pages }: { pages?: MDXPage[] | undefined }) {
+	const matches = useMedia('(min-width: 992px)', false);
+	const [opened, setOpened] = useState(false);
+
+	useEffect(() => {
+		if (matches) {
+			setOpened(false);
+		}
+	}, [matches]);
+
+	return (
+		<>
+			<header className="dark:bg-dark-400 dark:border-dark-100 bg-light-600 border-light-800 fixed left-0 top-0 z-20 w-full border-b">
+				<div className="block h-16 px-6">
+					<div className="flex h-full flex-row place-content-between place-items-center">
+						<Button
+							aria-label="Menu"
+							className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
+							onClick={() => setOpened((open) => !open)}
+						>
+							<VscMenu size={24} />
+						</Button>
+						<div className="hidden md:flex md:flex-row">Placeholder</div>
+						<div className="flex flex-row place-items-center gap-4">
+							<Button
+								as="div"
+								className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple rounded bg-white px-4 py-2.5 outline-0 focus:ring"
+								// onClick={() => dialog?.toggle()}
+							>
+								<div className="flex flex-row place-items-center gap-4">
+									<VscSearch size={18} />
+									<span className="opacity-65">Search...</span>
+									<div className="opacity-65 flex flex-row place-items-center gap-2">
+										<FiCommand size={18} /> K
+									</div>
+								</div>
+							</Button>
+							<Button
+								aria-label="GitHub"
+								as="a"
+								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+								href="https://github.com/discordjs/discord.js"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								<VscGithubInverted size={24} />
+							</Button>
+							<Button
+								aria-label="Toggle theme"
+								className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
+								// onClick={() => toggleTheme()}
+							>
+								<VscColorMode size={24} />
+							</Button>
+						</div>
+					</div>
+				</div>
+			</header>
+			<Sidebar opened={opened} pages={pages} />
+		</>
+	);
+}

apps/guide/src/components/Outline.tsx

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

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 px-4 py-3 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/ResultingCode.tsx

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

apps/guide/src/components/Sidebar.tsx

@@ -0,0 +1,24 @@
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import type { MDXPage } from './SidebarItems.jsx';
+
+export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) {
+	return (
+		<nav
+			className={`h-[calc(100vh - 65px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed bottom-0 left-0 top-[65px] z-20 w-full border-r bg-white ${
+				opened ? 'block' : 'hidden'
+			} lg:w-76 lg:max-w-76 lg:block`}
+		>
+			<Scrollbars
+				autoHide
+				hideTracksWhenNotNeeded
+				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+				renderTrackVertical={(props) => (
+					<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
+				)}
+				universal
+			>
+				{pages ?? null}
+			</Scrollbars>
+		</nav>
+	);
+}

apps/guide/src/components/SidebarItems.tsx

@@ -0,0 +1,51 @@
+import { Section } from '@discordjs/ui';
+import type { MDXInstance } from 'astro';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-use';
+
+export type MDXPage = MDXInstance<{ category: string; title: string }>;
+
+export function SidebarItems({ pages }: { pages: MDXPage[] }) {
+	const state = useLocation();
+	const [active, setActive] = useState<string | undefined>('');
+
+	const categories = useMemo(
+		() =>
+			pages.reduce<Record<string, MDXPage[]>>((acc, page) => {
+				if (acc[page.frontmatter.category]) {
+					acc[page.frontmatter.category]?.push(page);
+				} else {
+					acc[page.frontmatter.category] = [page];
+				}
+
+				return acc;
+			}, {}),
+		[pages],
+	);
+
+	useEffect(() => {
+		setActive(state.pathname);
+	}, [state]);
+
+	return Object.keys(categories).map((category, idx) => (
+		<Section key={`${category}-${idx}`} title={category}>
+			{categories[category]?.map((member, index) => (
+				<a
+					className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
+						(member.url || '/') === active
+							? 'bg-blurple text-white'
+							: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
+					}`}
+					// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+					href={member.url || '/'}
+					key={`${member.frontmatter.title}-${index}}`}
+					title={member.frontmatter.title}
+				>
+					<div className="flex flex-row place-items-center gap-2 lg:text-sm">
+						<span className="truncate">{member.frontmatter.title}</span>
+					</div>
+				</a>
+			)) ?? null}
+		</Section>
+	));
+}

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

@@ -0,0 +1,249 @@
+---
+title: Understanding async/await
+category: Additional info
+---
+
+# 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>
+
+```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>
+
+```js
+async function declaredAsAsync() {
+	// ...
+}
+```
+
+</CH.Code>
+
+or
+
+<CH.Code>
+
+```js
+const declaredAsAsync = async () => {
+	// ...
+};
+```
+
+</CH.Code>
+
+You can use that as well if you use the arrow function as an event listener.
+
+<CH.Code>
+
+```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>
+
+```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>
+
+```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>
+
+```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>
+
+```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>
+
+```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>
+
+```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>
+
+```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/content/additional-info/collections.mdx

@@ -0,0 +1,123 @@
+---
+title: Collections
+category: Additional info
+---
+
+# 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>
+
+```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>
+
+```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>
+
+```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>
+
+```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/content/creating-your-bot/creating-commands.mdx

@@ -0,0 +1,244 @@
+---
+title: Creating commands
+category: Creating your bot
+---
+
+# Creating commands
+
+<Alert title="Tip" type="success">
+	This page is a follow-up and bases its code on [the previous page](/creating-your-bot/).
+</Alert>
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+				username: 'Crawl',
+			},
+			command: 'ping',
+		}}
+		author={{
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		Pong!
+	</DiscordMessage>
+</DiscordMessages>
+
+Discord allows developers to register [slash commands](https://discord.com/developers/docs/interactions/application-commands), which provide users a first-class way of interacting directly with your application. Before being able to reply to a command, you must first register it.
+
+## Registering commands
+
+This section will cover only the bare minimum to get you started, but you can refer to our [in-depth page on registering slash commands](/interactions/slash-commands.md#registering-slash-commands) for further details. It covers guild commands, global commands, options, option types, and choices.
+
+### Command deployment script
+
+Create a _`deploy-commands.js`_ file in your project directory. This file will be used to register and update the slash commands for your bot application.
+
+Since commands only need to be registered once, and updated when the definition (description, options etc) is changed, it's not necessary to connect a whole client to the gateway or do this on every _`ready`_ event. As such, a standalone script using the lighter REST manager is preferred.
+
+Below is a deployment script you can use. Focus on these variables:
+
+- _`clientId`_: Your application's client id
+- _`guildId`_: Your development server's id
+- _`commands`_: An array of commands to register. The [slash command builder](/popular-topics/builders.md#slash-command-builders) from _`discord.js`_ is used to build the data for your commands
+
+<Alert title="Tip" type="success">
+	In order to get your application's client id, go to [Discord Developer
+	Portal](https://discord.com/developers/applications) and choose your application. Find the id under "Application ID"
+	in General Information subpage. To get guild id, open Discord and go to your settings. On the "Advanced" page, turn on
+	"Developer Mode". This will enable a "Copy ID" button in the context menu when you right-click on a server icon, a
+	user's profile, etc.
+</Alert>
+
+<CH.Code>
+
+```js deploy-commands.js mark=4,6:10
+const { REST, SlashCommandBuilder, Routes } = require('discord.js');
+const { clientId, guildId, token } = require('./config.json');
+
+const commands = [
+	new SlashCommandBuilder().setName('ping').setDescription('Replies with pong!'),
+	new SlashCommandBuilder().setName('server').setDescription('Replies with server info!'),
+	new SlashCommandBuilder().setName('user').setDescription('Replies with user info!'),
+].map((command) => command.toJSON());
+
+const rest = new REST({ version: '10' }).setToken(token);
+
+rest
+	.put(Routes.applicationGuildCommands(clientId, guildId), { body: commands })
+	.then((data) => console.log(`Successfully registered ${data.length} application commands.`))
+	.catch(console.error);
+```
+
+---
+
+```json config.json mark=2:3
+{
+	"clientId": "123456789012345678",
+	"guildId": "876543210987654321",
+	"token": "your-token-goes-here"
+}
+```
+
+</CH.Code>
+
+Once you fill in these values, run _`node deploy-commands.js`_ in your project directory to register your commands to a single guild. It's also possible to [register commands globally](/interactions/slash-commands.md#global-commands).
+
+<Alert title="Tip" type="success">
+	You only need to run `node deploy-commands.js` once. You should only run it again if you add or edit existing
+	commands.
+</Alert>
+
+## Replying to commands
+
+Once you've registered your commands, you can listen for interactions via <DocsLink path="class/Client?scrollTo=e-interactionCreate" /> in your _`index.js`_ file.
+
+You should first check if an interaction is a chat input command via <DocsLink path="class/Interaction?scrollTo=isChatInputCommand" type="method">_`.isChatInputCommand()`_</DocsLink>, and then check the <DocsLink path="class/CommandInteraction?scrollTo=commandName">_`.commandName`_</DocsLink> property to know which command it is. You can respond to interactions with <DocsLink path="class/CommandInteraction?scrollTo=reply">_`.reply()`_</DocsLink>.
+
+<CH.Code>
+
+```js mark=5:16
+client.once('ready', () => {
+	console.log('Ready!');
+});
+
+client.on('interactionCreate', async (interaction) => {
+	if (!interaction.isChatInputCommand()) return;
+	const { commandName } = interaction;
+	if (commandName === 'ping') {
+		await interaction.reply('Pong!');
+	} else if (commandName === 'server') {
+		await interaction.reply('Server info.');
+	} else if (commandName === 'user') {
+		await interaction.reply('User info.');
+	}
+});
+client.login(token);
+```
+
+</CH.Code>
+
+### Server info command
+
+Note that servers are referred to as "guilds" in the Discord API and discord.js library. _`interaction.guild`_ refers to the guild the interaction was sent in (a <DocsLink path="class/Guild" /> instance), which exposes properties such as _`.name`_ or _`.memberCount`_.
+
+<CH.Code>
+
+```js focus=7
+client.on('interactionCreate', async (interaction) => {
+	if (!interaction.isChatInputCommand()) return;
+	const { commandName } = interaction;
+	if (commandName === 'ping') {
+		await interaction.reply('Pong!');
+	} else if (commandName === 'server') {
+		await interaction.reply(`Server name: ${interaction.guild.name}\nTotal members: ${interaction.guild.memberCount}`);
+	} else if (commandName === 'user') {
+		await interaction.reply('User info.');
+	}
+});
+```
+
+</CH.Code>
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+				username: 'Crawl',
+			},
+			command: 'server',
+		}}
+		author={{
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		<p>Server name: discord.js Guide</p>
+		<p>Total members: 2</p>
+	</DiscordMessage>
+</DiscordMessages>
+
+You could also display the date the server was created, or the server's verification level. You would do those in the same manner – use _`interaction.guild.createdAt`_ or _`interaction.guild.verificationLevel`_, respectively.
+
+<Alert title="Tip" type="success">
+	Refer to the <DocsLink path="class/Guild" /> documentation for a list of all the available properties and methods!
+</Alert>
+
+### User info command
+
+A "user" refers to a Discord user. _`interaction.user`_ refers to the user the interaction was sent by (a <DocsLink path="class/User" /> instance), which exposes properties such as _`.tag`_ or _`.id`_.
+
+<CH.Code>
+
+```js focus=9
+client.on('interactionCreate', async (interaction) => {
+	if (!interaction.isChatInputCommand()) return;
+	const { commandName } = interaction;
+	if (commandName === 'ping') {
+		await interaction.reply('Pong!');
+	} else if (commandName === 'server') {
+		await interaction.reply(`Server name: ${interaction.guild.name}\nTotal members: ${interaction.guild.memberCount}`);
+	} else if (commandName === 'user') {
+		await interaction.reply(`Your tag: ${interaction.user.tag}\nYour id: ${interaction.user.id}`);
+	}
+});
+```
+
+</CH.Code>
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+				username: 'Crawl',
+			},
+			command: 'user',
+		}}
+		author={{
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		<p>Your tag: User#0001</p>
+		<p>Your id: 123456789012345678</p>
+	</DiscordMessage>
+</DiscordMessages>
+
+<Alert title="Tip" type="success">
+	Refer to the <DocsLink path="class/User" /> documentation for a list of all the available properties and methods!
+</Alert>
+
+And there you have it!
+
+## The problem with if/else if
+
+If you don't plan on making more than a couple commands, then using an _`if`_/_`else if`_ chain is fine; however, this isn't always the case. Using a giant _`if`_/_`else if`_ chain will only hinder your development process in the long run.
+
+Here's a small list of reasons why you shouldn't do so:
+
+- Takes longer to find a piece of code you want;
+- Easier to fall victim to [spaghetti code](https://en.wikipedia.org/wiki/Spaghetti_code);
+- Difficult to maintain as it grows;
+- Difficult to debug;
+- Difficult to organize;
+- General bad practice.
+
+Next, we'll be diving into something called a "command handler" – code that makes handling commands easier and much more efficient. This allows you to move your commands into individual files.
+
+## Resulting code
+
+<ResultingCode />

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

@@ -0,0 +1,188 @@
+---
+title: Initial files
+category: Creating your bot
+---
+
+# Initial files
+
+Once you [add your bot to a server](/preparations/adding-your-bot-to-servers.md), the next step is to start coding and get it online! Let's start by creating a config file for your client token and a main file for your bot application.
+
+## Creating configuration files
+
+As explained in the ["What is a token, anyway?"](/preparations/setting-up-a-bot-application.md#what-is-a-token-anyway) section, your token is essentially your bot's password, and you should protect it as best as possible. This can be done through a _`config.json`_ file or by using environment variables.
+
+Open your application in the [Discord Developer Portal](https://discord.com/developers/applications) and go to the "Bot" page to copy your token.
+
+### Using config.json
+
+Storing data in a _`config.json`_ file is a common way of keeping your sensitive values safe. Create a _`config.json`_ file in your project directory and paste in your token. You can access your token inside other files by using _`require()`_.
+
+<CH.Code>
+
+```json config.json
+{
+	"token": "your-token-goes-here"
+}
+```
+
+---
+
+```js Usage
+const { token } = require('./config.json');
+
+console.log(token);
+```
+
+</CH.Code>
+
+<Alert title="Caution" type="danger">
+	If you're using Git, you should not commit this file and should [ignore it via
+	_`.gitignore`_](/creating-your-bot/#git-and-gitignore).
+</Alert>
+
+### Using environment variables
+
+Environment variables are special values for your environment (e.g., terminal session, Docker container, or environment variable file). You can pass these values into your code's scope so that you can use them.
+
+One way to pass in environment variables is via the command line interface. When starting your app, instead of _`node index.js`_, use _`TOKEN=your-token-goes-here node index.js`_. You can repeat this pattern to expose other values as well.
+
+You can access the set values in your code via the _`process.env`_ global variable, accessible in any file. Note that values passed this way will always be strings and that you might need to parse them to a number, if using them to do calculations.
+
+<CH.Code>
+
+```shellscript Command line
+A=123 B=456 DISCORD_TOKEN=your-token-goes-here node index.js
+```
+
+---
+
+```js Usage
+console.log(process.env.A);
+console.log(process.env.B);
+console.log(process.env.DISCORD_TOKEN);
+```
+
+</CH.Code>
+
+#### Using dotenv
+
+Another common approach is storing these values in a _`.env`_ file. This spares you from always copying your token into the command line. Each line in a _`.env`_ file should hold a _`KEY=value`_ pair.
+
+You can use the [_`dotenv`_ package](https://www.npmjs.com/package/dotenv) for this. Once installed, require and use the package to load your _`.env`_ file and attach the variables to _`process.env`_:
+
+<CH.Code>
+
+```sh npm
+npm install dotenv
+```
+
+```sh yarn
+yarn add dotenv
+```
+
+```sh pnpm
+pnpm add dotenv
+```
+
+---
+
+```text .env
+A=123
+B=456
+DISCORD_TOKEN=your-token-goes-here
+```
+
+---
+
+```js Usage
+const dotenv = require('dotenv');
+
+dotenv.config();
+
+console.log(process.env.A);
+console.log(process.env.B);
+console.log(process.env.DISCORD_TOKEN);
+```
+
+</CH.Code>
+
+<Alert title="Caution" type="danger">
+	If you're using Git, you should not commit this file and should [ignore it via
+	_`.gitignore`_](/creating-your-bot/#git-and-gitignore).
+</Alert>
+
+<Section title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter>
+While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
+
+- Glitch: [Storing secrets in .env](https://glitch.happyfox.com/kb/article/18)
+- Heroku: [Configuration variables](https://devcenter.heroku.com/articles/config-vars)
+- Replit: [Secrets and environment variables](https://docs.replit.com/repls/secrets-environment-variables)
+
+</Section>
+
+### Git and .gitignore
+
+Git is a fantastic tool to keep track of your code changes and allows you to upload progress to services like [GitHub](https://github.com/), [GitLab](https://about.gitlab.com/), or [Bitbucket](https://bitbucket.org/product). While this is super useful to share code with other developers, it also bears the risk of uploading your configuration files with sensitive values!
+
+You can specify files that Git should ignore in its versioning systems with a _`.gitignore`_ file. Create a _`.gitignore`_ file in your project directory and add the names of the files and folders you want to ignore:
+
+<CH.Code>
+
+```
+node_modules
+.env
+config.json
+```
+
+</CH.Code>
+
+<Alert title="Tip" type="success">
+	Aside from keeping credentials safe, _`node_modules`_ should be included here. Since this directory can be restored
+	based on the entries in your _`package.json`_ and _`package-lock.json`_ files by running _`npm install`_, it does not
+	need to be included in Git. You can specify quite intricate patterns in _`.gitignore`_ files, check out the [Git
+	documentation on _`.gitignore`_](https://git-scm.com/docs/gitignore) for more information!
+</Alert>
+
+## Creating the main file
+
+Open your code editor and create a new file. We suggest that you save the file as _`index.js`_, but you may name it whatever you wish.
+
+Here's the base code to get you started:
+
+<CH.Code>
+
+```js
+// Require the necessary discord.js classes
+const { Client, GatewayIntentBits } = require('discord.js');
+const { token } = require('./config.json');
+
+// Create a new client instance
+const client = new Client({ intents: [GatewayIntentBits.Guilds] });
+
+// When the client is ready, run this code (only once)
+client.once('ready', () => {
+	console.log('Ready!');
+});
+
+// Login to Discord with your client's token
+client.login(token);
+```
+
+</CH.Code>
+
+This is how you create a client instance for your Discord bot and login to Discord. The _`GatewayIntentBits.Guilds`_ intents option is necessary for your client to work properly, as it ensures that the caches for guilds, channels and roles are populated and available for internal use.
+
+Intents also define which events Discord should send to your bot, and you may wish to enable more than just the minimum. You can read more about the other intents on the [Intents topic](/popular-topics/intents).
+
+Open your terminal and run _`node index.js`_ to start the process. If you see "Ready!" after a few seconds, you're good to go!
+
+<Alert title="Tip" type="success">
+	You can open your _`package.json`_ file and edit the _`"main": "index.js"`_ field to point to your main file. You can
+	then run _`node .`_ in your terminal to start the process! After closing the process with _`Ctrl + C`_, you can press
+	the up arrow on your keyboard to bring up the latest commands you've run. Pressing up and then enter after closing the
+	process is a quick way to start it up again.
+</Alert>
+
+## Resulting code
+
+<ResultingCode path="creating-your-bot/initial-files" />

apps/guide/src/content/index.mdx

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

apps/guide/src/content/requesting-more-content.mdx

@@ -0,0 +1,17 @@
+---
+title: Requesting more content
+category: Home
+---
+
+# Requesting more content
+
+Since this guide is made specifically for the discord.js community, we want to be sure to provide the most relevant and up-to-date content. We will, of course, make additions to the current pages and add new ones as we see fit, but fulfilling requests is how we know we're providing content you all want the most.
+
+Requests may be as simple as "add an example to the [frequently asked questions](/popular-topics/faq.html) page", or as elaborate as "add a page regarding [sharding](/sharding/)". We'll do our best to fulfill all requests, as long as they're reasonable.
+
+To make a request, simply head over to [the repo's issue tracker](https://github.com/discordjs/guide/issues) and [create a new issue](https://github.com/discordjs/guide/issues/new)! Title it appropriately, and let us know exactly what you mean inside the issue description. Make sure that you've looked around the site before making a request; what you want to request might already exist!
+
+<Alert title="Tip" type="success">
+	Remember that you can always [fork the repo](https://github.com/discordjs/guide) and [make a pull
+	request](https://github.com/discordjs/guide/pulls) if you want to add anything to the guide yourself!
+</Alert>

apps/guide/src/content/test.mdx

@@ -0,0 +1,100 @@
+---
+title: Test
+category: Test
+---
+
+<DiscordMessages>
+	<DiscordMessage
+		reply={{
+			author: {
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+				username: 'Crawl',
+			},
+			content: 'Test',
+		}}
+		author={{
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		1234
+	</DiscordMessage>
+	<DiscordMessage
+		author={{
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+		followUp
+		time="21:02"
+	>
+		1234
+	</DiscordMessage>
+</DiscordMessages>
+
+<DiscordMessages>
+	<DiscordMessage
+		reply={{
+			author: {
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+				username: 'Crawl',
+			},
+			content: 'Test',
+		}}
+		author={{
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		1234
+	</DiscordMessage>
+</DiscordMessages>
+
+<DiscordMessages>
+	<DiscordMessage
+		reply={{
+			author: {
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+				username: 'Crawl',
+			},
+			content: 'Test',
+		}}
+		author={{
+			avatar:
+				'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+			username: 'Crawl',
+			time: 'Today at 21:00',
+		}}
+	>
+		<>
+			<DiscordMessageEmbed
+				author={{
+					avatar:
+						'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+					username: 'Crawl',
+				}}
+			/>
+			<DiscordMessageEmbed title={{ title: 'Title' }} />
+			<DiscordMessageEmbed footer={{ content: 'Footer' }} />
+			<DiscordMessageEmbed
+				author={{
+					avatar:
+						'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+					username: 'Crawl',
+				}}
+				title={{ title: 'Title' }}
+				footer={{ content: 'Footer' }}
+			>
+				Test
+			</DiscordMessageEmbed>
+		</>
+	</DiscordMessage>
+</DiscordMessages>

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

@@ -0,0 +1,71 @@
+---
+title: What's new
+category: Home
+---
+
+# What's new
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		interaction={{
+			author: {
+				avatar:
+					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
+				username: 'Crawl',
+			},
+			command: 'upgrade',
+		}}
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/474807795183648809/7f239a0776ff928b2182906a2b3743c9.webp?size=160',
+			bot: true,
+			username: 'Guide Bot',
+			time: 'Today at 21:00',
+		}}
+	>
+		discord.js v14 has released and the guide has been updated!
+		<br />
+		This includes additions and changes made in Discord, such as slash commands and message components.
+	</DiscordMessage>
+</DiscordMessages>
+
+## Site
+
+- Upgraded to [VuePress v2](https://v2.vuepress.vuejs.org/)
+- New theme made to match the [discord.js documentation site](https://discord.js.org/)
+- Discord message components upgraded to [@discord-message-components/vue](https://github.com/Danktuary/discord-message-components/blob/main/packages/vue/README.md)
+- Many fixes in code blocks, grammar, consistency, etc.
+
+## Pages
+
+All content has been updated to use discord.js v14 syntax. The v13 version of the guide can be found at [https://v13.discordjs.guide/](https://v13.discordjs.guide/).
+
+### New
+
+- [Updating from v13 to v14](/additional-info/changes-in-v14.md): A list of the changes from discord.js v13 to v14
+- [Slash commands](/interactions/slash-commands.md): Registering, replying to slash commands and permissions
+- [Buttons](/interactions/buttons.md): Building, sending, and receiving buttons
+- [Select menus](/interactions/select-menus.md): Building, sending, and receiving select menus
+- [Threads](/popular-topics/threads.md): Creating and managing threads
+- [Builders](/popular-topics/builders.md): A collection of builders to use with your bot
+
+### Updated
+
+- Commando: Replaced with [Sapphire](https://sapphirejs.dev/docs/Guide/getting-started/getting-started-with-sapphire)
+- [Voice](/voice/): Rewritten to use the [_`@discordjs/voice`_](https://github.com/discordjs/discord.js/tree/main/packages/voice) package
+- [Command handling](/creating-your-bot/command-handling.md/): Updated to use slash commands
+  - Obsolete sections removed
+- _`client.on('message')`_ snippets updated to _`client.on('interactionCreate')`_
+  - [Message content will become a new privileged intent on August 31, 2022](https://support-dev.discord.com/hc/en-us/articles/4404772028055)
+
+<DiscordMessages rounded>
+	<DiscordMessage
+		author={{
+			avatar: 'https://cdn.discordapp.com/avatars/474807795183648809/7f239a0776ff928b2182906a2b3743c9.webp?size=160',
+			bot: true,
+			username: 'Guide Bot',
+			time: 'Today at 21:00',
+		}}
+	>
+		Thank you to all of those that contributed to the development of discord.js and the guide!
+	</DiscordMessage>
+</DiscordMessages>

apps/guide/src/styles/ch.css

@@ -0,0 +1,82 @@
+:root {
+	--shiki-color-text: #24292eff;
+	--shiki-color-background: #ffffff;
+	--shiki-token-constant: #1976d2;
+	--shiki-token-string: #6f42c1;
+	--shiki-token-comment: #c2c3c5;
+	--shiki-token-keyword: #d32f2f;
+	--shiki-token-parameter: #ff9800;
+	--shiki-token-function: #6f42c1;
+	--shiki-token-string-expression: #22863a;
+	--shiki-token-punctuation: #212121;
+	--shiki-token-link: #22863a;
+
+	--ch-tabs-bg: #f6f6f6;
+	--ch-tab-border: #f6f6f6;
+	--ch-tab-active-border: #fff;
+	--ch-tab-active-bg: #24292eff;
+	--ch-tab-inactive-color: #bdbdbd;
+	--ch-tab-inactive-bg: #f6f6f6;
+	--ch-icon-text: #24292eff;
+}
+
+.ch-code,
+.ch-inline-code > code {
+	background: var(--shiki-color-background) !important;
+}
+
+.ch-code {
+	color-scheme: light !important;
+}
+
+.ch-code-multiline-mark {
+	background: rgba(253, 255, 0, 0.2) !important;
+}
+
+.ch-codegroup .ch-editor-button,
+.ch-codeblock .ch-code-button {
+	color: var(--ch-icon-text) !important;
+}
+
+div.ch-editor-tab-active {
+	color: var(--ch-tab-active-color) !important;
+}
+
+html.dark {
+	--shiki-color-text: #adbac7;
+	--shiki-color-background: #22272e;
+	--shiki-token-constant: #f47067;
+	--shiki-token-string: #96d0ff;
+	--shiki-token-comment: #768390;
+	--shiki-token-keyword: #f47067;
+	--shiki-token-parameter: #adbac7;
+	--shiki-token-function: #dcbdfb;
+	--shiki-token-string-expression: #8ddb8c;
+	--shiki-token-punctuation: #adbac7;
+	--shiki-token-link: #adbac7;
+
+	--ch-tabs-bg: #1c2128;
+	--ch-tab-border: #444c56;
+	--ch-tab-active-border: #22272e;
+	--ch-tab-active-bg: #22272e;
+	--ch-tab-inactive-color: #768390;
+	--ch-tab-inactive-bg: #1c2128;
+	--ch-icon-text: #768390;
+}
+
+.dark .ch-codegroup .ch-editor-button,
+.ch-codeblock .ch-code-button {
+	color: var(--ch-icon-text) !important;
+}
+
+.dark div.ch-editor-tab-active {
+	color: var(--ch-tab-active-color) !important;
+}
+
+.dark .ch-code {
+	color-scheme: dark !important;
+}
+
+.dark .ch-code-multiline-mark {
+	background: rgba(255, 255, 255, 0.043) !important;
+}