chore(core): release @discordjs/core@0.2.0

.commitlintrc.json

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

.dockerignore

@@ -1,33 +1,31 @@
 # Packages
-**/node_modules
+node_modules/
 
 # Log files
-**/logs
-**/*.log
-**/npm-debug.log*
+logs/
+*.log
+npm-debug.log*
 
 # Runtime data
-**/pids
-**/*.pid
-**/*.seed
+pids
+*.pid
+*.seed
 
 # Env
-**/.env
+.env
 
 # Dist
-**/dist/
-**/dist-docs/
+dist/
 
 # Miscellaneous
-**/.tmp
-**/.vscode
-**/.idea
-**/.DS_Store
-**/.turbo
-**/tsconfig.tsbuildinfo
-**/coverage
-**/__tests__
-**/out
+.tmp/
+.vscode/*
+.idea/
+.DS_Store
+.turbo
+tsconfig.tsbuildinfo
+coverage/
+__tests__/
 
 # yarn
 .pnp.*
@@ -39,29 +37,20 @@
 !.yarn/versions
 
 # Cache
-**/.prettiercache
-**/.eslintcache
-**/.vercel
+.prettiercache
+.eslintcache
 
 # Docker specific
-**/.cliff-jumperrc.json
-**/api-extractor.json
-**/api-extractor-docs.json
-**/.eslintignore
-**/.eslintrc.json
-**/.lintstagedrc.js
-**/.lintstagedrc.cjs
-**/.lintstagedrc.json
-**/.prettierignore
-**/.prettierrc.js
-**/.prettierrc.cjs
-**/.prettierrc.json
-**/cliff.toml
-**/CHANGELOG.md
-**/README.md
-**/LICENSE
-**/tsconfig.eslint.json
-**/tsconfig.docs.json
-**/docs/
-**/vitest.config.ts
-
+.cliff-jumperrc.json
+api-extractor.json
+.eslintrc.json
+.lintstagedrc.cjs
+.lintstagedrc.cjs
+.prettierignore
+.prettierrc.js
+.prettierrc.cjs
+cliff.toml
+CHANGELOG.md
+README.md
+tsconfig.eslint.json
+docs/

.eslintrc.json

