Forem: Mr. Robøt

Publishing documentation with Astro Starlight

Thomas Bnt — Tue, 26 Dec 2023 16:42:00 +0000

It took me a long time to get my hands dirty. Let me explain: I've been actively contributing to Astro's documentation for over a year.

There are between 5 and 10 of us, if not more, offering you text entirely in French. We do it voluntarily in our spare time, and it helps me learn a little more English every day, as well as informing me about Astro. Not to mention that it encourages the community to help each other with this framework. In short, in Open Source, we're never alone. But you should know that, in a year of contributions, I've NEVER touched Astro. Not even for a simple project or to test it and see how it works.

Even today, I don't know enough about it as I should. In a way, I feel like an impostor. But to remedy that, I created Mr. Robøt's documentation with Astro Starlight!

Introducing Astro Starlight

Let's go step by step, before we tackle Starlight, let's talk about Astro.
Astro is a framework for creating content-driven websites. Whether it's for a personal blog, e-commerce or marketing, these are just a few examples.

It's based on a frontend architecture, with its frontmatter, and its ability to be JavaScript-free. Yes, you read that right. Zero client-side JavaScript. That's where Astro's speed comes from, and that's why it scores 100 points in all Lighthouse categories!

Lighthouse test results on the docs.mrrobot.app page. Note that all four scores (performance, accessibility, best practices, SEO) are 100/100.

You've got loads of other great features, it's customizable, server-first, Islands integration. In short, you'll find more information on the documentation than my simple paragraph. 😆

And where does Starlight fit into all this?
Yes, yes, here we come! As far as I'm concerned, it's just like grafting a limb onto Astro. In the proper sense, it's a module! A module that adds other functionalities specifically to make documentation, quite simply! It's easy to configure, ready to use as soon as you create a new project, in short, it's everything you want when you need to have documentation published on time. I'm not counting the fact that the site generated is responsive, which should be the basis. The theme is customizable, and you can of course modify the CSS as you wish. After all, it's based on Astro!

Starlight website →

Initiate code

All you need is Node.js version 18.14.1 or higher, and access to your terminal. On your client, you can initiate it by typing :

yarn create astro --template starlight

If you wish, after installation you can add a framework such as React, Vue, Svelte, Tailwind and others with npx astro add. (See documentation to add an integration).

thomasbnt@thomasbnt:~/lab$ yarn create astro --template starlight
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-astro@4.6.0" with binaries:
      - create-astro

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./interstellar-inclination
      ◼  tmpl Using starlight as project template
 ██████  Template copying...

  deps   Install dependencies?
         Yes
 ██████  Installing dependencies with yarn...

    ts   Do you plan to write TypeScript?
         No
      ◼  No worries! TypeScript is supported in Astro by default,
         but you are free to continue writing JavaScript instead.

   git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./interstellar-inclination
         Run yarn dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭──❄️─╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯
Done in 52.80s.

The process is so simple, over the years we've simplified certain tasks, and this one, the fact of not having to look for one package version and not the other, I think it's just great, a time saver. Thank you Astro. 💜🚀
This gives you something like this:

.
├── README.md
├── astro.config.mjs
├── node_modules
├── package-lock.json
├── package.json
├── public
│   └── favicon.svg
├── src
│   ├── assets
│   │   └── houston.webp
│   ├── content
│   │   ├── config.ts
│   │   └── docs
│   │       ├── guides
│   │       │   └── example.md
│   │       ├── index.mdx
│   │       └── reference
│   │           └── example.md
│   └── env.d.ts
└── tsconfig.json

All you have to do is.... launch the website, and go to http://localhost:4321/!

yarn dev

The content of your documentation is written in English by default, but everything is editable. I remind you that this is code, and that the next chapter is... editing a page!

Modify a page

Open your beautiful IDE, and you'll notice that a README file is there to guide you. Feel free to read it and get a feel for how it works, as well as having the documentation always at your fingertips.

We're going to directly modify that page you saw just above, the index. It's the one we'll see when we get to the documentation, the one that should make the first impression and guide us with some additional information like social networks.

To do this, we go to src/content/docs/index.mdx :

We find the frontmatter, the part at the very top between the --- hyphens, which declares the page title, description and template used and other functionalities we can add. In this example, we're going to keep it simple, because for the record I'm not an expert in the field, and guiding you through a place that even I don't know much about is like stepping on nettles, it hurts. 😆

