chore(guide): Update pages (#9372)

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

@@ -10,7 +10,7 @@ export default function Page({ params }: { params: { slug: string[] } }) {
 	const content = allContents.find((content) => content.slug === params.slug?.join('/'));
 
 	if (!content) {
-		redirect('/guide/introduction');
+		redirect('/guide/home/introduction');
 	}
 
 	return (

apps/guide/src/components/Footer.tsx

@@ -55,11 +55,11 @@ export default function Footer() {
 								</a>
 								<a
 									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
-									href="https://discordjs.guide"
+									href="https://discord.js.org/docs/"
 									rel="noopener noreferrer"
 									target="_blank"
 								>
-									discord.js guide
+									discord.js documentation
 								</a>
 								<a
 									className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"

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

@@ -9,14 +9,13 @@ category: Home
 	<DiscordMessage
 		interaction={{
 			author: {
-				avatar:
-					'https://cdn.discordapp.com/guilds/222078108977594368/users/81440962496172032/avatars/c059c5d04d717ea05790f7a6447e4843.webp?size=160',
-				username: 'Crawl',
+				avatar: '/assets/old-guide.png',
+				username: 'discord.js',
 			},
-			command: 'upgrade',
+			command: '/upgrade',
 		}}
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/474807795183648809/7f239a0776ff928b2182906a2b3743c9.webp?size=160',
+			avatar: '/assets/discordjs.png',
 			bot: true,
 			username: 'Guide Bot',
 			time: 'Today at 21:00',
@@ -30,14 +29,11 @@ category: Home
 
 ## Site
 
-- Upgraded to [VuePress v2](https://v2.vuepress.vuejs.org/)
-- New theme made to match the [discord.js documentation site](https://discord.js.org/)
-- Discord message components upgraded to [@discord-message-components/vue](https://github.com/Danktuary/discord-message-components/blob/main/packages/vue/README.md)
-- Many fixes in code blocks, grammar, consistency, etc.
+We have moved from VuePress to [Next.js](https://nextjs.org/)! The source can be found [here](https://github.com/discordjs/discord.js/tree/main/apps/guide).
 
 ## Pages
 
-All content has been updated to use discord.js v14 syntax. The v13 version of the guide can be found at [https://v13.discordjs.guide/](https://v13.discordjs.guide/).
+All content has been updated to use discord.js v14 syntax. The v13 version of the guide can be found at https://v13.discordjs.guide.
 
 ### New
 
@@ -54,13 +50,13 @@ All content has been updated to use discord.js v14 syntax. The v13 version of th
 - [Voice](/voice/): Rewritten to use the [_`@discordjs/voice`_](https://github.com/discordjs/discord.js/tree/main/packages/voice) package
 - [Command handling](/creating-your-bot/command-handling.md/): Updated to use slash commands
   - Obsolete sections removed
-- _`client.on('message')`_ snippets updated to _`client.on('interactionCreate')`_
-  - [Message content will become a new privileged intent on August 31, 2022](https://support-dev.discord.com/hc/en-us/articles/4404772028055)
+- _`client.on('message')`_ snippets updated to _`client.on(Events.InteractionCreate)`_
+  - [Message content became a privileged intent on August 31, 2022](https://support-dev.discord.com/hc/articles/4404772028055)
 
 <DiscordMessages rounded>
 	<DiscordMessage
 		author={{
-			avatar: 'https://cdn.discordapp.com/avatars/474807795183648809/7f239a0776ff928b2182906a2b3743c9.webp?size=160',
+			avatar: '/assets/discordjs.png',
 			bot: true,
 			username: 'Guide Bot',
 			time: 'Today at 21:00',

apps/guide/src/content/02-creating-your-bot/01-initial-files.mdx

@@ -5,17 +5,38 @@ category: Creating your bot
 
 # Initial files
 
-Once you [add your bot to a server](/preparations/adding-your-bot-to-servers.md), the next step is to start coding and get it online! Let's start by creating a config file for your client token and a main file for your bot application.
+Once you [add your bot to a server](preparations/adding-your-bot-to-servers.md), the next step is to start coding and get it online! Let's start by initializing your package.json, creating a config file for your client token, and a main file for your bot application.
 
-## Creating configuration files
+## Creating package.json
 
-As explained in the ["What is a token, anyway?"](/preparations/setting-up-a-bot-application.md#what-is-a-token-anyway) section, your token is essentially your bot's password, and you should protect it as best as possible. This can be done through a _`config.json`_ file or by using environment variables.
+This command creates a _`package.json`_ file for you, which will keep track of the dependencies your project uses, as well as other information.
+
+<CH.Code>
+
+```sh npm
+npm init -y; npm pkg set type="module"
+```
+
+```sh yarn
+yarn add dotenv
+# You must go into your package.json file and add "type": "module"
+```
+
+```sh pnpm
+pnpm init; pnpm pkg set type="module"
+```
+
+</CH.Code>
+
+Once you're done with that, onto the next step!
+
+## Using config.json
+
+As explained in the ["What is a token, anyway?"](preparations/setting-up-a-bot-application.md#what-is-a-token-anyway) section, your token is essentially your bot's password, and you should protect it as best as possible. This can be done through a _`config.json`_ file or by using environment variables.
 
 Open your application in the [Discord Developer Portal](https://discord.com/developers/applications) and go to the "Bot" page to copy your token.
 
-### Using config.json
-
-Storing data in a _`config.json`_ file is a common way of keeping your sensitive values safe. Create a _`config.json`_ file in your project directory and paste in your token. You can access your token inside other files by using _`require()`_.
+Storing data in a _`config.json`_ file is a common way of keeping your sensitive values safe. Create a _`config.json`_ file in your project directory and paste in your token.
 
 <CH.Code>
 
@@ -25,12 +46,16 @@ Storing data in a _`config.json`_ file is a common way of keeping your sensitive
 }
 ```
 
----
+</CH.Code>
 
-```js Usage
-const { token } = require('./config.json');
+You can then access your token inside other files by using _`import`_.
 
-console.log(token);
+ <CH.Code>
+
+```ts
+import config from './config.json' assert { type: 'json' };
+
+console.log(config.token);
 ```
 
 </CH.Code>
@@ -68,7 +93,9 @@ console.log(process.env.DISCORD_TOKEN);
 
 Another common approach is storing these values in a _`.env`_ file. This spares you from always copying your token into the command line. Each line in a _`.env`_ file should hold a _`KEY=value`_ pair.
 
-You can use the [_`dotenv`_ package](https://www.npmjs.com/package/dotenv) for this. Once installed, require and use the package to load your _`.env`_ file and attach the variables to _`process.env`_:
+You can use the [_`dotenv`_ package](https://www.npmjs.com/package/dotenv) for this. Once installed, preload the package to load your _`.env`_ file and attach the variables to _`process.env`_:
+
+##### Installing dotenv
 
 <CH.Code>
 
@@ -84,7 +111,11 @@ yarn add dotenv
 pnpm add dotenv
 ```
 
----
+</CH.Code>
+
+##### Defining your variables
+
+<CH.Code>
 
 ```text .env
 A=123
@@ -92,18 +123,6 @@ B=456
 DISCORD_TOKEN=your-token-goes-here
 ```
 
----
-
-```js Usage
-const dotenv = require('dotenv');
-
-dotenv.config();
-
-console.log(process.env.A);
-console.log(process.env.B);
-console.log(process.env.DISCORD_TOKEN);
-```
-
 </CH.Code>
 
 <Alert title="Caution" type="danger">
@@ -111,6 +130,28 @@ console.log(process.env.DISCORD_TOKEN);
 	_`.gitignore`_](/creating-your-bot/#git-and-gitignore).
 </Alert>
 
+##### Utilizing your variables
+
+<CH.Code>
+
+```sh node
+node --require dotenv/config yourFile.js
+```
+
+```sh yarn
+yarn node --require dotenv/config yourFile.js
+```
+
+---
+
+```ts yourFile
+console.log(process.env.A); // 123
+console.log(process.env.B); // 456
+console.log(process.env.DISCORD_TOKEN); // your-token-goes-here
+```
+
+</CH.Code>
+
 <Section title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter>
 While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
 
@@ -145,44 +186,46 @@ config.json
 
 ## Creating the main file
 
-Open your code editor and create a new file. We suggest that you save the file as _`index.js`_, but you may name it whatever you wish.
+Open your code editor and create a new file. We suggest that you save the file as _`index.ts`_, or _`index.js`_, depending on whether you use TypeScript. You may name it whatever you wish, however.
 
 Here's the base code to get you started:
 
 <CH.Code>
 
-```js
-// Require the necessary discord.js classes
-const { Client, GatewayIntentBits } = require('discord.js');
-const { token } = require('./config.json');
+```ts index.ts
+// Import the necessary structures.
+import { Client, Events, GatewayIntentBits } from 'discord.js';
+import config from './config.json';
 
-// Create a new client instance
-const client = new Client({ intents: [GatewayIntentBits.Guilds] });
+// Create a new client instance.
+const client = new Client({ intents: GatewayIntentBits.Guilds });
 
-// When the client is ready, run this code (only once)
-client.once('ready', () => {
+// When the client is ready, run this code (only once).
+client.once(Events.ClientReady, () => {
 	console.log('Ready!');
 });
 
-// Login to Discord with your client's token
-client.login(token);
+// Log in to Discord with your client's token.
+client.login(config.token);
 ```
 
 </CH.Code>
 
 This is how you create a client instance for your Discord bot and login to Discord. The _`GatewayIntentBits.Guilds`_ intents option is necessary for your client to work properly, as it ensures that the caches for guilds, channels and roles are populated and available for internal use.
 
-Intents also define which events Discord should send to your bot, and you may wish to enable more than just the minimum. You can read more about the other intents on the [Intents topic](/popular-topics/intents).
+Intents also define which events Discord should send to your bot, and you may wish to enable more than just the minimum. You can read more about the other intents on the [Intents topic](popular-topics/intents).
 
-Open your terminal and run _`node index.js`_ to start the process. If you see "Ready!" after a few seconds, you're good to go!
+Open your terminal, compile your code (JavaScript users do not do this), and run _`node index.js`_ to start the process. If you see "Ready!" after a few seconds, you're good to go!
 
 <Alert title="Tip" type="success">
 	You can open your _`package.json`_ file and edit the _`"main": "index.js"`_ field to point to your main file. You can
-	then run _`node .`_ in your terminal to start the process! After closing the process with _`Ctrl + C`_, you can press
-	the up arrow on your keyboard to bring up the latest commands you've run. Pressing up and then enter after closing the
-	process is a quick way to start it up again.
+	then run _`node .`_ in your terminal to start the process! After closing the process with <kbd>⌃ Control</kbd>{' '}
+	<kbd>C</kbd>, you can press <kbd>↑</kbd> on your keyboard to bring up the latest commands you've run. Pressing{' '}
+	<kbd>↑</kbd> then <kbd>⏎ Enter</kbd> after closing the process is a quick way to start it up again.
 </Alert>
 
 ## Resulting code
 
 <ResultingCode path="creating-your-bot/initial-files" />
+
+Code is indeed a result of code. That being said, it's being worked on. With code. Definitely.