chore(builders): release @discordjs/builders@1.10.0

* chore: add in more data to changelog entries

* chore: missed template

.commitlintrc.json

@@ -5,8 +5,9 @@
 		"type-enum": [
 			2,
 			"always",
-			["chore", "build", "ci", "docs", "feat", "fix", "perf", "refactor", "revert", "style", "test", "types", "typings"]
+			["chore", "build", "ci", "docs", "feat", "fix", "perf", "refactor", "revert", "style", "test", "types"]
 		],
-		"scope-case": [0]
+		"scope-case": [0],
+		"subject-exclamation-mark": [0]
 	}
 }

.gitattributes

@@ -1 +1,2 @@
 * text=auto eol=lf
+pnpm-lock.yaml linguist-generated=true text=auto eol=lf

.github/.kodiak.toml

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

.github/COMMIT_CONVENTION.md

@@ -7,7 +7,7 @@
 Messages must be matched by the following regex:
 
 ```js
-/^(revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|build|ci|chore|types|wip)(\(.+\))?: .{1,72}/;
+/^(revert: )?(feat|fix|docs|style|refactor|perf|test|build|ci|chore|types)(\(.+\))?!?: .{1,72}/;
 ```
 
 #### Examples
@@ -55,6 +55,7 @@ A commit message consists of a **header**, **body** and **footer**. The header h
 ```
 
 The **header** is mandatory and the **scope** of the header is optional.
+If the commit contains **Breaking Changes**, a `!` can be added before the `:` as an indicator.
 
 ### Revert
 

.github/CONTRIBUTING.md

@@ -23,9 +23,8 @@ If you want to test changes you've made locally, you can do so by using `pnpm li
 
 1. Create a new directory `mkdir discordjs-test` and move into it `cd discordjs-test`
 2. Initialize a new pnpm project `pnpm init`
-3. Now link the local discord.js project you cloned earlier `pnpm link {PATH_TO_DISCORDJS_REPO}`
-4. Install packages you'd like to test locally `pnpm add discord.js@latest`, `pnpm add @discordjs/rest@latest`, etc. **Note: Make sure you use `latest` tag or else pnpm will try to install the remote package from npm**
-5. Import the package in your source code and test them out!
+3. Now link the discord.js package from the directory you cloned earlier `pnpm link {PATH_TO_DISCORDJS_REPO}/packages/<package>`. (e.g. `pnpm link ~/discord.js/packages/rest`)
+4. Import the package in your source code and test them out!
 
 ### Working with TypeScript packages
 

.github/ISSUE_TEMPLATE/01-package_bug_report.yml

@@ -123,6 +123,8 @@ body:
         - GuildScheduledEvents
         - AutoModerationConfiguration
         - AutoModerationExecution
+        - GuildMessagePolls
+        - DirectMessagePolls
       multiple: true
     validations:
       required: true

.github/labeler.yml

@@ -1,60 +1,100 @@
 apps:guide:
-  - apps/guide/*
-  - apps/guide/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - apps/guide/*
+          - apps/guide/**/*
 apps:website:
-  - apps/website/*
-  - apps/website/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - apps/website/*
+          - apps/website/**/*
 packages:api-extractor:
-  - packages/api-extractor/*
-  - packages/api-extractor/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/api-extractor/*
+          - packages/api-extractor/**/*
 packages:api-extractor-model:
-  - packages/api-extractor-model/*
-  - packages/api-extractor-model/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/api-extractor-model/*
+          - packages/api-extractor-model/**/*
 packages:brokers:
-  - packages/brokers/*
-  - packages/brokers/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/brokers/*
+          - packages/brokers/**/*
 packages:builders:
-  - packages/builders/*
-  - packages/builders/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/builders/*
+          - packages/builders/**/*
 packages:collection:
-  - packages/collection/*
-  - packages/collection/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/collection/*
+          - packages/collection/**/*
 packages:core:
-  - packages/core/*
-  - packages/core/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/core/*
+          - packages/core/**/*
 packages:create-discord-bot:
-  - packages/create-discord-bot/*
-  - packages/create-discord-bot/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/create-discord-bot/*
+          - packages/create-discord-bot/**/*
 packages:discord.js:
-  - packages/discord.js/*
-  - packages/discord.js/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/discord.js/*
+          - packages/discord.js/**/*
 packages:docgen:
-  - packages/docgen/*
-  - packages/docgen/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/docgen/*
+          - packages/docgen/**/*
 packages:formatters:
-  - packages/formatters/*
-  - packages/formatters/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/formatters/*
+          - packages/formatters/**/*
 packages:next:
-  - packages/next/*
-  - packages/next/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/next/*
+          - packages/next/**/*
 packages:proxy:
-  - packages/proxy/*
-  - packages/proxy/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/proxy/*
+          - packages/proxy/**/*
 packages:proxy-container:
-  - packages/proxy-container/*
-  - packages/proxy-container/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/proxy-container/*
+          - packages/proxy-container/**/*
 packages:rest:
-  - packages/rest/*
-  - packages/rest/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/rest/*
+          - packages/rest/**/*
 packages:ui:
-  - packages/ui/*
-  - packages/ui/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/ui/*
+          - packages/ui/**/*
 packages:util:
-  - packages/util/*
-  - packages/util/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/util/*
+          - packages/util/**/*
 packages:voice:
-  - packages/voice/*
-  - packages/voice/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/voice/*
+          - packages/voice/**/*
 packages:ws:
-  - packages/ws/*
-  - packages/ws/**/*
+  - changed-files:
+      - any-glob-to-any-file:
+          - packages/ws/*
+          - packages/ws/**/*

.github/workflows/cleanup-cache.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Cleanup caches
         run: |

.github/workflows/deploy-website.yml

@@ -14,7 +14,15 @@ jobs:
     if: github.repository_owner == 'discordjs'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        uses: ./packages/actions/src/pnpmCache
 
       - name: Pull vercel production environment
         run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/deprecate-version.yml

@@ -34,12 +34,12 @@ jobs:
     if: github.repository_owner == 'discordjs'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install Node.js v18
-        uses: actions/setup-node@v3
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache

.github/workflows/documentation.yml

@@ -32,17 +32,18 @@ jobs:
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+      REF_TYPE: ${{ inputs.ref_type || github.ref_type }}
     if: github.repository_owner == 'discordjs'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           ref: ${{ inputs.ref || '' }}
 
-      - name: Install node.js v18
-        uses: actions/setup-node@v3
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache
@@ -50,25 +51,56 @@ jobs:
       - name: Build dependencies
         run: pnpm run build
 
+      - name: Checkout main repository
+        if: ${{ inputs.ref && inputs.ref != 'main' }}
+        uses: actions/checkout@v4
+        with:
+          path: 'main'
+
+      - name: Build main
+        if: ${{ inputs.ref && inputs.ref != 'main' }}
+        shell: bash
+        run: |
+          cd main
+          pnpm install --frozen-lockfile --prefer-offline --loglevel error
+          pnpm run build
+          cd ..
+
+      - name: Extract package and semver from tag
+        if: ${{ env.REF_TYPE == 'tag' }}
+        id: extract-tag
+        uses: ./packages/actions/src/formatTag
+        with:
+          tag: ${{ inputs.ref || github.ref_name }}
+
+      - name: Apply tag to api-extractor config
+        if: ${{ env.REF_TYPE == 'tag' && !inputs.ref }}
+        run: sed -i 's!https://github.com/discordjs/discord.js/tree/main!https://github.com/discordjs/discord.js/tree/${{ github.ref_name }}!' "packages/${{ steps.extract-tag.outputs.package}}/api-extractor.json"
+
       - name: Build docs
         run: pnpm run docs
 
+      - name: Build docs with main api-extractor
+        if: ${{ inputs.ref && inputs.ref != 'main' }}
+        run: |
+          declare -a PACKAGES=("brokers" "builders" "collection" "core" "discord.js" "formatters" "next" "proxy" "rest" "util" "voice" "ws")
+          for PACKAGE in "${PACKAGES[@]}"; do
+            cd "packages/${PACKAGE}"
+            sed -i 's!https://github.com/discordjs/discord.js/tree/main!https://github.com/discordjs/discord.js/tree/${{ inputs.ref }}!' api-extractor.json
+            ../../main/packages/api-extractor/bin/api-extractor run --local --minify
+            ../../main/packages/scripts/bin/generateSplitDocumentation.js
+            cd ../..
+          done
+
       - name: Checkout docs repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           repository: 'discordjs/docs'
           token: ${{ secrets.DJS_DOCS }}
           path: 'out'
 
-      - name: Extract package and semver from tag
-        if: ${{ github.ref_type == 'tag' }}
-        id: extract-tag
-        uses: ./packages/actions/src/formatTag
-        with:
-          tag: ${{ github.ref_name }}
-
       - name: Upload documentation to database
-        if: ${{ github.ref_type == 'tag' }}
+        if: ${{ env.REF_TYPE == 'tag' && (!inputs.ref || inputs.ref == 'main') }}
         env:
           DATABASE_URL: ${{ secrets.DATABASE_URL }}
           BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
@@ -77,8 +109,36 @@ jobs:
           package: ${{ steps.extract-tag.outputs.package }}
           version: ${{ steps.extract-tag.outputs.semver }}
 
+      - name: Upload documentation to database
+        if: ${{ env.REF_TYPE == 'tag' && inputs.ref && inputs.ref != 'main' }}
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}
+          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
+        uses: ./main/packages/actions/src/uploadDocumentation
+        with:
+          package: ${{ steps.extract-tag.outputs.package }}
+          version: ${{ steps.extract-tag.outputs.semver }}
+
+      - name: Upload split documentation to blob storage
+        if: ${{ env.REF_TYPE == 'tag' && (!inputs.ref || inputs.ref == 'main') }}
+        env:
+          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
+        uses: ./packages/actions/src/uploadSplitDocumentation
+        with:
+          package: ${{ steps.extract-tag.outputs.package }}
+          version: ${{ steps.extract-tag.outputs.semver }}
+
+      - name: Upload split documentation to blob storage
+        if: ${{ env.REF_TYPE == 'tag' && inputs.ref && inputs.ref != 'main' }}
+        env:
+          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
+        uses: ./main/packages/actions/src/uploadSplitDocumentation
+        with:
+          package: ${{ steps.extract-tag.outputs.package }}
+          version: ${{ steps.extract-tag.outputs.semver }}
+
       - name: Move docs to correct directory
-        if: ${{ github.ref_type == 'tag' }}
+        if: ${{ env.REF_TYPE == 'tag' }}
         env:
           PACKAGE: ${{ steps.extract-tag.outputs.package }}
           SEMVER: ${{ steps.extract-tag.outputs.semver }}
@@ -92,14 +152,33 @@ jobs:
           fi
 
       - name: Upload documentation to database
-        if: ${{ github.ref_type == 'branch' }}
+        if: ${{ env.REF_TYPE == 'branch' && (!inputs.ref || inputs.ref == 'main') }}
         env:
           DATABASE_URL: ${{ secrets.DATABASE_URL }}
           BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
         uses: ./packages/actions/src/uploadDocumentation
 
+      - name: Upload documentation to database
+        if: ${{ env.REF_TYPE == 'branch' && inputs.ref && inputs.ref != 'main' }}
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}
+          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
+        uses: ./main/packages/actions/src/uploadDocumentation
+
+      - name: Upload split documentation to blob storage
+        if: ${{ env.REF_TYPE == 'branch' && (!inputs.ref || inputs.ref == 'main') }}
+        env:
+          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
+        uses: ./packages/actions/src/uploadSplitDocumentation
+
+      - name: Upload split documentation to blob storage
+        if: ${{ env.REF_TYPE == 'branch' && inputs.ref && inputs.ref != 'main' }}
+        env:
+          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
+        uses: ./main/packages/actions/src/uploadSplitDocumentation
+
       - name: Move docs to correct directory
-        if: ${{ github.ref_type == 'branch' }}
+        if: ${{ env.REF_TYPE == 'branch' }}
         run: |
           declare -a PACKAGES=("brokers" "builders" "collection" "core" "discord.js" "formatters" "next" "proxy" "rest" "util" "voice" "ws")
           for PACKAGE in "${PACKAGES[@]}"; do
@@ -132,12 +211,12 @@ jobs:
     if: github.repository_owner == 'discordjs'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install node.js v18
-        uses: actions/setup-node@v3
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache

.github/workflows/issue-triage.yml

@@ -6,7 +6,7 @@ jobs:
   issue-triage:
     runs-on: ubuntu-latest
     steps:
-      - uses: github/issue-labeler@v3.2
+      - uses: github/issue-labeler@v3.4
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           configuration-path: .github/issue-labeler.yml

.github/workflows/label-sync.yml

@@ -15,9 +15,9 @@ jobs:
     if: github.repository_owner == 'discordjs'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Label sync
-        uses: crazy-max/ghaction-github-labeler@v4
+        uses: crazy-max/ghaction-github-labeler@v5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/lock.yml

@@ -11,7 +11,7 @@ jobs:
     permissions:
       issues: write
     steps:
-      - uses: dessant/lock-threads@v4
+      - uses: dessant/lock-threads@v5
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           issue-inactive-days: 365

.github/workflows/pr-triage.yml

@@ -1,13 +1,35 @@
 name: 'PR Triage'
 on:
   pull_request_target:
+    types:
+      - opened
+      - edited
+      - reopened
+      - synchronize
 jobs:
-  pr-triage:
-    name: PR Triage
+  label:
+    name: Label
+    if: github.event.action != 'edited'
     runs-on: ubuntu-latest
     steps:
-      - name: Automatically label PR
-        uses: actions/labeler@v4
+      - name: Label pull request
+        uses: actions/labeler@v5
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           sync-labels: true
+  validate-title:
+    name: Validate title
+    if: github.event.action != 'synchronize'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Validate pull request title
+        env:
+          TITLE: ${{ github.event.pull_request.title }}
+        run: |
+          REGEX="^(revert: )?(feat|fix|docs|style|refactor|perf|test|build|ci|chore|types)(\\(.+\\))?!?: .{1,72}$"
+
+          echo "Title: \"$TITLE\""
+
+          if [[ ! "$TITLE" =~ $REGEX ]]; then
+            exit 1
+          fi

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

@@ -10,18 +10,18 @@ jobs:
     if: github.repository_owner == 'discordjs'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install node.js v18
