feat(guide): port legacy guide (#10938)

* feat: initial attempt at porting legacy guide

* feat: completion of legacy guide backport

* chore: lockfile shenanigans

* fix: handle svgs

* fix: replace svg with mermaid integration

* chore: format

* chore: remove unnecssary bullet

* chore: cleanup code highlights

* chore: explicit return

* chore: move display components after interactive components in sidebar

* chore: voice

* top link should be installation
* add docs link to sidebar

* feat: subguide-based accent styles

* chore: don't list faq twice

* chore: mention display components in interactive components

* fix: remove unoccs/order rule from guide

* chore: redirect to legacy guide instead of /guide root

* refactor: use `<kbd>`

* refactor: more kbd use

* Update apps/guide/content/docs/legacy/app-creation/handling-events.mdx

Co-authored-by: Naiyar <137700126+imnaiyar@users.noreply.github.com>

* chore: fix typos

Co-authored-by: Qjuh <76154676+Qjuh@users.noreply.github.com>

* chore: fix typos

* chore: fix links regarding secret stores across coding platforms

* chore: fix typo

* chore: link node method directly

Co-authored-by: Qjuh <76154676+Qjuh@users.noreply.github.com>

* chore: typos

Co-authored-by: Vlad Frangu <me@vladfrangu.dev>

* chore: typo

Co-authored-by: Vlad Frangu <me@vladfrangu.dev>

* fix: prevent v14 changes from being listed twice

* chore: prefer relative links

* chore: missed link conversion

* chore: missed link conversion

* chore: fix link

* chore: remove legacy code highlight markers

* chore: rephrase and extend contributing guidelines

* feat(setup): suggest cli flag over dotenv package

* chore: move introduction in sidebar

better navigation experience if the 'next page' in intro refers to getting started vs. updating/faq

* fix: replace outdated link

* fix: update voice dependencies

* chore: update node install instructions

* fix: list in missing access callout

* chore: match bun env file format

* chore: restore ffmpeg disclaimer

* fix: lockfile conflict

* chore: action row typo

Co-authored-by: Vlad Frangu <me@vladfrangu.dev>

* chore: no longer use at-next for pino

---------

Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>
Co-authored-by: Qjuh <76154676+Qjuh@users.noreply.github.com>
Co-authored-by: Naiyar <137700126+imnaiyar@users.noreply.github.com>
Co-authored-by: Vlad Frangu <me@vladfrangu.dev>

apps/guide/content/docs/legacy/preparations/adding-your-app.mdx

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

apps/guide/content/docs/legacy/preparations/app-setup.mdx

@@ -0,0 +1,56 @@
+---
+title: Application Setup
+---
+
+## Creating your bot
+
+Now that you've installed Node, discord.js, and hopefully a linter, you're almost ready to start coding! The next step you need to take is setting up an actual Discord bot application via Discord's website.
+
+It's effortless to create one. The steps you need to take are as follows:
+
+1. Open the [Discord developer portal](https://discord.com/developers/applications) and log into your account.
+2. Click on the "New Application" button.
+3. Enter a name and confirm the pop-up window by clicking the "Create" button.
+
+You should see a page like this:
+
+![Successfully created application](./images/create-app.png)
+
+You can edit your application's name, description, and avatar here. Once you've done that, then congratulations—you're now the proud owner of a shiny new Discord bot! You're not entirely done, though.
+
+## Your bot's token
+
+<Callout type="error" title="Important">
+	**This section is critical**, so pay close attention. It explains what your bot token is, as well as the security
+	aspects of it.
+</Callout>
+
+After creating a bot user, you'll see a section like this:
+
+![Bot application](./images/created-bot.png)
+
+In this panel, you can give your bot a snazzy avatar, set its username, and make it public or private. Your bot's token will be revealed when you press the "Reset Token" button and confirm. When we ask you to paste your bot's token somewhere, this is the value that you need to put in. If you happen to lose your bot's token at some point, you need to come back to this page and reset your bot's token again which will reveal the new token, invalidating all old ones.
+
+### What is a token, anyway?
+
+A token is essentially your bot's password; it's what your bot uses to login to Discord. With that said, **it is vital that you do not ever share this token with anybody, purposely or accidentally**. If someone does manage to get a hold of your bot's token, they can use your bot as if it were theirs—this means they can perform malicious acts with it.
+
+Tokens look like this: `NzkyNzE1NDU0MTk2MDg4ODQy.X-hvzA.Ovy4MCQywSkoMRRclStW4xAYK7I` (don't worry, we immediately reset this token before even posting it here!). If it's any shorter and looks more like this: `kxbsDRU5UfAaiO7ar9GFMHSlmTwYaIYn`, you copied your client secret instead. Make sure to copy the token if you want your bot to work!
+
+### Token leak scenario
+
+Let's imagine that you have a bot on over 1,000 servers, and it took you many, many months of coding and patience to get it on that amount. Your bot's token gets leaked somewhere, and now someone else has it. That person can:
+
+- Spam every server your bot is on;
+- DM spam as many users as possible;
+- Delete as many channels as possible;
+- Kick or ban as many server members as possible;
+- Make your bot leave all of the servers it has joined;
+
+All that and much, much more. Sounds pretty terrible, right? So make sure to keep your bot's token as safe as possible!
+
+<Callout type="error" title="Resetting Your Application Token">
+	If your bot token has been compromised by committing it to a public repository, posting it in discord.js support etc.
+	or otherwise see your bot's token in danger, return to this page and press "Reset Token". This will invalidate all old
+	tokens belonging to your bot. Keep in mind that you will need to update your bot's token where you used it before.
+</Callout>

apps/guide/content/docs/legacy/preparations/installation.mdx

@@ -0,0 +1,129 @@
+---
+title: Installing Node.js and discord.js
+---
+
+import { Grid2x2, Apple, Cpu, Zap, Package } from 'lucide-react';
+
+## Installing Node.js
+
+To use discord.js, you'll need to install the latest LTS version of [Node.js](https://nodejs.org/).
+
+<Callout>
+	To check if you already have Node installed on your machine \(e.g., if you're using a VPS\), run `node -v` in your
+	terminal. It is recommended to use the latest LTS version of Node.
+</Callout>
+
+<Cards>
+	<Card icon={<Zap />} title="Volta" href="https://volta.sh/">
+		Use volta to manage your node version cross-platform.
+	</Card>
+	<Card icon={<Package />} title="Fast Node Manager" href="https://github.com/Schniz/fnm">
+		Use `Fast node Manager` to manage your node version cross-platform.
+	</Card>
+	<Card icon={<Grid2x2 />} title="Windows" href="https://nodejs.org/en/download">
+		Download the latest version from the Node.js website, open the downloaded file, and follow the steps from the
+		installer.
+	</Card>
+	<Card icon={<Apple />} title="macOS" href="https://nodejs.org/en/download">
+		Download the latest version from the Node.js website, open the package installer, and follow the instructions.
+		Alternatively you can use a package manager like Homebrew with the command `brew install node`
+	</Card>
+	<Card icon={<Cpu />} title="Linux" href="https://nodejs.org/en/download">
+		Determine how you should install Node with out package manager of choice.
+	</Card>
+</Cards>
+
+## Preparing the essentials
+
+To use discord.js, you'll need to install it via npm \(Node's package manager\). npm comes with every Node installation, so you don't have to worry about installing that. However, before you install anything, you should set up a new project folder.
+
+Navigate to a suitable place on your machine and create a new folder named `discord-bot` (or whatever you want). Next you'll need to open your terminal.
+
+## Opening the terminal
+
+<Callout>
+	If you use [Visual Studio Code](https://code.visualstudio.com/), you can press <kbd>Ctrl</kbd>
+	<kbd>`</kbd> (backtick) to open its integrated terminal.
+</Callout>
+
+On Windows, either:
+
+- Hold <kbd>Shift</kbd> and right-click inside your project directory and choose the "Open command window here" option
+- Press <kbd>Win</kbd> <kbd>R</kbd> and run `cmd.exe`, and then `cd` into your project directory
+
+On macOS, either:
+
+- Open Launchpad or Spotlight and search for "Terminal"
+- In your "Applications" folder, under "Utilities", open the Terminal app
+
+On Linux, you can quickly open the terminal with <kbd>Ctrl</kbd> <kbd>Alt</kbd> <kbd>T</kbd>.
+
+With the terminal open, run the `node -v` command to make sure you've successfully installed Node.js.
+
+## Initiating a project folder
+
+```sh tab="npm"
+npm init
+```
+
+```sh tab="yarn"
+yarn init
+```
+
+```sh tab="pnpm"
+pnpm init
+```
+
+```sh tab="bun"
+bun init
+```
+
+This is the next command you'll be running. This command creates a `package.json` file for you, which will keep track of the dependencies your project uses, as well as other info.
+
+This command will ask you a sequence of questions–you should fill them out as you see fit. If you're not sure of something or want to skip it as a whole, leave it blank and press enter.
+
+To get started quickly, you can run the following command to have it fill out everything for you.
+
+```sh tab="npm"
+npm init -y
+```
+
+```sh tab="yarn"
+yarn init -y
+```
+
+```sh tab="pnpm"
+pnpm init
+```
+
+```sh tab="bun"
+bun init -y
+```
+
+Once you're done with that, you're ready to install discord.js!
+
+## Installing discord.js
+
+Now that you've installed Node.js and know how to open your console and run commands, you can finally install discord.js! Run the following command in your terminal:
+
+```sh tab="npm"
+npm install discord.js
+```
+
+```sh tab="yarn"
+yarn add discord.js
+```
+
+```sh tab="pnpm"
+pnpm add discord.js
+```
+
+```sh tab="bun"
+bun add discord.js
+```
+
+And that's it! With all the necessities installed, you're almost ready to start coding your bot.
+
+## Installing a linter
+
+While you are coding, it's possible to run into numerous syntax errors or code in an inconsistent style. You should [install a linter](./linter) to ease these troubles. While code editors generally can point out syntax errors, linters coerce your code into a specific style as defined by the configuration. While this is not required, it is advised.

apps/guide/content/docs/legacy/preparations/linter.mdx

@@ -0,0 +1,138 @@
+---
+title: Linters
+---
+
+As a developer, it's a good idea to make your development process as streamlined as possible. Linters check syntax and help you produce consistent code that follows specific style rules that you can define yourself or inherit from existing configurations. Although it's not required, installing a linter will help you immensely.
+
+## Installing a code editor
+
+First, you will need a proper code editor. Using programs such as Notepad and Notepad++ is discouraged, as they're inefficient for projects like these. If you aren't using one of the editors listed below, it's advised to switch.
+
+- [Visual Studio Code](https://code.visualstudio.com/) is a prevalent choice; it is known for being fast and powerful. It supports various languages, has a terminal, built-in IntelliSense support, and autocomplete for both JavaScript and TypeScript. This is the recommended choice.
+- [Sublime Text](https://www.sublimetext.com/) is another popular editor that's easy to use and write code with.
+
+## Installing a linter
+
+Install the [ESLint package](https://www.npmjs.com/package/eslint) inside your project directory.
+
+```sh tab="npm"
+npm install --save-dev eslint @eslint/js
+```
+
+```sh tab="yarn"
+yarn add eslint @eslint/js --dev
+```
+
+```sh tab="pnpm"
+pnpm add --save-dev eslint @eslint/js
+```
+
+```sh tab="bun"
+bun add --dev eslint
+```
+
+One of the advantages proper code editors have is their ability to integrate linters via editor plugins. Install the appropriate plugin(s) for your editor of choice.
+
+- [ESLint for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [ESLint for Sublime Text](https://packagecontrol.io/packages/ESLint)
+
+<Callout>
+	You can view plugins directly inside your editor.
+
+    - Visual Studio Code: Press <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>X</kbd>
+    - Sublime Text: Press <kbd>Ctrl</kbd> <kbd>Shift</kbd> <kbd>P</kbd> and search for "Install Package" (available via [Package Control](https://packagecontrol.io/installation))
+
+    After that, search for the appropriate plugin and install it.
+
+</Callout>
+
+## Setting up ESLint rules
+
+ESLint may display many warnings and errors about your code when you start using it but don't let this startle you. To get started, create a file in your project directory named `eslint.config.js` and copy the code below into the file:
+
+```javascript title="eslint.config.js"
+const js = require('@eslint/js');
+
+module.exports = [
+	js.configs.recommended,
+	{
+		languageOptions: {
+			ecmaVersion: 'latest',
+		},
+		rules: {},
+	},
+];
+```
+
+This is the basis of how an ESLint file will look. The `rules` object is where you'll define what rules you want to apply to ESLint. For example, if you want to make sure you never miss a semicolon, the `"semi": ["error", "always"]` rule is what you'll want to add inside that object.
+
+You can find a list of all of ESLint's rules on [their website](https://eslint.org/docs/rules). There are indeed many rules, and it may be overwhelming at first, so if you don't want to go through everything on your own yet, you can use these rules:
+
+```javascript title="eslint.config.js"
+const js = require('@eslint/js');
+
+module.exports = [
+	js.configs.recommended,
+	{
+		languageOptions: {
+			ecmaVersion: 'latest',
+		},
+		rules: {
+			'arrow-spacing': ['warn', { before: true, after: true }],
+			'brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+			'comma-dangle': ['error', 'always-multiline'],
+			'comma-spacing': 'error',
+			'comma-style': 'error',
+			curly: ['error', 'multi-line', 'consistent'],
+			'dot-location': ['error', 'property'],
+			'handle-callback-err': 'off',
+			indent: ['error', 'tab'],
+			'keyword-spacing': 'error',
+			'max-nested-callbacks': ['error', { max: 4 }],
+			'max-statements-per-line': ['error', { max: 2 }],
+			'no-console': 'off',
+			'no-empty-function': 'error',
+			'no-floating-decimal': 'error',
+			'no-inline-comments': 'error',
+			'no-lonely-if': 'error',
+			'no-multi-spaces': 'error',
+			'no-multiple-empty-lines': ['error', { max: 2, maxEOF: 1, maxBOF: 0 }],
+			'no-shadow': ['error', { allow: ['err', 'resolve', 'reject'] }],
+			'no-trailing-spaces': ['error'],
+			'no-var': 'error',
+			'no-undef': 'off',
+			'object-curly-spacing': ['error', 'always'],
+			'prefer-const': 'error',
+			quotes: ['error', 'single'],
+			semi: ['error', 'always'],
+			'space-before-blocks': 'error',
+			'space-before-function-paren': [
+				'error',
+				{
+					anonymous: 'never',
+					named: 'never',
+					asyncArrow: 'always',
+				},
+			],
+			'space-in-parens': 'error',
+			'space-infix-ops': 'error',
+			'space-unary-ops': 'error',
+			'spaced-comment': 'error',
+			yoda: 'error',
+		},
+	},
+];
+```
+
+The major points of this setup would be:
+
+- Allowing you to debug with `console.log()`;
+- Prefer using `const` over `let` or `var`, as well as disallow `var`;
+- Disapproving of variables with the same name in callbacks;
+- Requiring single quotes over double quotes;
+- Requiring semicolons. While not required in JavaScript, it's considered one of the most common best practices to follow;
+- Requiring accessing properties to be on the same line;
+- Requiring indenting to be done with tabs;
+- Limiting nested callbacks to 4. If you hit this error, it is a good idea to consider refactoring your code.
+
+If your current code style is a bit different, or you don't like a few of these rules, that's perfectly fine! Just head over to the [ESLint docs](https://eslint.org/docs/rules/), find the rule(s) you want to modify, and change them accordingly.

apps/guide/content/docs/legacy/preparations/meta.json

@@ -0,0 +1,4 @@
+{
+	"title": "Getting Started",
+	"pages": ["app-setup", "adding-your-app", "installation", "linter"]
+}