But you're about to see how to add some nice little features like status badges, or the ability to highlight or hide the page.

In short, let's change the title, for example, and remove the Houston image on the right (sorry).

As you can see just below, there are components,

import { Card, CardGrid } from '@astrojs/starlight/components';

## Next steps

<CardGrid stagger>
    <Card title="Update content" icon="pencil">
        Edit `src/content/docs/index.mdx` to see this page change.
    </Card>
    <Card title="Add new content" icon="add-document">
        Add Markdown or MDX files to `src/content/docs` to create new pages.
    </Card>
    <Card title="Configure your site" icon="setting">
        Edit your `sidebar` and other config in `astro.config.mjs`.
    </Card>
    <Card title="Read the docs" icon="open-book">
        Learn more in [the Starlight Docs](https://starlight.astro.build/).
    </Card>
</CardGrid>

By default, Starlight includes them, but you can add your own. See components documentation.

Let's move on to a documentation page (click on the blue button if you haven't edited the code). This is where you can document whatever you want, a project, a kind of wiki... whatever you want ✨

All files are located in /src/content/docs, so each folder you make allows you to sort them. In this case, for example, there are two folders, guides/ and reference/. The result for this page is /src/content/docs/guides/example.md ! By the way, the file is in .md but you can change it to .mdx. I think you'll have fewer errors with your IDE.

Let's modify the whole thing to make something more complete!

astro.config.mjs

This file is important, as it creates the menu on the left (sidebar), the social network links on the top right, the title you'll have at the top left of the documentation, and lots of other options.

Here, I'm going to modify the sidebar part to refer to the pages I've modified/added for this example.

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

// https://astro.build/config
export default defineConfig({
    integrations: [
        starlight({
            title: "'Mr. Robot',"
            sidebar: [
                {
                    label: 'Introduction',
                    link: '/introduction/',
                },
                {
                    label: 'Characters',
                    autogenerate: { directory: 'characters' },
                },
            ],
        }),
    ],
});

The Introduction page stands alone, so I've removed the items and added a link directly. As for the characters, instead of adding them page by page, I simply used autogenerate. It allows you to... generate... automatically from your targeted folder (in this case characters). Here's how it works:

And this is how my file is organized:

.
├── characters
│   ├── angelamoss.mdx
│   ├── elliotalderson.mdx
│   └── mrrobot.mdx
├── index.mdx
└── introduction.mdx

autogenerate

By default with autogenerate, files are displayed in alphabetical order, but I tell it that the "Mr. Robot" page should be at the very top, with the order attribute directly in the frontmatter. Be very careful with the tabulation of your frontmatter, I've had quite a few errors.

---
title: "Mr. Robot"
sidebar:
  order: 1
---

Badges

I mentioned it above, and you can see it on the screenshot, a colored badge has appeared just to the right of a text, and it looks like this in code (still in the frontmatter):

sidebar:  
   order: 1  
   badge:    
      text: 'New'    
      variant: tip

As you can see, your documentation takes shape very quickly! On the right are the steps/titles in the page, and on the left your menu that encompasses it all. 🚀

Now we're going to take a look at a bonus part of Starlight. The one I particularly like, the one that brings people together: internationalization!

Internationalization (i18n)

Full documentation is great.
Source code that can be edited by anyone is great.
Sharing this documentation on the other side of the world is super coo.... But what if the person doesn't understand what it says?

And that's where internationalization comes in! 🦸‍♀️🦸‍♂️

In Astro Starlight, we can, in just a few lines, add the possibility of putting the documentation in several languages. Nothing is magic, everything is fantastic! On a more serious note, you'll understand how it's handled with these bits of code:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

// https://astro.build/config
export default defineConfig({
    integrations: [
        starlight({
            title: 'Mr. Robot',
            sidebar: [
                {
                    label: 'Introduction',
                    link: '/introduction/',
                },
                {
                    label: 'Characters',
                    autogenerate: { directory: 'characters' },
+                   translations: {
+                       fr: 'Personnages',
+                   },
                },
            ],
+           defaultLocale: 'root',
+           locales: {
+               root: {
+                   label: 'English',
+                   lang: 'en',
+               },
+               fr: {
+                   label: 'Français',
+                   lang: 'fr',
+               },
+           },
        }),
    ],
});

Here, the default language is en for English. And we've added fr for French as another choice. So we can choose our language on the website in the top right-hand corner:

