The Beginning

I'm included in quite a few friend groups that actively make use of sharing information, memes, etc. from the social media platform Twitter (now called X), despite this the platform has some flaws, such as terrible embed support for Discord, not supporting multiple images, video files, showing quoted posts, etc.

Fixes do exist for the embed problem via changing the URL before you send the post but there isn't any "lazy man's way" of doing all of that, and sometimes I can't be asked to change a URL, especially on mobile, so I decided to make my first ever TypeScript discord bot as a way to not only learn TypeScript more but also so that I could implement an automation system that allows my friends and I to fix embeds on a twitter post with ease.

Early Implementation

Starting out, there was a lot that felt new to me. A majority of the self-taught sources online for making a discord bot are using just JavaScript and not TypeScript and while those can be modified to work on Discord, I wanted to make sure I was doing stuff properly in a way that made sense to the TypeScript language.

One of the early things I learnt came from this snippet of code:

client.once("ready", async () => {
    console.log(`[🤖] ${client.user!.username} is online!`);
    await deployCommands();
});

For those who may not understand what the code above does, the program listens for the "ready" event and once that event occurs it logs to the console that the bot is online, mentioning the bots username and calling the "deployCommands" function that was imported earlier into the program via import { deployCommands } from "./deploy-commands";.

The code originally didn't include the ! after user, but when I uploaded it to my hosting service I had to include it to prevent an error. This is due to TypeScript yelling at me that there is a chance client.user could be null even though based on my understanding of making Discord bots before, this shouldn't ever happen. That's where the ! symbol comes in, as it tells TypeScript to just trust me that the value of client.user is never null/undefined.

I could technically change it to ${client.user?.username} and it should function the same as on the rare off chance the client user is null it would return "[🤖] undefined is online!" buuuuut, I highly doubt that'll happen so i'm not too worried about it.

IT'S ALIVE!

After coming up with the idea of the bot only a few hours beforehand and spending ~2-3 hours coding it, I managed to create a working Application Command on Discord that works on servers and in Direct Messages.

By right clicking (or long holding on mobile) on a message that included a "x.com" or "twitter.com" URL in the message, you could select the Twitter Embed Patch application and it'd automatically detect every Twitter link in the selected message and convert them into a fxTwitter version, which has better embed support such as for video files.

Despite this being cool and super useful for me and my friends, I felt like there could be more done with it. fxTwitter has multiple features that I never see anyone use, such as showing only images, showing only text, embedding JUST the video/image file without any special fancy twitter branding, etc. So why don't I go ahead and make it a bit better without ruining the newly found one click button functionality?

Slash Commands

I'll be honest with this part, there is probably a way to have both the app button and the slash command combined into one TypeScript file, but I treated both as a separate command just because I couldn't seem to figure that out after already racking my brain for a bit learning about .setType, .setIntegrationTypes, and .setContexts so that these buttons and commands could be used outside a server.

One thing I found out while working on this is that a Discord command option is allowed a maximum of 25 choices, going over it causes the command to error out, I only discovered this due to implementing an option for language translation support directly into the embed, which made me have to cut a few language translation options I felt would be mostly unused.

    .addStringOption((option) =>
        option
            .setName("language")
            .setDescription("Optional: Translate to a specific language.")
            .addChoices(
                { name: "Arabic", value: "ar" },
                { name: "Czech", value: "cs" },
                { name: "Danish", value: "da" },
                { name: "German", value: "de" },
                { name: "Greek", value: "el" },
                { name: "English", value: "en" },
                { name: "Spanish", value: "es" },
                { name: "Finnish", value: "fi" },
                { name: "French", value: "fr" },
                { name: "Hebrew", value: "he" },
                { name: "Hungarian", value: "hu" },
                { name: "Italian", value: "it" },
                { name: "Japanese", value: "ja" },
                { name: "Korean", value: "ko" },
                { name: "Dutch", value: "nl" },
                { name: "Norwegian", value: "no" },
                { name: "Polish", value: "pl" },
                { name: "Portuguese", value: "pt" },
                { name: "Romanian", value: "ro" },
                { name: "Russian", value: "ru" },
                { name: "Swedish", value: "sv" },
                { name: "Turkish", value: "tr" },
                { name: "Ukrainian", value: "uk" },
                { name: "Vietnamese", value: "vi" },
                { name: "Chinese", value: "zh" },
            )
    )

After going through the effort of tinkering with making both a slash command and application command work at the same time (somehow while learning about application commands I removed my code that supported slash commands as well), I managed to get both working in harmony, with the application command being an easy access point and the slash command being the more advanced older brother with extra trinkets.

By using the slash command version you'd be able to select a language to translate a post to, you'd be able to select between ONLY showing text or ONLY showing images, and you'd be able to get an easier way to download image and video files from twitter through discord, but not everything is as easy as just entering a URL.

Sometimes when you share a URL from twitter you get an extra bit of data at the end such as ?s=23821381390, this based on my knowledge is a unique ID that indicates what your share came from, making it a way to track who came to a post from what specific twitter user, and while that tracking data can be nice, it breaks the direct_media part of the slash command, as if a URL had share data, the .mp4 or .png extensions would be added to the VERY end, breaking mobile downloading support, defaulting files to .bin. I honestly thought this would be a hard fix to implement but shockingly it was basically just one line of code, and was similar to how I typically go about removing data from files using NotePad++

url = url.replace(/(\d+)\?.*$/, "$1");

After all is said and done however, I now have an easy way to customize twitter links I share online that allow me to not have to deal with the obnoxious-ness of a normal twitter embed again, and I can use my new learnings as a way to further develop this discord bot into an amazing tool not to just fix embeds with but also to optimize how I go about informing myself about changes to sites like Trello in the future, having a better way of checking for data changes!