@@ -1,12 +1,14 @@
 {
-	"$schema": "https://json.schemastore.org/eslintrc.json",
 	"root": true,
 	"extends": ["neon/common", "neon/node", "neon/typescript", "neon/prettier"],
 	"parserOptions": {
-		"project": ["./tsconfig.eslint.json"]
+		"project": "./tsconfig.eslint.json"
+	},
+	"rules": {
+		"@typescript-eslint/consistent-type-definitions": ["error", "interface"]
 	},
 	"ignorePatterns": ["**/dist/*"],
-	"rules": {
-		"import/extensions": 0
+	"env": {
+		"jest": true
 	}
 }

.github/CODEOWNERS

@@ -1,28 +0,0 @@
-# Learn how to add code owners here:
-# https://help.github.com/en/articles/about-code-owners
-
-* @iCrawl
-
-/apps/guide/ @discordjs/website @discordjs/guide
-/apps/guide/src/content/ @discordjs/guide
-/apps/website/ @discordjs/website
-
-/packages/actions/ @discordjs/actions
-/packages/api-extractor-utils/ @discordjs/api-extractor-utils
-/packages/brokers/ @discordjs/brokers
-/packages/builders/ @discordjs/builders
-/packages/collection/ @discordjs/collection
-/packages/core/ @discordjs/core
-/packages/create-discord-bot/ @discordjs/guide
-/packages/discord.js/ @discordjs/core
-/packages/docgen/ @iCrawl
-/packages/formatters/ @discordjs/formatters
-/packages/next/ @discordjs/core
-/packages/proxy/ @discordjs/proxy
-/packages/proxy-container/ @discordjs/proxy
-/packages/rest/ @discordjs/rest
-/packages/scripts/ @discordjs/scripts
-/packages/ui/ @discordjs/ui
-/packages/util/ @discordjs/util
-/packages/voice/ @discordjs/core
-/packages/ws/ @discordjs/ws

.github/CONTRIBUTING.md

@@ -11,21 +11,22 @@ 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 `pnpm install --frozen-lockfile` ([install](https://pnpm.io/installation))
-3. Run `pnpm run build` to build local packages
+2. Run `yarn --immutable` ([install](https://yarnpkg.com/getting-started/install))
+3. Run `yarn build` to build local packages
 4. Code your heart out!
-5. Run `pnpm run test` to run ESLint and ensure any JSDoc changes are valid
+5. Run `yarn test` to run ESLint and ensure any JSDoc changes are valid
 6. [Submit a pull request](https://github.com/discordjs/discord.js/compare) (Make sure you follow the [conventional commit format](https://github.com/discordjs/discord.js/blob/main/.github/COMMIT_CONVENTION.md))
 
 ## Testing changes locally
 
-If you want to test changes you've made locally, you can do so by using `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.
+If you want to test changes you've made locally, you can do so by using `yarn link`. This will create a symlink to your local copy of the discord.js libraries.
 
 1. Create a new directory `mkdir discordjs-test` and move into it `cd discordjs-test`
-2. Initialize a new 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!
+2. Initialize a new yarn 3 project `yarn init -2`
+3. Disable pnp `yarn config set nodeLinker node-modules`
+4. Now link the local discord.js project you cloned earlier `yarn link -A {PATH_TO_DISCORDJS_REPO}`
+5. Install packages you'd like to test locally `yarn add discord.js@latest`, `yarn add @discordjs/rest@latest`, etc. **Note: Make sure you use `latest` tag or else yarn will try to install the remote package from npm**
+6. Import the package in your source code and test them out!
 
 ### Working with TypeScript packages
 
@@ -33,18 +34,15 @@ 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 `pnpm 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 `yarn turbo run build --filter=@discordjs/rest -- --watch` in the root folder of where you cloned the discord.js repo.
 
 ## Adding new packages
 
 If you'd like to create another package under the `@discordjs` organization run the following command:
 
-```sh
-pnpm run create-package <package-name> [package-description]
+```bash
+yarn create-package <package-name> [package-description]
 ```
 
-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
+This will create new package directory under `packages/` with the required configuration files. You can
+begin to make changes within the `src/` directory.

.github/ISSUE_TEMPLATE/02-application_bug_report.yml

@@ -1,58 +0,0 @@
-name: Websites bug report
-description: Report an issue with the documentation or guide websites.
-labels: [bug, need repro]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thank you for filing an issue! If you are here to ask a question, use Discord instead: https://discord.gg/djs
-
-        This issue form is for our documentation and guide websites.
-  - type: dropdown
-    id: application
-    attributes:
-      label: Which application is this bug report for?
-      options:
-        - Documentation
-        - Guide
-    validations:
-      required: true
-  - type: textarea
-    id: description
-    attributes:
-      label: Issue description
-      description: Describe the issue in as much detail as possible.
-    validations:
-      required: true
-  - type: textarea
-    id: steps_to_reproduce
-    attributes:
-      label: Steps to Reproduce
-      description: What steps must be taken to reproduce this issue?
-      placeholder: |
-        1. Visit a page
-        2. Click a link
-        3. ...
-    validations:
-      required: true
-  - type: textarea
-    id: versions
-    attributes:
-      label: Versions
-      description: List necessary versions here. This includes your browser, operating system etc.
-      placeholder: |
-        - Safari 16.4 (18615.1.26.11.23)
-        - macOS Ventura 13.3.1
-    validations:
-      required: true
-  - type: dropdown
-    id: priority
-    attributes:
-      label: Issue priority
-      description: Please be realistic. If you need to elaborate on your reasoning, please use the issue description field above.
-      options:
-        - Low (slightly annoying)
-        - Medium (should be fixed soon)
-        - High (immediate attention needed)
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,13 +1,11 @@
 name: Bug report
-description: Report an issue with discord.js or another package.
+description: Report incorrect or unexpected behavior of a package
 labels: [bug, need repro]
 body:
   - type: markdown
     attributes:
       value: |
-        Thank you for filing an issue! If you are here to ask a question, use Discord instead: https://discord.gg/djs
-
-        This issue form is for discord.js, including other packages.
+        Use Discord for questions: https://discord.gg/djs
   - type: dropdown
     id: package
     attributes:
@@ -18,14 +16,10 @@ body:
         - builders
         - collection
         - core
-        - create-discord-bot
         - formatters
-        - next
         - proxy
         - proxy-container
         - rest
-        - ui
-        - util
         - voice
         - ws
     validations:
@@ -34,44 +28,57 @@ body:
     id: description
     attributes:
       label: Issue description
-      description: Describe the issue in as much detail as possible.
+      description: |
+        Describe the issue in as much detail as possible.
+
+        Tip: You can attach images or log files by clicking this area to highlight it and then dragging files into it.
       placeholder: |
         Steps to reproduce with below code sample:
-        1. Do thing
-        2. Do thing in Discord client
-        3. Observe behavior
-        4. See error logs below
+        1. do thing
+        2. do thing in Discord client
+        3. observe behavior
+        4. see error logs below
     validations:
       required: true
   - type: textarea
-    id: code_sample
+    id: codesample
     attributes:
       label: Code sample
-      description: |
-        Your code sample should be:
-        1. Minimal - Use as little code as possible that still produces the same problem (and is understandable)
-        2. Complete - Provide all parts someone else needs to reproduce your problem
-        3. Reproducible - Test the code you're about to provide to make sure it reproduces the problem
-
-        This will be automatically formatted into code, so no need for backticks.
+      description: Include a reproducible, minimal code sample. This will be automatically formatted into code, so no need for backticks.
       render: typescript
-  - type: textarea
-    id: versions
-    attributes:
-      label: Versions
-      description: List necessary versions here. This includes your package version, runtime version, operating system etc.
       placeholder: |
-        - 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
+        Your code sample should be...
+        ... Minimal - Use as little code as possible that still produces the same problem (and is understandable)
+        ... Complete - Provide all parts someone else needs to reproduce your problem
+        ... Reproducible - Test the code you're about to provide to make sure it reproduces the problem
+  - type: input
+    id: djs-version
+    attributes:
+      label: Package version
+      description: Which version of the package are you using? Run `npm list <package>` in your project directory and paste the output.
+      placeholder: We no longer support version 12 or earlier of discord.js
     validations:
       required: true
+  - type: input
+    id: node-version
+    attributes:
+      label: Node.js version
+      description: |
+        Which version of Node.js are you using? Run `node --version` in your project directory and paste the output.
+        If you are using TypeScript, please include its version (`npm list typescript`) as well.
+      placeholder: Node.js version 16.9+ is required for version 14.0.0+
+    validations:
+      required: true
+  - type: input
+    id: os
+    attributes:
+      label: Operating system
+      description: Which OS does your application run on?
   - type: dropdown
     id: priority
     attributes:
-      label: Issue priority
-      description: Please be realistic. If you need to elaborate on your reasoning, please use the issue description field above.
+      label: Priority this issue should have
+      description: Please be realistic. If you need to elaborate on your reasoning, please use the Issue description field above.
       options:
         - Low (slightly annoying)
         - Medium (should be fixed soon)
@@ -82,9 +89,12 @@ body:
     id: partials
     attributes:
       label: Which partials do you have configured?
-      description: Check your `Client` constructor for the `partials` key.
+      description: |
+        Check your Client constructor for the `partials` key.
+
+        Tip: you can select multiple items
       options:
-        - Not applicable
+        - Not applicable (subpackage bug)
         - No Partials
         - User
         - Channel
@@ -100,13 +110,16 @@ body:
     id: intents
     attributes:
       label: Which gateway intents are you subscribing to?
-      description: Check your `Client` constructor for the `intents` key.
+      description: |
+        Check your Client constructor options for the `intents` key.
+
+        Tip: you can select multiple items
       options:
-        - Not applicable
+        - Not applicable (subpackage bug)
         - No Intents
         - Guilds
         - GuildMembers
-        - GuildModeration
+        - GuildBans
         - GuildEmojisAndStickers
         - GuildIntegrations
         - GuildWebhooks
@@ -127,7 +140,7 @@ body:
     validations:
       required: true
   - type: input
-    id: dev_release
+    id: dev-release
     attributes:
       label: I have tested this issue on a development release
       placeholder: d23280c (commit hash)

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -9,25 +9,19 @@ body:
         We do not implement unreleased features.
         Use Discord for questions: https://discord.gg/djs
   - type: dropdown
-    id: application_or_package
+    id: package
     attributes:
-      label: Which application or package is this feature request for?
+      label: Which package is the feature request for?
       options:
         - discord.js
-        - Documentation
-        - Guide
         - brokers
         - builders
         - collection
         - core
-        - create-discord-bot
         - formatters
-        - next
         - proxy
         - proxy-container
         - rest
-        - ui
-        - util
         - voice
         - ws
     validations:
@@ -53,7 +47,7 @@ body:
       label: Alternative solutions or implementations
       description: A clear and concise description of any alternative solutions or features you have considered.
   - type: textarea
-    id: additional_context
+    id: additional-context
     attributes:
       label: Other context
       description: Any other context, screenshots, or file uploads that help us understand your feature request.

.github/auto_assign.yml

@@ -0,0 +1,8 @@
+addReviewers: true
+reviewers:
+  - iCrawl
+  - SpaceEEC
+  - kyranet
+  - vladfrangu
+numberOfReviewers: 0
+runOnDraft: true

.github/issue-labeler.yml

@@ -1,51 +0,0 @@
-apps:guide:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nGuide\\n"
-apps:website:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nDocumentation\\n"
-packages:brokers:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nbrokers\\n"
-packages:builders:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nbuilders\\n"
-packages:collection:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\ncollection\\n"
-packages:core:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\ncore\\n"
-packages:create-discord-bot:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\ncreate-discord-bot\\n"
-packages:discord.js:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\ndiscord.js\\n"
-packages:formatters:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nformatters\\n"
-packages:next:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nnext\\n"
-packages:proxy:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nproxy\\n"
-packages:proxy-container:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nproxy-container\\n"
-packages:rest:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nrest\\n"
-packages:ui:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\ui\\n"
-packages:util:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\util\\n"
-packages:voice:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nvoice\\n"
-packages:ws:
-  - "### Which (application|package|application or package) is this (bug
-    report|feature request) for\\?\\n\\nws\\n"

.github/labeler.yml

@@ -4,12 +4,6 @@ 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/**/*
@@ -22,9 +16,6 @@ packages:collection:
 packages:core:
   - packages/core/*
   - packages/core/**/*
-packages:create-discord-bot:
-  - packages/create-discord-bot/*
-  - packages/create-discord-bot/**/*
 packages:discord.js:
   - packages/discord.js/*
   - packages/discord.js/**/*
@@ -34,9 +25,6 @@ packages:docgen:
 packages:formatters:
   - packages/formatters/*
   - packages/formatters/**/*
-packages:next:
-  - packages/next/*
-  - packages/next/**/*
 packages:proxy:
   - packages/proxy/*
   - packages/proxy/**/*

.github/labels.yml

@@ -8,8 +8,6 @@
   color: fbca04
 - name: backlog
   color: 7ef7ef
-- name: backport
-  color: 88aabb
 - name: blocked
   color: fc1423
 - name: bug
@@ -52,10 +50,6 @@
   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
@@ -64,16 +58,12 @@
   color: fbca04
 - name: packages:core
   color: fbca04
-- name: packages:create-discord-bot
-  color: fbca04
 - name: packages:discord.js
   color: fbca04
 - name: packages:docgen
   color: fbca04
 - name: packages:formatters
   color: fbca04
-- name: packages:next
-  color: fbca04
 - name: packages:proxy
   color: fbca04
 - name: packages:proxy-container

.github/workflows/cleanup-cache.yml

@@ -1,35 +0,0 @@
-# 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

@@ -1,26 +0,0 @@
-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
-    env:
-      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-    if: github.repository_owner == 'discordjs'
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Pull vercel production environment
-        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
-
-      - name: Build website artifacts
-        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
-
-      - name: Deploy website artifacts to vercel
-        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/deprecate-version.yml

@@ -1,50 +0,0 @@
-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

@@ -3,11 +3,6 @@ on:
   push:
     branches:
       - 'main'
-    paths:
-      - 'packages/*/src/**'
-      - '!packages/create-discord-bot/**'
-      - '!packages/proxy-container/**'
-      - '!packages/ui/**'
     tags:
       - '**'
   workflow_dispatch:
@@ -26,8 +21,8 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
   cancel-in-progress: true
 jobs:
-  build-docs:
-    name: Build & upload documentation
+  build:
+    name: Build documentation
     runs-on: ubuntu-latest
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
@@ -39,19 +34,83 @@ jobs:
         with:
           ref: ${{ inputs.ref || '' }}
 
-      - name: Install node.js v18
+      - name: Install node.js v16
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
 
       - name: Install dependencies
-        uses: ./packages/actions/src/pnpmCache
+        uses: ./packages/actions/src/yarnCache
 
       - name: Build dependencies
-        run: pnpm run build
+        run: yarn build
 
       - name: Build docs
-        run: pnpm run docs
+        run: yarn docs
+
+      - name: Upload docgen artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: docgen
+          path: packages/*/docs/docs.json
+
+      - name: Upload api-extractor artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: api-extractor
+          path: packages/*/docs/docs.api.json
+
+  upload:
+    name: Upload Documentation
+    needs: build
+    strategy:
+      max-parallel: 1
+      fail-fast: false
+      matrix:
+        package:
+          [
+            'brokers',
+            'builders',
+            'collection',
+            'core',
+            'discord.js',
+            'formatters',
+            'proxy',
+            'rest',
+            'util',
+            'voice',
+            'ws',
+          ]
+    runs-on: ubuntu-latest
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install node.js v16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        uses: ./packages/actions/src/yarnCache
+
+      - name: Build actions
+        run: yarn workspace @discordjs/actions build
+
+      - name: Download docgen artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: docgen
+          path: docs
+
+      - name: Download api-extractor artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: api-extractor
+          path: docs
 
       - name: Checkout docs repository
         uses: actions/checkout@v3
@@ -67,51 +126,32 @@ jobs:
         with:
           tag: ${{ github.ref_name }}
 
-      - name: Upload documentation to database
-        if: ${{ github.ref_type == 'tag' }}
-        env:
-          DATABASE_URL: ${{ secrets.DATABASE_URL }}
-          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
-        uses: ./packages/actions/src/uploadDocumentation
-        with:
-          package: ${{ steps.extract-tag.outputs.package }}
-          version: ${{ steps.extract-tag.outputs.semver }}
-
       - name: Move docs to correct directory
-        if: ${{ github.ref_type == 'tag' }}
+        if: ${{ github.ref_type == 'tag' && matrix.package == steps.extract-tag.outputs.package }}
         env:
           PACKAGE: ${{ steps.extract-tag.outputs.package }}
           SEMVER: ${{ steps.extract-tag.outputs.semver }}
         run: |
-          mkdir -p "out/${PACKAGE}"
-          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"
+          mkdir -p out/${PACKAGE}
+          if [[ $PACKAGE == "discord.js" ]]; then
+            mv docs/${PACKAGE}/docs/docs.json out/${PACKAGE}/${SEMVER}.json
+          fi
+          if [[ $PACKAGE != "discord.js" ]]; then
+            mv docs/${PACKAGE}/docs/docs.api.json out/${PACKAGE}/${SEMVER}.api.json
           fi
-
-      - name: Upload documentation to database
-        if: ${{ github.ref_type == 'branch' }}
-        env:
-          DATABASE_URL: ${{ secrets.DATABASE_URL }}
-          BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
-        uses: ./packages/actions/src/uploadDocumentation
 
       - name: Move docs to correct directory
         if: ${{ github.ref_type == 'branch' }}
+        env:
+          PACKAGE: ${{ matrix.package }}
         run: |
-          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"
-            fi
-          done
+          mkdir -p out/${PACKAGE}
+          if [[ $PACKAGE == "discord.js" ]]; then
+            mv docs/${PACKAGE}/docs/docs.json out/${PACKAGE}/${GITHUB_REF_NAME}.json
+          fi
+          if [[ $PACKAGE != "discord.js" ]]; then
+            mv docs/${PACKAGE}/docs/docs.api.json out/${PACKAGE}/${GITHUB_REF_NAME}.api.json
+          fi
 
       - name: Commit and push
         run: |
@@ -121,33 +161,3 @@ 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

.github/workflows/issue-triage.yml

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

.github/workflows/lock.yml

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

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

@@ -0,0 +1,26 @@
+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 v16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - 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/proxy @discordjs/rest @discordjs/util @discordjs/voice @discordjs/ws'
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/pr-triage.yml

@@ -11,3 +11,7 @@ jobs:
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           sync-labels: true
+
+      - name: Automatically assign reviewers
+        if: github.event.action == 'opened'
+        uses: kentaro-m/auto-assign-action@v1.2.3

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

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

.github/workflows/publish-dev.yml

@@ -22,8 +22,6 @@ jobs:
             folder: 'formatters'
           - package: 'discord.js'
             folder: 'discord.js'
-          - package: '@discordjs/next'
-            folder: 'next'
           - package: '@discordjs/proxy'
             folder: 'proxy'
           - package: '@discordjs/rest'
@@ -42,41 +40,22 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
 
-      - name: Install node.js v18
+      - name: Install node.js v16
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 16
           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
-        if: steps.release-check.outputs.release == '1'
-        uses: ./packages/actions/src/pnpmCache
+        uses: ./packages/actions/src/yarnCache
 
       - name: Build dependencies
-        if: steps.release-check.outputs.release == '1'
-        run: pnpm run build
+        run: yarn build
 
       - name: Publish package
-        if: steps.release-check.outputs.release == '1'
         run: |
-          pnpm --filter=${{ matrix.package }} run release --preid "dev.$(date +%s)-$(git rev-parse --short HEAD)"
-          pnpm --filter=${{ matrix.package }} publish --no-git-checks --tag dev || true
+          yarn workspace ${{ matrix.package }} release --preid "dev.$(date +%s)-$(git rev-parse --short HEAD)"
+          yarn workspace ${{ matrix.package }} npm publish --tag dev || true
         env:
-          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 }}
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}

.github/workflows/publish-docker.yml

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

.github/workflows/publish-release.yml

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

.github/workflows/tests.yml

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

.gitignore

@@ -1,8 +1,8 @@
 # Packages
-node_modules
+node_modules/
 
 # Log files
-logs
+logs/
 *.log
 npm-debug.log*
 
@@ -15,29 +15,19 @@ pids
 .env
 
 # Dist
-dist
-dist-docs
+dist/
 
 # Miscellaneous
-.tmp
+.tmp/
 .vscode/*
 !.vscode/extensions.json
 !.vscode/settings.json
-.idea
+.idea/
 .DS_Store
 .turbo
 tsconfig.tsbuildinfo
-coverage
-out
-package.tgz
-tsup.config.bundled*
-vitest.config.ts.timestamp*
-
-# Deno
-deno.lock
-
-# Bun
-bun.lockb
+coverage/
+out/
 
 # yarn
 .pnp.*
@@ -51,4 +41,3 @@ bun.lockb
 # Cache
 .prettiercache
 .eslintcache
-.vercel

.husky/commit-msg

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

.husky/pre-commit

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

.lintstagedrc.json

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

.npmrc

@@ -1,6 +0,0 @@
-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,5 +0,0 @@
-CODEOWNERS
-CHANGELOG.md
-tsup.config.bundled*
-vitest.config.ts.timestamp*
-pnpm-lock.yaml

.prettierrc.json

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,34 +1,19 @@
 {
-	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-	"eslint.experimental.useFlatConfig": true,
-	"eslint.workingDirectories": [
-		{ "directory": "${workspaceFolder}" },
-		{ "pattern": "./apps/*/" },
-		{ "pattern": "./packages/*/" }
-	],
+	"eslint.workingDirectories": [{ "pattern": "./apps/*" }, { "pattern": "./packages/*" }],
+	"eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"],
+	"prettier.documentSelectors": ["**/*.astro"],
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
-		"source.organizeImports": false,
-		"source.fixAll.eslint": true,
-		"source.fixAll": true
+		"source.fixAll": true,
+		"source.organizeImports": false
 	},
 	"editor.trimAutoWhitespace": false,
 	"files.associations": {
-		"api-extractor.json": "jsonc",
-		"api-extractor-docs.json": "jsonc",
-		"tsconfig.json": "jsonc",
-		"tsconfig.eslint.json": "jsonc",
-		"tsconfig.docs.json": "jsonc"
+		"*.mdx": "markdown"
 	},
 	"files.insertFinalNewline": true,
 	"files.eol": "\n",