The drop-down list of languages available for documentation. Here we have English and French. This gives your /src/content/docs folder :

.
├── characters
│   ├── angelamoss.mdx
│   ├── elliotalderson.mdx
│   └── mrrobot.mdx
├── fr
│   └── characters
│       └── elliotalderson.mdx
├── index.mdx
└── introduction.mdx

Each language has its own folder, and in each folder the folder name must match that of the root language.

Exemple : introduction.mdx (EN) → /fr/introduction.mdx (FR)

You have the official guide on how to integrate i18n into your project.

Thank you for reading all the way to the end, and please feel free to share your documentation around the world and even here, it could be a little gold mine for some, and a discovery for others! Here's a perfect example of documentation, from Mr. Robøt, listing the commands and functions of the Discord robot.

docs.mrrobot.app

Creating a Discord bot with Slash Commands

Thomas Bnt — Sun, 05 Feb 2023 18:06:30 +0000

INFORMATION: This tutorial is for creating a Discord robot with Slash Commands. Learn more about using Slash Commands

This post is available in French language →

📚 Prerequisites before starting

Before you start this tutorial, follow these instructions. You need to install several tools for the robot to work, and create a folder with any name, preferably short and without spaces. This will be your folder containing your robot files.

List of tools and things to know :

Know the basics of JavaScript
Install the latest stable version of Node.js
Have access to the terminal
Have a good Internet connection
A text editor or IDE (Notepad++, Atom, WebStorm, VSCode ...)
Be able to read English for documentation

We will first check if everything has been installed, open your command prompt and not the one installed by Node.js (if you are on Windows), and type :

node --version

It is supposed to tell you which version you have installed. Leave this window open for the rest of the installation.

✨ What we are going to do for this tutorial

Before you read on, you should understand that you need to alter some values, such as IDs and command names. We'll make a simple Discord bot with Slash Commands, and with that we'll add a module to synchronize our command list very easily. And finally, an example command: /ping.

Sample image for the body of the /ping command

It should also be noted that the packages in this example of package.json are offered with a fixed version, so do not hesitate to check if there is an update for each of them.

🕺🏼 Installation of the project and packages

After you have correctly installed the latest version of Node.js, you need to go to your robot's folder. To move to the command prompt :

cd /nameOfTheFolder

For simplicity, go to your folder using the GUI and not the command prompt and copy the URL at the top. Then paste it into the command prompt by adding cd before your copied text.

If you are not in your bot folder with the command prompt, please review the lines at the top. We are going to install the package to make the bot work. This package is called Discord.js, it is a library to help interact with the Discord API and is developed in JavaScript.

The different packages

We will need different Node packages (npm) to make the robot work.

discord.js : For creating the bot and reply to messages
discord-api-types/v10 : For creating the Slash Commands
discord-sync-commands: This is not a package, but we will use it as a module to synchronize our Slash commands.

npm install discord.js discord-api-types/v10 fs

Example of package.json

You can in itself have the same package.json:

{
  "name": "example_discord_bot_slash_commands",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "keywords": [
    "discordapp",
    "bot",
    "discordjs"
  ],
  "author": "Thomas Bnt <contact+git@thomasbnt.fr>",
  "license": "GPL-3.0-only",
  "dependencies": {
    "discord-api-types": "^0.37.31",
    "discord.js": "^14.7.1"
  }
}

As you can read, we have specified in the script a file, app.js is the file where we will run the bot.

We will therefore install all packages :

npm install

🤖 Creation of the robot on the platform

Now you have to create the bot on the Discord platform and add it to your server. We will do this in two steps.

Follow this process, you must be logged in to your Discord account in order to access this page.

Go to: https://discord.com/developers/applications
Then Applications → New Application.
Fill in the form. Once done, click on "Create".

Go to the Bot tab
Click on "Add Bot", then click on "Yes, do it!"

All that remains is to add it to your own server. To do this, just go to the OAuth2 tab, give it the necessary permissions for the bot to work properly, and generate your link.

Copy it and open it in a new tab, you are asked to select a server. Select yours and click Allow. You now have your robot on your server, but it is offline. This is perfectly normal! Follow the steps below to turn it on.

🚀 Create the first command

Here we are! This is the moment when we will create our first command.

The main file: `app.js`

After you have installed everything correctly, you need to create the app.js file.

It simply serves as your project's root, I like to call it its heart 💜. Because it's where everything starts from.

