mirror of
https://github.com/discordjs/discord.js.git
synced 2026-03-17 20:13:30 +01:00
chore(guide): Update pages (#9372)
This commit is contained in:
Jiralite
35
apps/guide/src/content/01-home/01-introduction.mdx
Normal file
35
apps/guide/src/content/01-home/01-introduction.mdx
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Introduction
|
||||
category: Home
|
||||
---
|
||||
|
||||
# Introduction
|
||||
|
||||
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/command-handling.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/);
|
||||
- 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.
|
||||
|
||||
## Before you begin...
|
||||
|
||||
Alright, making a bot is cool and all, but there are some prerequisites to it. To create a bot with discord.js, you should have a fairly decent grasp of JavaScript itself.
|
||||
While you _can_ make a bot with very little JavaScript and programming knowledge, trying to do so without understanding the language first will only hinder you. You may get stuck on many uncomplicated issues, struggle with solutions to incredibly easy problems, and all-in-all end up frustrated. Sounds pretty annoying.
|
||||
|
||||
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)
|
||||
- [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!
|
||||
67
apps/guide/src/content/01-home/02-whats-new.mdx
Normal file
67
apps/guide/src/content/01-home/02-whats-new.mdx
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
title: What's new
|
||||
category: Home
|
||||
---
|
||||
|
||||
# What's new
|
||||
|
||||
<DiscordMessages rounded>
|
||||
<DiscordMessage
|
||||
interaction={{
|
||||
author: {
|
||||
avatar: '/assets/old-guide.png',
|
||||
username: 'discord.js',
|
||||
},
|
||||
command: '/upgrade',
|
||||
}}
|
||||
author={{
|
||||
avatar: '/assets/discordjs.png',
|
||||
bot: true,
|
||||
username: 'Guide Bot',
|
||||
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.
|
||||
</DiscordMessage>
|
||||
</DiscordMessages>
|
||||
|
||||
## Site
|
||||
|
||||
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.
|
||||
|
||||
### 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/command-handling.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)
|
||||
|
||||
<DiscordMessages rounded>
|
||||
<DiscordMessage
|
||||
author={{
|
||||
avatar: '/assets/discordjs.png',
|
||||
bot: true,
|
||||
username: 'Guide Bot',
|
||||
time: 'Today at 21:00',
|
||||
}}
|
||||
>
|
||||
Thank you to all of those that contributed to the development of discord.js and the guide!
|
||||
</DiscordMessage>
|
||||
</DiscordMessages>
|
||||
177
apps/guide/src/content/01-home/03-how-to-contribute.mdx
Normal file
177
apps/guide/src/content/01-home/03-how-to-contribute.mdx
Normal file
@@ -0,0 +1,177 @@
|
||||
---
|
||||
title: How to contribute
|
||||
category: Home
|
||||
---
|
||||
|
||||
# How to contribute
|
||||
|
||||
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.
|
||||
|
||||
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">
|
||||
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.
|
||||
|
||||
## Components
|
||||
|
||||
Throughout the guide, you'll see some components from the _`@discordjs/ui`_ package:
|
||||
|
||||
- _`Alert`_
|
||||
- _`Section`_
|
||||
- _`DiscordMessages`_, _`DiscordMessage`_, and _`DiscordMessageEmbed`_
|
||||
|
||||
Check the source of this page to see them in action!
|
||||
|
||||
### Alert
|
||||
|
||||
This component may take a _`title`_ and a _`type`_ of _`'danger' | 'info' | 'success' | 'warning'`_.
|
||||
|
||||
This uses _`title="Alert" type="info"`_:
|
||||
|
||||
<Alert title="Alert" type="info">
|
||||
Use these appropriately!
|
||||
</Alert>
|
||||
|
||||
### Section
|
||||
|
||||
<Section title="Expand me!" padding defaultClosed background gutter>
|
||||
Well, hello there!
|
||||
|
||||
Whenever some text does not need to be in the main body, you can put it here.
|
||||
|
||||
- _`title`_: The title that'll appear.
|
||||
- _`padding`_: Adds padding.
|
||||
- _`dense`_: When _`padding`_ is specified, _`dense`_ could make it appear, well, dense.
|
||||
- _`defaultClosed`_ Whether the section is closed by default. This one was.
|
||||
- _`background`_ Adds background to the content.
|
||||
- _`gutter`_: This adds a very small appealing space between the expansion of the section and its content.
|
||||
|
||||
</Section>
|
||||
|
||||
### DiscordMessages, DiscordMessage, and DiscordMessageEmbed
|
||||
|
||||
<DiscordMessages>
|
||||
<DiscordMessage
|
||||
author={{
|
||||
avatar: '/assets/discordjs.png',
|
||||
bot: true,
|
||||
time: 'Today at 21:00',
|
||||
username: 'Guide Bot',
|
||||
}}
|
||||
>
|
||||
A _`DiscordMessage`_ must be within _`DiscordMessages`_.
|
||||
</DiscordMessage>
|
||||
<DiscordMessage
|
||||
author={{
|
||||
avatar: '/assets/discordjs.png',
|
||||
bot: true,
|
||||
time: 'Today at 21:01',
|
||||
username: 'Guide Bot',
|
||||
}}
|
||||
reply={{
|
||||
author: {
|
||||
avatar: '/assets/discordjs.png',
|
||||
bot: true,
|
||||
username: 'Guide Bot',
|
||||
},
|
||||
content: 'A _`DiscordMessage`_ must be within _`DiscordMessages`_.',
|
||||
}}
|
||||
time="21:02"
|
||||
>
|
||||
It's much better to see the source code of this page to replicate and learn!
|
||||
</DiscordMessage>
|
||||
<DiscordMessage
|
||||
author={{
|
||||
avatar: '/assets/discordjs.png',
|
||||
bot: true,
|
||||
time: 'Today at 21:02',
|
||||
username: 'Guide Bot',
|
||||
}}
|
||||
>
|
||||
This message depicts the use of embeds.
|
||||
<>
|
||||
<DiscordMessageEmbed
|
||||
author={{
|
||||
avatar: '/assets/discordjs.png',
|
||||
username: 'Guide Bot',
|
||||
}}
|
||||
footer={{ content: 'Sometimes, titles just have to be.' }}
|
||||
title={{ title: 'An amazing title' }}
|
||||
>
|
||||
This is a description. You can put a description here. It must be descriptive!
|
||||
</DiscordMessageEmbed>
|
||||
<DiscordMessageEmbed
|
||||
author={{
|
||||
avatar: '/assets/discordjs.png',
|
||||
username: 'Guide Bot',
|
||||
}}
|
||||
footer={{ content: "When one amazing title just wasn't enough." }}
|
||||
title={{ title: 'Another amazing title' }}
|
||||
>
|
||||
Multiple embeds!
|
||||
</DiscordMessageEmbed>
|
||||
</>
|
||||
</DiscordMessage>
|
||||
<DiscordMessage
|
||||
author={{
|
||||
avatar: '/assets/discordjs.png',
|
||||
bot: true,
|
||||
time: 'Today at 21:03',
|
||||
username: 'Guide Bot',
|
||||
}}
|
||||
interaction={{
|
||||
author: {
|
||||
avatar: '/assets/discordjs.png',
|
||||
bot: true,
|
||||
username: 'Guide Bot',
|
||||
},
|
||||
command: '/interaction',
|
||||
}}
|
||||
>
|
||||
Interactions are supported! I definitely used a command.
|
||||
</DiscordMessage>
|
||||
</DiscordMessages>
|
||||
|
||||
## Code blocks
|
||||
|
||||
We use [Code Hike](https://codehike.org). Here are some example code blocks, which should be easy to grasp and learn upon reading the source code of this page:
|
||||
|
||||
<CH.Code>
|
||||
|
||||
```ts
|
||||
const HELLO = 'hello' as const;
|
||||
console.log(HELLO);
|
||||
// "ts" is the language of the code block.
|
||||
```
|
||||
|
||||
</CH.Code>
|
||||
|
||||
<CH.Code>
|
||||
|
||||
```ts fileName
|
||||
const FILE_NAME = 'fileName' as const;
|
||||
if (FILE_NAME.includes(' ')) throw new Error('Spaces cannot be used in file names.');
|
||||
```
|
||||
|
||||
```ts anotherFileName
|
||||
const FILE_NAME_2 = 'anotherFileName' as const;
|
||||
// Putting code blocks together makes them appear in tabs, just like in your editor.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```ts requiredName
|
||||
const FILE_NAME_3 = 'requiredName' as const;
|
||||
if (!FILE_NAME) throw new Error('There must be a file name to use panels!');
|
||||
// The --- divider was used to create a panel.
|
||||
```
|
||||
|
||||
</CH.Code>
|
||||
|
||||
For more information, be sure to check out the [documentation](https://codehike.org/docs/ch-code).
|
||||
Reference in New Issue
Block a user