-	"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"
+	"npm.packageManager": "yarn",
+	"typescript.tsdk": "node_modules/typescript/lib"
 }

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

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

.yarnrc.yml

@@ -0,0 +1,11 @@
+nodeLinker: node-modules
+
+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"
+
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

README.md

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

api-extractor.json

@@ -45,7 +45,7 @@
 	 *
 	 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
 	 */
-	"mainEntryPointFilePath": "<projectFolder>/dist-docs/index.d.ts",
+	"mainEntryPointFilePath": "<projectFolder>/dist/index.d.ts",
 
 	/**
 	 * A list of NPM package names whose exports should be treated as part of this package.
@@ -88,52 +88,9 @@
 		 *
 		 * DEFAULT VALUE: no overrideTsconfig section
 		 */
-		"overrideTsconfig": {
-			"compilerOptions": {
-				// Type Checking
-				"allowUnreachableCode": false,
-				"allowUnusedLabels": false,
-				"exactOptionalPropertyTypes": true,
-				"noFallthroughCasesInSwitch": true,
-				"noImplicitOverride": true,
-				"noImplicitReturns": true,
-				"noPropertyAccessFromIndexSignature": false,
-				"noUncheckedIndexedAccess": true,
-				"noUnusedLocals": true,
-				"noUnusedParameters": true,
-				"strict": true,
-
-				// Modules
-				"allowArbitraryExtensions": false,
-				"allowImportingTsExtensions": false,
-				"module": "ESNext",
-				"moduleResolution": "nodenext",
-				"resolveJsonModule": true,
-				"resolvePackageJsonExports": false,
-				"resolvePackageJsonImports": false,
-
-				// Emit
-				"declaration": true,
-				"declarationMap": true,
-				"importHelpers": false,
-				"newLine": "lf",
-				"noEmitHelpers": true,
-				"outDir": "dist",
-				"removeComments": false,
-				"sourceMap": true,
-
-				// Interop Constraints
-				"esModuleInterop": false,
-				"forceConsistentCasingInFileNames": true,
-				"isolatedModules": true,
-
-				// Language and Environment
-				"experimentalDecorators": true,
-				"lib": ["ESNext"],
-				"target": "ES2022",
-				"useDefineForClassFields": true
-			}
-		}
+		// "overrideTsconfig": {
+		//   . . .
+		// }
 		/**
 		 * This option causes the compiler to be invoked with the --skipLibCheck option. This option is not recommended
 		 * and may cause API Extractor to produce incomplete or incorrect declarations, but it may be required when
@@ -224,7 +181,7 @@
 		/**
 		 * (REQUIRED) Whether to generate the .d.ts rollup file.
 		 */