Here is an example of a file named app.js :

/**
 @document   : app.js
 @author     : Thomas Bnt
 @version    : 3.0.0
 @copyright  : 2023, Thomas Bnt
 @license    : GNU General Public License v3.0
 @repository : https://github.com/thomasbnt/Bord-Pi
 @description: Un robot Discord gérant et aidant les utilisateurs pour un serveur.
*/

const fs = require('fs')
const { Client, Collection, GatewayIntentBits, Options } = require('discord.js')

const client = new Client({
  // The intents will depend on what you want to do with the robot, 
  // but don't forget to activate them in your discord.dev dashboard
  // at the address https://discord.com/developers/applications/{ID}/bot, 
  // section "Privileged Gateway Intents"
  intents: [
    GatewayIntentBits.Guilds,
    GatewayIntentBits.GuildMessages
  ],
})

// We create a collection for commands
client.commands = new Collection()
const commandFiles = fs
  .readdirSync('./commands')
  .filter((file) => file.endsWith('.js'))

for (const file of commandFiles) {
  const command = require(`./commands/${file}`)
  client.commands.set(command.data.name, command)
}

// Events like ready.js (when the robot turns on), 
// or messageCreate.js (when a user/robot sends a message)
const eventFiles = fs
  .readdirSync('./events')
  .filter((file) => file.endsWith('.js'))

for (const file of eventFiles) {
  const event = require(`./events/${file}`)
  if (event.once) {
    client.once(event.name, (...args) => event.execute(...args, client))
  } else {
    client.on(event.name, (...args) => event.execute(...args, client))
  }
}

// The interactionCreate event directly here, as this is the heart of the robot.
client.on('interactionCreate', async (interaction) => {
  if (!interaction.isCommand()) return
  const command = client.commands.get(interaction.commandName)
  if (!command) return

  // We log when a user makes a command
  try {
    await console.log(
      `/${interaction.commandName} — Par ${interaction.user.username}`
    )
    await command.execute(interaction, client)
    // But if there is a mistake, 
    // then we log that and send an error message only to the person (ephemeral: true)
  } catch (error) {
    console.error(error)
    return interaction.reply({
      content: "An error occurred while executing this command!",
      ephemeral: true,
      fetchReply: true
    })
  }
})

// The token of your robot to be inserted
client.login("NICE TOKEN NEVER TO BE DISCLOSED")

Synchronisation of Slash Commands

This file will be put in the modules/ folder, and called as soon as the bot is launched with the Ready event (events/ready.js). I took it from this GitHub repository made by Androz. It allows you to easily synchronize and update your list of commands.

Here is the Slash Commands synchronization file (/modules/sync_commands.js):

const Discord = require('discord.js')
module.exports = async (client, commands, options = { debug: false, guildId: null }) => {
  const log = (message) => options.debug && console.log(message)

  const ready = client.readyAt
    ? await Promise.resolve()
    : new Promise((resolve) => client.once('ready', resolve))
  await ready
  const currentCommands = await client.application.commands.fetch(
    options.guildId && { guildId: options.guildId }
  )

  log(`Synchronizing commands...`)
  log(`Currently ${currentCommands.size} commands.`)

  const newCommands = commands.filter(
    (command) => !currentCommands.some((c) => c.name === command.name)
  )
  for (const newCommand of newCommands) {
    await client.application.commands.create(newCommand, options.guildId)
  }

  log(`Created ${newCommands.length} commands!`)

  const deletedCommands = currentCommands
    .filter((command) => !commands.some((c) => c.name === command.name))
    .toJSON()
  for (const deletedCommand of deletedCommands) {
    await deletedCommand.delete()
  }

  log(`Deleted ${deletedCommands.length} commands!`)

  const updatedCommands = commands.filter((command) =>
    currentCommands.some((c) => c.name === command.name)
  )
  let updatedCommandCount = 0
  for (const updatedCommand of updatedCommands) {
    const newCommand = updatedCommand
    const previousCommand = currentCommands.find(
      (c) => c.name === updatedCommand.name
    )
    let modified = false
    if (previousCommand.description !== newCommand.description) modified = true
    if (
      !Discord.ApplicationCommand.optionsEqual(
        previousCommand.options ?? [],
        newCommand.options ?? []
      )
    )
      modified = true
    if (modified) {
      await previousCommand.edit(newCommand)
      updatedCommandCount++
    }
  }

  log(`Updated ${updatedCommandCount} commands!`)

  log(`Commands synchronized!`)

  return {
    currentCommandCount: currentCommands.size,
    newCommandCount: newCommands.length,
    deletedCommandCount: deletedCommands.length,
    updatedCommandCount
  }
}

