From 0b7f296b62b86df8166c4a0e19b99228087ec15a Mon Sep 17 00:00:00 2001 From: Jiralite <33201955+Jiralite@users.noreply.github.com> Date: Thu, 13 Apr 2023 16:10:06 +0100 Subject: [PATCH] chore(guide): Update pages (#9372) --- apps/guide/public/assets/old-guide.png | Bin 0 -> 2090 bytes apps/guide/src/app/guide/[[...slug]]/page.tsx | 2 +- apps/guide/src/components/Footer.tsx | 4 +- .../content/{ => 01-home}/01-introduction.mdx | 0 .../content/{ => 01-home}/02-whats-new.mdx | 22 ++-- .../{ => 01-home}/03-how-to-contribute.mdx | 0 .../02-creating-your-bot/01-initial-files.mdx | 123 ++++++++++++------ 7 files changed, 95 insertions(+), 56 deletions(-) create mode 100755 apps/guide/public/assets/old-guide.png rename apps/guide/src/content/{ => 01-home}/01-introduction.mdx (100%) rename apps/guide/src/content/{ => 01-home}/02-whats-new.mdx (60%) rename apps/guide/src/content/{ => 01-home}/03-how-to-contribute.mdx (100%) diff --git a/apps/guide/public/assets/old-guide.png b/apps/guide/public/assets/old-guide.png new file mode 100755 index 0000000000000000000000000000000000000000..b83e8beed8cebacf862e103a4f783f6b342c3b32 GIT binary patch literal 2090 zcmb_d`!^Gc1E0sdCyHhy?=H0rHt9L%3W~J0OQ}etizA?JV9)$^kiC4u?F0Zo&sN^J2m}D+IS8i{ zUU5?2irvn7UC`*tb}mcoHbvKTLfk?y0xmH0?eRkM{reh&f(Ky}gU)W8>BkG@2qF+p zFMvN`21}p1n&FmV7Btx5SOb4i3EX%IxBA<;wqhVH3vzFC{pMPC;xapb)p7t~&*AqR zj{Qh(n_{g_L@wzT-z{A2li4}?T|<$kX3+PagMu)BQipX*W!=dYTP`f?8MB@P zlDh2=%NR1y1qX@zUIZZ67edxC{yP)j*dkR63w}F3P$>J%lE;ihBghL1tO6c z^{KrjIJf+DyWf&#Tz$?L0wKl^VoQ`jYZ%d&eMzu-ym3-`qUYe=;lhIEW1^xrHmSY6 zz10ccX1|nX(Iwd>jaAX$+S(hL&!xF%tROA!*&fW;v?aOvp|xVmZ>@{JnivMbVFKh( zzU}}k>btS6iNvvh(-8VkP+YFBZ?jLvi{WR_2$==iTc@xMb1OnUGLWetraZBM}VSEyKhYw{M<;^Y^7@T(AoQaB2N1}ccMJ3Dtk{XMbRauV$8=YyISixf*LNrwg2s6WPNP2S{1bTCxf z_f;Etx^#xg1tOyRwXZ2#h5tFNn#&T7qEEB;YohxbdE={?=KB2y%C_uiDdJ5+U*nDP ziRmmMdg3Xlsfv~`>xqH|n8?zNce3%kr5~C(n7|P2E2mIc_%9u*X>P+Am5RI7!8+4v zm_WtrMDZeDo|)n%AM#&G z!3m`ida7b-&7_RR5~MteOHDPd@c||qh@|<-F}*r-CUXY`{%zlU@+VbL_LYw>G4Sy> zx6DLJ6GDaQ?KL4C3UooCBh;^|bxSn<;D z{SQLq37BfhVdvqTI&cG|F~m#i9X0jg2Z48lrMmc@C+5hWE_pFUpvR$t@L0YDG(|sV z5p|{oCH@%)JLv+`D4F~)k5(bka~=~$geEg5cN64rTK#ozjd;8^PqvYhjLgs2%2D8o z=^m|K58tlAx?*SO^WDn+a}lW4EX`nWQZ#u!;2XDIcKChmP|8_(?k+0F^zbEVc2~f9 zcD>=l9)!0FHkG0gV(0Ge%DTgyl)uW}YZdZ-LBH1&@Upk}45O>K*iYkhW7xC_dZt~C zBoo+x3TsAEx|4WT&&I$}hh+ZF(+cdlkoRs-WP3G%6VZ5;_1hk$pZS0|Xj=S5^{bYQv}eHU60adtynyDu^a1p4r+ zcLs24>-0!sFl$Kn;Pyz2`4E(Ktyc?hY;xoZc({Ys-t5W39VO{w_Z$)Ll8lbo<59$D z^`>Ie^jr4hd|0N+(aAVE$w7C-(W3A0*q_AP85H$&Etspd4I^kgnH&_)9KLPb7aEiX zO6^hNYcU^&!4Va^FTIkmA{uXBF<@5DcZ1u06SB1nHl9Yz47X?bJlMNN$4rvZ-3fR# z!%|Oys@M=W>;4E`d;fTIEQd?A`PN(4 zy?7g>`S_Blh>nI&m!DRFrH+izdKB)>^b<_4f%`fab1V&ZJz7?jYTdk^>z^UTWHr3$ z36D!GUNu|4eeD2* Mv%6EBV?fgX0pm34zW@LL literal 0 HcmV?d00001 diff --git a/apps/guide/src/app/guide/[[...slug]]/page.tsx b/apps/guide/src/app/guide/[[...slug]]/page.tsx index 3e2cd2faa..f53346ac0 100644 --- a/apps/guide/src/app/guide/[[...slug]]/page.tsx +++ b/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 ( diff --git a/apps/guide/src/components/Footer.tsx b/apps/guide/src/components/Footer.tsx index 360d4d7f7..2dc94f476 100644 --- a/apps/guide/src/components/Footer.tsx +++ b/apps/guide/src/components/Footer.tsx @@ -55,11 +55,11 @@ export default function Footer() { - discord.js guide + discord.js documentation + +```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" +``` + + + +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. @@ -25,12 +46,16 @@ Storing data in a _`config.json`_ file is a common way of keeping your sensitive } ``` ---- + -```js Usage -const { token } = require('./config.json'); +You can then access your token inside other files by using _`import`_. -console.log(token); + + +```ts +import config from './config.json' assert { type: 'json' }; + +console.log(config.token); ``` @@ -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 @@ -84,7 +111,11 @@ yarn add dotenv pnpm add dotenv ``` ---- + + +##### Defining your variables + + ```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); -``` - @@ -111,6 +130,28 @@ console.log(process.env.DISCORD_TOKEN); _`.gitignore`_](/creating-your-bot/#git-and-gitignore). +##### Utilizing your variables + + + +```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 +``` + + +
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: -```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); ``` 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! 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 ⌃ Control{' '} + C, you can press ↑ on your keyboard to bring up the latest commands you've run. Pressing{' '} + ↑ then ⏎ Enter after closing the process is a quick way to start it up again. ## Resulting code + +Code is indeed a result of code. That being said, it's being worked on. With code. Definitely.