-		"enabled": false,
+		"enabled": false
 
 		/**
 		 * Specifies the output path for a .d.ts rollup file to be generated without any trimming.
@@ -238,7 +195,7 @@
 		 * SUPPORTED TOKENS: <projectFolder>, <packageName>, <unscopedPackageName>
 		 * DEFAULT VALUE: "<projectFolder>/dist/<unscopedPackageName>.d.ts"
 		 */
-		"untrimmedFilePath": "<projectFolder>/dist-docs/index.d.ts"
+		// "untrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts",
 
 		/**
 		 * Specifies the output path for a .d.ts rollup file to be generated with trimming for an "alpha" release.

apps/guide/.env.development

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

apps/guide/.eslintrc.json

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

apps/guide/.gitignore

@@ -1,8 +1,8 @@
 # Packages
-node_modules
+node_modules/
 
 # Log files
-logs
+logs/
 *.log
 npm-debug.log*
 
@@ -13,16 +13,18 @@ pids
 
 # Env
 .env
-.env*.local
 
 # Dist
-.contentlayer
-.next
-public/searchIndex
+dist/
+typings/
+.cache/
+build/
+api/
 src/styles/unocss.css
+.next/
 
 # Miscellaneous
-.tmp
-.vscode
-lighthouse-results
-
+.tmp/
+coverage/
+.vercel
+public/searchIndex

apps/guide/.prettierignore

@@ -1,7 +1,15 @@
-.contentlayer
-.next
+# Autogenerated
+CHANGELOG.md
 .turbo
-.vscode
-coverage
+dist/
+docs/**/*
+!docs/index.yml
+!docs/README.md
+coverage/
+.cache
+build/
 src/styles/unocss.css
-next-env.d.ts
+api/
+.next/
+.vercel/
+.cache/

apps/guide/.prettierrc.cjs

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

apps/guide/README.md