A loooot of things, but just remember that it limits Discord's API requests, and it syncs your commands without difficulty. It's a module, so we'll have to call it in an event which is the Ready!

The Event Ready file

When you turn on your bot, each time this event will run. So we can make sure that we put in a function or some other code that should run from the beginning.

const synchronizeSlashCommands = require('../modules/SyncCommands')
const { ActivityType } = require('discord.js')
module.exports = {
  name: 'ready',
  async execute(client) {
    console.log(`Connected as ${client.user.username}`)
    client.user.setActivity(`/bord`, { type: ActivityType.Watching })

    // This is when the Slash Commands synchronisation starts
    await synchronizeSlashCommands(client,
      client.commands.map((c) => c.data),
      {
        // The parameters to be modified for synchronisation
        debug: true,
        // If you set a server ID, then it will ONLY be for the targeted server.
        // If you don't put guildID, it will be in GLOBAL,
        // So on all servers.
        guildId: "YourDiscordServerOrDeleteThisLine"
      }
    )
  }
}

The `/ping` command as an example

So it's a basic command, but it can also be used to detect anomalies in the connection. So it's not that useless.

const { EmbedBuilder } = require('discord.js')
module.exports = {
  // "data" is the body of the command,
  // this is what we will find when we type /ping
  data: {
    name: 'ping',
    description: 'Get the ping from the robot',
    options: []
  },
  // and all this is the logic of the order
  async execute(interaction, client) {
    // For example here we create an embed with EmbedBuilder from discord.js
    // We add a name and iconURL to it, and then modify it with the values.
    const PingBeforeEmbed = new EmbedBuilder().setAuthor({
      name: `The bird will come back with the bot ping...`,
      iconURL: client.user.avatarURL()
    })
    const sent = await interaction.reply({
      embeds: [PingBeforeEmbed],
      fetchReply: true,
      ephemeral: true
    })
    const TotalPing = sent.createdTimestamp - interaction.createdTimestamp
    const PingEmbed = new EmbedBuilder()
      .setAuthor({
        name: `Ping of ${client.user.username}`,
        iconURL: client.user.avatarURL()
      })
      .addFields(
        {
          name: 'Total ping',
          value: `${TotalPing}ms`,
          inline: true
        },
        {
          name: 'Websocket',
          value: `${client.ws.ping} ms`,
          inline: true
        }
      )
    await interaction.editReply({
      embeds: [PingEmbed],
      ephemeral: true
    })
  }
}

What I should have in my project

Create the app.js file
Create the events/ folder and the events/ready.js file
Create the modules/ folder and the modules/sync_commands.js file
Create the commands/ folder and the commands/ping.js file

.
├── app.js
├── commands
│   └── ping.js
├── events
│   └── ready.js
├── modules
│   └── sync_commands.js
└── package.json

If you're missing something, you haven't read everything. 😱

🥳 Start the bot!

You need to copy your robot's token from the Discord page for developers.

And insert it with this code at the end of your app.js :

client.login("YOUR TOKEN HERE WITHOUT SPACES AND NEVER TO BE REVEALED")

Save your file and do this command in the command prompt:

node app.js

🎉🎉 That's it! Your bot is on! 🎉🎉

🌟 An example of a robot

Bord Pi : A robot specifically designed for its own Discord server.

NOTE The documentation is written in French language, but the code isn't.

Here is an example of slash commands, feel free to download the repository and modify it.

This is a Discord bot that runs on the Discord.js library and is set up for your Discord server. It is accessible and easy to configure it your way.

Photo by Clem Onojeghuo on Unsplash

☕	Check my Twitter account. You can see many projects and updates. You can also support me on Buy Me a Coffee, Stripe or GitHub Sponsors. Thanks for read my post ! 🤩

Suppress Cache

Thomas Bnt — Sat, 30 Jan 2021 21:45:00 +0000

New project Open Source on GitHub !

TLDR : Generate randomly a string for clear cache from Cloudflare or other CDN. Using on Mr. Robøt.