-        uses: actions/setup-node@v3
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Login to DockerHub
         run: echo ${{ secrets.DOCKER_ACCESS_TOKEN }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin

.github/workflows/publish-dev.yml

@@ -35,20 +35,22 @@ jobs:
           - package: '@discordjs/ws'
             folder: 'ws'
     runs-on: ubuntu-latest
+    permissions:
+      id-token: write
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     if: github.repository_owner == 'discordjs'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: Install node.js v18
-        uses: actions/setup-node@v3
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
 
       - name: Check the current development version
@@ -70,8 +72,8 @@ jobs:
       - name: Publish package
         if: steps.release-check.outputs.release == '1'
         run: |
-          pnpm --filter=${{ matrix.package }} run release --preid "dev.$(date +%s)-$(git rev-parse --short HEAD)"
-          pnpm --filter=${{ matrix.package }} publish --no-git-checks --tag dev || true
+          pnpm --filter=${{ matrix.package }} run release --preid "dev.$(date +%s)-$(git rev-parse --short HEAD)" --skip-changelog
+          pnpm --filter=${{ matrix.package }} publish --provenance --no-git-checks --tag dev || true
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
 

.github/workflows/publish-docker.yml

@@ -7,18 +7,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install node.js v18
-        uses: actions/setup-node@v3
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
 
       - name: Login to DockerHub
         run: echo ${{ secrets.DOCKER_ACCESS_TOKEN }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin

.github/workflows/publish-release.yml

@@ -6,18 +6,20 @@ jobs:
   npm-publish:
     name: npm publish
     runs-on: ubuntu-latest
+    permissions:
+      id-token: write
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     if: github.repository_owner == 'discordjs'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Install node.js v18
-        uses: actions/setup-node@v3
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
 
       - name: Install dependencies
@@ -34,6 +36,6 @@ jobs:
 
       - name: Publish package
         run: |
-          pnpm --filter=${{ steps.extract-tag.outputs.subpackage == 'true' && '@discordjs/' || '' }}${{ steps.extract-tag.outputs.package }} publish --no-git-checks
+          pnpm --filter=${{ steps.extract-tag.outputs.subpackage == 'true' && '@discordjs/' || '' }}${{ steps.extract-tag.outputs.package }} publish --provenance --no-git-checks
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/tests.yml

@@ -15,14 +15,14 @@ jobs:
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: Install node.js v18
-        uses: actions/setup-node@v3
+      - name: Install Node.js v20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies
         uses: ./packages/actions/src/pnpmCache
@@ -35,14 +35,6 @@ jobs:
         if: ${{ github.event_name == 'push' }}
         run: pnpm exec turbo run build --filter="...[HEAD^1]" --concurrency=4
 
-      - name: ESLint (PR)
-        if: ${{ github.event_name != 'push' }}
-        run: pnpm exec turbo run lint --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" --concurrency=4 -- --format=compact
-
-      - name: ESLint (Push)
-        if: ${{ github.event_name == 'push' }}
-        run: pnpm exec turbo run lint --filter="...[HEAD^1]" --concurrency=4 -- --format=compact
-
       - name: Tests (PR)
         if: ${{ github.event_name != 'push' }}
         run: pnpm exec turbo run test --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" --concurrency=4
@@ -51,6 +43,14 @@ jobs:
         if: ${{ github.event_name == 'push' }}
         run: pnpm exec turbo run test --filter="...[HEAD^1]" --concurrency=4
 
+      - name: ESLint (PR)
+        if: ${{ github.event_name != 'push' }}
+        run: pnpm exec turbo run lint --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" --concurrency=4 -- --format=compact
+
+      - name: ESLint (Push)
+        if: ${{ github.event_name == 'push' }}
+        run: pnpm exec turbo run lint --filter="...[HEAD^1]" --concurrency=4 -- --format=compact
+
       - name: Docs (PR)
         if: ${{ github.event_name != 'push' }}
         run: pnpm exec turbo run docs --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" --concurrency=4
@@ -62,3 +62,5 @@ jobs:
       - name: Upload Coverage
         if: github.repository_owner == 'discordjs'
         uses: ./packages/actions/src/uploadCoverage
+        with:
+          codecov_token: ${{ secrets.CODECOV_TOKEN }}

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm exec commitlint --edit $1

.husky/pre-commit

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -9,9 +9,9 @@
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
-		"source.organizeImports": false,
-		"source.fixAll.eslint": true,
-		"source.fixAll": true
+		"source.organizeImports": "never",
+		"source.fixAll.eslint": "explicit",
+		"source.fixAll": "explicit"
 	},
 	"editor.trimAutoWhitespace": false,
 	"files.associations": {
@@ -26,6 +26,7 @@
 	"npm.packageManager": "pnpm",
 	"typescript.tsdk": "node_modules/typescript/lib",
 	"typescript.enablePromptUseWorkspaceTsdk": true,
+	"unocss.disable": true,
 	"deno.enable": false,
 	"deno.enablePaths": ["./packages/create-discord-bot/template/Deno"],
 	"deno.lint": false,

apps/guide/next.config.js

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

apps/guide/package.json

@@ -43,55 +43,55 @@
 		"url": "https://github.com/discordjs/discord.js/issues"
 	},
 	"homepage": "https://discord.js.org",
+	"funding": "https://github.com/discordjs/discord.js?sponsor",
 	"dependencies": {
 		"@code-hike/mdx": "^0.9.0",
 		"@discordjs/ui": "workspace:^",
 		"@react-icons/all-files": "^4.1.0",
-		"@vercel/analytics": "^1.1.1",
-		"@vercel/edge-config": "^0.4.1",
-		"@vercel/og": "^0.5.20",
+		"@vercel/analytics": "^1.3.1",
+		"@vercel/edge-config": "^1.1.1",
+		"@vercel/og": "^0.6.2",
 		"ariakit": "2.0.0-next.44",
-		"cmdk": "^0.2.0",
+		"cmdk": "^1.0.0",
 		"contentlayer": "^0.3.4",
-		"next": "14.0.3-canary.5",
+		"next": "^14.2.3",
 		"next-contentlayer": "^0.3.4",
-		"next-themes": "^0.2.1",
-		"react": "^18.2.0",
+		"next-themes": "^0.3.0",
+		"react": "^18.3.1",
 		"react-custom-scrollbars-2": "^4.5.0",
-		"react-dom": "^18.2.0",
+		"react-dom": "^18.3.1",
 		"rehype-autolink-headings": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
-		"sharp": "^0.32.6"
+		"sharp": "^0.33.4"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "14.0.3-canary.5",
-		"@testing-library/react": "^14.1.0",
-		"@testing-library/user-event": "^14.5.1",
+		"@testing-library/react": "^15.0.7",
+		"@testing-library/user-event": "^14.5.2",
 		"@types/html-escaper": "^3.0.2",
-		"@types/node": "18.18.8",
-		"@types/react": "^18.2.37",
-		"@types/react-dom": "^18.2.15",
-		"@unocss/eslint-plugin": "^0.57.3",
-		"@unocss/postcss": "^0.57.3",
-		"@unocss/reset": "^0.57.3",
-		"@vitejs/plugin-react": "^4.1.1",
-		"@vitest/coverage-v8": "^0.34.6",
+		"@types/node": "^18.19.45",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@unocss/eslint-plugin": "^0.60.4",
+		"@unocss/postcss": "^0.60.4",
+		"@unocss/reset": "^0.60.4",
+		"@vitejs/plugin-react": "^4.3.0",
+		"@vitest/coverage-v8": "^2.0.5",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.53.0",
-		"eslint-config-neon": "^0.1.57",
-		"eslint-formatter-pretty": "^5.0.0",
-		"happy-dom": "^12.10.3",
+		"eslint": "^8.57.0",
+		"eslint-config-neon": "^0.1.62",
+		"eslint-formatter-pretty": "^6.0.1",
+		"happy-dom": "^14.12.0",
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^8.0.0",
 		"html-escaper": "^3.0.3",
-		"postcss": "^8.4.31",
-		"prettier": "^3.1.0",
-		"turbo": "^1.10.17-canary.0",
-		"typescript": "^5.2.2",
-		"unocss": "^0.57.3",
-		"vercel": "^32.5.3",
-		"vitest": "^0.34.6"
+		"postcss": "^8.4.38",
+		"prettier": "^3.3.3",
+		"turbo": "^2.0.14",
+		"typescript": "~5.5.4",
+		"unocss": "^0.60.4",
+		"vercel": "^37.0.0",
+		"vitest": "^2.0.5"
 	},
 	"engines": {
 		"node": ">=18"

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

@@ -6,7 +6,7 @@ export default function NotFound() {
 			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
 			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
 			<Link
-				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base text-white font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
 				href="/guide"
 			>
 				Take me back

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

@@ -8,15 +8,12 @@ category: Home
 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/handling-command-interactions.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/);
+- How to get a bot [up and running](../getting-started/starting-out) from scratch;
+- In-depth explanations regarding features and concepts of the API (e.g. [intents](../topics/intents), [threads](../topics/threads), [webhooks](../topics/webhooks));
 - And much more.
 
 This guide will also cover subjects like common errors and how to solve them, keeping your code clean, setting up a proper development environment, etc.
-Sounds good? Great! Let's get started, then.
+Sounds good? Great! Let's get started.
 
 ## Before you begin...
 
@@ -25,11 +22,11 @@ While you _can_ make a bot with very little JavaScript and programming knowledge
 
 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)
+- [Eloquent JavaScript, a free online book](http://eloquentjavascript.net)
+- [JavaScript.info, a modern javascript tutorial](https://javascript.info)
+- [Codecademy's interactive JavaScript course](https://codecademy.com/learn/introduction-to-javascript)
+- [Nodeschool, for both JavaScript and Node.js lessons](https://nodeschool.io)
+- [MDN's JavaScript guide and full documentation](https://developer.mozilla.org/docs/Web/JavaScript)
 - [Google, your best friend](https://google.com)
 
 Take your pick, learn some JavaScript, and once you feel like you're confident enough to make a bot, come back and get started!

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

@@ -21,9 +21,7 @@ category: Home
 			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.
+		This website is new! We will no longer be updating the old guide website.
 	</DiscordMessage>
 </DiscordMessages>
 
@@ -33,25 +31,9 @@ We have moved from VuePress to [Next.js](https://nextjs.org/)! The source can be
 
 ## 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.
-
-### 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/handling-command-interactions.md/): Updated to use slash commands
-  - Obsolete sections removed
-- _`client.on('message')`_ snippets updated to _`client.on(Events.InteractionCreate)`_
-  - [Message content became a privileged intent on August 31, 2022](https://support-dev.discord.com/hc/articles/4404772028055)
+- Pages have been revamped to account for our new [create-discord-bot](https://github.com/discordjs/discord.js/tree/main/packages/create-discord-bot) command-line interface.
+- Popular topic are now simply "topics" that detail usage of a particular concept of the API.
+- Focus is primarily on discord.js, so irrelevant topics have been removed. It may be better to visit the documentation of the package you are using to learn how to use them.
 
 <DiscordMessages rounded>
 	<DiscordMessage

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

@@ -7,16 +7,16 @@ category: Home
 
 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.
+Requests may be as simple as "add an example to the [frequently asked questions](../topics/frequently-asked-questions) page", or as elaborate as "add a page regarding [sharding](../topics/sharding)". We'll do our best to fulfill all requests, as long as they're reasonable.
 
 To make a request, simply head over to [the repository's issue tracker](https://github.com/discordjs/discord.js/issues) and [create a new issue](https://github.com/discordjs/discord.js/issues/new)! Title it appropriately, and let us know exactly what you mean inside the issue description. Make sure that you've looked around the site before making a request; what you want to request might already exist!
 
-<Alert title="Tip" type="success">
+<Alert title="Tip" type="info">
 	Remember that you can always [fork the repository](https://github.com/discordjs/discord.js/fork) and [make a pull
 	request](https://github.com/discordjs/discord.js/pulls) if you want to add anything to the guide yourself!
 </Alert>
 
-We'll also get into some of the more advanced features this guide does below.
+We'll also get into some of the more advanced features this guide uses below. We recommended you have a look at the [source](https://github.com/discordjs/discord.js/blob/main/apps/guide/src/content/01-home/03-how-to-contribute.mdx) of this page to see exactly how they work.
 
 ## Components
 

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

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

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

@@ -1,25 +1,28 @@
 ---
-title: Setting up a bot application
-category: Installations and preparations
+title: Setting up an application
+category: Getting started
 ---
 
-# Setting up a bot application
+# Setting up an application
 
-## Creating your bot
+You'll need to create an application on Discord's developer portal so your bot has a token to interact with Discord's API.
 
-Now that you've installed Node, discord.js, and hopefully a linter, you're almost ready to start coding! The next step you need to take is setting up an actual Discord bot application via Discord's website.
+## Creating the application
 
-It's effortless to create one. The steps you need to take are as follows:
+Follow these steps:
 
-1. Open the [Discord developer portal](https://discord.com/developers/applications) and log into your account.
+1. Open the [Discord developer portal](https://discord.com/developers/applications). You'll need to be logged in.
 2. Click on the "New Application" button.
 3. Enter a name and confirm the pop-up window by clicking the "Create" button.
+   - You'll need to agree to the [Developer Terms of Service](https://discord.com/developers/docs/policies-and-agreements/terms-of-service) and [Developer Policy](https://discord.com/developers/docs/policies-and-agreements/developer-policy).
 
 You should see a page like this:
 
 ![Successfully created application](/assets/create-app.png)
 
-You can edit your application's name, description, and avatar here. Once you've saved your changes, move on by selecting the "Bot" tab in the left pane.
+You can edit your application's name, description, and avatar here. Copy the application id and paste it in the .env file after _`APPLICATION_ID=`_.
+
+Once you've saved your changes, move on by selecting the "Bot" tab in the left pane.
 
 ## Your bot's token
 
@@ -32,9 +35,11 @@ On the bot tab, you'll see a section like this:
 
 ![Bot application](/assets/bot-user.png)
 
-In this panel, you can give your bot a snazzy avatar, set its username, and make it public or private. Your bot's token will be revealed when you press the "Reset Token" button and confirm. When we ask you to paste your bot's token somewhere, this is the value that you need to put in. If you happen to lose your bot's token at some point, you need to come back to this page and reset your bot's token again which will reveal the new token, invalidating all old ones.
+In this panel, you can give your bot a snazzy avatar, set its username, and make it public or private. Your bot's token will be revealed when you press the "Reset Token" button and confirm. Once you've done this, copy it and paste it in the .env file after _`DISCORD_TOKEN=`_.
 
-### What is a token, anyway?
+If you happen to lose this token at some point, you will need to come back to this page and reset it, which will reveal the new token, invalidating all old ones.
+
+### Bot token explanation
 
 A token is essentially your bot's password; it's what your bot uses to login to Discord. With that said, **it is vital that you do not ever share this token with anybody, purposely or accidentally**. If someone does manage to get a hold of your bot's token, they can use your bot as if it were theirs—this means they can perform malicious acts with it.
 
@@ -52,8 +57,6 @@ Let's imagine that you have a bot on over 1,000 servers, and it took you many, m
 
 All that and much, much more. Sounds pretty terrible, right? So make sure to keep your bot's token as safe as possible!
 
-In the [configuration files](../creating-your-bot/configuration-files) page of the guide, we cover how to safely store your bot's token in a configuration file.
-
 <Alert title="Compromised tokens" type="danger">
 	If your bot token has been compromised by committing it to a public repository, posting it in discord.js support etc.
 	or otherwise see your bot's token in danger, return to this page and press "Reset Token". This will invalidate all old

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

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

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

@@ -1,110 +0,0 @@
----
-title: Installing Node.js and discord.js
-category: Installations and preparations
----
-
-# Installing Node.js and discord.js
-
-## Installing Node.js
-
-To use discord.js, you'll need to install [Node.js](https://nodejs.org/). discord.js v14 requires Node v16.11.0 or higher.
-
-<Alert title="Tip" type="success">
-	To check if you already have Node installed on your machine \(e.g., if you're using a VPS\), run _`node -v`_ in your
-	terminal. If it outputs _`v16.11.0`_ or higher, then you're good to go! Otherwise, continue reading.
-</Alert>
-
-On Windows, it's as simple as installing any other program. Download the latest version from [the Node.js website](https://nodejs.org/), open the downloaded file, and follow the steps from the installer.
-
-On macOS, either:
-
-- Download the latest version from [the Node.js website](https://nodejs.org/), open the package installer, and follow the instructions
-- Use a package manager like [Homebrew](https://brew.sh/) with the command _`brew install node`_
-
-On Linux, you can consult [this page](https://nodejs.org/en/download/package-manager/) to determine how you should install Node. Native package managers often default to outdated versions of Node, so make sure you follow the recommended approach for your chosen Linux distribution carefully.
-
-## Preparing the essentials
-
-To use discord.js, you'll need to install it via npm \(Node's package manager\). npm comes with every Node installation, so you don't have to worry about installing that. However, before you install anything, you should set up a new project folder.
-
-Navigate to a suitable place on your machine and create a new folder named _`discord-bot`_ (or whatever you want). Next you'll need to open your terminal.
-
-### Opening the terminal
-
-<Alert title="Tip" type="success">
-	If you use [Visual Studio Code](https://code.visualstudio.com/), you can press <kbd>Ctrl + `</kbd> (backtick) to open
-	its integrated terminal.
-</Alert>
-
-On Windows, either:
-
-- <kbd>Shift + Right-click</kbd> inside your project directory and choose the "Open command window here" option
-- Press <kbd>Win + R</kbd> and run _`cmd.exe`_, and then _`cd`_ into your project directory
-
-On macOS, either:
-
-- Open Launchpad or Spotlight and search for "Terminal"
-- In your "Applications" folder, under "Utilities", open the Terminal app
-
-On Linux, you can quickly open the terminal with <kbd>Ctrl + Alt + T</kbd>.
-
-With the terminal open, run the _`node -v`_ command to make sure you've successfully installed Node.js. If it outputs _`v16.11.0`_ or higher, great!
-
-### Initiating a project folder
-
-<CH.Code lineNumbers={false}>
-
-```sh npm
-npm init; npm pkg set type="module"
-```
-
-```sh yarn
-yarn init
-# You must go into your package.json file and add "type": "module"
-```
-
-```sh pnpm
-pnpm init; pnpm pkg set type="module"
-```
-
-```sh bun
-bun init
-```
-
-</CH.Code>
-
-This is the next command you'll be running. This command creates a _`package.json`_ file for you, which will keep track of the dependencies your project uses, as well as other info.
-
-This command will ask you a sequence of questions–you should fill them out as you see fit. If you're not sure of something or want to skip it as a whole, leave it blank and press enter. Setting the package type as _`module`_ tells Node that you'll be writing this project using ESM \(ECMAScript modules\), supporting the latest JavaScript syntax and features.
-
-Once you're done with that, you're ready to install discord.js!
-
-## Installing discord.js
-
-Now that you've installed Node.js and know how to open your console and run commands, you can finally install discord.js! Run the following command in your terminal:
-
-<CH.Code lineNumbers={false}>
-
-```sh npm
-npm install discord.js
-```
-
-```sh yarn
-yarn add discord.js
-```
-
-```sh pnpm
-pnpm add discord.js
-```
-
-```sh bun
-bun add discord.js
-```
-
-</CH.Code>
-
-And that's it! With all the necessities installed, you're almost ready to start coding your bot.
-
-## Installing a linter
-
-While you are coding, it's possible to run into numerous syntax errors or code in an inconsistent style. You should [install a linter](./setting-up-a-linter) to ease these troubles. While code editors generally can point out syntax errors, linters coerce your code into a specific style as defined by the configuration. While this is not required, it is advised.

apps/guide/src/content/02-installations-and-preparations/02-setting-up-a-linter.mdx

@@ -1,6 +0,0 @@
----
-title: Setting up a linter
-category: Installations and preparations
----
-
-TODO: Rewrite. Placeholder page for ordering.

apps/guide/src/content/02-installations-and-preparations/04-adding-your-bot-to-servers.mdx

@@ -1,52 +0,0 @@
----
-title: Adding your bot to servers
-category: Installations and preparations
----
-
-# Adding your bot to servers
-
-After you [set up a bot application](./setting-up-a-bot-application), you'll notice that it's not in any servers yet. So how does that work?
-
-Before you're able to see your bot in your own (or other) servers, you'll need to add it by creating and using a unique invite link using your bot application's client id.
-
-## Bot invite links
-
-The basic version of one such link looks like this:
-
-<CH.Code lineNumbers={false}>
-
-```
-https://discord.com/api/oauth2/authorize?client_id=123456789012345678&permissions=0&scope=bot%20applications.commands
-```
-
-</CH.Code>
-
-The structure of the URL is quite simple:
-
-- _`https://discord.com/api/oauth2/authorize`_ is Discord's standard structure for authorizing an OAuth2 application (such as your bot application) for entry to a Discord server.
-- _`client_id=...`_ is to specify _which_ application you want to authorize. You'll need to replace this part with your client's id to create a valid invite link.
-- _`permissions=...`_ describes the permissions that your bot will request to be granted by default upon joining the server you are adding it to.
-- _`scope=bot%20applications.commands`_ specifies that you want to add this application as a Discord bot, with the ability to create slash commands.
-
-<Alert title="Warning" type="warning">
-	If you get an error message saying "Bot requires a code grant", head over to your application's settings and disable
-	the "Require OAuth2 Code Grant" option. You shouldn't enable this option unless you know why you need to.
-</Alert>
-
-## Creating and using your invite link
-
-To create an invite link, head back to the [My Apps](https://discord.com/developers/applications/me) page under the "Applications" section, click on your bot application, and open the OAuth2 page.
-
-In the sidebar, you'll find the OAuth2 URL generator. Select the _`bot`_ and _`applications.commands`_ options. Once you select the _`bot`_ option, a list of permissions will appear, allowing you to configure the permissions your bot needs.
-
-Grab the link via the "Copy" button and enter it in your browser. You should see something like this (with your bot's username and avatar):
-
-![Bot Authorization page](/assets/bot-auth-page.png)
-
-Choose the server you want to add it to and click "Authorize". Do note that you'll need the "Manage Server" permission on a server to add your bot there. This should then present you a nice confirmation message:
-
-![Bot authorized](/assets/bot-authorized.png)
-
-Congratulations! You've successfully added your bot to your Discord server. It should show up in your server's member list somewhat like this:
-
-![Bot in server's member list](/assets/bot-in-memberlist.png)

apps/guide/src/content/03-creating-your-bot/01-configuration-files.mdx

@@ -1,136 +0,0 @@
----
-title: Configuration files
-category: Creating your bot
----
-
-# Configuration files
-
-Once you [add your bot to a server](../installations-and-preparations/adding-your-bot-to-servers), the next step is to start coding and get it online! Let's start by creating a config file to prepare the necessary values your client will need.
-
-As explained in the ["What is a token, anyway?"](../installations-and-preparations/setting-up-a-bot-application#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 importing this file.
-
-<CH.Code lineNumbers={false}>
-
-```json config.json
-{
-	"token": "your-token-goes-here"
-}
-```
-
-```js index.js
-import config from './config.json' assert { type: 'json' };
-
-console.log(config.token);
-```
-
-</CH.Code>
-
-<Alert title="Danger" type="danger">
-	If you're using Git, you should not commit this file and should [ignore it via `.gitignore`](#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 lineNumbers={false} rows={3}>
-
-```sh Shell
-A=123 B=456 DISCORD_TOKEN=your-token-goes-here node index.js
-```
-
-```js index.js
-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 lineNumbers={false}>
-
-```sh npm
-npm install dotenv
-```
-
-```sh yarn
-yarn add dotenv
-```
-
-```sh pnpm
-pnpm add dotenv
-```
-
-```sh bun
-# Bun automatically reads .env files
-```
-
-</CH.Code>
-
-<CH.Code lineNumbers={false} rows={7}>
-
-```sh .env
-A=123
-B=456
-DISCORD_TOKEN=your-token-goes-here
-```
-
-```js index.js
-import { config } from 'dotenv';
-
-config();
-
-console.log(process.env.A);
-console.log(process.env.B);
-console.log(process.env.DISCORD_TOKEN);
-```
-
-</CH.Code>
-
-<Alert title="Danger" type="danger">
-	If you're using Git, you should not commit this file and should [ignore it via `.gitignore`](#git-and-gitignore).
-</Alert>
-
-<Alert title="Online editors (Glitch, Heroku, Replit, etc.)" type="info">
-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)
-
-</Alert>
-
-## 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:
-
-```
-node_modules
-.env
-config.json
-```
-
-<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>

apps/guide/src/content/03-creating-your-bot/02-creating-the-main-file.mdx

@@ -1,60 +0,0 @@
----
-title: Creating the main file
-category: Creating your bot
----
-
-# Creating the main file
-
-<Alert title="Tip" type="success">
-	This page assumes you've already prepared the [configuration files](./configuration-files) from the previous page.
-	We're using the _`config.json`_ approach, however feel free to substitute your own!
-</Alert>
-
-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
-import { Client, Events, GatewayIntentBits } from 'discord.js';
-import config from './config.json' assert { type: 'json' };
-
-// Create a new client instance
-const client = new Client({ intents: [GatewayIntentBits.Guilds] });
-
-// When the client is ready, run this code (only once)
-// We use 'c' for the event parameter to keep it separate from the already defined 'client'
-client.once(Events.ClientReady, (c) => {
-	console.log(`Ready! Logged in as ${c.user.tag}`);
-});
-
-// Log in to Discord with your client's token
-client.login(config.token);
-```
-
-</CH.Code>
-
-This is how you create a client instance for your Discord bot and log in to Discord. The _`GatewayIntentBits.Guilds`_ intents option is necessary for the discord.js client to work as you expect it to, as it ensures that the caches for guilds, channels, and roles are populated and available for internal use.
-
-<Alert title="Tip" type="success">
-	The term "guild" is used by the Discord API and in discord.js to refer to a Discord server.
-</Alert>
-
-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).
-
-## Running your application
-
-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! The next step is to start adding [slash commands](./adding-commands) to develop your bot's functionality.
-
-<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/03-creating-your-bot/03-adding-commands.mdx

@@ -1,163 +0,0 @@
----
-title: Adding commands
-category: Creating your bot
----
-
-# Creating slash commands
-
-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.
-
-Slash commands provide a huge number of benefits over manual message parsing, including:
-
-- Integration with the Discord client interface.
-- Automatic command detection and parsing of the associated options/arguments.
-- Typed argument inputs for command options, e.g. "String", "User", or "Role".
-- Validated or dynamic choices for command options.
-- In-channel private responses (ephemeral messages).
-- Pop-up form-style inputs for capturing additional information.
-
-...and many more!
-
-<Alert title="Read first!" type="info">
-	For fully functional slash commands, there are three important pieces of code that need to be written. They are:
-
-    1. The individual command files, containing their definitions and functionality.
-    2. The [command handler](handling-command-interactions.html), which dynamically reads the files and executes the commands.
-    3. The [command deployment script](registering-slash-commands.html), to register your slash commands with Discord so they appear in the interface.
-
-    These steps can be done in any order, but **all are required** before the commands are fully functional.
-
-    On this page, you'll complete Step 1. Make sure to also complete the other pages linked above!
-
-</Alert>
-
-## Before you continue
-
-Assuming you've followed the guide so far, your project directory should look something like this:
-
-```:no-line-numbers
-discord-bot/
-├── node_modules
-├── config.json
-├── index.js
-├── package-lock.json
-└── package.json
-```
-
-## Individual command files
-
-Create a new folder named _`commands`_, which is where you'll store all of your command files.
-
-At a minimum, the definition of a slash command must have a name and a description. Slash command names must be between 1-32 characters and contain no capital letters, spaces, or symbols other than _`-`_ and _`_`_. Using the builder, a simple _`ping`\_ command definition would look like this:
-
-<CH.Code>
-
-```js
-/** @type {import('discord.js').RESTPostAPIApplicationCommandsJSONBody} */
-export const data = {
-	name: 'ping',
-	description: 'Replies with Pong!',
-};
-```
-
-</CH.Code>
-
-A slash command also requires a function to run when the command is used, to respond to the interaction. Using an interaction response method confirms to Discord that your bot successfully received the interaction, and has responded to the user. Discord enforces this to ensure that all slash commands provide a good user experience (UX). Failing to respond will cause Discord to show that the command failed, even if your bot is performing other actions as a result.
-
-The simplest way to acknowledge and respond to an interaction is the _`interaction.reply()`_ method. Other methods of replying are covered on the [Response methods](../slash-commands/response-methods) page later in this section.
-
-<CH.Code>
-
-```js
-/** @param {import('discord.js').CommandInteraction} interaction */
-export async function execute(interaction) {
-	await interaction.reply('Pong!');
-}
-```
-
-</CH.Code>
-
-<Alert title="@type and @param tags" type="info">
-	[`@type`](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#type) and
-	[`@param`](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html#param-and-returns) tags allow you
-	to annotate your code with type information. The tags are not required for your code to run but provide autocomplete
-	and type information for fields and parameters, which can majorly improve your developer experience when working with
-	them.
-</Alert>
-
-Put these two together by creating a `commands/ping.js` file for your first command. Inside this file, you're going to define and export two items.
-
-- The `data` property, which will provide the command definition shown above for registering to Discord.
-- The `execute` method, which will contain the functionality to run from our event handler when the command is used.
-
-The _`export`_ keyword ensures these values can be imported and read by other files; namely the command loader and command deployment scripts mentioned earlier.
-
-<CH.Code>
-
-```js commands/ping.js
-/** @type {import('discord.js').RESTPostAPIApplicationCommandsJSONBody} */
-export const data = {
-	name: 'ping',
-	description: 'Replies with Pong!',
-};
-
-/** @param {import('discord.js').CommandInteraction} interaction */
-export async function execute(interaction) {
-	await interaction.reply('Pong!');
-}
-```
-
-</CH.Code>
-
-<Alert title="Tip" type="success">
-	[`module.exports`](https://nodejs.org/api/modules.html#modules_module_exports) is how you export data in Node.js so that you can [`require()`](https://nodejs.org/api/modules.html#modules_require_id) it in other files.
-
-    If you need to access your client instance from inside a command file, you can access it via `interaction.client`. If you need to access external files, packages, etc., you should `require()` them at the top of the file.
-
-</Alert>
-
-That's it for your basic ping command. Below are examples of two more commands we're going to build upon throughout the guide, so create two more files for these before you continue reading.
-
-<CH.Code>
-
-```js commands/user.js
-/** @type {import('discord.js').RESTPostAPIApplicationCommandsJSONBody} */
-export const data = {
-	name: 'user',
-	description: 'Provides information about the user.',
-};
-
-/** @param {import('discord.js').CommandInteraction} interaction */
-export async function execute(interaction) {
-	// interaction.user is the object representing the User who ran the command
-	// interaction.member is the GuildMember object, which represents the user in the specific guild
-	await interaction.reply(
-		`This command was run by ${interaction.user.username}, who joined on ${interaction.member.joinedAt}.`,
-	);
-}
-```
-
-```js commands/server.js
-/** @type {import('discord.js').RESTPostAPIApplicationCommandsJSONBody} */
-export const data = {
-	name: 'server',
-	description: 'Provides information about the server.',
-};
-
-/** @param {import('discord.js').CommandInteraction} interaction */
-export async function execute(interaction) {
-	// interaction.guild is the object representing the Guild in which the command was run
-	await interaction.reply(`This server is ${interaction.guild.name} and has 
-		${interaction.guild.memberCount} members.`);
-}
-```
-
-</CH.Code>
-
-#### Next steps
-
-You can implement additional commands by creating additional files in the _`commands`_ folder, but these three are the ones we're going to use for the examples as we go on. For now let's move on to the code you'll need for command handling, to load the files and respond to incoming interactions.
-
-#### Resulting code
-
-<ResultingCode />

apps/guide/src/content/03-creating-your-bot/04-handling-command-interactions.mdx

@@ -1,297 +0,0 @@
----
-title: Handling command interactions
-category: Creating your bot
----
-
-# Command handling
-
-Unless your bot project is small, it's not a very good idea to have a single file with a giant _`if`_/_`else if`_ chain for commands. If you want to implement features into your bot and make your development process a lot less painful, you'll want to implement a command handler. Let's get started on that!
-
-<Alert title="Read first!" type="info">
-	For fully functional slash commands, there are three important pieces of code that need to be written. They are:
-
-    1. The [individual command files](slash-commands), containing their definitions and functionality.
-    2. The command handler, which dynamically reads the files and executes the commands.
-    3. The [command deployment script](registering-slash-commands), to register your slash commands with Discord so they appear in the interface.
-
-    These steps can be done in any order, but **all are required** before the commands are fully functional.
-
-    This page details how to complete **Step 2**. Make sure to also complete the other pages linked above!
-
-</Alert>
-
-## Loading command files
-
-Now that your command files have been created, your bot needs to load these files on startup.
-
-In your _`index.js`_ file, make these additions to the base template:
-
-<CH.Code>
-
-```js JavaScript mark=1:4,9
-import { readdir } from 'node:fs/promises';
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { Client, Collection, Events, GatewayIntentBits } from 'discord.js';
-import config from './config.json' assert { type: 'json' };
-
-const client = new Client({ intents: [GatewayIntentBits.Guilds] });
-
-const commands = new Collection();
-
-client.once(Events.ClientReady, () => {
-	console.log('Ready!');
-});
-```
-
-```ts TypeScript mark=1:11,16:21
-import { readdir } from 'node:fs/promises';
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import {
-	Client,
-	Collection,
-	Events,
-	GatewayIntentBits,
-	type RESTPostAPIChatInputApplicationCommandsJSONBody,
-	type ChatInputCommandInteraction,
-} from 'discord.js';
-import config from './config.json';
-
-const client = new Client({ intents: [GatewayIntentBits.Guilds] });
-
-interface CommandModule {
-	data: RESTPostAPIChatInputApplicationCommandsJSONBody;
-	execute(interaction: ChatInputCommandInteraction): Promise<void>;
-}
-
-const commands = new Collection<string, CommandModule>();
-
-client.once(Events.ClientReady, () => {
-	console.log('Ready!');
-});
-```
-
-</CH.Code>
-
-<Alert title="Tip" type="info">
-	- The [`fs`](https://nodejs.org/api/fs.html) module is Node's native file system module. _`readdir`_ is used to read
-	the _`commands`_ directory and identify our command files. - The [`path`](https://nodejs.org/api/path.html) module is
-	Node's native path utility module. _`join`_ helps construct paths to access files and directories. One of the
-	advantages of _`path.join`_ is that it automatically detects the operating system and uses the appropriate joiners. -
-	The [`url`](https://nodejs.org/api/url.html) module provides utilities for URL resolution and parsing.
-	_`fileURLToPath`_ ensuring a cross-platform valid absolute path string.
-	- The{' '}
-	<DocsLink type="class" parent="Collection" /> class extends JavaScript's native
-	[_`Map`_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) class, and includes
-	more extensive, useful functionality. _`Collection`_ is used to store and efficiently retrieve commands for execution.
-
-</Alert>
-
-Next, using the modules imported above, dynamically retrieve your command files with a few more additions to the _`index.js`_ file:
-
-<CH.Code>
-
-```js JavaScript focus=3:15
-const commands = new Collection();
-
-const commandsPath = fileURLToPath(new URL('commands', import.meta.url));
-const commandFiles = await readdir(commandsPath).then((files) => files.filter((file) => file.endsWith('.js')));
-
-for (const file of commandFiles) {
-	const filePath = join(commandsPath, file);
-	const command = await import(filePath);
-	// Set a new item in the Collection with the key as the command name and the value as the exported module
-	if ('data' in command && 'execute' in command) {
-		commands.set(command.data.name, command);
-	} else {
-		console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
-	}
-}
-```
-
-```ts TypeScript focus=3:15
-const commands = new Collection<string, CommandModule>();
-
-const commandsPath = fileURLToPath(new URL('commands', import.meta.url));
-const commandFiles = await readdir(commandsPath).then((files) => files.filter((file) => file.endsWith('.js')));
-
-for (const file of commandFiles) {
-	const filePath = join(commandsPath, file);
-	const command = await import(filePath);
-	// Set a new item in the Collection with the key as the command name and the value as the exported module
-	if ('data' in command && 'execute' in command) {
-		commands.set(command.data.name, command);
-	} else {
-		console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
-	}
-}
-```
-
-</CH.Code>
-
-First, [url.fileURLToPath()](https://nodejs.org/api/url.html) helps to construct a path to the _`commands`_ directory. The [fs.readdir()](https://nodejs.org/api/fs.html#fspromisesreaddirpath-options) method then reads the path to the directory and returns a Promise which resolves to an array of all the file names it contains, currently _`['ping.js', 'server.js', 'user.js']`_. To ensure only command files get processed, _`Array.filter()`_ removes any non-JavaScript files from the array.
-
-With the correct files identified, the last step is to loop over the array and dynamically set each command into the _`commands`_ Collection. For each file being loaded, check that it has at least the _`data`_ and _`execute`_ properties. This helps to prevent errors resulting from loading empty, unfinished or otherwise incorrect command files while you're still developing.
-
-## Receiving command interactions
-
-Every slash command is an _`interaction`_, so to respond to a command, you need to create a listener for the <DocsLink type="class" parent="Client" symbol="e-interactionCreate" /> event that will execute code when your application receives an interaction. Place the code below in the _`index.js`_ file you created earlier.
-
-<CH.Code>
-
-```js
-client.on(Events.InteractionCreate, (interaction) => {
-	console.log(interaction);
-});
-```
-
-</CH.Code>
-
-Not every interaction is a slash command (e.g. _`MessageComponent`_ interactions). Make sure to only handle slash commands in this function by making use of the <DocsLink type="class" parent="BaseInteraction" symbol="isChatInputCommand" brackets /> method to exit the handler if another type is encountered. This method also provides type guarding for TypeScript users, narrowing the type from _`BaseInteraction`_ to <DocsLink type="class" parent="ChatInputCommandInteraction" />.
-
-<CH.Code>
-
-```js focus=2
-client.on(Events.InteractionCreate, (interaction) => {
-	if (!interaction.isChatInputCommand()) return;
-	console.log(interaction);
-});
-```
-
-</CH.Code>
-
-## Executing commands
-
-When your bot receives a <DocsLink type="class" parent="Client" symbol="e-interactionCreate" /> event, the interaction object contains all the information you need to dynamically retrieve and execute your commands!
-
-Let's take a look at the _`ping`_ command again. Note the _`execute()`_ function that will reply to the interaction with "Pong!".
-
-<CH.Code>
-
-```js
-export const data = {
-	name: 'ping',
-	description: 'Replies with Pong!',
-};
-
-export async function execute(interaction) {
-	await interaction.reply('Pong!');
-}
-```
-
-</CH.Code>
-
-First, you need to get the matching command from the _`commands`_ Collection based on the _`interaction.commandName`_. If no matching command is found, log an error to the console and ignore the event.
-
-With the right command identified, all that's left to do is call the command's _`.execute()`_ method and pass in the _`interaction`_ variable as its argument. Note that the event listener has been made _`async`_, allowing Promises to be awaited. In case something goes wrong and the Promise rejects, catch and log any error to the console.
-
-<CH.Code>
-
-```js focus=4:20
-// focus[37:42]
-client.on(Events.InteractionCreate, async (interaction) => {
-	if (!interaction.isChatInputCommand()) return;
-
-	const command = commands.get(interaction.commandName);
-
-	if (!command) {
-		console.error(`No command matching ${interaction.commandName} was found.`);
-		return;
-	}
-
-	try {
-		await command.execute(interaction);
-	} catch (error) {
-		console.error(error);
-		if (interaction.replied || interaction.deferred) {
-			await interaction.followUp({ content: 'There was an error while executing this command!', ephemeral: true });
-		} else {
-			await interaction.reply({ content: 'There was an error while executing this command!', ephemeral: true });
-		}
-	}
-});
-```
-
-</CH.Code>
-
-## Command categories
-
-So far, all of your command files are in a single _`commands`_ folder. This is fine at first, but as your project grows, the number of files in the _`commands`_ folder will too. Keeping track of that many files can be a little tough. To make this a little easier, you can categorize your commands and put them in subfolders inside the _`commands`_ folder. You will have to make a few changes to your existing code in _`index.js`_ for this to work out.
-
-If you've been following along, your project structure should look something like this:
-
-![Project structure before sorting](/assets/before-sorting.png)
-
-After moving your commands into subfolders, it will look something like this:
-
-![Project structure after sorting](/assets/after-sorting.png)
-
-<Alert title="Warning" type="warning">
-	Make sure you put every command file you have inside one of the new subfolders. Leaving a command file directly under
-	the _`commands`_ folder will create problems.
-</Alert>
-
-It is not necessary to name your subfolders exactly like we have named them here. You can create any number of subfolders and name them whatever you want. Although, it is a good practice to name them according to the type of commands stored inside them.
-
-Back in your _`index.js`_ file, where the code to [dynamically read command files](#loading-command-files) is, use the same pattern to read the subfolder directories, and then require each command inside them.
-
-<CH.Code>
-
-```js JavaScript focus=3:7,19
-const commands = new Collection();
-
-const foldersPath = fileURLToPath(new URL('commands', import.meta.url));
-const commandFolders = await readdir(foldersPath);
-
-for (const folder of commandFolders) {
-	const commandsPath = join(foldersPath, folder);
-	const commandFiles = await readdir(commandsPath).then((files) => files.filter((file) => file.endsWith('.js')));
-	for (const file of commandFiles) {
-		const filePath = join(commandsPath, file);
-		const command = await import(filePath);
-		// Set a new item in the Collection with the key as the command name and the value as the exported module
-		if ('data' in command && 'execute' in command) {
-			commands.set(command.data.name, command);
-		} else {
-			console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
-		}
-	}
-}
-```
-
-```ts Typescript mark=3:7,19
-const commands = new Collection<string, CommandModule>();
-
-const foldersPath = fileURLToPath(new URL('commands', import.meta.url));
-const commandFolders = await readdir(foldersPath);
-
-for (const folder of commandFolders) {
-	const commandsPath = join(foldersPath, folder);
-	const commandFiles = await readdir(commandsPath).then((files) => files.filter((file) => file.endsWith('.js')));
-	for (const file of commandFiles) {
-		const filePath = join(commandsPath, file);
-		const command = await import(filePath);
-		// Set a new item in the Collection with the key as the command name and the value as the exported module
-		if ('data' in command && 'execute' in command) {
-			commands.set(command.data.name, command);
-		} else {
-			console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
-		}
-	}
-}
-```
-
-</CH.Code>
-
-That's it! When creating new files for commands, make sure you create them inside one of the subfolders (or a new one) in the _`commands`_ folder.
-
-#### Next steps
-
-Your command files are now loaded into your bot, and the event listener is prepared and ready to respond. In the next section, we cover the final step - a command deployment script you'll need to register your commands so they appear in the Discord client.
-
-#### Resulting code
-
-<ResultingCode />
-
-It also includes some bonus commands!

apps/guide/src/content/03-creating-your-bot/05-registering-slash-commands.mdx

@@ -1,155 +0,0 @@
----
-title: Registering slash commands
-category: Creating your bot
----
-
-# Registering slash commands
-
-<Alert title="Read first!" type="info">
-	For fully functional slash commands, you need three important pieces of code:
-
-    1. The [individual command files](slash-commands), containing their definitions and functionality.
-    2. The [command handler](handling-command-interactions), which dynamically reads the files and executes the commands.
-    3. The command deployment script, to register your slash commands with Discord so they appear in the interface.
-
-    These steps can be done in any order, but **all are required** before the commands are fully functional.
-
-    This page details how to complete **Step 3**. Make sure to also complete the other pages linked above!
-
-</Alert>
-
-## Command registration
-
-Slash commands can be registered in two ways; in one specific guild, or for every guild the bot is in. We're going to look at single-guild registration first, as this is a good way to develop and test your commands before a global deployment.
-
-Your application will need the _`applications.commands`_ scope authorized in a guild for any of its slash commands to appear, and to be able to register them in a specific guild without error.
-
-Slash commands only need to be registered once, and updated when the definition (description, options etc) is changed. As there is a daily limit on command creations, it's not necessary nor desirable to connect a whole client to the gateway or do this on every _`ClientReady`_ event. As such, a standalone script using the lighter REST manager is preferred.
-
-This script is intended to be run separately, only when you need to make changes to your slash command **definitions** - you're free to modify parts such as the execute function as much as you like without redeployment.
-
-### Guild commands
-
-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.
-
-Add two more properties to your _`config.json`_ file, which we'll need in the deployment script:
-
-- _`clientId`_: Your application's client id ([Discord Developer Portal](https://discord.com/developers/applications) > "General Information" > application id)
-- _`guildId`_: Your development server's id ([Enable developer mode](https://support.discord.com/hc/en-us/articles/206346498) > Right-click the server title > "Copy Server ID")
-
-<CH.Code lineNumbers={false}>
-
-```json
-{
-	"token": "your-token-goes-here",
-	"clientId": "your-application-id-goes-here",
-	"guildId": "your-server-id-goes-here"
-}
-```
-
-</CH.Code>
-
-With these defined, you can use the deployment script below:
-
-<CH.Code>
-
-```js deploy-commands.js
-import { REST, Routes } from 'discord.js';
-import { readdir } from 'node:fs/promises';
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import config from './config.json' assert { type: 'json' };
-
-const { clientId, guildId, token } = config;
-
-const commands = [];
-
-// Grab all the command files from the commands directory you created earlier
-const foldersPath = fileURLToPath(new URL('commands', import.meta.url));
-const commandFolders = await readdir(foldersPath);
-
-for (const folder of commandFolders) {
-	// Grab all the command files from the commands directory you created earlier
-	const commandsPath = join(foldersPath, folder);
-	const commandFiles = await readdir(commandsPath).then((files) => files.filter((file) => file.endsWith('.js')));
-	// Grab the SlashCommandBuilder#toJSON() output of each command's data for deployment
-	for (const file of commandFiles) {
-		const filePath = join(commandsPath, file);
-		const command = await import(filePath);
-		if ('data' in command && 'execute' in command) {
-			commands.push(command.data.toJSON());
-		} else {
-			console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
-		}
-	}
-}
-
-// Construct and prepare an instance of the REST module
-const rest = new REST().setToken(token);
-
-try {
-	console.log(`Started refreshing ${commands.length} application (/) commands.`);
-
-	// The put method is used to fully refresh all commands in the guild with the current set
-	const data = await rest.put(Routes.applicationGuildCommands(clientId, guildId), { body: commands });
-
-	console.log(`Successfully reloaded ${data.length} application (/) commands.`);
-} catch (error) {
-	// And of course, make sure you catch and log any errors!
-	console.error(error);
-}
-```
-
-</CH.Code>
-
-Once you fill in these values, run _`node deploy-commands.js`_ in your project directory to register your commands to the guild specified. If you see the success message, check for the commands in the server by typing _`/`_! If all goes well, you should be able to run them and see your bot's response in Discord!
-
-### Global commands
-
-Global application commands will be available in all the guilds your application has the _`applications.commands`_ scope authorized in, and in direct messages by default.
-
-To deploy global commands, you can use the same script from the [guild commands](#guild-commands) section and simply adjust the route in the script to _`.applicationCommands(clientId)`_
-
-Test
-
-<CH.Code rows="focus">
-
-```js focus=5
-try {
-	console.log(`Started refreshing ${commands.length} application (/) commands.`);
-
-	// The put method is used to fully refresh all commands in the guild with the current set
-	const data = await rest.put(Routes.applicationCommands(clientId), { body: commands });
-
-	console.log(`Successfully reloaded ${data.length} application (/) commands.`);
-} catch (error) {
-	// And of course, make sure you catch and log any errors!
-	console.error(error);
-}
-```
-
-</CH.Code>
-
-### Where to deploy
-
-<Alert title="Tip" type="success">
-	Guild-based deployment of commands is best suited for development and testing in your own personal server. Once you're satisfied that it's ready, deploy the command globally to publish it to all guilds that your bot is in.
-
-    You may wish to have a separate application and token in the Discord Dev Portal for your dev application, to avoid duplication between your guild-based commands and the global deployment.
-
-</Alert>
-
-#### Further reading
-
-You've successfully sent a response to a slash command! However, this is only the most basic of command event and response functionality. Much more is available to enhance the user experience including:
-
-- applying this same dynamic, modular handling approach to events with an [Event handler](./event-handling).
-- utilising the different [Response methods](../slash-commands/response-methods) that can be used for slash commands.
-- expanding on these examples with additional validated option types in [Advanced command creation](../slash-commands/advanced-creation).
-- adding formatted [Embeds](../popular-topics/embeds) to your responses.
-- enhancing the command functionality with [Buttons](../interactions/buttons) and [Select Menus](../interactions/select-menus).
-- prompting the user for more information with [Modals](../interactions/modals).
-
-#### Resulting code
-
-<ResultingCode path="creating-your-bot/registering-slash-commands" />

apps/guide/src/content/03-creating-your-bot/06-event-handling.mdx

@@ -1,219 +0,0 @@
----
-title: Event handling
-category: Creating your bot
----
-
-# Event handling
-
-Node.js uses an event-driven architecture, making it possible to execute code when a specific event occurs. The discord.js library takes full advantage of this. You can visit the <DocsLink type="class" parent="Client" /> documentation to see the full list of events.
-
-<Alert title="Tip" type="success">
-	This page assumes you've followed the guide up to this point, and created your _`index.js`_ and individual slash
-	commands according to those pages.
-</Alert>
-
-At this point, your `index.js` file has code for loading commands, and listeners for two events: `ClientReady` and `InteractionCreate`.
-
-<CH.Code>
-
-```js Commands
-const commands = new Collection();
-
-const foldersPath = fileURLToPath(new URL('commands', import.meta.url));
-const commandFolders = await readdir(foldersPath);
-
-for (const folder of commandFolders) {
-	const commandsPath = join(foldersPath, folder);
-	const commandFiles = await readdir(commandsPath).then((files) => files.filter((file) => file.endsWith('.js')));
-	for (const file of commandFiles) {
-		const filePath = join(commandsPath, file);
-		const command = await import(filePath);
-		// Set a new item in the Collection with the key as the command name and the value as the exported module
-		if ('data' in command && 'execute' in command) {
-			commands.set(command.data.name, command);
-		} else {
-			console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
-		}
-	}
-}
-```
-
-```js ClientReady
-client.once(Events.ClientReady, (c) => {
-	console.log(`Ready! Logged in as ${c.user.tag}`);
-});
-```
-
-```js InteractionCreate
-client.on(Events.InteractionCreate, async (interaction) => {
-	if (!interaction.isChatInputCommand()) return;
-
-	const command = commands.get(interaction.commandName);
-
-	if (!command) {
-		console.error(`No command matching ${interaction.commandName} was found.`);
-		return;
-	}
-
-	try {
-		await command.execute(interaction);
-	} catch (error) {
-		console.error(`Error executing ${interaction.commandName}`);
-		console.error(error);
-	}
-});
-```
-
-</CH.Code>
-
-Currently, all of this code is in the _`index.js`_ file. <DocsLink type="class" parent="Client" symbol="e-ready" /> emits once when the _`Client`_ becomes ready for use, and <DocsLink type="class" parent="Client" symbol="e-interactionCreate" /> emits whenever an interaction is received.
-Moving the event listener code into individual files is simple, and we'll be taking a similar approach to the [command handler](./handling-command-interactions).
-
-## Individual event files
-
-Your project directory should look something like this:
-
-```
-discord-bot/
-├── commands/
-├── node_modules/
-├── config.json
-├── deploy-commands.js
-├── index.js
-├── package-lock.json
-└── package.json
-```
-
-Create an _`events`_ folder in the same directory. You can then move the code from your event listeners in _`index.js`_ to separate files: _`events/ready.js`_ and _`events/interactionCreate.js`_. The _`InteractionCreate`_ event is responsible for command handling, so the command loading code will move here too.
-
-<CH.Code>
-
-```js events/interactionCreate.js
-import { readdir } from 'node:fs/promises';
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { Collection, Events } from 'discord.js';
-
-const commands = new Collection();
-
-const foldersPath = fileURLToPath(new URL('commands', import.meta.url));
-const commandFolders = await readdir(foldersPath);
-
-for (const folder of commandFolders) {
-	const commandsPath = join(foldersPath, folder);
-	const commandFiles = await readdir(commandsPath).then((files) => files.filter((file) => file.endsWith('.js')));
-	for (const file of commandFiles) {
-		const filePath = join(commandsPath, file);
-		const command = await import(filePath);
-		// Set a new item in the Collection with the key as the command name and the value as the exported module
-		if ('data' in command && 'execute' in command) {
-			commands.set(command.data.name, command);
-		} else {
-			console.log(`[WARNING] The command at ${filePath} is missing a required "data" or "execute" property.`);
-		}
-	}
-}
-
-export const data = {
-	name: Events.InteractionCreate,
-};
-
-export async function execute(interaction) {
-	if (!interaction.isChatInputCommand()) return;
-
-	const command = commands.get(interaction.commandName);
-
-	if (!command) {
-		console.error(`No command matching ${interaction.commandName} was found.`);
-		return;
-	}
-
-	try {
-		await command.execute(interaction);
-	} catch (error) {
-		console.error(`Error executing ${interaction.commandName}`);
-		console.error(error);
-	}
-}
-```
-
-```js events/ready.js
-import { Events } from 'discord.js';
-
-export const data = {
-	name: Events.ClientReady,
-	once = true,
-};
-export async function execute(client) {
-	console.log(`Ready! Logged in as ${client.user.tag}`);
-}
-```
-
-```js index.js
-import { readdir } from 'node:fs/promises';
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { Client, GatewayIntentBits } from 'discord.js';
-import config from './config.json' assert { type: 'json' };
-
-const client = new Client({ intents: [GatewayIntentBits.Guilds] });
-
-client.login(config.token);
-```
-
-</CH.Code>
-
-The _`name`_ property states which event this file is for, and the _`once`_ property holds a boolean value that specifies if the event should run only once. You don't need to specify this in _`interactionCreate.js`_ as the default behavior will be to run on every event instance. The _`execute`_ function holds your event logic, which will be called by the event handler whenever the event emits.
-
-## Reading event files
-
-Next, let's write the code for dynamically retrieving all the event files in the _`events`_ folder. We'll be taking a similar approach to our [command handler](./handling-command-interactions). Place the new code highlighted below in your _`index.js`_.
-
-_`fs.readdir()`_ combined with _`array.filter()`_ returns an array of all the file names in the given directory and filters for only _`.js`_ files, i.e. _`['ready.js', 'interactionCreate.js']`_.
-
-<CH.Code>
-
-```js focus=9:20
-import { readdir } from 'node:fs/promises';
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { Client, GatewayIntentBits } from 'discord.js';
-import config from './config.json' assert { type: 'json' };
-
-const client = new Client({ intents: [GatewayIntentBits.Guilds] });
-
-const eventsPath = fileURLToPath(new URL('events', import.meta.url));
-const eventFiles = await readdir(eventsPath).then((files) => files.filter((file) => file.endsWith('.js')));
-
-for (const file of eventFiles) {
-	const filePath = join(eventsPath, file);
-	const event = await import(filePath);
-	if (event.data.once) {
-		client.once(event.data.name, (...args) => event.execute(...args));
-	} else {
-		client.on(event.data.name, (...args) => event.execute(...args));
-	}
-}
-
-client.login(config.token);
-```
-
-</CH.Code>
-
-You'll notice the code looks very similar to the command loading above it - read the files in the events folder and load each one individually.
-
-The <DocsLink type="class" parent="Client" /> class in discord.js extends the [`EventEmitter`](https://nodejs.org/api/events.html#events_class_eventemitter) class. Therefore, the _`client`_ object exposes the [`.on()`](https://nodejs.org/api/events.html#events_emitter_on_eventname_listener) and [`.once()`](https://nodejs.org/api/events.html#events_emitter_once_eventname_listener) methods that you can use to register event listeners. These methods take two arguments: the event name and a callback function. These are defined in your separate event files as _`name`_ and _`execute`_.
-
-The callback function passed takes argument(s) returned by its respective event, collects them in an _`args`_ array using the _`...`_ [rest parameter syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters), then calls _`event.execute()`_ while passing in the _`args`_ array using the _`...`_ [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). They are used here because different events in discord.js have different numbers of arguments. The rest parameter collects these variable number of arguments into a single array, and the spread syntax then takes these elements and passes them to the _`execute`_ function.
-
-After this, listening for other events is as easy as creating a new file in the _`events`_ folder. The event handler will automatically retrieve and register it whenever you restart your bot.
-
-<Alert title="Tip" type="success">
-	In most cases, you can access your _`client`_ instance in other files by obtaining it from one of the other discord.js
-	structures, e.g. _`interaction.client`_ in the _`InteractionCreate`_ event. You do not need to manually pass it to
-	your events.
-</Alert>
-
-## Resulting code
-
-<ResultingCode />

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

@@ -1,6 +1,6 @@
 ---
 title: Frequently asked questions
-category: Popular topics
+category: Topics
 ---
 
 # Frequently asked questions

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

@@ -1,6 +1,6 @@
 ---
 title: Audit logs
-category: Popular topics
+category: Topics
 ---
 
 # Audit logs

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

@@ -1,6 +1,6 @@
 ---
 title: Collectors
-category: Popular topics
+category: Topics
 ---
 
 # Collectors
@@ -31,9 +31,9 @@ collector.on('end', (collected) => {
 
 </CH.Code>
 
-You can provide a _`filter`_ key to the object parameter of <DocsLink type="class" parent="TextChannel" symbol="createMessageCollector" brackets />. The value to this key should be a function that returns a boolean value to indicate if this message should be collected or not. To check for multiple conditions in your filter you can connect them using [logical operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators). If you don't provide a filter all messages in the channel the collector was started on will be collected.
+You can provide a _`filter`_ key to the object parameter of <DocsLink type="class" parent="TextChannel" symbol="createMessageCollector" brackets />. The value to this key should be a function that returns a boolean value to indicate if this message should be collected or not. To check for multiple conditions in your filter you can connect them using [logical operators](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators). If you don't provide a filter all messages in the channel the collector was started on will be collected.
 
-Note that the above example uses [implicit return](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) for the filter function and passes it to the options object using the [object property shorthand](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions) notation.
+Note that the above example uses [implicit return](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions#function_body) for the filter function and passes it to the options object using the [object property shorthand](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#property_definitions) notation.
 
 If a message passes through the filter, it will trigger the <DocsLink type="class" parent="Collector" symbol="e-collect" /> event for the _`collector`_ you've created. This message is then passed into the event listener as _`collected`_ and the provided function is executed. In the above example, you simply log the message. Once the collector finishes collecting based on the provided end conditions the <DocsLink type="class" parent="Collector" symbol="e-end" /> event emits.
 
@@ -103,7 +103,7 @@ try {
 
 <Alert title="Tip" type="info">
 	If you don't understand how _`.some()`_ works, you can read about it in more detail
-	[here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some).
+	[here](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/some).
 </Alert>
 
 In this filter, you iterate through the answers to find what you want. You would like to ignore the case because simple typos can happen, so you convert each answer to its lowercase form and check if it's equal to the response in lowercase form as well. In the options section, you only want to allow one answer to pass through, hence the _`max: 1`_ setting.
@@ -134,8 +134,8 @@ collector.on('end', (collected) => {
 
 ### Await reactions
 
-<DocsLink type="class" parent="Message" symbol="awaitReactions" brackets /> works almost the same as a reaction collector,
-except it is Promise-based. The same differences apply as with channel collectors.
+<DocsLink type="class" parent="Message" symbol="awaitReactions" brackets /> works almost the same as a reaction
+collector, except it is Promise-based. The same differences apply as with channel collectors.
 
 ```js
 const collectorFilter = (reaction, user) => {

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

@@ -1,6 +1,6 @@
 ---
 title: Formatters
-category: Popular topics
+category: Topics
 ---
 
 # Formatters

apps/guide/src/content/03-topics/05-intents.mdx

@@ -0,0 +1,68 @@
+---
+title: Intents
+category: Topics
+---
+
+# Intents
+
+Intents are an important part of establishing a WebSocket connection, as they define behavior regarding gateway events and impact received data via the REST API.
+
+## Usage
+
+```js
+import { Client, GatewayIntentBits } from 'discord.js';
+
+const client = new Client({
+	intents: [GatewayIntentBits.Guilds],
+});
+```
+
+This is the most basic usage of intents for discord.js. By specifying _`GatewayIntentBits.Guilds`_, your bot will receive gateway events regarding guilds. This includes receiving initial information about guilds it is in at startup, such as role data.
+
+You can find the full list of _`GatewayIntentBits`_ <DiscordAPITypesLink type="enum" parent="GatewayIntentBits">on the documentation</DiscordAPITypesLink> and an explanation of what each intent does [on Discord's API documentation](https://discord.com/developers/docs/topics/gateway#list-of-intents).
+
+## Considerations
+
+In discord.js, some intents require an extra bit of consideration.
+
+### _`GatewayIntentBits.Guilds`_
+
+discord.js relies heavily on caching in the library. We recommend you set at least the _`GatewayIntentBits.Guilds`_ intent to avoid these pitfalls.
+
+### _`GatewayIntentBits.GuildMembers`_
+
+Fetching members in a guild via <DocsLink type="class" parent="GuildMemberManager" symbol="fetch" brackets /> requests them over the gateway. As such, this intent is required and you may receive a timeout error if this intent is not specified.
+
+<Alert title="Info" type="info">
+	This is a privileged intent. Read on for more information.
+</Alert>
+
+### _`GatewayIntentBits.DirectMessages`_
+
+This intent is required to receive direct messages. In discord.js however, you **must** specify partials as well. See the partials topic on how this is done.
+
+### _`GatewayIntentBits.MessageContent`_
+
+Unlike other intents, this only populates user-generated fields. See [Discord's documentation](https://discord.com/developers/docs/topics/gateway#message-content-intent) on what exactly this intent unveils.
+
+It is a common mistake to not see the message content in a message—this is usually because this intent is not specified.
+
+<Alert title="Info" type="info">
+	This is a privileged intent. Read on for more information.
+</Alert>
+
+## Privileged intents
+
+Some gateway events are considered privileged. Currently, these are:
+
+- _`GatewayIntentBits.GuildPresences`_
+- _`GatewayIntentBits.GuildMembers`_
+- _`GatewayIntentBits.MessageContent`_
+
+To use these intents, you will need to enable them in the developer portal. If your bot is in over 75 guilds, you will need to verify it and request usage of your desired intents.
+
+Carefully think if you need these intents. They are opt-in so users across the platform can enjoy a higher level of privacy. Presences can expose some personal information, such as the games being played and overall online time. You might find that it isn't necessary for your bot to have this level of information about all guild members at all times.
+
+### Disallowed intents
+
+Should you receive an error stating you are using disallowed intents, please review your developer dashboard settings for all privileged intents you use. Check the Discord API documentation for up-to-date information.

apps/guide/src/content/03-topics/06-threads.mdx

@@ -1,6 +1,6 @@
 ---
 title: Threads
-category: Popular topics
+category: Topics
 ---
 
 # Threads

apps/guide/src/content/03-topics/07-webhooks.mdx

@@ -1,6 +1,6 @@
 ---
 title: Webhooks
-category: Popular topics
+category: Topics
 ---
 
 # Webhooks

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

@@ -164,7 +164,7 @@ client.on('interactionCreate', (interaction) => {
 
 </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:
+In this piece of code, the Promises are [chain resolved](https://developer.mozilla.org/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>
 

apps/guide/src/content/04-additional-info/02-collections.mdx

@@ -10,10 +10,10 @@ It extends JavaScript's native _`Map`_ class, so it has all the _`Map`_ features
 
 <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.
+	it](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Map) before continuing. You should be
+	familiar with _`Array`_ [methods](https://developer.mozilla.org/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.
@@ -52,7 +52,7 @@ Methods that follow this philosophy of staying close to the _`Array`_ interface
 
 ## 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`_).
+Since _`Collection`_ extends _`Map`_, it is an [iterable](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Iteration_protocols), and can be converted to an _`Array`_ through either _`Array.from()`_ or spread syntax (_`...collection`_).
 
 <CH.Code>
 

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

@@ -158,21 +158,25 @@ Various _`create()`_ and _`edit()`_ methods on managers and objects have had the
 - <DocsLink type="class" parent="Role" symbol="edit" brackets /> now takes _`reason`_ in the _`data`_ parameter
 - <DocsLink type="class" parent="Sticker" symbol="edit" brackets /> now takes _`reason`_ in the _`data`_ parameter
 - <DocsLink type="class" parent="ThreadChannel" symbol="edit" brackets /> now takes _`reason`_ in the _`data`_ parameter
-- <DocsLink type="class" parent="GuildChannelManager" symbol="create" brackets /> now takes _`name`_ in the _`options`_ parameter
+- <DocsLink type="class" parent="GuildChannelManager" symbol="create" brackets /> now takes _`name`_ in the _`options`_
+  parameter
 - <DocsLink type="class" parent="GuildChannelManager" symbol="createWebhook" brackets /> (and other text-based channels)
   now takes _`channel`_ and _`name`_ in the _`options`_ parameter
-- <DocsLink type="class" parent="GuildChannelManager" symbol="edit" brackets /> now takes _`reason`_ as a part of _`data`_
+- <DocsLink type="class" parent="GuildChannelManager" symbol="edit" brackets /> now takes _`reason`_ as a part of
+  _`data`_
 - <DocsLink type="class" parent="GuildEmojiManager" symbol="edit" brackets /> now takes _`reason`_ as a part of _`data`_
 - <DocsLink type="class" parent="GuildManager" symbol="create" brackets /> now takes _`name`_ as a part of _`options`_
-- <DocsLink type="class" parent="GuildMemberManager" symbol="edit" brackets /> now takes _`reason`_ as a part of _`data`_
+- <DocsLink type="class" parent="GuildMemberManager" symbol="edit" brackets /> now takes _`reason`_ as a part of
+  _`data`_
 - <DocsLink type="class" parent="GuildMember" symbol="edit" brackets /> now takes _`reason`_ as a part of _`data`_
-- <DocsLink type="class" parent="GuildStickerManager" symbol="edit" brackets /> now takes _`reason`_ as a part of _`data`_
+- <DocsLink type="class" parent="GuildStickerManager" symbol="edit" brackets /> now takes _`reason`_ as a part of
+  _`data`_
 - <DocsLink type="class" parent="RoleManager" symbol="edit" brackets /> now takes _`reason`_ as a part of _`options`_
 - <DocsLink type="class" parent="Webhook" symbol="edit" brackets /> now takes _`reason`_ as a part of _`options`_
 - <DocsLink type="class" parent="GuildEmojiManager" symbol="create" brackets /> now takes _`attachment`_ and _`name`_ as
   a part of _`options`_
-- <DocsLink type="class" parent="GuildStickerManager" symbol="create" brackets /> now takes _`file`_, _`name`_, and _`tags`_
-  as a part of _`options`_
+- <DocsLink type="class" parent="GuildStickerManager" symbol="create" brackets /> now takes _`file`_, _`name`_, and
+  _`tags`_ as a part of _`options`_
 
 ### Activity
 
@@ -236,9 +240,10 @@ Dynamic URLs use <DocsLink package="rest" type="Interface" parent="ImageURLOptio
 
 ### CategoryChannel
 
-<DocsLink type="class" parent="CategoryChannel" symbol="children" /> is no longer a _`Collection`_ of channels the category
-contains. It is now a <DocsLink type="class" parent="CategoryChannelChildManager" />. This also means
-_`CategoryChannel#createChannel()`_ has been moved to the <DocsLink type="class" parent="CategoryChannelChildManager" />.
+<DocsLink type="class" parent="CategoryChannel" symbol="children" /> is no longer a _`Collection`_ of channels the
+category contains. It is now a <DocsLink type="class" parent="CategoryChannelChildManager" />. This also means
+_`CategoryChannel#createChannel()`_ has been moved to the <DocsLink type="class" parent="CategoryChannelChildManager" />
+.
 
 ### Channel
 
@@ -262,8 +267,8 @@ The _`restWsBridgeTimeout`_ client option has been removed.
 
 ### CommandInteractionOptionResolver
 
-<DocsLink type="class" parent="CommandInteractionOptionResolver" symbol="getMember" brackets /> no longer has a parameter
-for _`required`_.[^1]
+<DocsLink type="class" parent="CommandInteractionOptionResolver" symbol="getMember" brackets /> no longer has a
+parameter for _`required`_.[^1]
 
 ### Constants
 
@@ -357,7 +362,8 @@ The following properties & methods have been moved to the <DocsLink type="class"
 
 ### GuildMember
 
-<DocsLink type="class" parent="GuildMember" symbol="pending" /> is now nullable to account for partial guild members.[^4]
+<DocsLink type="class" parent="GuildMember" symbol="pending" /> is now nullable to account for partial guild
+members.[^4]
 
 ### IntegrationApplication
 
@@ -582,8 +588,8 @@ _`Role.comparePositions()`_ has been removed. Use <DocsLink type="class" parent=
 
 ### Sticker
 
-<DocsLink type="class" parent="Sticker" symbol="tags" /> is now a nullable string (_`string | null`_). Previously, it was
-a nullable array of strings (_`string[] | null`_).[^5]
+<DocsLink type="class" parent="Sticker" symbol="tags" /> is now a nullable string (_`string | null`_). Previously, it
+was a nullable array of strings (_`string[] | null`_).[^5]
 
 ### ThreadChannel
 
@@ -668,8 +674,8 @@ Added support for <DocsLink type="class" parent="BaseChannel" symbol="flags" />.
 
 Store channels have been removed as they are no longer part of the API.
 
-<DocsLink type="class" parent="BaseChannel" symbol="url" /> has been added which is a link to a channel, just like in the
-client.
+<DocsLink type="class" parent="BaseChannel" symbol="url" /> has been added which is a link to a channel, just like in
+the client.
 
 Additionally, new typeguards have been added:
 
@@ -713,13 +719,13 @@ Component collector options now use the <DiscordAPITypesLink type="enum" parent=
 
 ### CommandInteraction
 
-<DocsLink type="class" parent="CommandInteraction" symbol="commandGuildId" /> has been added which is the id of the guild
-the invoked application command is registered to.
+<DocsLink type="class" parent="CommandInteraction" symbol="commandGuildId" /> has been added which is the id of the
+guild the invoked application command is registered to.
 
 ### CommandInteractionOptionResolver
 
-<DocsLink type="class" parent="CommandInteractionOptionResolver" symbol="getChannel" brackets /> now has a third parameter
-which narrows the channel type.
+<DocsLink type="class" parent="CommandInteractionOptionResolver" symbol="getChannel" brackets /> now has a third
+parameter which narrows the channel type.
 
 ### Events
 
@@ -814,9 +820,15 @@ Added the _`threadName`_ property in <DocsLink type="typedef" parent="WebhookMes
 discord.js uses <DocsLink package="ws" /> internally.
 
 [^1]: https://github.com/discordjs/discord.js/pull/7188
+
 [^2]: https://github.com/discordjs/discord.js/pull/6492
+
 [^3]: https://github.com/discordjs/discord.js/pull/7669
+
 [^4]: https://github.com/discordjs/discord.js/issues/6546
+
 [^5]: https://github.com/discordjs/discord.js/pull/8010
+
 [^6]: https://github.com/discordjs/discord.js/issues/7091
+
 [^7]: https://github.com/discord/discord-api-docs/pull/6017

apps/website/.env.development

@@ -1,2 +1 @@
 NEXT_PUBLIC_LOCAL_DEV=true
-METADATA_BASE_URL=http://localhost:3000

apps/website/.gitignore

@@ -28,3 +28,5 @@ src/styles/unocss.css
 lighthouse-results
 
 .vercel
+
+old_src

apps/website/.prettierrc.cjs

@@ -1,2 +1,5 @@
 /** @type {import('prettier').Config} */
-module.exports = require('../../.prettierrc.json');
+module.exports = {
+	...require('../../.prettierrc.json'),
+	plugins: ['prettier-plugin-tailwindcss'],
+};

apps/website/next.config.mjs

@@ -1,23 +1,21 @@
-import bundleAnalyzer from '@next/bundle-analyzer';
-
-const withBundleAnalyzer = bundleAnalyzer({
-	enabled: process.env.ANALYZE === 'true',
-});
-
-export default withBundleAnalyzer({
+/**
+ * @type {import('next').NextConfig}
+ */
+export default {
 	reactStrictMode: true,
-	experimental: {
-		typedRoutes: true,
-		serverComponentsExternalPackages: ['@rushstack/node-core-library', '@discordjs/api-extractor-model', 'jju'],
-	},
 	images: {
 		dangerouslyAllowSVG: true,
 		contentDispositionType: 'attachment',
 		contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
 	},
-	poweredByHeader: false,
-	env: {
-		MAX_FETCH_SIZE: '5',
+	logging: {
+		fetches: {
+			fullUrl: true,
+		},
+	},
+	experimental: {
+		ppr: true,
+		reactCompiler: true,
 	},
 	async redirects() {
 		return [
@@ -33,4 +31,4 @@ export default withBundleAnalyzer({
 			},
 		];
 	},
-});
+};

apps/website/package.json

@@ -6,7 +6,7 @@
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"build:copy_readme": "cpy '../../packages/(discord.js|brokers|builders|collection|core|formatters|next|proxy|rest|util|voice|ws)/README.md' 'src/assets/readme' --rename='home-{{basename}}'",
+		"build:copy_readme": "cpy \"../../packages/(discord.js|brokers|builders|collection|core|formatters|next|proxy|rest|util|voice|ws)/README.md\" \"src/assets/readme\" --rename='home-{{basename}}'",
 		"build:check": "tsc --noEmit",
 		"build:local": "cross-env NEXT_PUBLIC_LOCAL_DEV=true pnpm run build:prod",
 		"build:prod": "pnpm run build:copy_readme && pnpm run build:next",
@@ -45,58 +45,60 @@
 		"url": "https://github.com/discordjs/discord.js/issues"
 	},
 	"homepage": "https://discord.js.org",
+	"funding": "https://github.com/discordjs/discord.js?sponsor",
 	"dependencies": {
-		"@discordjs/api-extractor-model": "workspace:^",
-		"@discordjs/api-extractor-utils": "workspace:^",
-		"@discordjs/scripts": "workspace:^",
-		"@discordjs/ui": "workspace:^",
-		"@microsoft/tsdoc": "^0.14.2",
-		"@microsoft/tsdoc-config": "0.16.2",
+		"@radix-ui/react-collapsible": "^1.0.3",
 		"@react-icons/all-files": "^4.1.0",
-		"@vercel/analytics": "^1.1.1",
-		"@vercel/edge-config": "^0.4.1",
-		"@vercel/og": "^0.5.20",
-		"@vercel/postgres": "^0.5.1",
-		"ariakit": "2.0.0-next.44",
-		"bright": "^0.8.4",
-		"class-variance-authority": "^0.7.0",
-		"cmdk": "^0.2.0",
-		"meilisearch": "^0.35.0",
-		"next": "14.0.3-canary.5",
-		"next-mdx-remote": "^4.4.1",
-		"next-themes": "^0.2.1",
-		"react": "^18.2.0",
-		"react-custom-scrollbars-2": "^4.5.0",
-		"react-dom": "^18.2.0",
-		"react-use": "^17.4.0",
-		"rehype-slug": "^5.1.0",
-		"remark-gfm": "^3.0.1",
-		"sharp": "^0.32.6"
+		"@vercel/analytics": "^1.3.1",
+		"@vercel/edge-config": "^1.1.1",
+		"@vercel/og": "^0.6.2",
+		"@vercel/postgres": "^0.9.0",
+		"cmdk": "^1.0.0",
+		"geist": "^1.3.0",
+		"jotai": "^2.8.2",
+		"lucide-react": "^0.379.0",
+		"meilisearch": "^0.40.0",
+		"next": "^15.0.0-rc.0",
+		"next-mdx-remote-client": "^1.0.3",
+		"next-themes": "^0.3.0",
+		"overlayscrollbars": "^2.8.3",
+		"overlayscrollbars-react": "^0.5.6",
+		"react": "19.0.0-rc-f994737d14-20240522",
+		"react-aria-components": "^1.2.1",
+		"react-dom": "19.0.0-rc-f994737d14-20240522",
+		"sharp": "^0.33.4",
+		"usehooks-ts": "^3.1.0",
+		"vaul": "^0.9.1"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "14.0.3-canary.5",
-		"@testing-library/react": "^14.1.0",
-		"@testing-library/user-event": "^14.5.1",
-		"@types/node": "18.18.8",
-		"@types/react": "^18.2.37",
-		"@types/react-dom": "^18.2.15",
-		"@unocss/eslint-plugin": "^0.57.3",
-		"@unocss/postcss": "^0.57.3",
-		"@unocss/reset": "^0.57.3",
-		"@vitejs/plugin-react": "^4.1.1",
-		"@vitest/coverage-v8": "^0.34.6",
+		"@shikijs/rehype": "^1.6.2",
+		"@tailwindcss/typography": "^0.5.13",
+		"@testing-library/react": "^15.0.7",
+		"@testing-library/user-event": "^14.5.2",
+		"@types/node": "^18.19.45",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@vitejs/plugin-react": "^4.3.0",
+		"@vitest/coverage-v8": "^2.0.5",
+		"autoprefixer": "^10.4.19",
+		"babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
 		"cpy-cli": "^5.0.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.53.0",
-		"eslint-config-neon": "^0.1.57",
-		"eslint-formatter-pretty": "^5.0.0",
-		"happy-dom": "^12.10.3",
-		"postcss": "^8.4.31",
-		"prettier": "^3.1.0",
-		"turbo": "^1.10.17-canary.0",
-		"typescript": "^5.2.2",
-		"vercel": "^32.5.3",
-		"vitest": "^0.34.6"
+		"eslint": "^8.57.0",
+		"eslint-config-neon": "^0.1.62",
+		"eslint-formatter-pretty": "^6.0.1",
+		"happy-dom": "^14.12.0",
+		"postcss": "^8.4.38",
+		"prettier": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.5.14",
+		"remark-gfm": "^4.0.0",
+		"remark-rehype": "^11.1.0",
+		"shiki": "^1.6.2",
+		"tailwindcss": "^3.4.3",
+		"turbo": "^2.0.14",
+		"typescript": "~5.5.4",
+		"vercel": "^37.0.0",
+		"vitest": "^2.0.5"
 	},
 	"engines": {
 		"node": ">=18"

apps/website/postcss.config.cjs

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

apps/website/scripts/generateAllIndices.js

@@ -3,6 +3,9 @@ import { generateAllIndices } from '@discordjs/scripts';
 
 console.log('Generating all indices...');
 await generateAllIndices({
+	fetchPackageVersions: async (pkg) => {
+		return ['main'];
+	},
 	fetchPackageVersionDocs: async (pkg, version) => {
 		console.log(`Fetching data for ${pkg} ${version}...`);
 		return JSON.parse(await readFile(`${process.cwd()}/../../../docs/${pkg}/${version}.api.json`, 'utf8'));

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

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

apps/website/src/app/api/dynamic-open-graph.png/route.tsx

@@ -1,170 +0,0 @@
-/* eslint-disable react/no-unknown-property */
-
-import type { ApiItemKind } from '@discordjs/api-extractor-model';
-import { ImageResponse } from '@vercel/og';
-import type { NextRequest } from 'next/server';
-import { resolvePackageName } from '~/util/resolvePackageName';
-
-export const runtime = 'edge';
-
-const fonts = Promise.all([
-	fetch(new URL('../../../assets/fonts/Inter-Regular.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
-	fetch(new URL('../../../assets/fonts/Inter-Bold.ttf', import.meta.url)).then(async (res) => res.arrayBuffer()),
-]);
-
-function resolveIcon(icon: keyof typeof ApiItemKind, size = 88) {
-	switch (icon) {
-		case 'Class':
-			return (
-				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
-					<path d="M11.34 9.71h.71l2.67-2.67v-.71L13.38 5h-.7l-1.82 1.81h-5V5.56l1.86-1.85V3l-2-2H5L1 5v.71l2 2h.71l1.14-1.15v5.79l.5.5H10v.52l1.33 1.34h.71l2.67-2.67v-.71L13.37 10h-.7l-1.86 1.85h-5v-4H10v.48l1.34 1.38zm1.69-3.65l.63.63-2 2-.63-.63 2-2zm0 5l.63.63-2 2-.63-.63 2-2zM3.35 6.65l-1.29-1.3 3.29-3.29 1.3 1.29-3.3 3.3z" />
-				</svg>
-			);
-		case 'Enum':
-			return (
-				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
-					<path
-						clipRule="evenodd"
-						d="M14 2H8L7 3v3h1V3h6v5h-4v1h4l1-1V3l-1-1zM9 6h4v1H9.41L9 6.59V6zM7 7H2L1 8v5l1 1h6l1-1V8L8 7H7zm1 6H2V8h6v5zM3 9h4v1H3V9zm0 2h4v1H3v-1zm6-7h4v1H9V4z"
-						fillRule="evenodd"
-					/>
-				</svg>
-			);
-		case 'EnumMember':
-			return (
-				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
-					<path
-						clipRule="evenodd"
-						d="M7 3l1-1h6l1 1v5l-1 1h-4V8h4V3H8v3H7V3zm2 6V8L8 7H2L1 8v5l1 1h6l1-1V9zM8 8v5H2V8h6zm1.414-1L9 6.586V6h4v1H9.414zM9 4h4v1H9V4zm-2 6H3v1h4v-1z"
-						fillRule="evenodd"
-					/>
-				</svg>
-			);
-		case 'Interface':
-			return (
-				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
-					<path d="M11.496 4a3.49 3.49 0 0 0-3.46 3h-3.1a2 2 0 1 0 0 1h3.1a3.5 3.5 0 1 0 3.46-4zm0 6a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" />
-				</svg>
-			);
-		case 'TypeAlias':
-			return (
-				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
-					<path d="M14.45 4.5l-5-2.5h-.9l-7 3.5-.55.89v4.5l.55.9 5 2.5h.9l7-3.5.55-.9v-4.5l-.55-.89zm-8 8.64l-4.5-2.25V7.17l4.5 2v3.97zm.5-4.8L2.29 6.23l6.66-3.34 4.67 2.34-6.67 3.11zm7 1.55l-6.5 3.25V9.21l6.5-3v3.68z" />
-				</svg>
-			);
-		case 'Variable':
-			return (
-				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
-					<path
-						clipRule="evenodd"
-						d="M2 5h2V4H1.5l-.5.5v8l.5.5H4v-1H2V5zm12.5-1H12v1h2v7h-2v1h2.5l.5-.5v-8l-.5-.5zm-2.74 2.57L12 7v2.51l-.3.45-4.5 2h-.46l-2.5-1.5-.24-.43v-2.5l.3-.46 4.5-2h.46l2.5 1.5zM5 9.71l1.5.9V9.28L5 8.38v1.33zm.58-2.15l1.45.87 3.39-1.5-1.45-.87-3.39 1.5zm1.95 3.17l3.5-1.56v-1.4l-3.5 1.55v1.41z"
-						fillRule="evenodd"
-					/>
-				</svg>
-			);
-		case 'Property':
-			return (
-				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
-					<path d="M2.807 14.975a1.75 1.75 0 0 1-1.255-.556 1.684 1.684 0 0 1-.544-1.1A1.72 1.72 0 0 1 1.36 12.1c1.208-1.27 3.587-3.65 5.318-5.345a4.257 4.257 0 0 1 .048-3.078 4.095 4.095 0 0 1 1.665-1.969 4.259 4.259 0 0 1 4.04-.36l.617.268-2.866 2.951 1.255 1.259 2.944-2.877.267.619a4.295 4.295 0 0 1 .04 3.311 4.198 4.198 0 0 1-.923 1.392 4.27 4.27 0 0 1-.743.581 4.217 4.217 0 0 1-3.812.446c-1.098 1.112-3.84 3.872-5.32 5.254a1.63 1.63 0 0 1-1.084.423zm7.938-13.047a3.32 3.32 0 0 0-1.849.557c-.213.13-.412.284-.591.458a3.321 3.321 0 0 0-.657 3.733l.135.297-.233.227c-1.738 1.697-4.269 4.22-5.485 5.504a.805.805 0 0 0 .132 1.05.911.911 0 0 0 .298.22c.1.044.209.069.319.072a.694.694 0 0 0 .45-.181c1.573-1.469 4.612-4.539 5.504-5.44l.23-.232.294.135a3.286 3.286 0 0 0 3.225-.254 3.33 3.33 0 0 0 .591-.464 3.28 3.28 0 0 0 .964-2.358c0-.215-.021-.43-.064-.642L11.43 7.125 8.879 4.578l2.515-2.59a3.286 3.286 0 0 0-.65-.06z" />
-				</svg>
-			);
-		default:
-			return (
-				<svg fill="white" height={size} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg">
-					<path d="M13.51 4l-5-3h-1l-5 3-.49.86v6l.49.85 5 3h1l5-3 .49-.85v-6L13.51 4zm-6 9.56l-4.5-2.7V5.7l4.5 2.45v5.41zM3.27 4.7l4.74-2.84 4.74 2.84-4.74 2.59L3.27 4.7zm9.74 6.16l-4.5 2.7V8.15l4.5-2.45v5.16z" />
-				</svg>
-			);
-	}
-}
-
-export async function GET(request: NextRequest) {
-	const fontData = await fonts;
-
-	const { searchParams } = new URL(request.url);
-
-	const hasPkg = searchParams.has('pkg');
-	const hasKind = searchParams.has('kind');
-	const hasName = searchParams.has('name');
-	const hasMethods = searchParams.has('methods');
-	const hasProps = searchParams.has('props');
-	const hasMembers = searchParams.has('members');
-	const pkg = hasPkg ? resolvePackageName(searchParams.get('pkg')!) : '';
-	const kind = hasKind ? searchParams.get('kind')! : 'Method';
-	const name = hasName ? searchParams.get('name')!.slice(0, 100) : 'My default name which is super long to overflow';
-	const methods = hasMethods ? searchParams.get('methods') : '';
-	const props = hasProps ? searchParams.get('props') : '';
-	const members = hasMembers ? searchParams.get('members') : '';
-
-	return new ImageResponse(
-		(
-			<div
-				style={{
-					fontFamily: 'Inter',
-				}}
-				tw="flex flex-row bg-[#181818] h-full w-full p-24"
-			>
-				<div tw="flex flex-col mx-auto h-full text-white">
-					<div tw="flex flex-row text-4xl text-gray-400">{pkg}</div>
-					<div tw="flex flex-col justify-between h-full w-full pt-14">
-						<div tw="flex flex-row items-center max-w-full">
-							<span tw="mr-6">{resolveIcon(kind as keyof typeof ApiItemKind)}</span>
-							<h2
-								style={{
-									textOverflow: 'ellipsis',
-									whiteSpace: 'nowrap',
-									overflow: 'hidden',
-								}}
-								tw="text-[5.5rem] font-bold  w-full"
-							>
-								{name}
-							</h2>
-						</div>
-						<div tw="flex flex-row w-full justify-between">
-							<div tw="flex flex-row">
-								{props ? (
-									<div tw="flex flex-row mr-12">
-										<span tw="mr-4">{resolveIcon('Property', 36)}</span>
-										<div tw="flex flex-col text-4xl">
-											<span tw="mb-4">{props}</span>
-											<span>Properties</span>
-										</div>
-									</div>
-								) : null}
-								{methods ? (
-									<div tw="flex flex-row mr-12">
-										<span tw="mr-4">{resolveIcon('Method', 36)}</span>
-										<div tw="flex flex-col text-4xl">
-											<span tw="mb-4">{methods}</span>
-											<span>Methods</span>
-										</div>
-									</div>
-								) : null}
-								{members ? (
-									<div tw="flex flex-row">
-										<span tw="mr-4">{resolveIcon('EnumMember', 36)}</span>
-										<div tw="flex flex-col text-4xl">
-											<span tw="mb-4">{members}</span>
-											<span>Members</span>
-										</div>
-									</div>
-								) : null}
-							</div>
-							<div tw="flex h-full items-end">
-								<span tw="bg-[#5865f2] text-4xl font-black relative rounded-lg py-4 px-8">discord.js</span>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		),
-		{
-			width: 1_200,
-			height: 630,
-			fonts: [
-				{ name: 'Inter', data: fontData[0], weight: 500, style: 'normal' },
-				{ name: 'Inter', data: fontData[1], weight: 700, style: 'normal' },
-			],
-			debug: false,
-		},
-	);
-}

apps/website/src/app/api/open-graph.png/route.tsx

@@ -1,43 +0,0 @@
-/* eslint-disable react/no-unknown-property */
-
-import { ImageResponse } from '@vercel/og';
-
-export const runtime = 'edge';
-
-const fonts = fetch(new URL('../../../assets/fonts/Inter-Black.ttf', import.meta.url)).then(async (res) =>
-	res.arrayBuffer(),
-);
-
-export async function GET() {
-	const fontData = await fonts;
-
-	return new ImageResponse(
-		(
-			<div
-				style={{
-					fontFamily: 'Inter',
-				}}
-				tw="flex flex-row bg-[#181818] h-full w-full"
-			>
-				<div tw="mx-auto flex flex-row items-center h-full">
-					<div tw="flex flex-row">
-						<div tw="flex flex-row">
-							<div tw="flex flex-col font-black text-[5.5rem] text-white">
-								<div tw="flex flex-row">
-									The <span tw="bg-[#5865f2] rounded-lg py-1 px-6 ml-4">most popular</span>
-								</div>
-								<span>way to build Discord</span>
-								<span>bots.</span>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		),
-		{
-			width: 1_200,
-			height: 630,
-			fonts: [{ name: 'Inter', data: fontData, weight: 900, style: 'normal' }],
-		},
-	);
-}

apps/website/src/app/docAPI.ts

@@ -1,52 +0,0 @@
-import { readFile } from 'node:fs/promises';
-import { join } from 'node:path';
-import { sql } from '@vercel/postgres';
-
-export const fetchVersions = async (packageName: string): Promise<string[]> => {
-	if (process.env.NEXT_PUBLIC_LOCAL_DEV === 'true' || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
-		return ['main'];
-	}
-
-	try {
-		const { rows } = await sql`select version from documentation where name = ${packageName} order by version desc`;
-
-		return rows.map((row) => row.version);
-	} catch {
-		return [];
-	}
-};
-
-export const fetchModelJSON = async (packageName: string, version: string) => {
-	if (process.env.NEXT_PUBLIC_LOCAL_DEV === 'true') {
-		try {
-			const res = await readFile(
-				join(process.cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'),
-				'utf8',
-			);
-
-			return JSON.parse(res);
-		} catch {
-			return null;
-		}
-	}
-
-	if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
-		try {
-			const { rows } = await sql`select url from documentation where name = ${packageName} and version = ${'main'}`;
-			const res = await fetch(rows[0]?.url ?? '');
-
-			return await res.json();
-		} catch {
-			return null;
-		}
-	}
-
-	try {
-		const { rows } = await sql`select url from documentation where name = ${packageName} and version = ${version}`;
-		const res = await fetch(rows[0]?.url ?? '');
-
-		return await res.json();
-	} catch {
-		return null;
-	}
-};

apps/website/src/app/docs/packages/[packageName]/[version]/[item]/opengraph-image.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable react/no-unknown-property */
+
+import { ImageResponse } from 'next/og';
+import { resolveKind } from '~/util/resolveNodeKind';
+
+export const runtime = 'edge';
+
+export const size = {
+	width: 1_200,
+	height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image({
+	params,
+}: {
+	readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
+}) {
+	const normalizeItem = params.item.split(encodeURIComponent(':')).join('.').toLowerCase();
+
+	const isMainVersion = params.version === 'main';
+	const fileContent = await fetch(
+		`${process.env.BLOB_STORAGE_URL}/rewrite/${params.packageName}/${params.version}.${normalizeItem}.api.json`,
+		{ next: isMainVersion ? { revalidate: 0 } : { revalidate: 604_800 } },
+	);
+	const node = await fileContent.json();
+
+	return new ImageResponse(
+		(
+			<div tw="flex bg-[#121212] h-full w-full p-14">
+				<div tw="flex flex-col mx-auto h-full text-white">
+					<div tw="flex text-4xl text-gray-400">{params.packageName}</div>
+					<div tw="flex flex-col justify-between h-full w-full pt-14">
+						<div tw="flex items-center max-w-full">
+							<span tw="mr-6">{resolveKind(node.kind, 94)}</span>
+							<h2
+								style={{
+									textOverflow: 'ellipsis',
+									whiteSpace: 'nowrap',
+									overflow: 'hidden',
+								}}
+								tw="text-[5.5rem] font-bold  w-full"
+							>
+								{node.displayName}
+							</h2>
+						</div>
+						<div tw="flex flex-row w-full justify-between">
+							<div tw="flex flex-row">
+								{node.members?.properties?.length ? (
+									<div tw="flex mr-12">
+										<span tw="mr-4">{resolveKind('Property', 42)}</span>
+										<div tw="flex flex-col text-4xl">
+											<span tw="mb-4">{node.members.properties.length}</span>
+											<span>Properties</span>
+										</div>
+									</div>
+								) : null}
+								{node.members?.events?.length ? (
+									<div tw="flex mr-12">
+										<span tw="mr-4">{resolveKind('Method', 42)}</span>
+										<div tw="flex flex-col text-4xl">
+											<span tw="mb-4">{node.members.events.length}</span>
+											<span>Events</span>
+										</div>
+									</div>
+								) : null}
+								{node.members?.methods?.length ? (
+									<div tw="flex mr-12">
+										<span tw="mr-4">{resolveKind('Method', 42)}</span>
+										<div tw="flex flex-col text-4xl">
+											<span tw="mb-4">{node.members.methods.length}</span>
+											<span>Methods</span>
+										</div>
+									</div>
+								) : null}
+								{node.members?.length ? (
+									<div tw="flex">
+										<span tw="mr-4">{resolveKind('EnumMember', 42)}</span>
+										<div tw="flex flex-col text-4xl">
+											<span tw="mb-4">{node.members.length}</span>
+											<span>Members</span>
+										</div>
+									</div>
+								) : null}
+							</div>
+							<div tw="flex h-full items-end">
+								<span tw="bg-[#5865f2] text-4xl font-black relative rounded-lg py-4 px-8">discord.js</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		),
+		{
+			...size,
+		},
+	);
+}

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

@@ -0,0 +1,38 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { DocItem } from '~/components/DocItem';
+import { fetchNode } from '~/util/fetchNode';
+
+export async function generateMetadata({
+	params,
+}: {
+	readonly params: {
+		readonly item: string;
+		readonly packageName: string;
+		readonly version: string;
+	};
+}): Promise<Metadata> {
+	const normalizeItem = params.item.split(encodeURIComponent(':'))[0];
+
+	return {
+		title: `${normalizeItem} (${params.packageName} - ${params.version})`,
+	};
+}
+
+export default async function Page({
+	params,
+}: {
+	readonly params: { readonly item: string; readonly packageName: string; readonly version: string };
+}) {
+	const node = await fetchNode({ item: params.item, packageName: params.packageName, version: params.version });
+
+	if (!node) {
+		notFound();
+	}
+
+	return (
+		<main className="flex w-full flex-col gap-8 pb-12 md:pb-0">
+			<DocItem node={node} packageName={params.packageName} version={params.version} />
+		</main>
+	);
+}

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

@@ -0,0 +1,69 @@
+import type { Metadata } from 'next';
+import dynamic from 'next/dynamic';
+import type { PropsWithChildren } from 'react';
+import { Navigation } from '~/components/Navigation';
+import { OverlayScrollbarsComponent } from '~/components/OverlayScrollbars';
+import { Drawer } from '~/components/ui/Drawer';
+import { Footer } from '~/components/ui/Footer';
+import { fetchDependencies } from '~/util/fetchDependencies';
+
+// eslint-disable-next-line promise/prefer-await-to-then
+const CmdK = dynamic(async () => import('~/components/ui/CmdK').then((mod) => mod.CmdK), { ssr: false });
+
+export async function generateMetadata({
+	params,
+}: {
+	readonly params: { readonly packageName: string; readonly version: string };
+}): Promise<Metadata> {
+	return {
+		title: {
+			template: '%s | discord.js',
+			default: `${params.packageName} (${params.version})`,
+		},
+	};
+}
+
+export default async function Layout({
+	params,
+	children,
+}: PropsWithChildren<{ readonly params: { readonly packageName: string; readonly version: string } }>) {
+	const dependencies = await fetchDependencies({ packageName: params.packageName, version: params.version });
+
+	return (
+		// eslint-disable-next-line react/no-unknown-property
+		<div vaul-drawer-wrapper="" className="mx-auto flex max-w-screen-2xl flex-col gap-12 p-6 md:flex-row">
+			<div className="sticky top-6 hidden flex-shrink-0 self-start md:block">
+				<OverlayScrollbarsComponent
+					className="max-h-[calc(100dvh-48px)]"
+					defer
+					options={{
+						overflow: { x: 'hidden' },
+						scrollbars: {
+							autoHide: 'scroll',
+							autoHideDelay: 500,
+							autoHideSuspend: true,
+							clickScroll: true,
+						},
+					}}
+				>
+					<Navigation className="pr-4" packageName={params.packageName} version={params.version} />
+				</OverlayScrollbarsComponent>
+			</div>
+			<div className="pb-12">
+				{children}
+				<Footer />
+			</div>
+			<div className="fixed bottom-0 left-0 right-0 md:hidden">
+				<Drawer>
+					<Navigation
+						className="max-w-none overflow-auto p-0 lg:max-w-none"
+						packageName={params.packageName}
+						version={params.version}
+						drawer
+					/>
+				</Drawer>
+			</div>
+			<CmdK dependencies={dependencies} />
+		</div>
+	);
+}

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

@@ -0,0 +1,49 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
+import { MDXRemote } from 'next-mdx-remote-client/rsc';
+import remarkGfm from 'remark-gfm';
+import { getHighlighterCore } from 'shiki/core';
+import getWasm from 'shiki/wasm';
+
+const highlighter = await getHighlighterCore({
+	themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark-dimmed.mjs')],
+	langs: [
+		import('shiki/langs/typescript.mjs'),
+		import('shiki/langs/javascript.mjs'),
+		import('shiki/langs/shellscript.mjs'),
+	],
+	loadWasm: getWasm,
+});
+
+export default async function Page({ params }: { readonly params: { readonly packageName: string } }) {
+	const fileContent = await readFile(
+		join(process.cwd(), `src/assets/readme/${params.packageName}/home-README.md`),
+		'utf8',
+	);
+
+	return (
+		<div className="prose prose-neutral mx-auto max-w-screen-xl dark:prose-invert">
+			<MDXRemote
+				options={{
+					mdxOptions: {
+						remarkPlugins: [remarkGfm],
+						rehypePlugins: [
+							[
+								rehypeShikiFromHighlighter,
+								highlighter,
+								{
+									themes: {
+										light: 'github-light',
+										dark: 'github-dark-dimmed',
+									},
+								},
+							],
+						],
+					},
+				}}
+				source={fileContent}
+			/>
+		</div>
+	);
+}

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

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

apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx

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

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

@@ -1,179 +0,0 @@
-import type {
-	ApiClass,
-	ApiDeclaredItem,
-	ApiEnum,
-	ApiInterface,
-	ApiItem,
-	ApiItemContainerMixin,
-	ApiMethod,
-	ApiMethodSignature,
-	ApiProperty,
-	ApiPropertySignature,
-	ApiTypeAlias,
-	ApiVariable,
-	ApiFunction,
-} from '@discordjs/api-extractor-model';
-import { ApiItemKind, ApiModel } from '@discordjs/api-extractor-model';
-import { tryResolveSummaryText } from '@discordjs/scripts';
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import { fetchModelJSON } from '~/app/docAPI';
-import { Class } from '~/components/model/Class';
-import { Interface } from '~/components/model/Interface';
-import { TypeAlias } from '~/components/model/TypeAlias';
-import { Variable } from '~/components/model/Variable';
-import { Enum } from '~/components/model/enum/Enum';
-import { Function } from '~/components/model/function/Function';
-import { addPackageToModel } from '~/util/addPackageToModel';
-import { OVERLOAD_SEPARATOR } from '~/util/constants';
-import { fetchMember } from '~/util/fetchMember';
-import { findMember } from '~/util/model';
-
-export const revalidate = 3_600;
-
-export interface ItemRouteParams {
-	item: string;
-	package: string;
-	version: string;
-}
-
-async function fetchHeadMember({ package: packageName, version, item }: ItemRouteParams) {
-	const modelJSON = await fetchModelJSON(packageName, version);
-
-	if (!modelJSON) {
-		return undefined;
-	}
-
-	const model = addPackageToModel(new ApiModel(), modelJSON);
-	const pkg = model.tryGetPackageByName(packageName);
-	const entry = pkg?.entryPoints[0];
-
-	if (!entry) {
-		return undefined;
-	}
-
-	const [memberName] = decodeURIComponent(item).split(OVERLOAD_SEPARATOR);
-	return findMember(model, packageName, memberName);
-}
-
-function resolveMemberSearchParams(packageName: string, member?: ApiItem) {
-	const params = new URLSearchParams({
-		pkg: packageName,
-		kind: member?.kind ?? '',
-		name: member?.displayName ?? '',
-	});
-
-	switch (member?.kind) {
-		case ApiItemKind.Interface:
-		case ApiItemKind.Class: {
-			const typedMember = member as ApiItemContainerMixin;
-
-			const properties = typedMember.members.filter((member) =>
-				[ApiItemKind.Property, ApiItemKind.PropertySignature].includes(member.kind),
-			) as (ApiProperty | ApiPropertySignature)[];
-			const methods = typedMember.members.filter((member) =>
-				[ApiItemKind.Method, ApiItemKind.Method].includes(member.kind),
-			) as (ApiMethod | ApiMethodSignature)[];
-
-			params.append('methods', methods.length.toString());
-			params.append('props', properties.length.toString());
-			break;
-		}
-
-		case ApiItemKind.Enum: {
-			const typedMember = member as ApiEnum;
-			params.append('members', typedMember.members.length.toString());
-			break;
-		}
-
-		default:
-			break;
-	}
-
-	return params;
-}
-
-export async function generateMetadata({ params }: { params: ItemRouteParams }) {
-	const member = await fetchHeadMember(params);
-	const name = `discord.js${member?.displayName ? ` | ${member.displayName}` : ''}`;
-	const ogTitle = `${params.package ?? 'discord.js'}${member?.displayName ? ` | ${member.displayName}` : ''}`;
-	const url = new URL('https://discordjs.dev/api/dynamic-open-graph.png');
-	const searchParams = resolveMemberSearchParams(params.package, member);
-	url.search = searchParams.toString();
-	const ogImage = url.toString();
-	let description;
-
-	if (member) {
-		description = tryResolveSummaryText(member as ApiDeclaredItem);
-	}
-
-	return {
-		title: name,
-		description: description ?? 'Discord.js API Documentation',
-		openGraph: {
-			title: ogTitle,
-			description: description ?? 'Discord.js API Documentation',
-			images: ogImage,
-		},
-	} satisfies Metadata;
-}
-
-export async function generateStaticParams({ params: { package: packageName, version } }: { params: ItemRouteParams }) {
-	if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
-		return [];
-	}
-
-	const modelJSON = await fetchModelJSON(packageName, version);
-
-	if (!modelJSON) {
-		return [];
-	}
-
-	const model = addPackageToModel(new ApiModel(), modelJSON);
-
-	const pkg = model.tryGetPackageByName(packageName);
-	const entry = pkg?.entryPoints[0];
-
-	if (!entry) {
-		return [];
-	}
-
-	return entry.members.map((member: ApiItem) => ({
-		package: packageName,
-		version,
-		item: `${member.displayName}${OVERLOAD_SEPARATOR}${member.kind}`,
-	}));
-}
-
-function Member({ member }: { readonly member?: ApiItem }) {
-	switch (member?.kind) {
-		case 'Class':
-			return <Class clazz={member as ApiClass} />;
-		case 'Function':
-			return <Function item={member as ApiFunction} />;
-		case 'Interface':
-			return <Interface item={member as ApiInterface} />;
-		case 'TypeAlias':
-			return <TypeAlias item={member as ApiTypeAlias} />;
-		case 'Variable':
-			return <Variable item={member as ApiVariable} />;
-		case 'Enum':
-			return <Enum item={member as ApiEnum} />;
-		default:
-			return <div>Cannot render that item type</div>;
-	}
-}
-
-export default async function Page({ params }: { params: ItemRouteParams }) {
-	const member = await fetchMember(params.package, params.version ?? 'main', params.item);
-
-	if (!member) {
-		notFound();
-	}
-
-	return (
-		<div className="relative">
-			<Member member={member} />
-		</div>
-	);
-}

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

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

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

@@ -1,104 +0,0 @@
-import type { ApiFunction, ApiItem } from '@discordjs/api-extractor-model';
-import { ApiModel } from '@discordjs/api-extractor-model';
-import dynamic from 'next/dynamic';
-import { notFound } from 'next/navigation';
-import type { PropsWithChildren } from 'react';
-import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
-import { CmdKDialog } from '~/components/CmdK';
-import { Nav } from '~/components/Nav';
-import { Outline } from '~/components/Outline';
-import type { SidebarSectionItemData } from '~/components/Sidebar';
-import { resolveItemURI } from '~/components/documentation/util';
-import { addPackageToModel } from '~/util/addPackageToModel';
-import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
-import { Providers } from './providers';
-
-export const revalidate = 3_600;
-
-const Header = dynamic(async () => import('~/components/Header'));
-const Footer = dynamic(async () => import('~/components/Footer'));
-
-interface VersionRouteParams {
-	package: string;
-	version: string;
-}
-
-export const generateStaticParams = async () => {
-	if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
-		return [];
-	}
-
-	const params: VersionRouteParams[] = [];
-
-	await Promise.all(
-		PACKAGES.map(async (packageName) => {
-			const versions = (await fetchVersions(packageName)).slice(1, N_RECENT_VERSIONS);
-
-			params.push(...versions.map((version) => ({ package: packageName, version })));
-		}),
-	);
-
-	return params;
-};
-
-const serializeIntoSidebarItemData = (item: ApiItem) => {
-	return {
-		kind: item.kind,
-		name: item.displayName,
-		href: resolveItemURI(item),
-		overloadIndex: 'overloadIndex' in item ? (item.overloadIndex as number) : undefined,
-	} as SidebarSectionItemData;
-};
-
-export default async function PackageLayout({ children, params }: PropsWithChildren<{ params: VersionRouteParams }>) {
-	const modelJSON = await fetchModelJSON(params.package, params.version);
-
-	if (!modelJSON) {
-		notFound();
-	}
-
-	const model = addPackageToModel(new ApiModel(), modelJSON);
-
-	const pkg = model.tryGetPackageByName(params.package);
-
-	if (!pkg) {
-		notFound();
-	}
-
-	const entry = pkg.entryPoints[0];
-
-	if (!entry) {
-		notFound();
-	}
-
-	const members = entry.members.filter((member) => {
-		if (member.kind !== 'Function') {
-			return true;
-		}
-
-		return (member as ApiFunction).overloadIndex === 1;
-	});
-
-	const versions = await fetchVersions(params.package);
-
-	return (
-		<Providers>
-			<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
-				<Header />
-				<div className="relative top-6.5 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
-					<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
-						<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} versions={versions} />
-					</div>
-
-					<div className="relative top-4.5 mx-auto max-w-5xl min-w-xs w-full pb-10">
-						{children}
-						<Footer />
-					</div>
-
-					<Outline />
-				</div>
-			</main>
-			<CmdKDialog />
-		</Providers>
-	);
-}

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

@@ -1,34 +0,0 @@
-import { readFile } from 'node:fs/promises';
-import { join } from 'node:path';
-import { compileMDX } from 'next-mdx-remote/rsc';
-import { cache } from 'react';
-import rehypeSlug from 'rehype-slug';
-import remarkGfm from 'remark-gfm';
-import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
-
-interface VersionRouteParams {
-	package: string;
-	version: string;
-}
-
-const loadREADME = cache(async (packageName: string) => {
-	return readFile(join(process.cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
-});
-
-export default async function Page({ params }: { params: VersionRouteParams }) {
-	const readmeSource = await loadREADME(params.package);
-	const { content } = await compileMDX({
-		source: readmeSource,
-		// @ts-expect-error SyntaxHighlighter is assignable
-		components: { pre: SyntaxHighlighter },
-		options: {
-			mdxOptions: {
-				remarkPlugins: [remarkGfm],
-				rehypePlugins: [rehypeSlug],
-				format: 'mdx',
-			},
-		},
-	});
-
-	return <div className="relative top-4 max-w-none prose">{content}</div>;
-}

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

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

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

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

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

@@ -1,44 +0,0 @@
-import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
-import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
-import { VscVersions } from '@react-icons/all-files/vsc/VscVersions';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-import { fetchVersions } from '~/app/docAPI';
-import { buttonVariants } from '~/styles/Button';
-import { PACKAGES } from '~/util/constants';
-
-export const revalidate = 3_600;
-
-export default async function Page({ params }: { params: { package: string } }) {
-	if (!PACKAGES.includes(params.package)) {
-		notFound();
-	}
-
-	const data = await fetchVersions(params.package);
-
-	return (
-		<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
-			<h1 className="text-2xl font-semibold">Select a version:</h1>
-			<div className="flex flex-col gap-4">
-				{data.map((version, idx) => (
-					<Link
-						className={buttonVariants({ variant: 'secondary' })}
-						href={`/docs/packages/${params.package}/${version}`}
-						key={`${version}-${idx}`}
-					>
-						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex flex-row place-content-between place-items-center gap-4">
-								<VscVersions size={25} />
-								<h2 className="font-semibold">{version}</h2>
-							</div>
-							<VscArrowRight size={20} />
-						</div>
-					</Link>
-				)) ?? null}
-			</div>
-			<Link className={buttonVariants({ className: 'place-self-center' })} href="/docs/packages">
-				<VscArrowLeft size={20} /> Go back
-			</Link>
-		</div>
-	);
-}

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

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

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

@@ -1,44 +0,0 @@
-import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
-import { VscArrowLeft } from '@react-icons/all-files/vsc/VscArrowLeft';
-import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
-import { VscPackage } from '@react-icons/all-files/vsc/VscPackage';
-import Link from 'next/link';
-import { buttonVariants } from '~/styles/Button';
-import { PACKAGES } from '~/util/constants';
-
-export default function Page() {
-	return (
-		<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
-			<h1 className="text-2xl font-semibold">Select a package:</h1>
-			<div className="flex flex-col gap-4">
-				{PACKAGES.map((pkg, idx) => (
-					<Link
-						className={buttonVariants({ variant: 'secondary' })}
-						href={`/docs/packages/${pkg}`}
-						key={`${pkg}-${idx}`}
-					>
-						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex flex-row place-content-between place-items-center gap-4">
-								<VscPackage size={25} />
-								<h2 className="font-semibold">{pkg}</h2>
-							</div>
-							<VscArrowRight size={20} />
-						</div>
-					</Link>
-				))}
-				<a className={buttonVariants({ variant: 'secondary' })} href="https://discord-api-types.dev/">
-					<div className="flex grow flex-row place-content-between place-items-center gap-4">
-						<div className="flex flex-row place-content-between place-items-center gap-4">
-							<VscPackage size={25} />
-							<h2 className="font-semibold">discord-api-types</h2>
-						</div>
-						<FiExternalLink size={20} />
-					</div>
-				</a>
-			</div>
-			<Link className={buttonVariants({ className: 'place-self-center' })} href="/">
-				<VscArrowLeft size={20} /> Go back
-			</Link>
-		</div>
-	);
-}

apps/website/src/app/error.tsx

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

apps/website/src/app/layout.tsx

@@ -1,26 +1,30 @@
 import { Analytics } from '@vercel/analytics/react';
+import { GeistMono } from 'geist/font/mono';
+import { GeistSans } from 'geist/font/sans';
 import type { Metadata, Viewport } from 'next';
 import type { PropsWithChildren } from 'react';
+import { LocalizedStringProvider } from 'react-aria-components/i18n';
 import { DESCRIPTION } from '~/util/constants';
-import { inter, jetBrainsMono } from '~/util/fonts';
+import { ENV } from '~/util/env';
 import { Providers } from './providers';
 
-import '~/styles/cmdk.css';
 import '~/styles/main.css';
+import 'overlayscrollbars/overlayscrollbars.css';
 
 export const viewport: Viewport = {
 	themeColor: [
-		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
-		{ media: '(prefers-color-scheme: dark)', color: '#1c1c1e' },
+		{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
+		{ media: '(prefers-color-scheme: dark)', color: '#121212' },
 	],
 	colorScheme: 'light dark',
 };
 
 export const metadata: Metadata = {
-	metadataBase: new URL(
-		process.env.METADATA_BASE_URL ? process.env.METADATA_BASE_URL : `http://localhost:${process.env.PORT ?? 3_000}`,
-	),
-	title: 'discord.js',
+	metadataBase: new URL(ENV.IS_LOCAL_DEV ? `http://localhost:${ENV.PORT}` : 'https://discord.js.org'),
+	title: {
+		template: '%s | discord.js',
+		default: 'discord.js',
+	},
 	description: DESCRIPTION,
 	icons: {
 		other: [
@@ -66,15 +70,28 @@ export const metadata: Metadata = {
 	},
 
 	other: {
-		'msapplication-TileColor': '#1c1c1e',
+		'msapplication-TileColor': '#121212',
 	},
 };
 
-export default function RootLayout({ children }: PropsWithChildren) {
+export default async function RootLayout({ children }: PropsWithChildren) {
 	return (
-		<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
-			<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
-				<Providers>{children}</Providers>
+		<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} antialiased`} suppressHydrationWarning>
+			<body className="relative bg-white dark:bg-[#121212]">
+				<LocalizedStringProvider locale="en-US" />
+				<Providers>
+					{ENV.IS_LOCAL_DEV ? (
+						<div className="fixed left-1/2 top-2 z-10 flex -translate-x-1/2 place-content-center place-items-center rounded-md border border-red-400/35 bg-red-500/65 p-2 px-4 text-center text-base text-white shadow-md backdrop-blur">
+							Local test environment
+						</div>
+					) : null}
+					{ENV.IS_PREVIEW ? (
+						<div className="fixed left-1/2 top-2 z-10 flex -translate-x-1/2 place-content-center place-items-center rounded-md border border-red-400/35 bg-red-500/65 p-2 px-4 text-center text-base text-white shadow-md backdrop-blur">
+							Preview environment
+						</div>
+					) : null}
+					{children}
+				</Providers>
 				<Analytics />
 			</body>
 		</html>

apps/website/src/app/loading.tsx

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

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

@@ -1,14 +1,13 @@
-import type { Route } from 'next';
 import Link from 'next/link';
 
 export default function NotFound() {
 	return (
-		<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
+		<div className="mx-auto flex min-h-[calc(100vh_-_100px)] 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="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
-				href={'/docs' as Route}
+				className="inline-flex rounded-md border border-transparent bg-blurple px-6 py-2 font-medium text-white"
+				href="/docs"
 			>
 				Take me back
 			</Link>

apps/website/src/app/opengraph-image.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/no-unknown-property */
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const size = {
+	width: 1_200,
+	height: 630,
+};
+
+export const contentType = 'image/png';
+
+export default async function Image() {
+	return new ImageResponse(
+		(
+			<div tw="flex bg-[#121212] h-full w-full">
+				<div tw="mx-auto flex items-center h-full">
+					<div tw="flex">
+						<div tw="flex">
+							<div tw="flex flex-col font-black text-[5.5rem] text-white">
+								<div tw="flex flex-row">
+									The <span tw="bg-[#5865f2] rounded-lg py-1 px-6 ml-4">most popular</span>
+								</div>
+								<span>way to build Discord</span>
+								<span>bots.</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		),
+		{
+			...size,
+		},
+	);
+}

apps/website/src/app/page.tsx

@@ -1,83 +1,81 @@
-import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
-import type { Route } from 'next';
+import { ExternalLink } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import vercelLogo from '~/assets/powered-by-vercel.svg';
 import workersLogo from '~/assets/powered-by-workers.png';
-import { InstallButton } from '~/components/InstallButton';
-import { buttonVariants } from '~/styles/Button';
+import { InstallButton } from '~/components/ui/InstallButton';
 import { DESCRIPTION } from '~/util/constants';
 
-export default function Page() {
+export default async function Page() {
 	return (
-		<div className="min-h-screen">
-			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-24 px-8 pb-16 pt-12 lg:min-h-[calc(100vh_-_40px)] lg:place-content-center lg:py-10">
-				<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
-					<div className="flex flex-col place-items-center gap-10 text-center">
-						<h1 className="text-3xl font-black leading-tight sm:text-7xl sm:leading-tight">
-							The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
-							Discord bots.
-						</h1>
-						<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p>
-						<div className="flex flex-wrap place-content-center gap-4 md:flex-row">
-							<Link className={buttonVariants()} href={'/docs' as Route}>
-								Docs
-							</Link>
-							<a
-								className={buttonVariants({ variant: 'secondary' })}
-								href="https://discordjs.guide"
-								rel="noopener noreferrer"
-								target="_blank"
-							>
-								Guide <FiExternalLink />
-							</a>
-							<a
-								className={buttonVariants({ variant: 'secondary' })}
-								href="https://github.com/discordjs/discord.js"
-								rel="external noopener noreferrer"
-								target="_blank"
-							>
-								GitHub <FiExternalLink />
-							</a>
-						</div>
-						<InstallButton />
-					</div>
-				</div>
-				<div className="flex flex-col gap-4 md:flex-row">
-					<a
-						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
-						rel="external noopener noreferrer"
-						target="_blank"
-						title="Vercel"
+		<div className="mx-auto flex min-h-screen w-full max-w-screen-lg flex-col place-content-center place-items-center gap-24 px-8 pb-16 pt-12">
+			<div className="flex flex-col gap-10 text-center">
+				<h1 className="z-10 text-3xl font-black leading-tight sm:text-7xl sm:leading-tight">
+					The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
+					Discord bots.
+				</h1>
+				<p className="z-10 leading-normal text-neutral-700 dark:text-neutral-300 md:my-6">{DESCRIPTION}</p>
+
+				<div className="flex flex-wrap place-content-center gap-4 sm:flex-wrap md:flex-row">
+					<Link
+						className="inline-flex rounded-md border border-transparent bg-blurple px-6 py-2 font-medium text-white"
+						href="/docs"
 					>
-						<Image
-							alt="Vercel"
-							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-							height={44}
-							placeholder="blur"
-							priority
-							src={vercelLogo}
-							width={212}
-						/>
+						Docs
+					</Link>
+					<a
+						className="inline-flex gap-2 rounded-md border border-neutral-300 bg-white px-6 py-2 font-medium hover:bg-neutral-200 dark:border-neutral-700 dark:bg-transparent dark:hover:bg-neutral-800"
+						href="https://discordjs.guide"
+						rel="noopener noreferrer"
+						target="_blank"
+					>
+						Guide <ExternalLink aria-hidden size={20} />
 					</a>
 					<a
-						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-						href="https://www.cloudflare.com"
+						className="inline-flex gap-2 rounded-md border border-neutral-300 bg-white px-6 py-2 font-medium hover:bg-neutral-200 dark:border-neutral-700 dark:bg-transparent dark:hover:bg-neutral-800"
+						href="https://github.com/discordjs/discord.js"
 						rel="external noopener noreferrer"
 						target="_blank"
-						title="Cloudflare Workers"
 					>
-						<Image
-							alt="Cloudflare"
-							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-							height={44}
-							placeholder="blur"
-							priority
-							src={workersLogo}
-						/>
+						GitHub <ExternalLink aria-hidden size={20} />
 					</a>
 				</div>
+
+				<InstallButton className="place-self-center" />
+			</div>
+
+			<div className="flex flex-col gap-4 md:flex-row">
+				<a
+					href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
+					rel="external noopener noreferrer"
+					target="_blank"
+					title="Vercel"
+				>
+					<Image
+						alt="Vercel"
+						blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+						height={44}
+						placeholder="blur"
+						priority
+						src={vercelLogo}
+						width={212}
+					/>
+				</a>
+				<a
+					href="https://www.cloudflare.com"
+					rel="external noopener noreferrer"
+					target="_blank"
+					title="Cloudflare Workers"
+				>
+					<Image
+						alt="Cloudflare"
+						blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
+						height={44}
+						placeholder="blur"
+						priority
+						src={workersLogo}
+					/>
+				</a>
 			</div>
 		</div>
 	);

apps/website/src/app/providers.tsx

@@ -1,13 +1,24 @@
 'use client';
 
+import { Provider as JotaiProvider } from 'jotai';
+import { useRouter } from 'next/navigation';
 import { ThemeProvider } from 'next-themes';
 import type { PropsWithChildren } from 'react';
+import { RouterProvider } from 'react-aria-components';
 import { useSystemThemeFallback } from '~/hooks/useSystemThemeFallback';
 import { useUnregisterServiceWorker } from '~/hooks/useUnregisterServiceWorker';
 
 export function Providers({ children }: PropsWithChildren) {
+	const router = useRouter();
 	useUnregisterServiceWorker();
 	useSystemThemeFallback();
 
-	return <ThemeProvider attribute="class">{children}</ThemeProvider>;
+	return (
+		// eslint-disable-next-line @typescript-eslint/unbound-method
+		<RouterProvider navigate={router.push}>
+			<JotaiProvider>
+				<ThemeProvider attribute="class">{children}</ThemeProvider>
+			</JotaiProvider>
+		</RouterProvider>
+	);
 }

apps/website/src/components/Anchor.tsx

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

apps/website/src/components/Badges.tsx

@@ -1,42 +1,38 @@
-import type { ApiDocumentedItem } from '@discordjs/api-extractor-model';
-import { ApiAbstractMixin, ApiProtectedMixin, ApiReadonlyMixin, ApiStaticMixin } from '@discordjs/api-extractor-model';
+import { AlertTriangle } from 'lucide-react';
 import type { PropsWithChildren } from 'react';
 
-export enum BadgeColor {
-	Danger = 'bg-red-500',
-	Primary = 'bg-blurple',
-	Warning = 'bg-yellow-500',
-}
-
-export function Badge({
-	children,
-	color = BadgeColor.Primary,
-}: PropsWithChildren<{ readonly color?: BadgeColor | undefined }>) {
+export function Badge({ children, className = '' }: PropsWithChildren<{ readonly className?: string }>) {
 	return (
 		<span
-			className={`h-5 flex flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white ${color}`}
+			className={`inline-flex place-items-center gap-1 rounded-full px-2 py-1 font-sans text-sm font-normal leading-none ${className}`}
 		>
 			{children}
 		</span>
 	);
 }
 
-export function Badges({ item }: { readonly item: ApiDocumentedItem }) {
-	const isStatic = ApiStaticMixin.isBaseClassOf(item) && item.isStatic;
-	const isProtected = ApiProtectedMixin.isBaseClassOf(item) && item.isProtected;
-	const isReadonly = ApiReadonlyMixin.isBaseClassOf(item) && item.isReadonly;
-	const isAbstract = ApiAbstractMixin.isBaseClassOf(item) && item.isAbstract;
-	const isDeprecated = Boolean(item.tsdocComment?.deprecatedBlock);
+export async function Badges({ node }: { readonly node: any }) {
+	const isDeprecated = Boolean(node.summary?.deprecatedBlock?.length);
+	const isProtected = node.isProtected;
+	const isStatic = node.isStatic;
+	const isAbstract = node.isAbstract;
+	const isReadonly = node.isReadonly;
+	const isOptional = node.isOptional;
 
-	const isAny = isStatic || isProtected || isReadonly || isAbstract || isDeprecated;
+	const isAny = isDeprecated || isProtected || isStatic || isAbstract || isReadonly || isOptional;
 
 	return isAny ? (
-		<div className="flex flex-row gap-1 md:ml-7">
-			{isDeprecated ? <Badge color={BadgeColor.Danger}>Deprecated</Badge> : null}
-			{isProtected ? <Badge>Protected</Badge> : null}
-			{isStatic ? <Badge>Static</Badge> : null}
-			{isAbstract ? <Badge>Abstract</Badge> : null}
-			{isReadonly ? <Badge>Readonly</Badge> : null}
+		<div className="mb-1 flex gap-3">
+			{isDeprecated ? (
+				<Badge className="bg-red-500/20 text-red-500">
+					<AlertTriangle aria-hidden size={14} /> deprecated
+				</Badge>
+			) : null}
+			{isProtected ? <Badge className="bg-purple-500/20 text-purple-500">protected</Badge> : null}
+			{isStatic ? <Badge className="bg-purple-500/20 text-purple-500">static</Badge> : null}
+			{isAbstract ? <Badge className="bg-cyan-500/20 text-cyan-500">abstract</Badge> : null}
+			{isReadonly ? <Badge className="bg-purple-500/20 text-purple-500">readonly</Badge> : null}
+			{isOptional ? <Badge className="bg-cyan-500/20 text-cyan-500">optional</Badge> : null}
 		</div>
 	) : null;
 }

apps/website/src/components/CmdK.tsx

@@ -1,138 +0,0 @@
-'use client';
-
-import type { ApiItemKind } from '@discordjs/api-extractor-model';
-import { VscArrowRight } from '@react-icons/all-files/vsc/VscArrowRight';
-import { VscSymbolClass } from '@react-icons/all-files/vsc/VscSymbolClass';
-import { VscSymbolEnum } from '@react-icons/all-files/vsc/VscSymbolEnum';
-import { VscSymbolEvent } from '@react-icons/all-files/vsc/VscSymbolEvent';
-import { VscSymbolInterface } from '@react-icons/all-files/vsc/VscSymbolInterface';
-import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
-import { VscSymbolProperty } from '@react-icons/all-files/vsc/VscSymbolProperty';
-import { VscSymbolVariable } from '@react-icons/all-files/vsc/VscSymbolVariable';
-import { Dialog } from 'ariakit/dialog';
-import { Command } from 'cmdk';
-import { usePathname, useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
-import { useKey } from 'react-use';
-import { useCmdK } from '~/contexts/cmdK';
-import { client } from '~/util/search';
-
-function resolveIcon(item: keyof typeof ApiItemKind) {
-	switch (item) {
-		case 'Class':
-			return <VscSymbolClass className="shrink-0" size={25} />;
-		case 'Enum':
-			return <VscSymbolEnum className="shrink-0" size={25} />;
-		case 'Interface':
-			return <VscSymbolInterface className="shrink-0" size={25} />;
-		case 'Property':
-			return <VscSymbolProperty className="shrink-0" size={25} />;
-		case 'TypeAlias':
-			return <VscSymbolVariable className="shrink-0" size={25} />;
-		case 'Variable':
-			return <VscSymbolVariable className="shrink-0" size={25} />;
-		case 'Event':
-			return <VscSymbolEvent className="shrink-0" size={25} />;
-		default:
-			return <VscSymbolMethod className="shrink-0" size={25} />;
-	}
-}
-
-export function CmdKDialog() {
-	const pathname = usePathname();
-	const router = useRouter();
-	const dialog = useCmdK();
-	const [search, setSearch] = useState('');
-	const [searchResults, setSearchResults] = useState<any[]>([]);
-
-	const packageName = pathname?.split('/').slice(3, 4)[0];
-	const branchName = pathname?.split('/').slice(4, 5)[0];
-
-	const searchResultItems = useMemo(
-		() =>
-			searchResults?.map((item, idx) => (
-				<Command.Item
-					className="my-1 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 hover:bg-neutral-100 dark:text-white [&[aria-selected]]:ring [&[aria-selected]]:ring-width-2 [&[aria-selected]]:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
-					key={`${item.id}-${idx}`}
-					onSelect={() => {
-						router.push(item.path);
-						dialog!.setOpen(false);
-					}}
-				>
-					<div className="flex grow flex-row place-content-between place-items-center gap-4">
-						<div className="flex flex-row place-items-center gap-4">
-							{resolveIcon(item.kind)}
-							<div className="w-50 flex flex-col sm:w-100">
-								<h2 className="font-semibold">{item.name}</h2>
-								<div className="line-clamp-1 text-sm font-normal">{item.summary}</div>
-								<div className="line-clamp-1 hidden text-xs font-light opacity-75 sm:block dark:opacity-50">
-									{item.path}
-								</div>
-							</div>
-						</div>
-						<VscArrowRight className="shrink-0" size={20} />
-					</div>
-				</Command.Item>
-			)) ?? [],
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[searchResults],
-	);
-
-	useKey(
-		(event) => {
-			if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-				event.preventDefault();
-				return true;
-			}
-
-			return false;
-		},
-		dialog!.toggle,
-		{ event: 'keydown', options: {} },
-		[],
-	);
-
-	useEffect(() => {
-		if (!dialog!.open) {
-			setSearch('');
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dialog!.open]);
-
-	useEffect(() => {
-		const searchDoc = async (searchString: string, version: string) => {
-			const res = await client
-				.index(`${packageName?.replaceAll('.', '-')}-${version}`)
-				.search(searchString, { limit: 5 });
-			setSearchResults(res.hits);
-		};
-
-		if (search && packageName) {
-			void searchDoc(search, branchName?.replaceAll('.', '-') ?? 'main');
-		} else {
-			setSearchResults([]);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [search]);
-
-	return (
-		<Dialog className="fixed left-1/2 top-1/4 z-50 -translate-x-1/2" state={dialog!}>
-			<Command
-				className="max-w-xs min-w-xs border border-light-900 rounded bg-white/50 shadow backdrop-blur-md sm:max-w-lg sm:min-w-lg dark:border-dark-100 dark:bg-dark/50"
-				label="Command Menu"
-				shouldFilter={false}
-			>
-				<Command.Input
-					className="w-full border-0 border-b border-light-900 rounded rounded-b-0 bg-white/50 p-4 text-lg caret-blurple outline-none dark:border-dark-100 dark:bg-dark/50 placeholder:text-dark-300/75 dark:placeholder:text-white/75"
-					onValueChange={setSearch}
-					placeholder="Quick search..."
-					value={search}
-				/>
-				<Command.List className="pt-0">
-					<Command.Empty className="p-4 text-center">No results found</Command.Empty>
-					{search ? searchResultItems : null}
-				</Command.List>
-			</Command>
-		</Dialog>
-	);
-}

apps/website/src/components/CodeHeading.tsx

@@ -1,40 +0,0 @@
-import type { ReactNode } from 'react';
-import { Anchor } from './Anchor';
-import { SourceLink } from './documentation/SourceLink';
-
-export interface CodeListingProps {
-	/**
-	 * The value of this heading.
-	 */
-	readonly children: ReactNode;
-	/**
-	 * Additional class names to apply to the root element.
-	 */
-	readonly className?: string | undefined;
-	/**
-	 * The href of this heading.
-	 */
-	readonly href?: string | undefined;
-	/**
-	 * The line in the source code where this part is declared
-	 */
-	readonly sourceLine?: number | undefined;
-	/**
-	 * The URL of the source code of this code part
-	 */
-	readonly sourceURL?: string | undefined;
-}
-
-export function CodeHeading({ href, className, children, sourceURL, sourceLine }: CodeListingProps) {
-	return (
-		<div className="flex flex-row place-items-center justify-between gap-1">
-			<div
-				className={`flex flex-row flex-wrap place-items-center gap-1 break-all font-mono text-lg font-bold ${className}`}
-			>
-				{href ? <Anchor href={href} /> : null}
-				{children}
-			</div>
-			{sourceURL ? <SourceLink className="text-2xl" sourceLine={sourceLine} sourceURL={sourceURL} /> : null}
-		</div>
-	);
-}

apps/website/src/components/ConstructorNode.tsx

@@ -0,0 +1,52 @@
+import { VscSymbolMethod } from '@react-icons/all-files/vsc/VscSymbolMethod';
+import { Code2, LinkIcon } from 'lucide-react';
+import Link from 'next/link';
+import { ENV } from '~/util/env';
+import { ParameterNode } from './ParameterNode';
+import { SummaryNode } from './SummaryNode';
+
+export async function ConstructorNode({ node, version }: { readonly node: any; readonly version: string }) {
+	return (
+		<div className="flex flex-col gap-8">
+			<h2 className="flex place-items-center gap-2 p-2 text-xl font-bold">
+				<VscSymbolMethod aria-hidden className="flex-shrink-0" size={24} />
+				Constructors
+			</h2>
+
+			<div className="flex place-content-between place-items-center">
+				<h3
+					id="constructor"
+					className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group break-words font-mono font-semibold`}
+				>
+					{/* constructor({parsedContent.constructor.parametersString}) */}
+					<Link href="#constructor" className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block">
+						<LinkIcon aria-hidden size={16} />
+					</Link>
+					constructor({node.parameters?.length ? <ParameterNode node={node.parameters} version={version} /> : null})
+				</h3>
+
+				<a
+					aria-label="Open source file in new tab"
+					className="min-w-min"
+					href={node.sourceLine ? `${node.sourceURL}#L${node.sourceLine}` : node.sourceURL}
+					rel="external noreferrer noopener"
+					target="_blank"
+				>
+					<Code2
+						aria-hidden
+						size={20}
+						className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
+					/>
+				</a>
+			</div>
+
+			{node.summary?.summarySection.length ? (
+				<SummaryNode padding node={node.summary.summarySection} version={version} />
+			) : null}
+
+			<div aria-hidden className="px-4">
+				<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
+			</div>
+		</div>
+	);
+}

apps/website/src/components/DeprecatedNode.tsx

@@ -0,0 +1,18 @@
+import { DocNode } from './DocNode';
+import { Alert } from './ui/Alert';
+
+export async function DeprecatedNode({
+	deprecatedBlock,
+	version,
+}: {
+	readonly deprecatedBlock: any;
+	readonly version: string;
+}) {
+	return (
+		<Alert title="Deprecated" type="danger">
+			<p className="break-words">
+				<DocNode node={deprecatedBlock} version={version} />
+			</p>
+		</Alert>
+	);
+}

apps/website/src/components/DocItem.tsx

@@ -0,0 +1,142 @@
+import { VscSymbolParameter } from '@react-icons/all-files/vsc/VscSymbolParameter';
+import { ConstructorNode } from './ConstructorNode';
+import { DeprecatedNode } from './DeprecatedNode';
+import { EnumMemberNode } from './EnumMemberNode';
+import { EventNode } from './EventNode';
+import { InformationNode } from './InformationNode';
+import { MethodNode } from './MethodNode';
+import { Outline } from './Outline';
+import { OverlayScrollbarsComponent } from './OverlayScrollbars';
+import { ParameterNode } from './ParameterNode';
+import { PropertyNode } from './PropertyNode';
+import { ReturnNode } from './ReturnNode';
+import { SeeNode } from './SeeNode';
+import { SummaryNode } from './SummaryNode';
+import { SyntaxHighlighter } from './SyntaxHighlighter';
+import { TypeParameterNode } from './TypeParameterNode';
+import { UnionMember } from './UnionMember';
+import { Tab, TabList, TabPanel, Tabs } from './ui/Tabs';
+
+async function OverloadNode({
+	node,
+	packageName,
+	version,
+}: {
+	readonly node: any;
+	readonly packageName: string;
+	readonly version: string;
+}) {
+	return (
+		<Tabs className="flex flex-col gap-4">
+			<TabList className="flex gap-2">
+				{node.overloads.map((overload: any) => {
+					return (
+						<Tab
+							id={`overload-${overload.displayName}-${overload.overloadIndex}`}
+							key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
+							className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm font-normal leading-none text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
+						>
+							<span>Overload {overload.overloadIndex}</span>
+						</Tab>
+					);
+				})}
+			</TabList>
+			{node.overloads.map((overload: any) => {
+				return (
+					<TabPanel
+						id={`overload-${overload.displayName}-${overload.overloadIndex}`}
+						key={`overload-tab-panel-${overload.displayName}-${overload.overloadIndex}`}
+						className="flex flex-col gap-8"
+					>
+						<DocItem node={overload} packageName={packageName} version={version} />
+					</TabPanel>
+				);
+			})}
+		</Tabs>
+	);
+}
+
+export function DocItem({
+	node,
+	packageName,
+	version,
+}: {
+	readonly node: any;
+	readonly packageName: string;
+	readonly version: string;
+}) {
+	if (node.overloads?.length) {
+		return <OverloadNode node={node} packageName={packageName} version={version} />;
+	}
+
+	return (
+		<>
+			<InformationNode node={node} version={version} />
+
+			<OverlayScrollbarsComponent
+				defer
+				options={{
+					overflow: { y: 'hidden' },
+					scrollbars: { autoHide: 'scroll', autoHideDelay: 500, autoHideSuspend: true, clickScroll: true },
+				}}
+				className="rounded-md border border-neutral-300 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
+			>
+				<SyntaxHighlighter className="py-4 text-sm" lang="typescript" code={node.sourceExcerpt} />
+			</OverlayScrollbarsComponent>
+
+			{node.summary?.deprecatedBlock.length ? (
+				<DeprecatedNode deprecatedBlock={node.summary.deprecatedBlock} version={version} />
+			) : null}
+
+			{node.summary?.summarySection ? <SummaryNode node={node.summary.summarySection} version={version} /> : null}
+
+			{node.summary?.returnsBlock.length ? <ReturnNode node={node.summary.returnsBlock} version={version} /> : null}
+
+			{node.summary?.seeBlocks.length ? <SeeNode node={node.summary.seeBlocks} version={version} /> : null}
+
+			<Outline node={node} />
+
+			{node.constructor?.parametersString ? <ConstructorNode node={node.constructor} version={version} /> : null}
+
+			{node.typeParameters?.length ? (
+				<div className="flex flex-col gap-8">
+					<h2 className="flex place-items-center gap-2 p-2 text-xl font-bold">
+						<VscSymbolParameter aria-hidden className="flex-shrink-0" size={24} />
+						Type Parameters
+					</h2>
+					<TypeParameterNode description node={node.typeParameters} version={version} />
+				</div>
+			) : null}
+
+			{node.parameters?.length ? (
+				<div className="flex flex-col gap-8">
+					<h2 className="flex place-items-center gap-2 p-2 text-xl font-bold">
+						<VscSymbolParameter aria-hidden className="flex-shrink-0" size={24} />
+						Parameters
+					</h2>
+					<ParameterNode description node={node.parameters} version={version} />
+				</div>
+			) : null}
+
+			{node.members?.properties?.length ? (
+				<PropertyNode node={node.members.properties} packageName={packageName} version={version} />
+			) : null}
+
+			{node.members?.methods?.length ? (
+				<div>
+					<MethodNode node={node.members.methods} packageName={packageName} version={version} />
+				</div>
+			) : null}
+
+			{node.members?.events?.length ? (
+				<div>
+					<EventNode node={node.members.events} packageName={packageName} version={version} />
+				</div>
+			) : null}
+
+			{node.members?.length ? <EnumMemberNode node={node.members} packageName={packageName} version={version} /> : null}
+
+			{node.unionMembers?.length ? <UnionMember node={node.unionMembers} version={version} /> : null}
+		</>
+	);
+}