@@ -10,20 +10,15 @@
 	</p>
 	<p>
 		<a href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"><img src="https://raw.githubusercontent.com/discordjs/discord.js/main/.github/powered-by-vercel.svg" alt="Vercel" /></a>
-		<a href="https://www.cloudflare.com"><img src="https://raw.githubusercontent.com/discordjs/discord.js/main/.github/powered-by-workers.png" alt="Cloudflare Workers" height="44" /></a>
 	</p>
 </div>
 
-## About
-
-The official guide for discord.js, made to help you get started easily with the library.
-
 ## Links
 
 - [Website][website] ([source][website-source])
 - [Documentation][documentation]
 - [Guide][guide] ([source][guide-source])
-  Also see the v13 to v14 [Update Guide][guide-update], which includes updated and removed items from the library.
+  See also the [Update Guide][guide-update], including updated and removed items in the library.
 - [discord.js Discord server][discord]
 - [Discord API Discord server][discord-api]
 - [GitHub][source]
@@ -31,17 +26,16 @@ The official guide for discord.js, made to help you get started easily with the
 
 ## Contributing
 
-Before creating an issue, please ensure that it hasn't already been reported/suggested, and double-check the
-[documentation][documentation].  
 See [the contribution guide][contributing] if you'd like to submit a PR.
 
 ## Help
 
-If you don't understand something in the documentation, you are experiencing problems, or you just need a gentle nudge in the right direction, please don't hesitate to join our official [discord.js Server][discord].
+If you don't understand something in the documentation, you are experiencing problems, or you just need a gentle
+nudge in the right direction, please don't hesitate to join our official [discord.js Server][discord].
 
-[website]: https://discord.js.org
+[website]: https://discord.js.org/
 [website-source]: https://github.com/discordjs/discord.js/tree/main/apps/website
-[documentation]: https://discord.js.org/docs
+[documentation]: https://discord.js.org/
 [guide]: https://discordjs.guide/
 [guide-source]: https://github.com/discordjs/guide
 [guide-update]: https://discordjs.guide/additional-info/changes-in-v14.html

apps/guide/astro.config.ts

@@ -0,0 +1,117 @@
+import { fileURLToPath, URL } from 'node:url';
+import image from '@astrojs/image';
+import mdx from '@astrojs/mdx';
+import prefetch from '@astrojs/prefetch';
+import react from '@astrojs/react';
+import { remarkCodeHike } from '@code-hike/mdx';
+import { defineConfig } from 'astro/config';
+import compress from 'astro-compress';
+import critters from 'astro-critters';
+import { type Node, toString } from 'hast-util-to-string';
+import { h } from 'hastscript';
+import { escape } from 'html-escaper';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeSlug from 'rehype-slug';
+import shikiThemeDarkPlus from 'shiki/themes/dark-plus.json' assert { type: 'json' };
+import Unocss from 'unocss/astro';
+
+const LinkIcon = h(
+	'svg',
+	{
+		width: '1rem',
+		height: '1rem',
+		viewBox: '0 0 24 24',
+		fill: 'none',
+		stroke: 'currentColor',
+		strokeWidth: '2',
+		strokeLinecap: 'round',
+		strokeLinejoin: 'round',
+	},
+	h('path', {
+		// eslint-disable-next-line id-length
+		d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
+	}),
+	h('path', {
+		// eslint-disable-next-line id-length
+		d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
+	}),
+);
+
+const createSROnlyLabel = (text: string) => {
+	const node = h('span.sr-only', `Section titled ${escape(text)}`);
+	node.properties!['is:raw'] = true;
+	return node;
+};
+
+const rootDir = new URL('../../', import.meta.url);
+
+export default defineConfig({
+	integrations: [
+		react(),
+		mdx({
+			remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],
+			rehypePlugins: [
+				rehypeSlug,
+				[
+					rehypeAutolinkHeadings,
+					{
+						properties: {
+							class:
+								'relative inline-flex w-6 h-6 place-items-center place-content-center outline-0 text-black dark:text-white ml-2',
+						},
+						behavior: 'after',
+						group: ({ tagName }: { tagName: string }) =>
+							h('div', {
+								class: `[&>*]:inline-block [&>h1]:m-0 [&>h2]:m-0 [&>h3]:m-0 [&>h4]:m-0 level-${tagName}`,
+								tabIndex: -1,
+							}),
+						content: (heading: Node) => [
+							h(
+								`span.anchor-icon`,
+								{
+									ariaHidden: 'true',
+								},
+								LinkIcon,
+							),
+							createSROnlyLabel(toString(heading)),
+						],
+					},
+				],
+			],
+		}),
+		image({
+			serviceEntryPoint: '@astrojs/image/sharp',
+		}),
+		prefetch({
+			throttle: 3,
+		}),
+		Unocss({
+			configFile: fileURLToPath(new URL('unocss.config.ts', rootDir)),
+		}),
+		critters(),
+		compress(),
+	],
+	markdown: {
+		extendDefaultPlugins: true,
+		syntaxHighlight: false,
+	},
+	vite: {
+		resolve: {
+			alias: {
+				'ariakit/button': fileURLToPath(new URL('node_modules/ariakit/esm/button/index.js', rootDir)),
+				'ariakit/disclosure': fileURLToPath(new URL('node_modules/ariakit/esm/disclosure/index.js', rootDir)),
+				'ariakit/separator': fileURLToPath(new URL('node_modules/ariakit/esm/separator/index.js', rootDir)),
+				'ariakit-utils/dom': fileURLToPath(new URL('node_modules/ariakit-utils/esm/dom.js', rootDir)),
+				'ariakit-utils/events': fileURLToPath(new URL('node_modules/ariakit-utils/esm/events.js', rootDir)),
+				'ariakit-utils/focus': fileURLToPath(new URL('node_modules/ariakit-utils/esm/focus.js', rootDir)),
+				'ariakit-utils/hooks': fileURLToPath(new URL('node_modules/ariakit-utils/esm/hooks.js', rootDir)),
+				'ariakit-utils/misc': fileURLToPath(new URL('node_modules/ariakit-utils/esm/misc.js', rootDir)),
+				'ariakit-utils/platform': fileURLToPath(new URL('node_modules/ariakit-utils/esm/platform.js', rootDir)),
+				'ariakit-utils/system': fileURLToPath(new URL('node_modules/ariakit-utils/esm/system.js', rootDir)),
+				'react-icons/fi': fileURLToPath(new URL('node_modules/react-icons/fi/index.esm.js', rootDir)),
+				'react-icons/vsc': fileURLToPath(new URL('node_modules/react-icons/vsc/index.esm.js', rootDir)),
+				'react-use': fileURLToPath(new URL('node_modules/react-use/esm/index.js', rootDir)),
+			},
+		},
+	},
+});

apps/guide/contentlayer.config.ts