This file is used on the bot for no cache files from CDNs. Discord uses Cloudflare for caching management, which can be problematic when you change an image and display it on the platform. Even after a change on your side, Discord can still keep the old version in its cache.

const { getFolderIcons } = require('suppresscache');

getFolderIcons(
  "https://mrrobot.app/Folder/Of/Icons",
  "myFileName.png",
  true,
  false
)

Give that :

[suppressCache] Output : https://mrrobot.app/Folder/Of/Icons/file.png?suppressCache=gb0cqe0j

mrrobotdotapp / SuppressCache

Generate randomly a string for clear cache from CloudFlare or other CDN. Using on Mr. Robøt.

Follow your repository from Discord

Thomas Bnt — Sun, 16 Aug 2020 15:05:00 +0000

My Workflow

This Action is used for write at every push the progress to a project and/or updates. It's only for Discord users and work with Webhooks and secrets tokens on GitHub.

I modified this script for showing to users who follow my project to stay updated for the new version. 😁

Submission Category: Maintainer Must-Haves

Setup

Really simple, you must have :

Discord Webhook URL
A active repository on GitHub
Integrate this script to your GitHub repository

name: Discord Webhook
on: [push]
jobs:
  Discord_notification:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Run Discord Webhook
        uses: mrrobotdotapp/classic-discord-webhook@main
        with:
          id: ${{ secrets.DISCORD_WEBHOOK_ID }}
          token: ${{ secrets.DISCORD_WEBHOOK_TOKEN }}
          #threadId: ${{ secrets.DISCORD_WEBHOOK_THREAD_ID }} # Optional

How to get a Wehbook link on Discord ?

In this video, I selected two IDs. The first is DISCORD_WEBHOOK_ID and the second is DISCORD_WEBHOOK_TOKEN

And how to put my ID and secret token in my GitHub repository ?

Additional Resources / Info

Check out now the repository.

mrrobotdotapp / classic-discord-webhook

This GitHub Action can produce fancy and more meaningful discord messages for your commits.

If you have questions, don't hesitate !

☕	Check my Twitter account. You can see many projects and updates. You can also support me on Buy Me a Coffee, Stripe or GitHub Sponsors. Thanks for read my post ! 🤩

Push all posts of dev.to into Webhooks

Thomas Bnt — Thu, 27 Dec 2018 05:08:47 +0000

Introduction

Hello everybody, today I wanted to share a tool that most people probably know, but it's always a benefit to do an post on it.

Make a simple Webhook request to each post on Dev.to.

The system is very simple, it will retrieve the RSS feed from dev.to and every time there is a new entry, IFTTT will start and send a message in Webhook.

In this example, my Webhook output is on Discord, a communication platform that is widely used by players, developers, communities and other people.

Setup

1) To get started, log in or create your IFTTT account.
2) Start to click on New Applet
3) If RSS Feed ▶️ New Feed Item ▶️ In the Feed URL, put 'https://dev.to/feed' or 'https://dev.to/rss' ▶️ Create trigger
4) then Webhooks ▶️ Make a web request.

For the webhooks settings on Discord, here is an example to do :

URL	https://discord.com/api/webhooks/524350588369240075/tcQJ9ioe9VMlvgLuRMoen0iWNx2DP43z-qcxUA5Vq3jkioe92P3EdIjq7Uapn
Method	POST
Content Type	application/json
Body

For your body, you can send an embed message on Discord.


{ 
    "embeds": [{ 
        "author":{ 
            "name":"{{EntryTitle}}", 
            "url":"{{EntryUrl}}" 
            }, 
            "footer":{ 
                "text":"Auteur : {{EntryAuthor}}", 
                "icon_url":"https://cdn.discordapp.com/attachments/377205421640908810/526770363456159768/apple-icon-5c6fa9f2bce280428589c6195b7f1924206a53b782b371cfe2d02da932c8c173.png" 
            }, 
            "color":1776669 
    }] 
}

If you don't want an embed, but only a simple message with the title and URL of the new post :


{"content": "[{{EntryTitle}}]({{EntryUrl}}) was posted by {{EntryAuthor}}"}

Example of the output of Webhook on Discord

And here is an example that posts every day on my server, being a few developers on it, we like to have everything within reach as quickly as possible. And since it's the best way to communicate, whether written or vocal, I preferred to make a simple IFTTT condition in order to get the RSS feed and put it in.

📷 I also made another IFTTT system, this one was already prepared on the platform. Every day, once in the morning and once in the evening, the Twitter account @Splash_Everyday tweet a photo from Unsplash.

