chore(ci): fix release workflow (#9947)

* chore(brokers): release @discordjs/brokers@0.2.3

* chore(collection): release @discordjs/collection@2.0.0

* chore(formatters): release @discordjs/formatters@0.4.0

* chore(util): release @discordjs/util@1.0.2

* chore(voice): release @discordjs/voice@0.16.1

* chore(builders): release @discordjs/builders@1.7.0

* chore(rest): release @discordjs/rest@2.1.0

* chore(proxy): release @discordjs/proxy@2.0.2

* chore(ws): release @discordjs/ws@1.0.2

* chore(core): release @discordjs/core@1.1.0

* chore(discord.js): release discord.js@14.14.0

* chore: small borked changelogs

* chore(create-discord-bot): release create-discord-bot@0.2.2

* chore: bork

* chore: fix wrong bump

* chore: git cliff pls

.commitlintrc.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/commitlintrc.json",
 	"extends": ["@commitlint/config-angular"],
 	"rules": {
 		"type-enum": [

.eslintrc.json

@@ -1,11 +0,0 @@
-{
-	"root": true,
-	"extends": ["neon/common", "neon/node", "neon/typescript", "neon/prettier"],
-	"parserOptions": {
-		"project": ["./tsconfig.eslint.json", "./apps/*/tsconfig.eslint.json", "./packages/*/tsconfig.eslint.json"]
-	},
-	"rules": {
-		"@typescript-eslint/consistent-type-definitions": ["error", "interface"]
-	},
-	"ignorePatterns": ["**/dist/*"]
-}

.github/CONTRIBUTING.md

@@ -11,22 +11,21 @@ is a great boon to your development process.
 To get ready to work on the codebase, please do the following:
 
 1. Fork & clone the repository, and make sure you're on the **main** branch
-2. Run `yarn --immutable` ([install](https://yarnpkg.com/getting-started/install))
-3. Run `yarn build` to build local packages
+2. Run `pnpm install --frozen-lockfile` ([install](https://pnpm.io/installation))
+3. Run `pnpm run build` to build local packages
 4. Code your heart out!
-5. Run `yarn test` to run ESLint and ensure any JSDoc changes are valid
+5. Run `pnpm run test` to run ESLint and ensure any JSDoc changes are valid
 6. [Submit a pull request](https://github.com/discordjs/discord.js/compare) (Make sure you follow the [conventional commit format](https://github.com/discordjs/discord.js/blob/main/.github/COMMIT_CONVENTION.md))
 
 ## Testing changes locally
 
-If you want to test changes you've made locally, you can do so by using `yarn link`. This will create a symlink to your local copy of the discord.js libraries.
+If you want to test changes you've made locally, you can do so by using `pnpm link <package-you-want-to-link-to-your-current-package>`. This will create a symlink to your local copy of the discord.js libraries.
 
 1. Create a new directory `mkdir discordjs-test` and move into it `cd discordjs-test`
-2. Initialize a new yarn 3 project `yarn init -2`
-3. Disable pnp `yarn config set nodeLinker node-modules`
-4. Now link the local discord.js project you cloned earlier `yarn link -A {PATH_TO_DISCORDJS_REPO}`
-5. Install packages you'd like to test locally `yarn add discord.js@latest`, `yarn add @discordjs/rest@latest`, etc. **Note: Make sure you use `latest` tag or else yarn will try to install the remote package from npm**
-6. Import the package in your source code and test them out!
+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!
 
 ### Working with TypeScript packages
 
@@ -34,15 +33,18 @@ When testing local changes, you may notice you need to manually recompile TypeSc
 
 To avoid this you can use the `--watch` parameter in the package build script to automatically recompile the project when changes are detected.
 
-For example, to automatically recompile the `@discordjs/rest` project when changes are detected, run `yarn turbo run build --filter=@discordjs/rest -- --watch` in the root folder of where you cloned the discord.js repo.
+For example, to automatically recompile the `@discordjs/rest` project when changes are detected, run `pnpm turbo run build --filter='@discordjs/rest' -- --watch` in the root folder of where you cloned the discord.js repo.
 
 ## Adding new packages
 
 If you'd like to create another package under the `@discordjs` organization run the following command:
 
 ```sh
-yarn create-package <package-name> [package-description]
+pnpm run create-package <package-name> [package-description]
 ```
 
-This will create new package directory under `packages/` with the required configuration files. You can
-begin to make changes within the `src/` directory. It may also be required to update the CODEOWNERS file.
+This will create new package directory under `packages/` with the required configuration files. You may begin
+to make changes within the `src/` directory. You may also need to:
+
+- Update workflows that utilize packages
+- Update the CODEOWNERS file

.github/ISSUE_TEMPLATE/01-package_bug_report.yml

@@ -61,9 +61,9 @@ body:
       label: Versions
       description: List necessary versions here. This includes your package version, runtime version, operating system etc.
       placeholder: |
-        - discord.js 14.9.0 (`npm ls discord.js` or another package)
-        - Node.js 16.9.0 (`node --version`)
-        - TypeScript 5.0.4 (`npm ls typescript` if you use it)
+        - discord.js 14.12.1 (`npm ls discord.js` or another package)
+        - Node.js 16.11.0 (`node --version`)
+        - TypeScript 5.1.6 (`npm ls typescript` if you use it)
         - macOS Ventura 13.3.1
     validations:
       required: true

.github/labeler.yml

@@ -4,6 +4,12 @@ apps:guide:
 apps:website:
   - apps/website/*
   - apps/website/**/*
+packages:api-extractor:
+  - packages/api-extractor/*
+  - packages/api-extractor/**/*
+packages:api-extractor-model:
+  - packages/api-extractor-model/*
+  - packages/api-extractor-model/**/*
 packages:brokers:
   - packages/brokers/*
   - packages/brokers/**/*

.github/labels.yml

@@ -1,7 +1,7 @@
 - name: api changes
-  color: 5663e9
+  color: '5663e9'
 - name: api support
-  color: 5663e9
+  color: '5663e9'
 - name: apps:guide
   color: fbca04
 - name: apps:website
@@ -23,7 +23,7 @@
 - name: dependencies
   color: 276bd1
 - name: discord
-  color: 5663e9
+  color: '5663e9'
 - name: discussion
   color: b6b1f9
 - name: documentation
@@ -41,7 +41,7 @@
 - name: has PR
   color: 4b1f8e
 - name: help wanted
-  color: 008672
+  color: '008672'
 - name: in progress
   color: ffccd7
 - name: in review
@@ -52,6 +52,10 @@
   color: e4e669
 - name: need repro
   color: c66037
+- name: packages:api-extractor
+  color: fbca04
+- name: packages:api-extractor-model
+  color: fbca04
 - name: packages:brokers
   color: fbca04
 - name: packages:builders

.github/workflows/cleanup-cache.yml

@@ -0,0 +1,35 @@
+# https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries
+name: Cleanup caches
+on:
+  pull_request:
+    types:
+      - closed
+  workflow_dispatch:
+jobs:
+  cleanup:
+    name: Cleanup caches
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Cleanup caches
+        run: |
+          gh extension install actions/gh-actions-cache
+
+          REPO=${{ github.repository }}
+          BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge"
+
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
+
+          ## Setting this to not fail the workflow while deleting cache keys.
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy-website.yml

@@ -0,0 +1,28 @@
+name: Deploy website
+on:
+  workflow_dispatch:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
+  cancel-in-progress: true
+jobs:
+  deploy-website:
+    name: Deploy website
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    if: github.repository_owner == 'discordjs'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Build & deploy website
+        uses: BetaHuhn/deploy-to-vercel-action@643bc80032ba62ca41d1a9aaba7b38b51c2b8646
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_SCOPE: 'discordjs'
+          GITHUB_DEPLOYMENT_ENV: 'Production – discord-js'
+          PRODUCTION: true

.github/workflows/deprecate-version.yml

@@ -0,0 +1,50 @@
+name: Deprecate version
+on:
+  workflow_dispatch:
+    inputs:
+      package:
+        description: Package
+        required: true
+        type: choice
+        options:
+          - '@discordjs/brokers'
+          - '@discordjs/builders'
+          - '@discordjs/collection'
+          - '@discordjs/core'
+          - 'create-discord-bot'
+          - '@discordjs/formatters'
+          - 'discord.js'
+          - '@discordjs/next'
+          - '@discordjs/proxy'
+          - '@discordjs/rest'
+          - '@discordjs/util'
+          - '@discordjs/voice'
+          - '@discordjs/ws'
+      version:
+        description: Version(s)
+        required: true
+        type: string
+      message:
+        description: Deprecation message
+        required: false
+        type: string
+jobs:
+  deprecate:
+    runs-on: ubuntu-latest
+    if: github.repository_owner == 'discordjs'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install Node.js v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        uses: ./packages/actions/src/pnpmCache
+
+      - name: Deprecate
+        run: pnpm exec npm-deprecate --name "${{inputs.version}}" --message "${{inputs.message || 'This version is deprecated. Please use a newer version.'}}" --package ${{inputs.package}}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/documentation.yml

@@ -5,6 +5,9 @@ on:
       - 'main'
     paths:
       - 'packages/*/src/**'
+      - '!packages/create-discord-bot/**'
+      - '!packages/proxy-container/**'
+      - '!packages/ui/**'
     tags:
       - '**'
   workflow_dispatch:
@@ -23,7 +26,7 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
   cancel-in-progress: true
 jobs:
-  build:
+  build-docs:
     name: Build & upload documentation
     runs-on: ubuntu-latest
     env:
@@ -42,13 +45,13 @@ jobs:
           node-version: 18
 
       - name: Install dependencies
-        uses: ./packages/actions/src/yarnCache
+        uses: ./packages/actions/src/pnpmCache
 
       - name: Build dependencies
-        run: yarn build
+        run: pnpm run build
 
       - name: Build docs
-        run: yarn docs
+        run: pnpm run docs
 
       - name: Checkout docs repository
         uses: actions/checkout@v3
@@ -82,6 +85,7 @@ jobs:
           mkdir -p "out/${PACKAGE}"
           if [[ "${PACKAGE}" == "discord.js" ]]; then
             mv "packages/${PACKAGE}/docs/docs.json" "out/${PACKAGE}/${SEMVER}.json"
+            mv "packages/${PACKAGE}/docs/docs.api.json" "out/${PACKAGE}/${SEMVER}.api.json"
           else
             mv "packages/${PACKAGE}/docs/docs.api.json" "out/${PACKAGE}/${SEMVER}.api.json"
           fi
@@ -95,11 +99,12 @@ jobs:
       - name: Move docs to correct directory
         if: ${{ github.ref_type == 'branch' }}
         run: |
-          declare -a PACKAGES=("brokers" "builders" "collection" "core" "discord.js" "next" "formatters" "proxy" "rest" "util" "voice" "ws")
+          declare -a PACKAGES=("brokers" "builders" "collection" "core" "discord.js" "formatters" "next" "proxy" "rest" "util" "voice" "ws")
           for PACKAGE in "${PACKAGES[@]}"; do
             if [[ "${PACKAGE}" == "discord.js" ]]; then
               mkdir -p "out/${PACKAGE}"
               mv "packages/${PACKAGE}/docs/docs.json" "out/${PACKAGE}/${GITHUB_REF_NAME}.json"
+              mv "packages/${PACKAGE}/docs/docs.api.json" "out/${PACKAGE}/${GITHUB_REF_NAME}.api.json"
             else
               mkdir -p "out/${PACKAGE}"
               mv "packages/${PACKAGE}/docs/docs.api.json" "out/${PACKAGE}/${GITHUB_REF_NAME}.api.json"
@@ -114,3 +119,56 @@ jobs:
           git add .
           git commit -m "Docs build for ${GITHUB_REF_TYPE} ${GITHUB_REF_NAME}: ${GITHUB_SHA}" || true
           git push
+
+  build-indices:
+    needs: build-docs
+    name: Build & upload search indices
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    if: github.repository_owner == 'discordjs'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install node.js v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        uses: ./packages/actions/src/pnpmCache
+
+      - name: Build dependencies
+        run: pnpm run build
+
+      - name: Upload search indices to meilisearch
+        env:
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}
+          SEARCH_API_URL: ${{ secrets.SEARCH_API_URL }}
+          SEARCH_API_KEY: ${{ secrets.SEARCH_API_KEY }}
+        uses: ./packages/actions/src/uploadSearchIndices
+
+  deploy-website:
+    needs: build-docs
+    name: Deploy website
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    if: github.repository_owner == 'discordjs'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Build & deploy website
+        uses: BetaHuhn/deploy-to-vercel-action@643bc80032ba62ca41d1a9aaba7b38b51c2b8646
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+          VERCEL_SCOPE: 'discordjs'
+          GITHUB_DEPLOYMENT_ENV: 'Production – discord-js'
+          PRODUCTION: true

.github/workflows/issue-triage.yml

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

.github/workflows/lighthouse-main.yml

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

.github/workflows/lighthouse.yml

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

.github/workflows/lock.yml

@@ -3,13 +3,13 @@ on:
   schedule:
     - cron: '0 16 * * *'
   workflow_dispatch:
-permissions:
-  issues: write
 concurrency:
   group: lock
 jobs:
   action:
     runs-on: ubuntu-latest
+    permissions:
+      issues: write
     steps:
       - uses: dessant/lock-threads@v4
         with:

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

@@ -1,26 +0,0 @@
-name: npm auto deprecate
-on:
-  schedule:
-    - cron: '0 1 * * *'
-  workflow_dispatch:
-jobs:
-  npm-auto-deprecate:
-    name: npm auto deprecate
-    runs-on: ubuntu-latest
-    if: github.repository_owner == 'discordjs'
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Install node.js v18
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Install dependencies
-        uses: ./packages/actions/src/yarnCache
-
-      - name: Deprecate versions
-        run: 'yarn npm-deprecate --name "*dev*" --package @discordjs/brokers @discordjs/builders @discordjs/collection @discordjs/core @discordjs/formatters discord.js @discordjs/next @discordjs/proxy @discordjs/rest @discordjs/util @discordjs/voice @discordjs/ws'
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

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

@@ -18,10 +18,7 @@ jobs:
           node-version: 18
 
       - name: Install dependencies
-        uses: ./packages/actions/src/yarnCache
-
-      - name: Build dependencies
-        run: yarn build
+        uses: ./packages/actions/src/pnpmCache
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
@@ -30,4 +27,4 @@ jobs:
         run: echo ${{ secrets.DOCKER_ACCESS_TOKEN }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
 
       - name: Build & push docker image
-        run: yarn docker build --buildkit @discordjs/proxy-container -t discordjs/proxy:latest --push
+        run: docker build -f packages/proxy-container/Dockerfile -t discordjs/proxy:latest --push .

.github/workflows/publish-dev.yml

@@ -42,6 +42,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
 
       - name: Install node.js v18
         uses: actions/setup-node@v3
@@ -49,15 +51,32 @@ jobs:
           node-version: 18
           registry-url: https://registry.npmjs.org/
 
+      - name: Check the current development version
+        id: release-check
+        run: |
+          if [[ $(npm view ${{ matrix.package }}@dev version | grep -e "$(git rev-parse --short HEAD)") ]]; \
+            then echo "RELEASE=0" >> "$GITHUB_OUTPUT"; \
+            else echo "RELEASE=1" >> "$GITHUB_OUTPUT"; \
+          fi
+
       - name: Install dependencies
-        uses: ./packages/actions/src/yarnCache
+        if: steps.release-check.outputs.release == '1'
+        uses: ./packages/actions/src/pnpmCache
 
       - name: Build dependencies
-        run: yarn build
+        if: steps.release-check.outputs.release == '1'
+        run: pnpm run build
 
       - name: Publish package
+        if: steps.release-check.outputs.release == '1'
         run: |
-          yarn workspace ${{ matrix.package }} release --preid "dev.$(date +%s)-$(git rev-parse --short HEAD)"
-          yarn workspace ${{ matrix.package }} npm publish --tag dev || true
+          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
         env:
-          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+
+      - name: Deprecate prior development releases
+        if: steps.release-check.outputs.release == '1'
+        run: pnpm exec npm-deprecate --name "*dev*" --message "This version is deprecated. Please use a newer version." --package ${{ matrix.package }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/publish-docker.yml

@@ -15,10 +15,7 @@ jobs:
           node-version: 18
 
       - name: Install dependencies
-        uses: ./packages/actions/src/yarnCache
-
-      - name: Build dependencies
-        run: yarn build
+        uses: ./packages/actions/src/pnpmCache
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
@@ -27,4 +24,4 @@ jobs:
         run: echo ${{ secrets.DOCKER_ACCESS_TOKEN }} | docker login -u ${{ secrets.DOCKER_USERNAME }} --password-stdin
 
       - name: Build & push docker image
-        run: yarn docker build --buildkit @discordjs/proxy-container -t discordjs/proxy:$(cut -d '.' -f1 <<< $(jq --raw-output '.version' packages/proxy-container/package.json)) --push
+        run: docker build -f packages/proxy-container/Dockerfile -t discordjs/proxy:$(cut -d '.' -f1 <<< $(jq --raw-output '.version' packages/proxy-container/package.json)) --push .

.github/workflows/publish-release.yml

@@ -21,10 +21,10 @@ jobs:
           registry-url: https://registry.npmjs.org/
 
       - name: Install dependencies
-        uses: ./packages/actions/src/yarnCache
+        uses: ./packages/actions/src/pnpmCache
 
       - name: Build dependencies
-        run: yarn build
+        run: pnpm run build
 
       - name: Extract package and semver from tag
         id: extract-tag
@@ -34,6 +34,6 @@ jobs:
 
       - name: Publish package
         run: |
-          yarn workspace ${{ steps.extract-tag.outputs.subpackage == 'true' && '@discordjs/' || '' }}${{ steps.extract-tag.outputs.package }} npm publish
+          pnpm --filter=${{ steps.extract-tag.outputs.subpackage == 'true' && '@discordjs/' || '' }}${{ steps.extract-tag.outputs.package }} publish --no-git-checks
         env:
-          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/tests.yml

@@ -25,39 +25,39 @@ jobs:
           node-version: 18
 
       - name: Install dependencies
-        uses: ./packages/actions/src/yarnCache
+        uses: ./packages/actions/src/pnpmCache
 
       - name: Build dependencies (PR)
         if: ${{ github.event_name != 'push' }}
-        run: yarn build --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]"
+        run: pnpm exec turbo run build --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" --concurrency=4
 
       - name: Build dependencies (Push)
         if: ${{ github.event_name == 'push' }}
-        run: yarn build --filter="...[HEAD^1]"
+        run: pnpm exec turbo run build --filter="...[HEAD^1]" --concurrency=4
 
       - name: ESLint (PR)
         if: ${{ github.event_name != 'push' }}
-        run: yarn lint --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" -- --format=compact
+        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: yarn lint --filter="...[HEAD^1]" -- --format=compact
+        run: pnpm exec turbo run lint --filter="...[HEAD^1]" --concurrency=4 -- --format=compact
 
       - name: Tests (PR)
         if: ${{ github.event_name != 'push' }}
-        run: yarn test --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]"
+        run: pnpm exec turbo run test --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" --concurrency=4
 
       - name: Tests (Push)
         if: ${{ github.event_name == 'push' }}
-        run: yarn test --filter="...[HEAD^1]"
+        run: pnpm exec turbo run test --filter="...[HEAD^1]" --concurrency=4
 
       - name: Docs (PR)
         if: ${{ github.event_name != 'push' }}
-        run: yarn docs --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]"
+        run: pnpm exec turbo run docs --filter="...[origin/${{ github.event_name == 'pull_request' && github.event.pull_request.base.ref || 'main' }}]" --concurrency=4
 
       - name: Docs (Push)
         if: ${{ github.event_name == 'push' }}
-        run: yarn docs --filter="...[HEAD^1]"
+        run: pnpm exec turbo run docs --filter="...[HEAD^1]" --concurrency=4
 
       - name: Upload Coverage
         if: github.repository_owner == 'discordjs'

.gitignore

@@ -20,7 +20,7 @@ dist-docs
 
 # Miscellaneous
 .tmp
-.vscode
+.vscode/*
 !.vscode/extensions.json
 !.vscode/settings.json
 .idea
@@ -29,6 +29,15 @@ dist-docs
 tsconfig.tsbuildinfo
 coverage
 out
+package.tgz
+tsup.config.bundled*
+vitest.config.ts.timestamp*
+
+# Deno
+deno.lock
+
+# Bun
+bun.lockb
 
 # yarn
 .pnp.*

.husky/commit-msg

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

.husky/pre-commit

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

.lintstagedrc.json

@@ -1,5 +1,6 @@
 {
+	"$schema": "https://json.schemastore.org/lintstagedrc.schema.json",
 	"*": "prettier --ignore-unknown --write",
-	"{src/**,__tests__/**}.{mjs,js,cjs,ts,tsx}": "eslint --ext .mjs,.js,.cjs,.ts,.tsx --fix",
+	"{src/**,__tests__/**}.{mjs,js,cjs,ts,tsx}": "eslint --fix",
 	"src/**.ts": "vitest related --run --config ../../vitest.config.ts"
 }

.npmrc

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

.prettierignore

@@ -1 +1,5 @@
 CODEOWNERS
+CHANGELOG.md
+tsup.config.bundled*
+vitest.config.ts.timestamp*
+pnpm-lock.yaml

.prettierrc.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://json.schemastore.org/prettierrc.json",
 	"printWidth": 120,
 	"useTabs": true,
 	"singleQuote": true,

.vscode/settings.json

@@ -1,18 +1,34 @@
 {
-	"eslint.workingDirectories": [{ "pattern": "./apps/*" }, { "pattern": "./packages/*" }],
 	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+	"eslint.experimental.useFlatConfig": true,
+	"eslint.workingDirectories": [
+		{ "directory": "${workspaceFolder}" },
+		{ "pattern": "./apps/*/" },
+		{ "pattern": "./packages/*/" }
+	],
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
-		"source.fixAll": true,
-		"source.organizeImports": false
+		"source.organizeImports": false,
+		"source.fixAll.eslint": true,
+		"source.fixAll": true
 	},
 	"editor.trimAutoWhitespace": false,
 	"files.associations": {
-		"*.mdx": "markdown"
+		"api-extractor.json": "jsonc",
+		"api-extractor-docs.json": "jsonc",
+		"tsconfig.json": "jsonc",
+		"tsconfig.eslint.json": "jsonc",
+		"tsconfig.docs.json": "jsonc"
 	},
 	"files.insertFinalNewline": true,
 	"files.eol": "\n",
-	"npm.packageManager": "yarn",
-	"typescript.tsdk": "node_modules/typescript/lib"
+	"npm.packageManager": "pnpm",
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"typescript.enablePromptUseWorkspaceTsdk": true,
+	"deno.enable": false,
+	"deno.enablePaths": ["./packages/create-discord-bot/template/Deno"],
+	"deno.lint": false,
+	"deno.unstable": false,
+	"deno.config": "./packages/create-discord-bot/template/Deno/deno.jsonc"
 }

.yarn/patches/yaml-npm-2.2.2-6e3cddb343.patch

@@ -1,18 +0,0 @@
-diff --git a/package.json b/package.json
-index fc35658a40f9ba3e3513c459ba9f4f6e1b3f59f5..bc35eda66f270c95ba52e721cb6976fd61622c58 100644
---- a/package.json
-+++ b/package.json
-@@ -26,11 +26,13 @@
-   },
-   "exports": {
-     ".": {
-+      "types": "./dist/index.d.ts",
-       "node": "./dist/index.js",
-       "default": "./browser/index.js"
-     },
-     "./package.json": "./package.json",
-     "./util": {
-+      "types": "./dist/util.d.ts",
-       "node": "./dist/util.js",
-       "default": "./browser/dist/util.js"
-     }

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

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

.yarnrc.yml

@@ -1,32 +0,0 @@
-logFilters:
-  # MISSING_PEER_DEPENDENCY
-  - code: YN0002
-    level: discard
-  # FETCH_NOT_CACHED
-  - code: YN0013
-    level: discard
-  # NODE_GYP_INJECTED
-  - code: YN0032
-    level: discard
-  # INCOMPATIBLE_PEER_DEPENDENCY
-  - code: YN0060
-    level: discard
-
-nodeLinker: node-modules
-
-packageExtensions:
-  '@storybook/core-common@*':
-    dependencies:
-      '@storybook/react-vite': 7.0.9
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: '@yarnpkg/plugin-interactive-tools'
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: '@yarnpkg/plugin-workspace-tools'
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: '@yarnpkg/plugin-version'
-  - path: .yarn/plugins/@yarnpkg/plugin-docker-build.cjs
-    spec: 'https://github.com/Dcard/yarn-plugins/releases/latest/download/plugin-docker-build.js'
-
-yarnPath: .yarn/releases/yarn-3.5.1.cjs

api-extractor.json

@@ -96,34 +96,40 @@
 			"noFallthroughCasesInSwitch": true,
 			"noImplicitOverride": true,
 			"noImplicitReturns": true,
+			"noPropertyAccessFromIndexSignature": false,
+			"noUncheckedIndexedAccess": true,
 			"noUnusedLocals": true,
 			"noUnusedParameters": true,
 			"strict": true,
-			"useUnknownInCatchVariables": true,
-			"noUncheckedIndexedAccess": true,
 
 			// Modules
+			"allowArbitraryExtensions": false,
+			"allowImportingTsExtensions": false,
 			"module": "ESNext",
 			"moduleResolution": "node",
 			"resolveJsonModule": true,
+			"resolvePackageJsonExports": false,
+			"resolvePackageJsonImports": false,
 
 			// Emit
 			"declaration": true,
 			"declarationMap": true,
-			"importHelpers": true,
-			"inlineSources": true,
+			"importHelpers": false,
 			"newLine": "lf",
 			"noEmitHelpers": true,
 			"outDir": "dist",
 			"removeComments": false,
 			"sourceMap": true,
-			"esModuleInterop": true,
+
+			// Interop Constraints
+			"esModuleInterop": false,
 			"forceConsistentCasingInFileNames": true,
+			"isolatedModules": true,
 
 			// Language and Environment
 			"experimentalDecorators": true,
 			"lib": ["ESNext"],
-			"target": "ES2021",
+			"target": "ES2022",
 			"useDefineForClassFields": true
 		}
 		/**
@@ -216,7 +222,7 @@
 		/**
 		 * (REQUIRED) Whether to generate the .d.ts rollup file.
 		 */
-		"enabled": true,
+		"enabled": false,
 
 		/**
 		 * Specifies the output path for a .d.ts rollup file to be generated without any trimming.

apps/guide/.env.development

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

apps/guide/.eslintignore

@@ -1 +0,0 @@
-next-env.d.ts

apps/guide/.eslintrc.json

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

apps/guide/.prettierrc.js

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

apps/guide/next.config.js

@@ -13,12 +13,13 @@ module.exports = withBundleAnalyzer(
 	withContentlayer({
 		reactStrictMode: true,
 		experimental: {
-			appDir: true,
+			typedRoutes: true,
 		},
 		images: {
 			dangerouslyAllowSVG: true,
 			contentDispositionType: 'attachment',
 			contentSecurityPolicy: "default-src 'self'; frame-src 'none'; sandbox;",
 		},
+		poweredByHeader: false,
 	}),
 );

apps/guide/package.json

@@ -1,26 +1,26 @@
 {
+	"$schema": "https://json.schemastore.org/package.json",
 	"name": "@discordjs/guide",
 	"version": "0.1.0",
 	"description": "Imagine a guide... that explores the many possibilities for your discord.js bot",
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"test:lighthouse": "lighthouse http://localhost:3000 --output-path=./lighthouse-results",
-		"build:local": "yarn build:prod",
-		"build:prod": "yarn build:css && yarn build:next",
-		"build:next": "next build",
-		"build:css": "yarn generate:css",
-		"build:analyze": "cross-env ANALYZE=true yarn build:prod",
+		"build:check": "tsc --noEmit",
+		"build:local": "pnpm run build:prod",
+		"build:prod": "next build",
+		"build:analyze": "cross-env ANALYZE=true pnpm run build:prod",
 		"preview": "next start",
-		"dev": "concurrently 'yarn dev:css' 'yarn dev:next'",
-		"dev:next": "next dev",
-		"dev:css": "yarn generate:css --watch",
-		"generate:css": "unocss 'src/**/*.tsx' 'contentlayer.config.ts' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../unocss.config.ts",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --format=pretty",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix --format=pretty",
-		"fmt": "yarn format"
+		"dev": "next dev",
+		"generate:contentlayer": "contentlayer build",
+		"lint": "pnpm run build:check && prettier --check . && cross-env TIMING=1 eslint --format=pretty src",
+		"format": "pnpm run build:check && prettier --write . && cross-env TIMING=1 eslint --fix --format=pretty src",
+		"fmt": "pnpm run format"
 	},
 	"type": "commonjs",
+	"directories": {
+		"lib": "src"
+	},
 	"contributors": [
 		"Crawl <icrawltogo@gmail.com>"
 	],
@@ -44,17 +44,17 @@
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
-		"@code-hike/mdx": "^0.8.3",
+		"@code-hike/mdx": "^0.9.0",
 		"@discordjs/ui": "workspace:^",
 		"@react-icons/all-files": "^4.1.0",
-		"@vercel/analytics": "^1.0.1",
-		"@vercel/edge-config": "^0.1.9",
-		"@vercel/og": "^0.5.4",
-		"ariakit": "^2.0.0-next.44",
+		"@vercel/analytics": "^1.1.1",
+		"@vercel/edge-config": "^0.4.1",
+		"@vercel/og": "^0.5.20",
+		"ariakit": "2.0.0-next.44",
 		"cmdk": "^0.2.0",
-		"contentlayer": "^0.3.2",
-		"next": "^13.4.1",
-		"next-contentlayer": "^0.3.2",
+		"contentlayer": "^0.3.4",
+		"next": "14.0.3-canary.2",
+		"next-contentlayer": "^0.3.4",
 		"next-themes": "^0.2.1",
 		"react": "^18.2.0",
 		"react-custom-scrollbars-2": "^4.5.0",
@@ -62,39 +62,38 @@
 		"rehype-autolink-headings": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
-		"sharp": "^0.32.1"
+		"sharp": "^0.32.6"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "^13.4.1",
-		"@testing-library/react": "^14.0.0",
-		"@testing-library/user-event": "^14.4.3",
-		"@types/html-escaper": "^3.0.0",
-		"@types/node": "18.16.5",
-		"@types/react": "^18.2.6",
-		"@types/react-dom": "^18.2.4",
-		"@unocss/cli": "^0.51.12",
-		"@unocss/eslint-config": "^0.51.12",
-		"@unocss/reset": "^0.51.12",
-		"@vitejs/plugin-react": "^4.0.0",
-		"@vitest/coverage-c8": "^0.31.0",
-		"concurrently": "^8.0.1",
+		"@next/bundle-analyzer": "14.0.3-canary.2",
+		"@testing-library/react": "^14.1.0",
+		"@testing-library/user-event": "^14.5.1",
+		"@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",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.40.0",
-		"eslint-config-neon": "^0.1.47",
+		"eslint": "^8.53.0",
+		"eslint-config-neon": "^0.1.57",
 		"eslint-formatter-pretty": "^5.0.0",
-		"happy-dom": "^9.10.9",
+		"happy-dom": "^12.10.3",
 		"hast-util-to-string": "^2.0.0",
-		"hastscript": "^7.2.0",
+		"hastscript": "^8.0.0",
 		"html-escaper": "^3.0.3",
-		"lighthouse": "^10.2.0",
-		"prettier": "^2.8.8",
-		"turbo": "^1.9.4-canary.10",
-		"typescript": "^5.0.4",
-		"unocss": "^0.51.12",
-		"vercel": "^29.1.1",
-		"vitest": "^0.31.0"
+		"postcss": "^8.4.31",
+		"prettier": "^3.0.3",
+		"turbo": "^1.10.17-canary.0",
+		"typescript": "^5.2.2",
+		"unocss": "^0.57.3",
+		"vercel": "^32.5.3",
+		"vitest": "^0.34.6"
 	},
 	"engines": {
-		"node": ">=18.13.0"
+		"node": ">=18"
 	}
 }

