feat: Utilise create-discord-bot (#10013)

* feat: utilise create-discord-bot

* chore: hide line numbers

* feat: add intents page

* feat: add more Node.js variants

* refactor: redo page a bit

* fix: 👀

* chore: touch up introduction page

* chore: touch up what's new

* chore: touch up how to contribute

* chore: remove enforced locale

* chore: Fix typo

Co-authored-by: Danial Raza <[email protected]>

* chore: commit suggestions

Co-authored-by: Souji <[email protected]>

* chore: address improper capitalisation

Co-authored-by: Souji <[email protected]>

* refactor: remove `applications.commands`

* refactor: remove unique comment

* fix(intents): remove shard comment

* docs(intents): add missing info

---------

Co-authored-by: Danial Raza <[email protected]>
Co-authored-by: Souji <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 4 people

apps/guide/public/assets/bot-auth-page.png

@@ -8,15 +8,12 @@ category: Home
 If you're reading this, it probably means you want to learn how to make a bot with discord.js. Awesome! You've come to the right place.
 This guide will teach you things such as:
 
-- How to get a bot [up and running](/preparations/) from scratch;
-- How to properly [create](/creating-your-bot/), [organize](/creating-your-bot/handling-command-interactions.md), and expand on your commands;
-- In-depth explanations and examples regarding popular topics (e.g. [reactions](/popular-topics/reactions.md), [embeds](/popular-topics/embeds.md), [canvas](/popular-topics/canvas.md));
-- Working with databases (e.g. [sequelize](/sequelize/) and [keyv](/keyv/));
-- Getting started with [sharding](/sharding/);
+- How to get a bot [up and running](../getting-started/starting-out) from scratch;
+- In-depth explanations regarding features and concepts of the API (e.g. [intents](../topics/intents), [threads](../topics/threads), [webhooks](../topics/webhooks));
 - And much more.
 
 This guide will also cover subjects like common errors and how to solve them, keeping your code clean, setting up a proper development environment, etc.
-Sounds good? Great! Let's get started, then.
+Sounds good? Great! Let's get started.
 
 ## Before you begin...
 
@@ -25,11 +22,11 @@ While you _can_ make a bot with very little JavaScript and programming knowledge
 
 If you don't know JavaScript but would like to learn about it, here are a few links to help get you started:
 
-- [Eloquent JavaScript, a free online book](http://eloquentjavascript.net/)
-- [JavaScript.info, a modern javascript tutorial](https://javascript.info/)
-- [Codecademy's interactive JavaScript course](https://www.codecademy.com/learn/introduction-to-javascript)
-- [Nodeschool, for both JavaScript and Node.js lessons](https://nodeschool.io/)
-- [MDN's JavaScript guide and full documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- [Eloquent JavaScript, a free online book](http://eloquentjavascript.net)
+- [JavaScript.info, a modern javascript tutorial](https://javascript.info)
+- [Codecademy's interactive JavaScript course](https://codecademy.com/learn/introduction-to-javascript)
+- [Nodeschool, for both JavaScript and Node.js lessons](https://nodeschool.io)
+- [MDN's JavaScript guide and full documentation](https://developer.mozilla.org/docs/Web/JavaScript)
 - [Google, your best friend](https://google.com)
 
 Take your pick, learn some JavaScript, and once you feel like you're confident enough to make a bot, come back and get started!

apps/guide/public/assets/bot-authorized.png

@@ -21,9 +21,7 @@ category: Home
 			time: 'Today at 21:00',
 		}}
 	>
-		discord.js v14 has released and the guide has been updated!
-		<br />
-		This includes additions and changes made in Discord, such as slash commands and message components.
+		This website is new! We will no longer be updating the old guide website.
 	</DiscordMessage>
 </DiscordMessages>
 
@@ -33,25 +31,9 @@ We have moved from VuePress to [Next.js](https://nextjs.org/)! The source can be
 
 ## Pages
 
-All content has been updated to use discord.js v14 syntax. The v13 version of the guide can be found at https://v13.discordjs.guide.
-
-### New
-
-- [Updating from v13 to v14](/additional-info/changes-in-v14.md): A list of the changes from discord.js v13 to v14
-- [Slash commands](/interactions/slash-commands.md): Registering, replying to slash commands and permissions
-- [Buttons](/interactions/buttons.md): Building, sending, and receiving buttons
-- [Select menus](/interactions/select-menus.md): Building, sending, and receiving select menus
-- [Threads](/popular-topics/threads.md): Creating and managing threads
-- [Builders](/popular-topics/builders.md): A collection of builders to use with your bot
-
-### Updated
-
-- Commando: Replaced with [Sapphire](https://sapphirejs.dev/docs/Guide/getting-started/getting-started-with-sapphire)
-- [Voice](/voice/): Rewritten to use the [_`@discordjs/voice`_](https://github.com/discordjs/discord.js/tree/main/packages/voice) package
-- [Command handling](/creating-your-bot/handling-command-interactions.md/): Updated to use slash commands
-  - Obsolete sections removed
-- _`client.on('message')`_ snippets updated to _`client.on(Events.InteractionCreate)`_
-  - [Message content became a privileged intent on August 31, 2022](https://support-dev.discord.com/hc/articles/4404772028055)
+- Pages have been revamped to account for our new [create-discord-bot](https://github.com/discordjs/discord.js/tree/main/packages/create-discord-bot) command-line interface.
+- Popular topic are now simply "topics" that detail usage of a particular concept of the API.
+- Focus is primarily on discord.js, so irrelevant topics have been removed. It may be better to visit the documentation of the package you are using to learn how to use them.
 
 <DiscordMessages rounded>
 	<DiscordMessage

apps/guide/public/assets/bot-in-memberlist.png

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

apps/guide/public/assets/bot-user.png

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

apps/guide/public/assets/create-app.png

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

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

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