__
By the way, I'm looking for any RSS feed I could add to my list of Webhooks, if you have any, comment them just below, and I'll see if it can be useful!

☕	Check my Twitter account. You can see many projects and updates. You can also support me on Buy Me a Coffee, Stripe or GitHub Sponsors. Thanks for read my post ! 🤩

Create your own Bot Discord

Thomas Bnt — Mon, 11 Jun 2018 21:09:39 +0000

DISCLAIMER	This tutorial is for creating commands with a prefix. It is not for using Slash Commands.

Preamble

Before beginning this tutorial, follow the instructions below.
You must know JavaScript. You need to install several tools in order for the bot to work, and create a folder with any name, preferably short and without spaces. This will be your folder containing your bot files.

List of tools :

Install the latest stable version of NodeJS
Having access to the Terminal
Have a good internet connection
To know how to read a minimum English for documentation
A text editor or IDE (Notepad ++, Atom, JetBrains, VSC..)

We will at first if everything has been installed. Open your Terminal and not the one installed by NodeJS, and type :

node --version

It is supposed to take you to the version you have installed. Leave this window open for the rest of the installation.

Installation

After you have successfully installed the latest version of NodeJS, you must install in your bot's folder. To move in the order guest :

cd /folderName

For simplicity, go to your folder by navigating with the GUI and not with the command prompt and copy the URL at the top. Then paste it into the Terminal by adding cd at the beginning to indicate that you want to navigate to this folder.

⚠ If you are not in the folder of your bot with the Terminal, please review the top lines.

We will install the package for the bot to work. This package is called Discord.js, it is a library related to Discord and developed in JavaScript.

npm install discord.js --save

You will normally have some errors but nothing that will prevent you from starting the bot, as well as a node_modules folder created in your folder. This is where we install all the packages from NodeJS to make the code work.

+ discord.js@13.5.1 updated 1 package in 1.241s

We see, in the end, that the package discord.js version 13.5.1 has been installed in the folder.

Examples

Everything is installed? Wonderful ! Please now create a file that you will name app.js. Be careful that your file extension does not end with anything other than .js because otherwise we will not be able to execute the script. Then open it.

⚠ Reminder : Open with a text editor or IDE such as VSC, Atom, Notepad ++.

For each JavaScript file, we must call discord.js so that everything works perfectly, we will also declare the robot client :

const Discord = require('discord.js')
const client = new Discord.Client()

client.on("message", message => {

  // Your commands here

})

Example of a ping pong message :

// Result in: If the user's message contains "ping" then

if(message.content === "ping"){

   // the bot answers pong!
   message.channel.send("Pong!")
  
}

Example message with a prefix :

// We declare the prefix
const prefix = '?'

// The bot will answer this if a user does ?Help
if(message.content.startsWith(prefix + "help")){
   message.channel.send("You did `?help` to get help.")
}

Private message example :

if(message.content == "mp") {
   message.author.send("Here is a private message !")
}

Bot creation

Now you have to create the bot on the Discord platform and add it to your server. For that, we will do it in two stages. Follow this process :

⚠ You must be logged into your Discord account in order to access this page.

Go to: https://discord.com/developers/applications/me
Then MyApplications → New Application.
Complete the form. Once done, click on "Create App" then again on the same button.
Click "Create a Bot User" and click "Yes, do it!"

And activate the 'mode' bot

For the permissions, the robot needs to read the messages on the server (MESSAGE CONTENT INTENT).

It remains to add it on your own server. To do this, just click on "Generate OAuth2 URL" and generate your link. Copy it and open it in a new tab, you are asked to select a server. Select yours and click Allow.

You now have your bot on your server, but it is offline. This is completely normal ! Follow the sequence to turn it on.

Start-up

You must copy your bot token from the Discord for Developers page and insert it with this piece of code at the end of your app.js :

client.login("YOUR_TOKEN_HERE_WITHOUT_SPACE");

Example of a copy token :

Save your file and make this command in the command prompt :

node app.js

There you go ! Your bot is on ! 🎉

🇫🇷 The tutorial comes from my website, it is written in French.
You can download files and here is the discord.js documentation.

☕	Check my Twitter account. You can see many projects and updates. You can also support me on Buy Me a Coffee, Stripe or GitHub Sponsors. Thanks for read my post ! 🤩