apps/guide/postcss.config.cjs

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

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

@@ -1,9 +1,12 @@
 'use client';
 
-import { Providers } from './providers';
 import { inter } from '~/util/fonts';
+import { Providers } from './providers';
 
-export default function GlobalError({ error }: { error: Error }) {
+import '~/styles/cmdk.css';
+import '~/styles/main.css';
+
+export default function GlobalError({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

apps/guide/src/app/error.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-export default function Error({ error }: { error: Error }) {
+export default function Error({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

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

@@ -1,12 +1,12 @@
-import { allContents } from 'contentlayer/generated';
 import { notFound } from 'next/navigation';
+import { allContents } from 'contentlayer/generated';
 import { Mdx } from '~/components/Mdx';
 
 export async function generateStaticParams() {
 	return allContents.map((content) => ({ slug: [content.slug] }));
 }
 
-export default function Page({ params }: { params: { slug: string[] } }) {
+export default function Page({ params }: { readonly params: { slug: string[] } }) {
 	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
 
 	if (!content) {

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

@@ -1,8 +1,8 @@
 import type { PropsWithChildren } from 'react';
-import { Providers } from './providers';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
 import { Nav } from '~/components/Nav';
+import { Providers } from './providers';
 
 export default function Layout({ children }: PropsWithChildren) {
 	return (

apps/guide/src/app/layout.tsx

@@ -1,25 +1,29 @@
 import { Analytics } from '@vercel/analytics/react';
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import type { PropsWithChildren } from 'react';
-import { Providers } from './providers';
 import { DESCRIPTION } from '~/util/constants';
 import { inter, jetBrainsMono } from '~/util/fonts';
+import { Providers } from './providers';
 
-import '@unocss/reset/tailwind-compat.css';
-import '~/styles/unocss.css';
 import '~/styles/cmdk.css';
 import '@code-hike/mdx/styles.css';
 import '~/styles/ch.css';
 import '~/styles/main.css';
 
+export const viewport: Viewport = {
+	themeColor: [
+		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
+		{ media: '(prefers-color-scheme: dark)', color: '#181818' },
+	],
+	colorScheme: 'light dark',
+};
+
 export const metadata: Metadata = {
+	metadataBase: new URL(
+		process.env.METADATA_BASE_URL ? process.env.METADATA_BASE_URL : `http://localhost:${process.env.PORT ?? 3_000}`,
+	),
 	title: 'discord.js',
 	description: DESCRIPTION,
-	viewport: {
-		minimumScale: 1,
-		initialScale: 1,
-		width: 'device-width',
-	},
 	icons: {
 		other: [
 			{
@@ -44,12 +48,6 @@ export const metadata: Metadata = {
 
 	manifest: '/site.webmanifest',
 
-	themeColor: [
-		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
-		{ media: '(prefers-color-scheme: dark)', color: '#181818' },
-	],
-	colorScheme: 'light dark',
-
 	appleWebApp: {
 		title: 'discord.js',
 	},

apps/guide/src/components/DiscordAPITypesLink.tsx

@@ -0,0 +1,91 @@
+import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
+import type { PropsWithChildren } from 'react';
+import {
+	BASE_URL_DISCORD_API_TYPES,
+	DISCORD_API_TYPES_VERSION,
+	DISCORD_API_TYPES_VOICE_VERSION,
+} from '~/util/constants';
+
+interface DiscordAPITypesLinkOptions {
+	/**
+	 * The initial documentation enum, interface, function etc.
+	 *
+	 * @example `'RESTJSONErrorCodes'`
+	 */
+	readonly parent?: string;
+	/**
+	 * The scope of where this link lives.
+	 *
+	 * @remarks API does not have a scope.
+	 */
+	readonly scope?: 'gateway' | 'globals' | 'payloads' | 'rest' | 'rpc' | 'utils' | 'voice';
+	/**
+	 * The symbol belonging to the parent.
+	 *
+	 * @example '`MaximumNumberOfGuildsReached'`
+	 */
+	readonly symbol?: string;
+	/**
+	 * The type of the {@link DiscordAPITypesLinkOptions.parent}.
+	 *
+	 * @example `'enum'`
+	 * @example `'interface'`
+	 */
+	readonly type?: string;
+}
+
+export function DiscordAPITypesLink({
+	parent,
+	scope,
+	symbol,
+	type,
+	children,
+}: PropsWithChildren<DiscordAPITypesLinkOptions>) {
+	let url = BASE_URL_DISCORD_API_TYPES;
+	let text = 'discord-api-types';
+
+	if (type || parent) {
+		url += `/api/discord-api-types`;
+
+		switch (scope) {
+			case 'globals':
+				url += `-${scope}`;
+				break;
+			case 'gateway':
+			case 'payloads':
+			case 'rest':
+				url += `-${scope}/common`;
+				break;
+			case 'rpc':
+			case 'utils':
+				url += `-${scope}/${DISCORD_API_TYPES_VERSION}`;
+				break;
+			case 'voice':
+				url += `-${scope}/${DISCORD_API_TYPES_VOICE_VERSION}`;
+				break;
+			default:
+				url += `-${DISCORD_API_TYPES_VERSION}`;
+		}
+
+		if (type) {
+			url += `/${type}/${parent}`;
+			if (symbol) url += `#${symbol}`;
+		} else {
+			url += `#${parent}`;
+		}
+
+		text = `${parent}${symbol ? `#${symbol}` : ''}${type?.toUpperCase() === 'FUNCTION' ? '()' : ''}`;
+	}
+
+	return (
+		<a
+			className="inline-flex flex-row place-items-center gap-1"
+			href={url}
+			rel="external noopener noreferrer"
+			target="_blank"
+		>
+			{children ?? text}
+			<FiExternalLink size={18} />
+		</a>
+	);
+}

apps/guide/src/components/DocsLink.tsx

@@ -8,19 +8,19 @@ interface DocsLinkOptions {
 	 *
 	 * @remarks Functions automatically infer this.
 	 */
-	brackets?: boolean;
+	readonly brackets?: boolean;
 	/**
 	 * The package.
 	 *
 	 * @defaultValue `'discord.js'`
 	 */
-	package?: (typeof PACKAGES)[number];
+	readonly package?: (typeof PACKAGES)[number];
 	/**
 	 * The initial documentation class, function, interface etc.
 	 *
 	 * @example `'Client'`
 	 */
-	parent?: string;
+	readonly parent?: string;
 	/**
 	 * Whether to reference a static property.
 	 *
@@ -28,20 +28,20 @@ interface DocsLinkOptions {
 	 * This should only be used for the https://discord.js.org domain
 	 * as static properties are not identified in the URL.
 	 */
-	static?: boolean;
+	readonly static?: boolean;
 	/**
 	 * The symbol belonging to the parent.
 	 *
 	 * @example '`login'`
 	 */
-	symbol?: string;
+	readonly symbol?: string;
 	/**
 	 * The type of the {@link DocsLinkOptions.parent}.
 	 *
 	 * @example `'class'`
 	 * @example `'Function'`
 	 */
-	type?: string;
+	readonly type?: string;
 }
 
 export function DocsLink({

apps/guide/src/components/Footer.tsx

@@ -5,8 +5,8 @@ import workersLogo from '~/assets/powered-by-workers.png';
 export default function Footer() {
 	return (
 		<footer className="md:pl-12 md:pr-12">
-			<div className="flex flex-wrap place-content-center gap-6 md:flex-nowrap md:gap-12">
-				<div className="flex basis-full flex-wrap place-content-center place-items-center gap-4 md:basis-auto">
+			<div className="flex flex-col flex-wrap place-content-center gap-6 pt-12 sm:flex-row md:gap-12">
+				<div className="flex flex-wrap place-content-center place-items-center gap-4">
 					<a
 						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
@@ -40,54 +40,56 @@ export default function Footer() {
 						/>
 					</a>
 				</div>
-				<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
-					<div className="text-lg font-semibold">Community</div>
-					<div className="flex flex-col gap-1">
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord.gg/djs"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							Discord
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://github.com/discordjs/discord.js/discussions"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							GitHub discussions
-						</a>
+				<div className="flex flex-col place-self-center gap-6 sm:flex-row md:gap-12">
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Community</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.gg/djs"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								Discord
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js/discussions"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								GitHub discussions
+							</a>
+						</div>
 					</div>
-				</div>
-				<div className="max-w-max flex grow basis-0 flex-col gap-2 md:basis-auto">
-					<div className="text-lg font-semibold">Project</div>
-					<div className="flex flex-col gap-1">
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://github.com/discordjs/discord.js"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							discord.js
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord.js.org/docs"
-							rel="noopener noreferrer"
-							target="_blank"
-						>
-							discord.js documentation
-						</a>
-						<a
-							className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://discord-api-types.dev"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							discord-api-types
-						</a>
+					<div className="max-w-max flex flex-col gap-2">
+						<div className="text-lg font-semibold">Project</div>
+						<div className="flex flex-col gap-1">
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://github.com/discordjs/discord.js"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord.js
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord.js.org/docs"
+								rel="noopener noreferrer"
+								target="_blank"
+							>
+								discord.js documentation
+							</a>
+							<a
+								className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
+								href="https://discord-api-types.dev"
+								rel="external noopener noreferrer"
+								target="_blank"
+							>
+								discord-api-types
+							</a>
+						</div>
 					</div>
 				</div>
 			</div>

apps/guide/src/components/Header.tsx

@@ -3,6 +3,7 @@
 import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
 import { VscMenu } from '@react-icons/all-files/vsc/VscMenu';
 import { Button } from 'ariakit/button';
+import type { Route } from 'next';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
@@ -23,7 +24,7 @@ export default function Header() {
 				.map((path, idx, original) => (
 					<Link
 						className="rounded outline-none hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
-						href={`/${original.slice(0, idx + 1).join('/')}`}
+						href={`/${original.slice(0, idx + 1).join('/')}` as Route}
 						key={`${path}-${idx}`}
 					>
 						{path}

apps/guide/src/components/Mdx.tsx

@@ -2,14 +2,15 @@
 
 import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
 import { useMDXComponent } from 'next-contentlayer/hooks';
+import { DocsLink } from '~/components/DocsLink';
+import { ResultingCode } from '~/components/ResultingCode';
+import { DiscordAPITypesLink } from './DiscordAPITypesLink';
 import { H1 } from './H1';
 import { H2 } from './H2';
 import { H3 } from './H3';
 import { H4 } from './H4';
-import { DocsLink } from '~/components/DocsLink';
-import { ResultingCode } from '~/components/ResultingCode';
 
-export function Mdx({ code }: { code: string }) {
+export function Mdx({ code }: { readonly code: string }) {
 	const Component = useMDXComponent(code);
 
 	return (
@@ -20,6 +21,7 @@ export function Mdx({ code }: { code: string }) {
 				DiscordMessages,
 				DiscordMessage,
 				DiscordMessageEmbed,
+				DiscordAPITypesLink,
 				DocsLink,
 				ResultingCode,
 				h1: H1,

apps/guide/src/components/Nav.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { Scrollbars } from 'react-custom-scrollbars-2';
-import { Sidebar } from './Sidebar';
 import { useNav } from '~/contexts/nav';
+import { Sidebar } from './Sidebar';
 
 export function Nav() {
 	const { opened } = useNav();

apps/guide/src/components/Outline.tsx

@@ -5,7 +5,7 @@ const LINK_HEIGHT = 30;
 const INDICATOR_SIZE = 10;
 const INDICATOR_OFFSET = (LINK_HEIGHT - INDICATOR_SIZE) / 2;
 
-export function Outline({ headings }: { headings: any[] }) {
+export function Outline({ headings }: { readonly headings: any[] }) {
 	// eslint-disable-next-line react/hook-use-state
 	const [active /* setActive */] = useState(0);
 

apps/guide/src/components/PageButton.tsx

@@ -1,4 +1,12 @@
-export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
+export function PageButton({
+	url,
+	title,
+	direction,
+}: {
+	readonly direction: 'next' | 'prev';
+	readonly title: string;
+	readonly url: string;
+}) {
 	return (
 		<a
 			className="flex flex-row flex-col transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded bg-light-600 px-4 py-3 leading-none no-underline outline-none active:translate-y-px active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"

apps/guide/src/components/Sidebar.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { allContents } from 'contentlayer/generated';
+import type { Route } from 'next';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Section } from './Section';
+import { allContents } from 'contentlayer/generated';
 import { useNav } from '~/contexts/nav';
+import { Section } from './Section';
 
 const items = allContents.map((content) => ({
 	title: content.title,
@@ -45,7 +46,7 @@ export function Sidebar() {
 									? 'bg-blurple text-white'
 									: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
 							}`}
-							href={member.href}
+							href={member.href as Route}
 							key={`${member.title}-${index}`}
 							onClick={() => setOpened(false)}
 							title={member.title}

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

@@ -9,7 +9,7 @@ If you're reading this, it probably means you want to learn how to make a bot wi
 This guide will teach you things such as:
 
 - How to get a bot [up and running](/preparations/) from scratch;
-- How to properly [create](/creating-your-bot/), [organize](/creating-your-bot/command-handling.md), and expand on your commands;
+- 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/);

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

@@ -48,7 +48,7 @@ All content has been updated to use discord.js v14 syntax. The v13 version of th
 
 - Commando: Replaced with [Sapphire](https://sapphirejs.dev/docs/Guide/getting-started/getting-started-with-sapphire)
 - [Voice](/voice/): Rewritten to use the [_`@discordjs/voice`_](https://github.com/discordjs/discord.js/tree/main/packages/voice) package
-- [Command handling](/creating-your-bot/command-handling.md/): Updated to use slash commands
+- [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)

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

@@ -7,11 +7,11 @@ category: Installations and preparations
 
 ## Installing Node.js
 
-To use discord.js, you'll need to install [Node.js](https://nodejs.org/). discord.js v14 requires Node v16.9.0 or higher.
+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.9.0`_ or higher, then you're good to go! Otherwise, continue reading.
+	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.
@@ -48,7 +48,7 @@ On macOS, either:
 
 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.9.0`_ or higher, great!
+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
 
@@ -67,6 +67,10 @@ yarn init
 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.
@@ -93,6 +97,10 @@ yarn add discord.js
 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.

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

@@ -7,7 +7,7 @@ category: Creating your bot
 
 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.md#what-is-a-token-anyway) section, your token is essentially your bot's password, and you should protect it as best as possible. This can be done through a _`config.json`_ file or by using environment variables.
+As explained in the ["What is a token, anyway?"](../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.
 
@@ -77,6 +77,10 @@ yarn add dotenv
 pnpm add dotenv
 ```
 
+```sh bun
+# Bun automatically reads .env files
+```
+
 </CH.Code>
 
 <CH.Code lineNumbers={false} rows={7}>

apps/guide/src/content/03-creating-your-bot/03-adding-commands.mdx

@@ -22,8 +22,8 @@ Slash commands provide a huge number of benefits over manual message parsing, in
 	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](command-handling.html), which dynamically reads the files and executes the commands.
-    3. The [command deployment script](command-deployment.html), to register your slash commands with Discord so they appear in the interface.
+    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.
 

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

@@ -12,7 +12,7 @@ Unless your bot project is small, it's not a very good idea to have a single fil
 
     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](command-deployment), to register your slash commands with Discord so they appear in the interface.
+    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.
 

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

@@ -9,7 +9,7 @@ category: Creating your bot
 	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](command-handling), which dynamically reads the files and executes the commands.
+    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.
@@ -152,4 +152,4 @@ You've successfully sent a response to a slash command! However, this is only th
 
 #### Resulting code
 
-<ResultingCode path="creating-your-bot/command-deployment" />
+<ResultingCode path="creating-your-bot/registering-slash-commands" />

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

@@ -162,4 +162,4 @@ client.on(Events.GuildAuditLogEntryCreate, async (auditLog) => {
 
 </CH.Code>
 
-If you want to check who banned a user, it's the same example as above except the _`action`_ should be _`AuditLogEvent.MemberBanAdd`_. You can check the rest of the types over at the [discord-api-types documentation](https://discord-api-types.dev/api/discord-api-types-v10/enum/AuditLogEvent).
+If you want to check who banned a user, it's the same example as above except the _`action`_ should be <DiscordAPITypesLink type="enum" parent="AuditLogEvent" symbol="MemberBanAdd" />. You can check the rest of the possible actions on this page.

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

@@ -0,0 +1,223 @@
+---
+title: Collectors
+category: Popular topics
+---
+
+# Collectors
+
+## Message collectors
+
+{/* prettier-ignore */}
+<DocsLink type="class" parent="Collector">Collectors</DocsLink> are useful to enable your bot to obtain _additional_ input after the first command was sent. An example would be initiating a quiz, where the bot will "await" a correct response from somebody.
+
+### Basic message collector
+
+Let's take a look at a basic message collector:
+
+<CH.Code>
+
+```js
+const collectorFilter = (message) => message.content.includes('discord');
+const collector = interaction.channel.createMessageCollector({ filter: collectorFilter, time: 15_000 });
+
+collector.on('collect', (message) => {
+	console.log(`Collected ${message.content}`);
+});
+
+collector.on('end', (collected) => {
+	console.log(`Collected ${collected.size} messages`);
+});
+```
+
+</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.
+
+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.
+
+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.
+
+You can control when a collector ends by supplying additional option keys when creating a collector:
+
+- _`time`_: Amount of time in milliseconds the collector should run for
+- _`max`_: Number of messages to successfully pass the filter
+- _`maxProcessed`_: Number of messages encountered (no matter the filter result)
+
+The benefit of using an event-based collector over _`awaitMessages()`_ (its promise-based counterpart) is that you can do something directly after each message is collected, rather than just after the collector ended. You can also stop the collector manually by calling <DocsLink type="class" parent="Collector" symbol="stop" brackets />.
+
+### Await messages
+
+Using <DocsLink type="class" parent="TextChannel" symbol="awaitMessages" brackets /> can be easier if you understand [Promises](../additional-info/understanding-async-await), and it allows you to have cleaner code overall. It is essentially identical to <DocsLink type="class" parent="TextChannel" symbol="createMessageCollector" brackets />, except promisified. However, the drawback of using this method is that you cannot do things before the Promise is resolved or rejected, either by an error or completion. However, it should do for most purposes, such as awaiting the correct response in a quiz. Instead of taking their example, let's set up a basic quiz command using the _`.awaitMessages()`_ feature.
+
+First, you'll need some questions and answers to choose from, so here's a basic set:
+
+<CH.Code>
+
+```json
+[
+	{
+		"question": "What color is the sky?",
+		"answers": ["blue"]
+	},
+	{
+		"question": "How many letters are there in the alphabet?",
+		"answers": ["26", "twenty-six", "twenty six", "twentysix"]
+	}
+]
+```
+
+</CH.Code>
+
+The provided set allows for responder error with an array of answers permitted. Ideally, it would be best to place this in a JSON file, which you can call _`quiz.json`_ for simplicity.
+
+<CH.Code>
+
+```js
+import quiz from './quiz.json' assert { type: 'json' };
+
+// ...
+
+const item = quiz[Math.floor(Math.random() * quiz.length)];
+
+const collectorFilter = (response) => {
+	return item.answers.some((answer) => answer.toLowerCase() === response.content.toLowerCase());
+};
+
+await interaction.reply({ content: item.question });
+
+try {
+	const collected = await interaction.channel.awaitMessages({
+		filter: collectorFilter,
+		max: 1,
+		time: 30_000,
+		errors: ['time'],
+	});
+
+	await interaction.followUp(`${collected.first().author} got the correct answer!`);
+} catch {
+	await interaction.followUp('Looks like nobody got the answer this time.');
+}
+```
+
+</CH.Code>
+
+<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).
+</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.
+
+The filter looks for messages that match one of the answers in the array of possible answers to pass through the collector. The _`max`_ option (the second parameter) specifies that only a maximum of one message can go through the filter successfully before the Promise successfully resolves. The _`errors`_ section specifies that time will cause it to error out, which will cause the Promise to reject if one correct answer is not received within the time limit of one minute. As you can see, there is no _`collect`_ event, so you are limited in that regard.
+
+## Reaction collectors
+
+### Basic reaction collector
+
+These work quite similarly to message collectors, except that you apply them on a message rather than a channel. This example uses the <DocsLink type="class" parent="Message" symbol="createReactionCollector" brackets /> method. The filter will check for the 👍 emoji–in the default skin tone specifically, so be wary of that. It will also check that the person who reacted shares the same id as the author of the original message that the collector was assigned to.
+
+```js
+const collectorFilter = (reaction, user) => {
+	return reaction.emoji.name === '👍' && user.id === message.author.id;
+};
+
+const collector = message.createReactionCollector({ filter: collectorFilter, time: 15_000 });
+
+collector.on('collect', (reaction, user) => {
+	console.log(`Collected ${reaction.emoji.name} from ${user.tag}`);
+});
+
+collector.on('end', (collected) => {
+	console.log(`Collected ${collected.size} items`);
+});
+```
+
+### 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.
+
+```js
+const collectorFilter = (reaction, user) => {
+	return reaction.emoji.name === '👍' && user.id === message.author.id;
+};
+
+try {
+	const collected = await message.awaitReactions({ filter: collectorFilter, max: 1, time: 60_000, errors: ['time'] });
+	console.log(collected.size);
+} catch (collected) {
+	console.log(`After a minute, the user did not react.`);
+}
+```
+
+## Interaction collectors
+
+The third type of collector allows you to collect interactions; such as when users activate a slash command or click on a button in a message.
+
+### Basic message component collector
+
+Collecting interactions from message components works similarly to reaction collectors. In the following example, you will check that the interaction came from a button, and that the user clicking the button is the same user that initiated the command.
+
+One important difference to note with interaction collectors is that Discord expects a response to _all_ interactions within 3 seconds - even ones that you don't want to collect. For this reason, you may wish to _`.deferUpdate()`_ all interactions in your filter, or not use a filter at all and handle this behavior in the _`collect`_ event.
+
+```js
+import { ComponentType } from 'discord.js';
+
+const collector = message.createMessageComponentCollector({ componentType: ComponentType.Button, time: 15_000 });
+
+collector.on('collect', (i) => {
+	if (i.user.id === interaction.user.id) {
+		await i.reply(`${i.user.id} clicked on the ${i.customId} button.`);
+	} else {
+		await i.reply({ content: `These buttons aren't for you!`, ephemeral: true });
+	}
+});
+
+collector.on('end', (collected) => {
+	console.log(`Collected ${collected.size} interactions.`);
+});
+```
+
+### Await message component
+
+As before, this works similarly to the message component collector, except it is Promise-based.
+
+Unlike other Promise-based collectors, this method will only ever collect one interaction that passes the filter. If no interactions are collected before the time runs out, the Promise will reject. This behavior aligns with Discord's requirement that actions should immediately receive a response. In this example, you will use _`.deferUpdate()`_ on all interactions in the filter.
+
+```js
+import { ComponentType } from 'discord.js';
+
+const collectorFilter = (i) => {
+	i.deferUpdate();
+	return i.user.id === interaction.user.id;
+};
+
+try {
+	const interaction = await message.awaitMessageComponent({
+		filter: collectorFilter,
+		componentType: ComponentType.StringSelect,
+		time: 60_000,
+	});
+
+	await interaction.editReply(`You selected ${interaction.values.join(', ')}!`);
+} catch (error) {
+	console.log('No interactions were collected.');
+}
+```
+
+### Await modal submit
+
+If you want to wait for the submission of a modal within the context of another command or button execution, you may find the promisified collector <DocsLink type="class" parent="CommandInteraction" symbol="awaitModalSubmit" brackets /> useful.
+
+As Discord does not inform you if the user dismisses the modal, supplying a maximum _`time`_ to wait for is crucial:
+
+```js
+try {
+	const interaction = await initialInteraction.awaitModalSubmit({ time: 60_000, filter });
+	await interaction.editReply('Thank you for your submission!');
+} catch (error) {
+	console.log('No modal submit interaction was collected');
+}
+```
+
+For more information on working with modals, see the [modals section of this guide](../interactions/modals).

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

@@ -0,0 +1,95 @@
+---
+title: Formatters
+category: Popular topics
+---
+
+# Formatters
+
+discord.js provides the <DocsLink package="formatters" /> package which contains a variety of utilities you can use when writing your Discord bot.
+
+## Basic Markdown
+
+These functions format strings into all the different markdown styles supported by Discord.
+
+<CH.Code>
+
+```js
+import { bold, italic, strikethrough, underscore, spoiler, quote, blockQuote } from 'discord.js';
+
+const string = 'Hello!';
+const boldString = bold(string);
+const italicString = italic(string);
+const strikethroughString = strikethrough(string);
+const underscoreString = underscore(string);
+const spoilerString = spoiler(string);
+const quoteString = quote(string);
+const blockquoteString = blockQuote(string);
+```
+
+</CH.Code>
+
+## Links
+
+There are also two functions to format hyperlinks. _`hyperlink()`_ will format the URL into a masked markdown link, and _`hideLinkEmbed()`_ will wrap the URL in _`<>`_, preventing it from embedding.
+
+<CH.Code>
+
+```js
+import { hyperlink, hideLinkEmbed } from 'discord.js';
+
+const url = 'https://discord.js.org/';
+const link = hyperlink('discord.js', url);
+const hiddenEmbed = hideLinkEmbed(url);
+```
+
+</CH.Code>
+
+## Code blocks
+
+You can use _`inlineCode()`_ and _`codeBlock()`_ to turn a string into an inline code block or a regular code block with or without syntax highlighting.
+
+<CH.Code>
+
+```js
+import { inlineCode, codeBlock } from 'discord.js';
+
+const jsString = 'const value = true;';
+const inline = inlineCode(jsString);
+const codeblock = codeBlock(jsString);
+const highlighted = codeBlock('js', jsString);
+```
+
+</CH.Code>
+
+## Timestamps
+
+With _`time()`_, you can format Unix timestamps and dates into a Discord time string.
+
+<CH.Code>
+
+```js
+import { time, TimestampStyles } from 'discord.js';
+
+const date = new Date();
+const timeString = time(date);
+const relative = time(date, TimestampStyles.RelativeTime);
+```
+
+</CH.Code>
+
+## Mentions
+
+_`userMention()`_, _`channelMention()`_, and _`roleMention()`_ all exist to format Snowflakes into mentions.
+
+<CH.Code>
+
+```js
+import { channelMention, roleMention, userMention } from 'discord.js';
+
+const id = '123456789012345678';
+const channel = channelMention(id);
+const role = roleMention(id);
+const user = userMention(id);
+```
+
+</CH.Code>

apps/guide/src/content/04-popular-topics/06-webhooks.mdx

@@ -208,8 +208,6 @@ You can use <DocsLink type="class" parent="Webhook" symbol="editMessage" bracket
 ```js
 const message = await webhook.editMessage('123456789012345678', {
 	content: 'Edited!',
-	username: 'some-username',
-	avatarURL: 'https://guide.discordjs.dev/assets/discordjs.png',
 	embeds: [embed],
 });
 ```

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

@@ -7,7 +7,7 @@ category: Additional info
 
 ## Before you start
 
-v14 requires Node 16.9 or higher to use, so make sure you're up to date. To check your Node.js version, use _`node --version`_ in your terminal or command prompt, and if it's not high enough, update it! There are many resources online to help you with this step based on your host system.
+v14 requires Node 16.11 or higher to use, so make sure you're up to date. To check your Node.js version, use _`node --version`_ in your terminal or command prompt, and if it's not high enough, update it! There are many resources online to help you with this step based on your host system.
 
 ### Various packages are now included in v14
 
@@ -27,6 +27,10 @@ yarn remove @discordjs/builders @discordjs/formatters @discordjs/rest discord-ap
 pnpm remove @discordjs/builders @discordjs/formatters @discordjs/rest discord-api-types
 ```
 
+```sh bun
+bun remove @discordjs/builders @discordjs/formatters @discordjs/rest discord-api-types
+```
+
 </CH.Code>
 
 ## Breaking Changes
@@ -41,7 +45,7 @@ discord.js v14 makes the switch to Discord API v10!
 
 Any areas that used to accept a _`string`_ or _`number`_ type for an enum parameter will now only accept a _`number`_.
 
-In addition, the old enums exported by discord.js v13 and lower are replaced with new enums from [discord-api-types](https://discord-api-types.dev/api/discord-api-types-v10).
+In addition, the old enums exported by discord.js v13 and lower are replaced with new enums from <DiscordAPITypesLink />.
 
 #### New enum differences
 
@@ -121,7 +125,7 @@ Areas like _`Client`_ initialization, JSON slash commands and JSON message compo
 
 #### Channels
 
-Some channel type guard methods that narrowed to one channel type have been removed. Instead compare the _`type`_ property against a [ChannelType](https://discord-api-types.dev/api/discord-api-types-v10/enum/ChannelType) enum member to narrow channels.
+Some channel type guard methods that narrowed to one channel type have been removed. Instead compare the _`type`_ property against a <DiscordAPITypesLink type="enum" parent="ChannelType" /> enum member to narrow channels.
 
 <CH.Code>
 
@@ -361,7 +365,7 @@ _`IntegrationApplication#summary`_ has been removed as it is no longer supported
 
 ### Interaction
 
-Whenever an interaction is replied to and one fetches the reply, it could possibly give an [APIMessage](https://discord-api-types.dev/api/discord-api-types-v10/interface/APIMessage) if the guild was not cached. However, interaction replies now always return a discord.js <DocsLink type="class" parent="Message"/> object with _`fetchReply`_ as _`true`_.
+Whenever an interaction is replied to and one fetches the reply, it could possibly give an <DiscordAPITypesLink type="interface" parent="APIMessage" /> if the guild was not cached. However, interaction replies now always return a discord.js <DocsLink type="class" parent="Message"/> object with _`fetchReply`_ as _`true`_.
 
 The base interaction class is now <DocsLink type="class" parent="BaseInteraction"/>.
 
@@ -690,7 +694,7 @@ Added support for role connection metadata.
 
 A new <DocsLink type="class" parent="Collector" symbol="e-ignore"/> event has been added which is emitted whenever an element is not collected by the collector.
 
-Component collector options now use the [ComponentType](https://discord-api-types.dev/api/discord-api-types-v10/enum/ComponentType) enum values:
+Component collector options now use the <DiscordAPITypesLink type="enum" parent="ComponentType" /> enum values:
 
 <CH.Code>
 

apps/guide/src/styles/main.css

@@ -1,3 +1,6 @@
+@import '@unocss/reset/tailwind-compat.css';
+@unocss all;
+
 body {
 	font-family: var(--font-inter);
 	min-height: 100vh;

apps/guide/src/util/constants.ts

@@ -2,6 +2,8 @@ export const BASE_URL = 'https://discord.js.org/docs/packages' as const;
 
 export const BASE_URL_LEGACY = 'https://old.discordjs.dev/#/docs/discord.js' as const;
 
+export const BASE_URL_DISCORD_API_TYPES = 'https://discord-api-types.dev' as const;
+
 export const DESCRIPTION = 'Imagine a guide... that explores the many possibilities for your discord.js bot.';
 
 export const GITHUB_BASE_PAGES_PATH = 'https://github.com/discordjs/discord.js/tree/main/apps/guide/src/pages';
@@ -13,9 +15,9 @@ export const PACKAGES = [
 	'collection',
 	'core',
 	'formatters',
+	'next',
 	'proxy',
 	'rest',
-	'next',
 	'util',
 	'voice',
 	'ws',
@@ -24,4 +26,14 @@ export const PACKAGES = [
 /**
  * The stable version of discord.js.
  */
-export const VERSION = '14.11.0' as const;
+export const VERSION = '14.13.0' as const;
+
+/**
+ * The API version (for discord-api-types). This is prefixed with a "v".
+ */
+export const DISCORD_API_TYPES_VERSION = 'v10' as const;
+
+/**
+ * The voice API version (for discord-api-types). This is prefixed with a "v".
+ */
+export const DISCORD_API_TYPES_VOICE_VERSION = 'v4' as const;

apps/guide/src/util/fetcher.ts

@@ -1,4 +0,0 @@
-export const fetcher = async (url: string) => {
-	const res = await fetch(url);
-	return res.json();
-};

apps/guide/tsconfig.eslint.json

@@ -1,21 +1,26 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "./tsconfig.json",
 	"compilerOptions": {
 		"allowJs": true
 	},
 	"include": [
-		"**/*.ts",
-		"**/*.tsx",
-		"**/*.js",
-		"**/*.cjs",
-		"**/*.mjs",
-		"**/*.jsx",
-		"**/*.test.ts",
-		"**/*.test.js",
-		"**/*.test.mjs",
-		"**/*.spec.ts",
-		"**/*.spec.js",
-		"**/*.spec.mjs"
+		"*.ts",
+		"*.tsx",
+		"*.js",
+		".jsx",
+		"*.cjs",
+		"*.mjs",
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/**/*.js",
+		"src/**/*.jsx",
+		"src/**/*.cjs",
+		"src/**/*.mjs",
+		"bin",
+		"scripts",
+		"__tests__",
+		"__mocks__"
 	],
-	"exclude": []
+	"exclude": ["node_modules"]
 }

apps/guide/tsconfig.json

@@ -1,15 +1,16 @@
 {
+	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.json",
 	"compilerOptions": {
 		"lib": ["ESNext", "DOM", "DOM.Iterable"],
-		"isolatedModules": true,
 		"jsx": "preserve",
 		"baseUrl": ".",
+		"outDir": "dist",
 		"noEmit": true,
-		"allowJs": false,
+		"esModuleInterop": true,
+		"allowJs": true,
 		"incremental": true,
 		"skipLibCheck": true,
-		"sourceMap": true,
 		"plugins": [
 			{
 				"name": "next"
@@ -18,10 +19,17 @@
 		"paths": {
 			"~/*": ["./src/*"],
 			"contentlayer/generated": ["./.contentlayer/generated"]
-		},
-		"strictNullChecks": true,
-		"moduleResolution": "node"
+		}
 	},
-	"include": ["src/**/*.ts", "src/**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts", ".contentlayer/generated"],
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/**/*.js",
+		"src/**/*.jsx",
+		"src/**/*.cjs",
+		"src/**/*.mjs",
+		"next-env.d.ts",
+		".next/types/**/*.ts"
+	],
 	"exclude": ["node_modules"]
 }

apps/website/.env.development

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

apps/website/.eslintignore

@@ -1 +0,0 @@
-next-env.d.ts

apps/website/.eslintrc.json

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

apps/website/.gitignore

@@ -27,3 +27,4 @@ src/styles/unocss.css
 .vscode
 lighthouse-results
 
+.vercel

apps/website/.lintstagedrc.js

@@ -0,0 +1 @@
+export * from '../../.lintstagedrc.json' assert { type: 'json' };

apps/website/.prettierrc.js

@@ -0,0 +1 @@
+export * from '../../.prettierrc.json' assert { type: 'json' };

apps/website/next.config.mjs

@@ -7,14 +7,18 @@ const withBundleAnalyzer = bundleAnalyzer({
 export default withBundleAnalyzer({
 	reactStrictMode: true,
 	experimental: {
-		appDir: true,
-		serverComponentsExternalPackages: ['@microsoft/api-extractor-model', 'jju'],
+		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',
+	},
 	async redirects() {
 		return [
 			{

apps/website/package.json

@@ -1,28 +1,28 @@
 {
+	"$schema": "https://json.schemastore.org/package.json",
 	"name": "@discordjs/website",
 	"version": "0.1.0",
 	"description": "Imagine a bot... the most popular way to build discord bots",
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"test:lighthouse": "lighthouse http://localhost:3000 --output-path=./lighthouse-results",
-		"build:copy_readme": "cpy '../../packages/*/README.md' 'src/assets/readme' --rename='home-{{basename}}'",
-		"build:local": "cross-env NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
-		"build:prod": "yarn build:copy_readme && yarn build:css && yarn build:next",
+		"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",
 		"build:next": "next build",
-		"build:css": "yarn generate:css",
-		"build:search_indices": "yarn node scripts/generateAllIndices.js",
-		"build:analyze": "turbo run docs && cross-env ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
+		"build:search_indices": "pnpm node scripts/generateAllIndices.js",
+		"build:analyze": "turbo run docs --filter='@discordjs/*' --concurrency=4 && cross-env ANALYZE=true NEXT_PUBLIC_LOCAL_DEV=true pnpm run build:prod",
 		"preview": "next start",
-		"dev": "concurrently 'yarn dev:css' 'yarn dev:next'",
-		"dev:next": "next dev",
-		"dev:css": "yarn generate:css --watch",
-		"generate:css": "unocss 'src/**/*.tsx' '../../packages/ui/src/lib/components/**/*.tsx' --out-file ./src/styles/unocss.css --config ../../unocss.config.ts",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --format=pretty",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix --format=pretty",
-		"fmt": "yarn format"
+		"dev": "next dev",
+		"lint": "pnpm run build:check && prettier --check . && cross-env TIMING=1 eslint --format=pretty src",
+		"format": "pnpm run build:check && prettier --write . && cross-env TIMING=1 eslint --fix --format=pretty src",
+		"fmt": "pnpm run format"
 	},
 	"type": "module",
+	"directories": {
+		"lib": "src"
+	},
 	"contributors": [
 		"Crawl <icrawltogo@gmail.com>"
 	],
@@ -46,61 +46,59 @@
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
+		"@discordjs/api-extractor-model": "workspace:^",
 		"@discordjs/api-extractor-utils": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
 		"@discordjs/ui": "workspace:^",
-		"@microsoft/api-extractor-model": "7.26.8",
-		"@microsoft/tsdoc": "0.14.2",
-		"@planetscale/database": "1.7.0",
+		"@microsoft/tsdoc": "^0.14.2",
+		"@microsoft/tsdoc-config": "0.16.2",
+		"@planetscale/database": "^1.11.0",
 		"@react-icons/all-files": "^4.1.0",
-		"@vercel/analytics": "^1.0.1",
-		"@vercel/edge-config": "^0.1.9",
-		"@vercel/og": "^0.5.4",
-		"ariakit": "^2.0.0-next.44",
-		"bright": "^0.8.2",
-		"class-variance-authority": "^0.6.0",
+		"@vercel/analytics": "^1.1.1",
+		"@vercel/edge-config": "^0.4.1",
+		"@vercel/og": "^0.5.20",
+		"ariakit": "2.0.0-next.44",
+		"bright": "^0.8.4",
+		"class-variance-authority": "^0.7.0",
 		"cmdk": "^0.2.0",
-		"meilisearch": "^0.32.3",
-		"next": "^13.4.1",
+		"meilisearch": "^0.35.0",
+		"next": "14.0.3-canary.2",
 		"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-raw": "^6.1.1",
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
-		"sharp": "^0.32.1",
-		"swr": "^2.1.5"
+		"sharp": "^0.32.6"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "^13.4.1",
-		"@testing-library/react": "^14.0.0",
-		"@testing-library/user-event": "^14.4.3",
-		"@types/node": "18.16.5",
-		"@types/react": "^18.2.6",
-		"@types/react-dom": "^18.2.4",
-		"@unocss/cli": "^0.51.12",
-		"@unocss/eslint-config": "^0.51.12",
-		"@unocss/reset": "^0.51.12",
-		"@vitejs/plugin-react": "^4.0.0",
-		"@vitest/coverage-c8": "^0.31.0",
-		"concurrently": "^8.0.1",
-		"cpy-cli": "^4.2.0",
+		"@next/bundle-analyzer": "14.0.3-canary.2",
+		"@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",
+		"cpy-cli": "^5.0.0",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.40.0",
-		"eslint-config-neon": "^0.1.47",
+		"eslint": "^8.53.0",
+		"eslint-config-neon": "^0.1.57",
 		"eslint-formatter-pretty": "^5.0.0",
-		"happy-dom": "^9.10.9",
-		"lighthouse": "^10.2.0",
-		"prettier": "^2.8.8",
-		"turbo": "^1.9.4-canary.10",
-		"typescript": "^5.0.4",
-		"vercel": "^29.1.1",
-		"vitest": "^0.31.0"
+		"happy-dom": "^12.10.3",
+		"postcss": "^8.4.31",
+		"prettier": "^3.0.3",
+		"turbo": "^1.10.17-canary.0",
+		"typescript": "^5.2.2",
+		"vercel": "^32.5.3",
+		"vitest": "^0.34.6"
 	},
 	"engines": {
-		"node": ">=18.13.0"
+		"node": ">=18"
 	}
 }

apps/website/postcss.config.cjs

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

apps/website/scripts/generateAllIndices.js

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

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

@@ -0,0 +1,28 @@
+'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,6 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 
-import type { ApiItemKind } from '@microsoft/api-extractor-model';
+import type { ApiItemKind } from '@discordjs/api-extractor-model';
 import { ImageResponse } from '@vercel/og';
 import type { NextRequest } from 'next/server';
 

apps/website/src/app/docAPI.ts

@@ -1,43 +1,71 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { connect } from '@planetscale/database';
+import { cache } from 'react';
+import { N_RECENT_VERSIONS } from '~/util/constants';
 
 const sql = connect({
-	async fetch(input, init) {
-		// @ts-expect-error: Deleting cache or setting as undefined, same thing
-		return fetch(input, { ...init, cache: undefined, next: { revalidate: 3_600 } });
-	},
 	url: process.env.DATABASE_URL!,
+	async fetch(url, init) {
+		delete init?.cache;
+		return fetch(url, { ...init, next: { revalidate: 3_600 } });
+	},
 });
 
-export async function fetchVersions(packageName: string): Promise<string[]> {
-	const response = await fetch(`https://docs.discordjs.dev/api/info?package=${packageName}`, {
-		next: { revalidate: 3_600 },
-	});
+export const fetchVersions = cache(async (packageName: string): Promise<string[]> => {
+	if (process.env.NEXT_PUBLIC_LOCAL_DEV || process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
+		return ['main'];
+	}
 
-	return response.json();
-}
+	try {
+		const { rows } = await sql.execute('select version from documentation where name = ? order by version desc', [
+			packageName,
+		]);
 
-export async function fetchModelJSON(packageName: string, version: string): Promise<unknown> {
+		// @ts-expect-error: https://github.com/planetscale/database-js/issues/71
+		return rows.map((row) => row.version).slice(0, N_RECENT_VERSIONS);
+	} catch {
+		return [];
+	}
+});
+
+export const fetchModelJSON = cache(async (packageName: string, version: string) => {
 	if (process.env.NEXT_PUBLIC_LOCAL_DEV) {
-		const res = await readFile(
-			join(process.cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'),
-			'utf8',
-		);
-
 		try {
+			const res = await readFile(
+				join(process.cwd(), '..', '..', 'packages', packageName, 'docs', 'docs.api.json'),
+				'utf8',
+			);
+
 			return JSON.parse(res);
 		} catch {
-			console.log(res);
-			return {};
+			return null;
 		}
 	}
 
-	const { rows } = await sql.execute('select data from documentation where name = ? and version = ?', [
-		packageName,
-		version,
-	]);
+	if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') {
+		try {
+			const { rows } = await sql.execute('select data from documentation where name = ? and version = ?', [
+				packageName,
+				'main',
+			]);
 
-	// @ts-expect-error: https://github.com/planetscale/database-js/issues/71
-	return rows[0].data;
-}
+			// @ts-expect-error: https://github.com/planetscale/database-js/issues/71
+			return rows[0]?.data ?? null;
+		} catch {
+			return null;
+		}
+	}
+
+	try {
+		const { rows } = await sql.execute('select data from documentation where name = ? and version = ?', [
+			packageName,
+			version,
+		]);
+
+		// @ts-expect-error: https://github.com/planetscale/database-js/issues/71
+		return rows[0]?.data ?? null;
+	} catch {
+		return null;
+	}
+});

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

@@ -1,5 +1,6 @@
 'use client';
 
+import type { Route } from 'next';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
@@ -13,7 +14,7 @@ export default function NotFound() {
 			<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}
+				href={href as Route}
 			>
 				Take me back
 			</Link>

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

@@ -1,4 +1,3 @@
-import { addPackageToModel, tryResolveSummaryText } from '@discordjs/scripts';
 import type {
 	ApiClass,
 	ApiDeclaredItem,
@@ -13,8 +12,9 @@ import type {
 	ApiTypeAlias,
 	ApiVariable,
 	ApiFunction,
-} from '@microsoft/api-extractor-model';
-import { ApiItemKind, ApiModel } from '@microsoft/api-extractor-model';
+} 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';
@@ -24,16 +24,30 @@ 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 type { ItemRouteParams } from '~/util/fetchMember';
 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;
 	}
@@ -87,7 +101,11 @@ export async function generateMetadata({ params }: { params: ItemRouteParams })
 	const searchParams = resolveMemberSearchParams(params.package, member);
 	url.search = searchParams.toString();
 	const ogImage = url.toString();
-	const description = tryResolveSummaryText(member as ApiDeclaredItem);
+	let description;
+
+	if (member) {
+		description = tryResolveSummaryText(member as ApiDeclaredItem);
+	}
 
 	return {
 		title: name,
@@ -102,21 +120,28 @@ export async function generateMetadata({ params }: { params: ItemRouteParams })
 
 export async function generateStaticParams({ params: { package: packageName, version } }: { params: ItemRouteParams }) {
 	const modelJSON = await fetchModelJSON(packageName, version);
+
+	if (!modelJSON) {
+		return [{ package: packageName, version, item: '' }];
+	}
+
 	const model = addPackageToModel(new ApiModel(), modelJSON);
 
 	const pkg = model.tryGetPackageByName(packageName);
 	const entry = pkg?.entryPoints[0];
 
 	if (!entry) {
-		notFound();
+		return [{ package: packageName, version, item: '' }];
 	}
 
 	return entry.members.map((member: ApiItem) => ({
+		package: packageName,
+		version,
 		item: `${member.displayName}${OVERLOAD_SEPARATOR}${member.kind}`,
 	}));
 }
 
-function Member({ member }: { member?: ApiItem }) {
+function Member({ member }: { readonly member?: ApiItem }) {
 	switch (member?.kind) {
 		case 'Class':
 			return <Class clazz={member as ApiClass} />;
@@ -136,7 +161,7 @@ function Member({ member }: { member?: ApiItem }) {
 }
 
 export default async function Page({ params }: { params: ItemRouteParams }) {
-	const member = await fetchMember(params);
+	const member = await fetchMember(params.package, params.version ?? 'main', params.item);
 
 	if (!member) {
 		notFound();

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

@@ -1,6 +1,6 @@
 'use client';
 
-export default function Error({ error }: { error: Error }) {
+export default function Error({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

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

@@ -1,51 +1,57 @@
-import { addPackageToModel } from '@discordjs/scripts';
-import type { ApiFunction, ApiItem } from '@microsoft/api-extractor-model';
-import { ApiModel } from '@microsoft/api-extractor-model';
+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 { Providers } from './providers';
+import { cache, type PropsWithChildren } from 'react';
 import { fetchModelJSON, fetchVersions } from '~/app/docAPI';
-import { Banner } from '~/components/Banner';
 import { CmdKDialog } from '~/components/CmdK';
 import { Nav } from '~/components/Nav';
 import type { SidebarSectionItemData } from '~/components/Sidebar';
 import { resolveItemURI } from '~/components/documentation/util';
-import { N_RECENT_VERSIONS, PACKAGES } from '~/util/constants';
+import { addPackageToModel } from '~/util/addPackageToModel';
+import { 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'));
 
-export interface VersionRouteParams {
+interface VersionRouteParams {
 	package: string;
 	version: string;
 }
 
-export async function generateStaticParams() {
+export const generateStaticParams = async () => {
 	const params: VersionRouteParams[] = [];
 
 	await Promise.all(
-		PACKAGES.map(async (packageName) => {
-			const versions = (await fetchVersions(packageName)).slice(-N_RECENT_VERSIONS);
+		PACKAGES.slice(1).map(async (packageName) => {
+			const versions = await fetchVersions(packageName);
 
 			params.push(...versions.map((version) => ({ package: packageName, version })));
 		}),
 	);
 
 	return params;
-}
+};
 
-function serializeIntoSidebarItemData(item: ApiItem): SidebarSectionItemData {
+const serializeIntoSidebarItemData = cache((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);
@@ -68,14 +74,15 @@ export default async function PackageLayout({ children, params }: PropsWithChild
 		return (member as ApiFunction).overloadIndex === 1;
 	});
 
+	const versions = await fetchVersions(params.package);
+
 	return (
 		<Providers>
-			<Banner className="mb-6" />
 			<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
 				<Header />
 				<div className="relative top-2.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_-_145px)]">
-						<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
+					<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
+						<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} versions={versions} />
 					</div>
 
 					<div className="mx-auto max-w-5xl min-w-xs w-full pb-10">

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

@@ -1,34 +1,38 @@
 import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
-import type { SerializeOptions } from 'next-mdx-remote/dist/types';
-import { MDXRemote } from 'next-mdx-remote/rsc';
-import rehypeRaw from 'rehype-raw';
+import { compileMDX } from 'next-mdx-remote/rsc';
+import { cache } from 'react';
 import rehypeSlug from 'rehype-slug';
 import remarkGfm from 'remark-gfm';
-import type { VersionRouteParams } from './layout';
 import { SyntaxHighlighter } from '~/components/SyntaxHighlighter';
 
-async function loadREADME(packageName: string) {
-	return readFile(join(process.cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
+interface VersionRouteParams {
+	package: string;
+	version: string;
 }
 
-const mdxOptions = {
-	mdxOptions: {
-		remarkPlugins: [remarkGfm],
-		remarkRehypeOptions: { allowDangerousHtml: true },
-		rehypePlugins: [rehypeRaw, rehypeSlug],
-		format: 'md',
-	},
-} satisfies SerializeOptions;
+const loadREADME = cache(async (packageName: string) => {
+	return readFile(join(process.cwd(), 'src', 'assets', 'readme', packageName, 'home-README.md'), 'utf8');
+});
+
+export async function generateStaticParams({ params }: { params: VersionRouteParams }) {
+	return [{ package: params.package, version: params.version }];
+}
 
 export default async function Page({ params }: { params: VersionRouteParams }) {
-	const { package: packageName } = params;
-	const readmeSource = await loadREADME(packageName);
+	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="max-w-none prose">
-			{/* @ts-expect-error async component */}
-			<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
-		</div>
-	);
+	return <div className="relative top-4 max-w-none prose">{content}</div>;
 }

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

@@ -3,28 +3,18 @@ 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 runtime = 'edge';
+export const revalidate = 3_600;
 
-async function getData(pkg: string) {
-	if (!PACKAGES.includes(pkg)) {
+export default async function Page({ params }: { params: { package: string } }) {
+	if (!PACKAGES.includes(params.package)) {
 		notFound();
 	}
 
-	const res = await fetch(`https://docs.discordjs.dev/api/info?package=${pkg}`, { next: { revalidate: 3_600 } });
-	const data: string[] = await res.json();
-
-	if (!data.length) {
-		throw new Error('Failed to fetch data');
-	}
-
-	return data.reverse();
-}
-
-export default async function Page({ params }: { params: { package: string } }) {
-	const data = await getData(params.package);
+	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">
@@ -36,7 +26,7 @@ export default async function Page({ params }: { params: { package: string } })
 						href={`/docs/packages/${params.package}/${version}`}
 						key={`${version}-${idx}`}
 					>
-						<div className="flex flex-row place-content-between place-items-center gap-4">
+						<div className="flex grow flex-row place-content-between place-items-center gap-4">
 							<div className="flex flex-row place-content-between place-items-center gap-4">
 								<VscVersions size={25} />
 								<h2 className="font-semibold">{version}</h2>

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

@@ -6,27 +6,11 @@ import Link from 'next/link';
 import { buttonVariants } from '~/styles/Button';
 import { PACKAGES } from '~/util/constants';
 
-export const runtime = 'edge';
-
 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">
-				<a
-					className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
-					href="https://old.discordjs.dev/#/docs/discord.js"
-				>
-					<div className="flex grow flex-row place-content-between place-items-center gap-4">
-						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex flex-row place-content-between place-items-center gap-4">
-								<VscPackage size={25} />
-								<h2 className="font-semibold">discord.js</h2>
-							</div>
-						</div>
-						<VscArrowRight size={20} />
-					</div>
-				</a>
 				{PACKAGES.map((pkg, idx) => (
 					<Link
 						className={buttonVariants({ variant: 'secondary' })}
@@ -34,19 +18,9 @@ export default function Page() {
 						key={`${pkg}-${idx}`}
 					>
 						<div className="flex grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex grow flex-row place-content-between place-items-center gap-4">
-								<div className="flex flex-row place-content-between place-items-center gap-4">
-									<VscPackage size={25} />
-									<h2 className="font-semibold">{pkg}</h2>
-								</div>
-								{/* <Link href={`/docs/packages/${pkg}`}>
-									<div
-										className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-none focus:ring focus:ring-white active:translate-y-px"
-										role="link"
-									>
-										Select version
-									</div>
-								</Link> */}
+							<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>
@@ -54,11 +28,9 @@ export default function Page() {
 				))}
 				<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 grow flex-row place-content-between place-items-center gap-4">
-							<div className="flex flex-row place-content-between place-items-center gap-4">
-								<VscPackage size={25} />
-								<h2 className="font-semibold">discord-api-types</h2>
-							</div>
+						<div 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>

apps/website/src/app/error.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-export default function Error({ error }: { error: Error }) {
+export default function Error({ error }: { readonly error: Error }) {
 	console.error(error);
 
 	return (

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

@@ -1,94 +0,0 @@
-'use client';
-
-import { Analytics } from '@vercel/analytics/react';
-import type { Metadata } from 'next';
-import { Providers } from './providers';
-import { DESCRIPTION } from '~/util/constants';
-import { inter } from '~/util/fonts';
-
-import '@unocss/reset/tailwind-compat.css';
-import '~/styles/unocss.css';
-import '~/styles/cmdk.css';
-import '~/styles/main.css';
-
-export const metadata: Metadata = {
-	title: 'discord.js',
-	description: DESCRIPTION,
-	viewport: {
-		minimumScale: 1,
-		initialScale: 1,
-		width: 'device-width',
-	},
-	icons: {
-		other: [
-			{
-				url: '/favicon-32x32.png',
-				sizes: '32x32',
-				type: 'image/png',
-			},
-			{
-				url: '/favicon-16x16.png',
-				sizes: '16x16',
-				type: 'image/png',
-			},
-		],
-		apple: [
-			'/apple-touch-icon.png',
-			{
-				url: '/safari-pinned-tab.svg',
-				rel: 'mask-icon',
-			},
-		],
-	},
-
-	manifest: '/site.webmanifest',
-
-	themeColor: [
-		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
-		{ media: '(prefers-color-scheme: dark)', color: '#1c1c1e' },
-	],
-	colorScheme: 'light dark',
-
-	appleWebApp: {
-		title: 'discord.js',
-	},
-
-	applicationName: 'discord.js',
-
-	openGraph: {
-		siteName: 'discord.js',
-		type: 'website',
-		title: 'discord.js',
-		description: DESCRIPTION,
-		images: 'https://discordjs.dev/api/open-graph.png',
-	},
-
-	twitter: {
-		card: 'summary_large_image',
-		creator: '@iCrawlToGo',
-	},
-
-	other: {
-		'msapplication-TileColor': '#1c1c1e',
-	},
-};
-
-export default function GlobalError({ error }: { 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/layout.tsx

@@ -1,23 +1,27 @@
 import { Analytics } from '@vercel/analytics/react';
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import type { PropsWithChildren } from 'react';
-import { Providers } from './providers';
 import { DESCRIPTION } from '~/util/constants';
 import { inter, jetBrainsMono } from '~/util/fonts';
+import { Providers } from './providers';
 
-import '@unocss/reset/tailwind-compat.css';
-import '~/styles/unocss.css';
 import '~/styles/cmdk.css';
 import '~/styles/main.css';
 
+export const viewport: Viewport = {
+	themeColor: [
+		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
+		{ media: '(prefers-color-scheme: dark)', color: '#1c1c1e' },
+	],
+	colorScheme: 'light dark',
+};
+
 export const metadata: Metadata = {
+	metadataBase: new URL(
+		process.env.METADATA_BASE_URL ? process.env.METADATA_BASE_URL : `http://localhost:${process.env.PORT ?? 3_000}`,
+	),
 	title: 'discord.js',
 	description: DESCRIPTION,
-	viewport: {
-		minimumScale: 1,
-		initialScale: 1,
-		width: 'device-width',
-	},
 	icons: {
 		other: [
 			{
@@ -42,12 +46,6 @@ export const metadata: Metadata = {
 
 	manifest: '/site.webmanifest',
 
-	themeColor: [
-		{ media: '(prefers-color-scheme: light)', color: '#f1f3f5' },
-		{ media: '(prefers-color-scheme: dark)', color: '#1c1c1e' },
-	],
-	colorScheme: 'light dark',
-
 	appleWebApp: {
 		title: 'discord.js',
 	},

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

@@ -1,3 +1,4 @@
+import type { Route } from 'next';
 import Link from 'next/link';
 
 export default function NotFound() {
@@ -7,7 +8,7 @@ export default function NotFound() {
 			<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"
+				href={'/docs' as Route}
 			>
 				Take me back
 			</Link>