@@ -1,94 +0,0 @@
-import { remarkCodeHike } from '@code-hike/mdx';
-import { defineDocumentType, makeSource } from 'contentlayer/source-files';
-import { type Node, toString } from 'hast-util-to-string';
-import { h } from 'hastscript';
-import { escape } from 'html-escaper';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeSlug from 'rehype-slug';
-import remarkGfm from 'remark-gfm';
-import codeHikeThemeDarkPlus from './src/styles/code-hike-theme-dark-plus.json';
-
-export const Content = defineDocumentType(() => ({
-	name: 'Content',
-	filePathPattern: `**/*.mdx`,
-	contentType: 'mdx',
-	fields: {
-		title: {
-			type: 'string',
-			required: true,
-		},
-		category: {
-			type: 'string',
-			required: true,
-		},
-	},
-	computedFields: {
-		slug: {
-			type: 'string',
-			// eslint-disable-next-line unicorn/prefer-string-replace-all
-			resolve: (doc) => doc._raw.flattenedPath.replace(/\d+-/g, ''),
-		},
-		url: {
-			type: 'string',
-			// eslint-disable-next-line unicorn/prefer-string-replace-all
-			resolve: (doc) => `/guide/${doc._raw.flattenedPath.replace(/\d+-/g, '')}`,
-		},
-	},
-}));
-
-const LinkIcon = h(
-	'svg',
-	{
-		width: '1.25rem',
-		height: '1.25rem',
-		viewBox: '0 0 24 24',
-		fill: 'none',
-		stroke: 'currentColor',
-		strokeWidth: '2',
-		strokeLinecap: 'round',
-		strokeLinejoin: 'round',
-	},
-	h('path', {
-		// eslint-disable-next-line id-length
-		d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71',
-	}),
-	h('path', {
-		// eslint-disable-next-line id-length
-		d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71',
-	}),
-);
-
-const createSROnlyLabel = (text: any) => {
-	return h('span', { class: 'sr-only' }, `Section titled ${escape(text)}`);
-};
-
-export default makeSource({
-	contentDirPath: 'src/content',
-	documentTypes: [Content],
-	mdx: {
-		remarkPlugins: [remarkGfm, [remarkCodeHike, { theme: codeHikeThemeDarkPlus, lineNumbers: true }]],
-		rehypePlugins: [
-			rehypeSlug,
-			[
-				rehypeAutolinkHeadings,
-				{
-					properties: {
-						class:
-							'relative inline-flex place-items-center place-content-center outline-none text-black dark:text-white pr-2 -ml-8 opacity-0 group-hover:opacity-100',
-					},
-					behavior: 'prepend',
-					content: (heading: Node) => [
-						h(
-							`span.anchor-icon`,
-							{
-								ariaHidden: 'true',
-							},
-							LinkIcon,
-						),
-						createSROnlyLabel(toString(heading)),
-					],
-				},
-			],
-		],
-	},
-});

apps/guide/next-env.d.ts

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

apps/guide/next.config.js

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

apps/guide/package.json

@@ -1,26 +1,19 @@
 {
-	"$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",
-		"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": "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"
+		"build:local": "yarn build:prod",
+		"build:prod": "yarn workspaces foreach -ptR run build && astro build",
+		"dev": "yarn workspaces foreach -ptR run build && astro dev",
+		"preview": "astro preview",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --format=pretty",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix --format=pretty",
+		"fmt": "yarn format"
 	},
+	"type": "module",
 	"contributors": [
 		"Crawl <icrawltogo@gmail.com>"
 	],
@@ -36,64 +29,61 @@
 	],
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/discordjs/discord.js.git",
-		"directory": "apps/guide"
+		"url": "https://github.com/discordjs/discord.js.git"
 	},
 	"bugs": {
 		"url": "https://github.com/discordjs/discord.js/issues"
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
-		"@code-hike/mdx": "^0.9.0",
+		"@code-hike/mdx": "^0.7.4",
 		"@discordjs/ui": "workspace:^",
-		"@react-icons/all-files": "^4.1.0",
-		"@vercel/analytics": "^1.1.1",
-		"@vercel/edge-config": "^0.4.1",
-		"@vercel/og": "^0.5.20",
-		"ariakit": "2.0.0-next.44",
-		"cmdk": "^0.2.0",
-		"contentlayer": "^0.3.4",
-		"next": "14.0.3-canary.5",
-		"next-contentlayer": "^0.3.4",
-		"next-themes": "^0.2.1",
+		"ariakit": "^2.0.0-next.41",
 		"react": "^18.2.0",
 		"react-custom-scrollbars-2": "^4.5.0",
 		"react-dom": "^18.2.0",
-		"rehype-autolink-headings": "^6.1.1",
-		"rehype-slug": "^5.1.0",
-		"remark-gfm": "^3.0.1",
-		"sharp": "^0.32.6"
+		"react-icons": "^4.7.1",
+		"react-use": "^17.4.0"
 	},
 	"devDependencies": {
-		"@next/bundle-analyzer": "14.0.3-canary.5",
-		"@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",
+		"@astrojs/image": "^0.12.0",
+		"@astrojs/mdx": "^0.12.0",
+		"@astrojs/prefetch": "^0.1.1",
+		"@astrojs/react": "^1.2.2",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^14.4.3",
+		"@types/node": "16.18.4",
+		"@types/react": "^18.0.25",
+		"@types/react-dom": "^18.0.9",
+		"@types/react-syntax-highlighter": "^15.5.5",
+		"@unocss/cli": "^0.47.5",
+		"@unocss/reset": "^0.47.5",
+		"@vitejs/plugin-react": "^2.2.0",
+		"@vitest/coverage-c8": "^0.25.3",
+		"astro": "^1.6.12",
+		"astro-compress": "^1.1.15",
+		"astro-critters": "^1.1.15",
 		"cross-env": "^7.0.3",
-		"eslint": "^8.53.0",
-		"eslint-config-neon": "^0.1.57",
-		"eslint-formatter-pretty": "^5.0.0",
-		"happy-dom": "^12.10.3",
+		"eslint": "^8.28.0",
+		"eslint-config-neon": "^0.1.40",
+		"eslint-formatter-pretty": "^4.1.0",
+		"happy-dom": "^7.7.0",
 		"hast-util-to-string": "^2.0.0",
-		"hastscript": "^8.0.0",
+		"hastscript": "^7.1.0",
 		"html-escaper": "^3.0.3",
-		"postcss": "^8.4.31",
-		"prettier": "^3.1.0",
-		"turbo": "^1.10.17-canary.0",
-		"typescript": "^5.2.2",
-		"unocss": "^0.57.3",
-		"vercel": "^32.5.3",
-		"vitest": "^0.34.6"
+		"prettier": "^2.8.0",
+		"prettier-plugin-astro": "^0.7.0",
+		"prettier-plugin-tailwindcss": "^0.2.0",
+		"rehype-autolink-headings": "^6.1.1",
+		"rehype-slug": "^5.1.0",
+		"sharp": "^0.31.2",
+		"shiki": "^0.11.1",
+		"typescript": "^4.9.3",
+		"unocss": "^0.47.5",
+		"vercel": "^28.7.0",
+		"vitest": "^0.25.3"
 	},
 	"engines": {
-		"node": ">=18"
+		"node": ">=16.9.0"
 	}
 }

apps/guide/postcss.config.cjs

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

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

@@ -1,26 +0,0 @@
-'use client';
-
-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>
-			</body>
-		</html>
-	);
-}

apps/guide/src/app/error.tsx

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

apps/guide/src/app/guide/[...slug]/not-found.tsx

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

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

@@ -1,21 +0,0 @@
-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 }: { readonly params: { slug: string[] } }) {
-	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
-
-	if (!content) {
-		notFound();
-	}
-
-	return (
-		<article className="max-w-none px-5 prose">
-			<Mdx code={content?.body.code ?? ''} />
-		</article>
-	);
-}

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

@@ -1,25 +0,0 @@
-import type { PropsWithChildren } from 'react';
-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 (
-		<Providers>
-			<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
-				<Header />
-				<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
-					<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
-						<Nav />
-					</div>
-
-					<div className="mx-auto max-w-5xl min-w-xs w-full pb-10">
-						{children}
-						<Footer />
-					</div>
-				</div>
-			</main>
-		</Providers>
-	);
-}

apps/guide/src/app/guide/page.tsx

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

apps/guide/src/app/guide/providers.tsx

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

apps/guide/src/app/layout.tsx

@@ -1,84 +0,0 @@
-import { Analytics } from '@vercel/analytics/react';
-import type { Metadata, Viewport } from 'next';
-import type { PropsWithChildren } from 'react';
-import { DESCRIPTION } from '~/util/constants';
-import { inter, jetBrainsMono } from '~/util/fonts';
-import { Providers } from './providers';
-
-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,
-	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',
-
-	appleWebApp: {
-		title: 'discord.js',
-	},
-
-	applicationName: 'discord.js',
-
-	openGraph: {
-		siteName: 'discord.js',
-		type: 'website',
-		title: 'discord.js',
-		description: DESCRIPTION,
-		images: 'https://discordjs.dev/api/open-graph.png',
-	},
-
-	twitter: {
-		card: 'summary_large_image',
-		creator: '@iCrawlToGo',
-	},
-
-	other: {
-		'msapplication-TileColor': '#090a16',
-	},
-};
-
-export default function RootLayout({ children }: PropsWithChildren) {
-	return (
-		<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
-			<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
-				<Providers>{children}</Providers>
-				<Analytics />
-			</body>
-		</html>
-	);
-}

apps/guide/src/app/loading.tsx

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

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

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

apps/guide/src/app/page.tsx

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

apps/guide/src/app/providers.tsx

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

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

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

apps/guide/src/components/DiscordAPITypesLink.tsx

@@ -1,91 +0,0 @@
-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

@@ -1,86 +1,3 @@
-import { FiExternalLink } from '@react-icons/all-files/fi/FiExternalLink';
-import type { PropsWithChildren } from 'react';
-import { BASE_URL, BASE_URL_LEGACY, PACKAGES, VERSION } from '~/util/constants';
-
-interface DocsLinkOptions {
-	/**
-	 * Whether to apply brackets to the end of the symbol to denote a method.
-	 *
-	 * @remarks Functions automatically infer this.
-	 */
-	readonly brackets?: boolean;
-	/**
-	 * The package.
-	 *
-	 * @defaultValue `'discord.js'`
-	 */
-	readonly package?: (typeof PACKAGES)[number];
-	/**
-	 * The initial documentation class, function, interface etc.
-	 *
-	 * @example `'Client'`
-	 */
-	readonly parent?: string;
-	/**
-	 * Whether to reference a static property.
-	 *
-	 * @remarks
-	 * This should only be used for the https://discord.js.org domain
-	 * as static properties are not identified in the URL.
-	 */
-	readonly static?: boolean;
-	/**
-	 * The symbol belonging to the parent.
-	 *
-	 * @example '`login'`
-	 */
-	readonly symbol?: string;
-	/**
-	 * The type of the {@link DocsLinkOptions.parent}.
-	 *
-	 * @example `'class'`
-	 * @example `'Function'`
-	 */
-	readonly type?: string;
-}
-
-export function DocsLink({
-	package: docs = PACKAGES[0],
-	type,
-	parent,
-	symbol,
-	brackets,
-	static: staticReference,
-	children,
-}: PropsWithChildren<DocsLinkOptions>) {
-	// In the case of no type and no parent, this will default to the entry point of the respective documentation.
-	let url = docs === PACKAGES[0] ? `${BASE_URL_LEGACY}/${VERSION}/general/welcome` : `${BASE_URL}/${docs}/stable`;
-	let text = `${docs === PACKAGES[0] ? '' : '@discordjs/'}${docs}`;
-
-	// If there is a type and parent, we need to do some parsing.
-	if (type && parent) {
-		const bracketText = brackets || type?.toUpperCase() === 'FUNCTION' ? '()' : '';
-
-		// Legacy discord.js documentation parsing.
-		if (docs === PACKAGES[0]) {
-			url = `${BASE_URL_LEGACY}/${VERSION}/${type}/${parent}`;
-			if (symbol) url += `?scrollTo=${symbol}`;
-
-			text = `${parent}${symbol ? (symbol.startsWith('s-') ? '.' : '#') : ''}${
-				// eslint-disable-next-line prefer-named-capture-group
-				symbol ? `${symbol.replace(/(e|s)-/, '')}` : ''
-			}${bracketText}`;
-		} else {
-			url += `/${parent}:${type}`;
-			if (symbol) url += `#${symbol}`;
-			text = `${parent}${symbol ? `${staticReference ? '.' : '#'}${symbol}` : ''}${bracketText}`;
-		}
-	}
-
-	return (
-		<a className="inline-flex flex-row place-items-center gap-1" href={url} rel="noopener noreferrer" target="_blank">
-			{children ?? text}
-			<FiExternalLink size={18} />
-		</a>
-	);
+export function DocsLink() {
+	return null;
 }

apps/guide/src/components/ExternalLink.tsx

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

apps/guide/src/components/Footer.tsx

@@ -1,98 +0,0 @@
-import Image from 'next/image';
-import vercelLogo from '~/assets/powered-by-vercel.svg';
-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-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"
-						rel="external noopener noreferrer"
-						target="_blank"
-						title="Vercel"
-					>
-						<Image
-							alt="Vercel"
-							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-							height={44}
-							placeholder="blur"
-							src={vercelLogo}
-							width={212}
-						/>
-					</a>
-					<a
-						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
-						href="https://www.cloudflare.com"
-						rel="external noopener noreferrer"
-						target="_blank"
-						title="Cloudflare Workers"
-					>
-						<Image
-							alt="Cloudflare"
-							blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAABLCAQAAAA1k5H2AAAAi0lEQVR42u3SMQEAAAgDoC251a3gL2SgmfBYBRAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARAAARCAgwWEOSWBnYbKggAAAABJRU5ErkJggg=="
-							height={44}
-							placeholder="blur"
-							priority
-							src={workersLogo}
-						/>
-					</a>
-				</div>
-				<div 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 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>
-		</footer>
-	);
-}

apps/guide/src/components/H1.tsx

@@ -1,9 +0,0 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-
-export function H1({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
-	return (
-		<h1 className={`group ${className}`} {...props}>
-			{children}
-		</h1>
-	);
-}

apps/guide/src/components/H2.tsx

@@ -1,9 +0,0 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-
-export function H2({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
-	return (
-		<h2 className={`group ${className}`} {...props}>
-			{children}
-		</h2>
-	);
-}

apps/guide/src/components/H3.tsx

@@ -1,9 +0,0 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-
-export function H3({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
-	return (
-		<h3 className={`group ${className}`} {...props}>
-			{children}
-		</h3>
-	);
-}

apps/guide/src/components/H4.tsx

@@ -1,9 +0,0 @@
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-
-export function H4({ children, className, ...props }: PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>) {
-	return (
-		<h4 className={`group ${className}`} {...props}>
-			{children}
-		</h4>
-	);
-}

apps/guide/src/components/Header.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-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';
-import { Fragment, useMemo } from 'react';
-import { useNav } from '~/contexts/nav';
-
-const ThemeSwitcher = dynamic(async () => import('./ThemeSwitcher'));
-
-export default function Header() {
-	const pathname = usePathname();
-	const { setOpened } = useNav();
-
-	const pathElements = useMemo(
-		() =>
-			pathname
-				.split('/')
-				.slice(1)
-				.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('/')}` as Route}
-						key={`${path}-${idx}`}
-					>
-						{path}
-					</Link>
-				)),
-		[pathname],
-	);
-
-	const breadcrumbs = useMemo(
-		() =>
-			pathElements.flatMap((el, idx, array) => {
-				if (idx === 0) {
-					return (
-						<Fragment key={`${el.key}-${idx}`}>
-							<div className="mx-2">/</div>
-							<div>{el}</div>
-							<div className="mx-2">/</div>
-						</Fragment>
-					);
-				}
-
-				if (idx !== array.length - 1) {
-					return (
-						<Fragment key={`${el.key}-${idx}`}>
-							<div>{el}</div>
-							<div className="mx-2">/</div>
-						</Fragment>
-					);
-				}
-
-				return <div key={`${el.key}-${idx}`}>{el}</div>;
-			}),
-		[pathElements],
-	);
-
-	return (
-		<header className="sticky top-4 z-20 border border-light-900 rounded-md bg-white/75 shadow backdrop-blur-md dark:border-dark-100 dark:bg-dark-600/75">
-			<div className="block h-16 px-6">
-				<div className="h-full flex flex-row place-content-between place-items-center gap-8">
-					<Button
-						aria-label="Menu"
-						className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
-						onClick={() => setOpened((open) => !open)}
-					>
-						<VscMenu size={24} />
-					</Button>
-					<div className="hidden lg:flex lg:grow lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
-					<div className="flex flex-row place-items-center gap-4">
-						<Button
-							aria-label="GitHub"
-							as="a"
-							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
-							href="https://github.com/discordjs/discord.js"
-							rel="external noopener noreferrer"
-							target="_blank"
-						>
-							<VscGithubInverted size={24} />
-						</Button>
-						<ThemeSwitcher />
-					</div>
-				</div>
-			</div>
-		</header>
-	);
-}

apps/guide/src/components/Mdx.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import { Alert, Section, DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
-import { useMDXComponent } from 'next-contentlayer/hooks';
-import { DocsLink } from '~/components/DocsLink';
-import { ResultingCode } from '~/components/ResultingCode';
-import { DiscordAPITypesLink } from './DiscordAPITypesLink';
-import { H1 } from './H1';
-import { H2 } from './H2';
-import { H3 } from './H3';
-import { H4 } from './H4';
-
-export function Mdx({ code }: { readonly code: string }) {
-	const Component = useMDXComponent(code);
-
-	return (
-		<Component
-			components={{
-				Alert,
-				Section,
-				DiscordMessages,
-				DiscordMessage,
-				DiscordMessageEmbed,
-				DiscordAPITypesLink,
-				DocsLink,
-				ResultingCode,
-				h1: H1,
-				h2: H2,
-				h3: H3,
-				h4: H4,
-			}}
-		/>
-	);
-}

apps/guide/src/components/Nav.tsx

@@ -1,32 +0,0 @@
-'use client';
-
-import { Scrollbars } from 'react-custom-scrollbars-2';
-import { useNav } from '~/contexts/nav';
-import { Sidebar } from './Sidebar';
-
-export function Nav() {
-	const { opened } = useNav();
-
-	return (
-		<nav
-			className={`dark:bg-dark-600/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
-				opened ? 'block' : 'hidden'
-			} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
-		>
-			<Scrollbars
-				autoHide
-				className="[&>div]:overscroll-none"
-				hideTracksWhenNotNeeded
-				renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
-				renderTrackVertical={(props) => (
-					<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
-				)}
-				universal
-			>
-				<div className="flex flex-col gap-4 p-3">
-					<Sidebar />
-				</div>
-			</Scrollbars>
-		</nav>
-	);
-}

apps/guide/src/components/Navbar.tsx

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

apps/guide/src/components/Outline.tsx

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

apps/guide/src/components/PageButton.tsx

@@ -1,15 +1,7 @@
-export function PageButton({
-	url,
-	title,
-	direction,
-}: {
-	readonly direction: 'next' | 'prev';
-	readonly title: string;
-	readonly url: string;
-}) {
+export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; 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"
+			className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple flex transform-gpu cursor-pointer select-none appearance-none flex-row flex-col place-items-center gap-2 rounded py-3 px-4 leading-none no-underline outline-0 focus:ring active:translate-y-px"
 			href={url}
 		>
 			<h3 className="text-md font-semibold">{title}</h3>

apps/guide/src/components/Section.tsx

@@ -1,8 +0,0 @@
-'use client';
-
-import { Section as DJSSection, type SectionOptions } from '@discordjs/ui';
-import type { PropsWithChildren } from 'react';
-
-export function Section(options: PropsWithChildren<SectionOptions>) {
-	return <DJSSection {...options} />;
-}

apps/guide/src/components/Sidebar.tsx

@@ -1,63 +1,24 @@
-'use client';
-
-import type { Route } from 'next';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import { allContents } from 'contentlayer/generated';
-import { useNav } from '~/contexts/nav';
-import { Section } from './Section';
-
-const items = allContents.map((content) => ({
-	title: content.title,
-	category: content.category,
-	slug: content.slug,
-	href: content.url,
-}));
-
-function transformItemsByCategory(allContents: typeof items) {
-	return allContents.reduce<Record<string, typeof items>>((accumulator: any, content) => {
-		if (!accumulator[content.category]) {
-			accumulator[content.category] = [];
-		}
-
-		accumulator[content.category].push(content);
-		return accumulator;
-	}, {});
-}
-
-const itemsByCategory = transformItemsByCategory(items);
-
-export function Sidebar() {
-	const pathname = usePathname();
-	const { setOpened } = useNav();
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import type { MDXPage } from './SidebarItems.jsx';
 
+export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) {
 	return (
-		<div className="flex flex-col gap-4">
-			{Object.keys(itemsByCategory).map((category, idx) => (
-				<Section
-					buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring z-10"
-					key={`${category}-${idx}`}
-					title={category}
-				>
-					{itemsByCategory[category]?.map((member, index) => (
-						<Link
-							className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l first:mt-1 p-[5px] pl-6 outline-none focus:rounded focus:border-0 focus:ring ${
-								decodeURIComponent(pathname ?? '') === member.href
-									? '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 as Route}
-							key={`${member.title}-${index}`}
-							onClick={() => setOpened(false)}
-							title={member.title}
-						>
-							<div className="flex flex-row place-items-center gap-2 lg:text-sm">
-								<span className="truncate">{member.title}</span>
-							</div>
-						</Link>
-					))}
-				</Section>
-			))}
-		</div>
+		<nav
+			className={`h-[calc(100vh - 73px)] dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed top-[73px] left-0 bottom-0 z-20 w-full border-r bg-white ${
+				opened ? 'block' : 'hidden'
+			} lg:w-76 lg:max-w-76 lg:block`}
+		>
+			<Scrollbars
+				autoHide
+				hideTracksWhenNotNeeded
+				renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
+				renderTrackVertical={(props) => (
+					<div {...props} className="absolute top-0.5 right-0.5 bottom-0.5 z-30 w-1.5 rounded" />
+				)}
+				universal
+			>
+				{pages ?? null}
+			</Scrollbars>
+		</nav>
 	);
 }

apps/guide/src/components/SidebarItems.tsx

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