Skip to content

Commit

Permalink
docs: replace images with interactive components
Browse files Browse the repository at this point in the history
  • Loading branch information
@NyuwBot
NyuwBot committed Jul 3, 2023
1 parent 4ab9477 commit 8ea377a
Show file tree
Hide file tree
Showing 14 changed files with 178 additions and 81 deletions.
1 change: 1 addition & 0 deletions DisCatSharp.Docs/articles/modules/audio/lavalink_v4/commands.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,6 +352,7 @@ Now we can use these commands to listen to music!
<discord-embed
slot="embeds"
provider="YouTube"
provider-url="https://www.youtube.com"
author-name="Raon"
author-url="https://www.youtube.com/channel/UCQn1FqrR2OCjSe6Nl4GlVHw"
color="#FF0000"
Expand Down
9 changes: 8 additions & 1 deletion DisCatSharp.Docs/articles/modules/commandsnext/command_attributes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,11 @@ public async Task GenericCommand(CommandContext ctx, string generic)
}
```

![Generic Image](/images/commands_command_attributes_01.png)
<discord-messages>
<discord-message profile="user">
!generic
</discord-message>
<discord-message profile="dcs">
Only usable during the year 2030!
</discord-message>
</discord-messages>
11 changes: 9 additions & 2 deletions ...atSharp.Docs/articles/modules/commandsnext/customization/argument_converters.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,16 @@ Once the argument converter is written and registered, we'll be able to use it:
[Command("boolean")]
public async Task BooleanCommand(CommandContext ctx, bool boolean)
{
await ctx.RespondAsync($"Converted to {boolean}");
await ctx.RespondAsync($"Converted to {boolean} :3");
}
```

![true](/images/commands_argument_converters_01.png)
<discord-messages>
<discord-message profile="user">
!boolean yes
</discord-message>
<discord-message profile="dcs">
Converted to True :3
</discord-message>
</discord-messages>

91 changes: 51 additions & 40 deletions DisCatSharp.Docs/articles/modules/commandsnext/customization/help_formatter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,44 +16,44 @@ Simply inherit from `BaseHelpFormatter` and provide an implementation for each o
```cs
public class CustomHelpFormatter : BaseHelpFormatter
{
// protected DiscordEmbedBuilder _embed;
// protected StringBuilder _strBuilder;
// protected DiscordEmbedBuilder _embed;
// protected StringBuilder _strBuilder;
public CustomHelpFormatter(CommandContext ctx) : base(ctx)
{
// _embed = new DiscordEmbedBuilder();
// _strBuilder = new StringBuilder();
public CustomHelpFormatter(CommandContext ctx) : base(ctx)
{
// _embed = new DiscordEmbedBuilder();
// _strBuilder = new StringBuilder();
// Help formatters do support dependency injection.
// Any required services can be specified by declaring constructor parameters.
// Other required initialization here ...
}

public override BaseHelpFormatter WithCommand(Command command)
{
// _embed.AddField(command.Name, command.Description);
// _strBuilder.AppendLine($"{command.Name} - {command.Description}");
return this;
}

public override BaseHelpFormatter WithSubcommands(IEnumerable<Command> cmds)
{
foreach (var cmd in cmds)
{
// _embed.AddField(cmd.Name, cmd.Description);
// _strBuilder.AppendLine($"{cmd.Name} - {cmd.Description}");
}

return this;
}

public override CommandHelpMessage Build()
{
// return new CommandHelpMessage(embed: _embed);
// return new CommandHelpMessage(content: _strBuilder.ToString());
}
// Other required initialization here ...
}

public override BaseHelpFormatter WithCommand(Command command)
{
// _embed.AddField(command.Name, command.Description);
// _strBuilder.AppendLine($"{command.Name} - {command.Description}");
return this;
}

public override BaseHelpFormatter WithSubcommands(IEnumerable<Command> cmds)
{
foreach (var cmd in cmds)
{
// _embed.AddField(cmd.Name, cmd.Description);
// _strBuilder.AppendLine($"{cmd.Name} - {cmd.Description}");
}

return this;
}

public override CommandHelpMessage Build()
{
// return new CommandHelpMessage(embed: _embed);
// return new CommandHelpMessage(content: _strBuilder.ToString());
}
}
```

Expand All @@ -62,13 +62,13 @@ Alternatively, if you're only wanting to make a few small tweaks to the default
```cs
public class CustomHelpFormatter : DefaultHelpFormatter
{
public CustomHelpFormatter(CommandContext ctx) : base(ctx) { }
public CustomHelpFormatter(CommandContext ctx) : base(ctx) { }

public override CommandHelpMessage Build()
{
EmbedBuilder.Color = DiscordColor.SpringGreen;
return base.Build();
}
public override CommandHelpMessage Build()
{
EmbedBuilder.Color = DiscordColor.SpringGreen;
return base.Build();
}
}
```

Expand All @@ -83,4 +83,15 @@ commands.SetHelpFormatter<CustomHelpFormatter>();

That's all there is to it.

![Fresh New Look](/images/commands_help_formatter_01.png)
<discord-messages>
<discord-message profile="dcs">
<discord-embed slot="embeds" color="#00FF7F" embed-title="Commands">
<discord-embed-description slot="description">All available commands will be listed below.</discord-embed-description>
<discord-embed-fields slot="fields">
<discord-embed-field field-title="!help">Sends you a list of all available commands, their usage and their description.</discord-embed-field>
<discord-embed-field field-title="!whois [@User]">Displays information the bot knows about you or the mentioned user.</discord-embed-field>
<discord-embed-field field-title="!avatar [@User]">Displays your or the mentioned user's avatar as an embedded image.</discord-embed-field>
</discord-embed-fields>
</discord-embed>
</discord-message>
</discord-messages>
9 changes: 8 additions & 1 deletion DisCatSharp.Docs/articles/modules/commandsnext/dependency_injection.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,14 @@ public async Task RandomCommand(CommandContext ctx, int min, int max)

Then we can give it a try!

![Command Execution](/images/commands_intro_05.png)
<discord-messages>
<discord-message profile="user">
!random 1 500
</discord-message>
<discord-message profile="dcs">
Your number is: 420
</discord-message>
</discord-messages>

<br/>
CommandsNext has automatically injected our singleton `Random` instance into the `Rng` property when our command module was instantiated.
Expand Down
72 changes: 56 additions & 16 deletions DisCatSharp.Docs/articles/modules/commandsnext/intro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ public async Task GreetCommand(CommandContext ctx) { }
In the body of our new method, we'll use `CommandContext#RespondAsync` to send a simple message.

```cs
await ctx.RespondAsync("Greetings! Thank you for executing me!");
await ctx.RespondAsync("Greetings! UwU");
```

Finally, mark your command method with the `Command` attribute so CommandsNext will know to treat our method as a command method.
Expand All @@ -59,7 +59,7 @@ We'll name our command *greet* to match the name of the method.
[Command("greet")]
public async Task GreetCommand(CommandContext ctx)
{
await ctx.RespondAsync("Greetings! Thank you for executing me!");
await ctx.RespondAsync("Greetings! UwU");
}
```

Expand All @@ -75,7 +75,7 @@ public class MyFirstModule : BaseCommandModule
[Command("greet")]
public async Task GreetCommand(CommandContext ctx)
{
await ctx.RespondAsync("Greetings! Thank you for executing me!");
await ctx.RespondAsync("Greetings! UwU");
}
}
```
Expand Down Expand Up @@ -156,9 +156,14 @@ internal static async Task MainAsync()
It's now the moment of truth; all your blood, sweat, and tears have lead to this moment.
Hit `F5` on your keyboard to compile and run your bot, then execute your command in any channel that your bot account has access to.

![Congratulations, You've Won!](/images/commands_intro_03.png)

[That was easy](https://www.youtube.com/watch?v=GsQXadrmhws).
<discord-messages>
<discord-message profile="user">
!greet
</discord-message>
<discord-message profile="dcs">
Greetings! UwU
</discord-message>
</discord-messages>


## Taking User Input
Expand Down Expand Up @@ -186,13 +191,20 @@ which uses our new parameter.
```cs
public async Task GreetCommand(CommandContext ctx, string name)
{
await ctx.RespondAsync($"Greetings, {name}! You're pretty neat!");
await ctx.RespondAsync($"Greetings, {name}! You're cute OwO!");
}
```

That's all there is to it. Smack `F5` and test it out in a channel your bot account has access to.

![Greet Part 2: Electric Boogaloo](/images/commands_intro_04.png)
<discord-messages>
<discord-message profile="user">
!greet Drac
</discord-message>
<discord-message profile="dcs">
Greetings, Drac! You're cute OwO!
</discord-message>
</discord-messages>

Now, you may have noticed that providing more than one word simply does not work.
For example, `!greet Luke Smith` will result in no response from your bot.
Expand All @@ -207,7 +219,7 @@ The simplest way to get around this would be to wrap your input with double quot
CommandsNext will parse this as one argument, allowing your command to be executed.

```
!greet "Luke Smith"
!greet "Lala Sabathil"
```

If you would prefer not to use quotes, you can use the `RemainingText` attribute on your parameter.
Expand Down Expand Up @@ -275,7 +287,14 @@ await ctx.RespondAsync($"Your number is: {random.Next(min, max)}");

Run your bot once more with `F5` and give this a try in a text channel.

![Discord Channel](/images/commands_intro_05.png)
<discord-messages>
<discord-message profile="user">
!random 1 100
</discord-message>
<discord-message profile="dcs">
Your number is: 69
</discord-message>
</discord-messages>

CommandsNext converted the two arguments from `string` into `int` and passed them to the parameters of our command,
removing the need to manually parse and convert the arguments yourself.
Expand All @@ -292,17 +311,38 @@ Then modify the response to mention the provided member with the `Mention` prope
```cs
public async Task GreetCommand(CommandContext ctx, DiscordMember member)
{
await ctx.RespondAsync($"Greetings, {member.Mention}! Enjoy the mention!");
await ctx.RespondAsync($"Heywo, {member.Mention}! Enjoy the mention!");
}
```

Go ahead and give that a test run.

![According to all known laws of aviation,](/images/commands_intro_06.png)

![there is no way a bee should be able to fly.](/images/commands_intro_07.png)

![Its wings are too small to get its fat little body off the ground.](/images/commands_intro_08.png)
<discord-messages>
<discord-message profile="user">
!greet <discord-mention>Discord User</discord-mention>
</discord-message>
<discord-message profile="dcs">
Heywo, <discord-mention highlight>Discord User</discord-mention>! Enjoy the mention!
</discord-message>
</discord-messages>

<discord-messages>
<discord-message profile="user">
!greet Discord User
</discord-message>
<discord-message profile="dcs">
Heywo, <discord-mention highlight>Discord User</discord-mention>! Enjoy the mention!
</discord-message>
</discord-messages>

<discord-messages>
<discord-message profile="user">
!greet 666339628613107725
</discord-message>
<discord-message profile="dcs">
Heywo, <discord-mention highlight>Discord User</discord-mention>! Enjoy the mention!
</discord-message>
</discord-messages>

The argument converter for `DiscordMember` is able to parse mentions, usernames, nicknames, and user IDs then look for a matching member within the guild the command was executed from.
Ain't that neat?
Expand Down
20 changes: 11 additions & 9 deletions DisCatSharp.Docs/articles/modules/interactivity.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ hasDiscordComponents: true
---

# Introduction to Interactivity

Interactivity will enable you to write commands which the user can interact with through reactions and messages.
The goal of this article is to introduce you to the general flow of this extension.

Expand All @@ -13,6 +14,7 @@ Make sure to install the `DisCatSharp.Interactivity` package from NuGet before c
![Interactivity NuGet](/images/interactivity_01.png)

## Enabling Interactivity

Interactivity can be registered using the `DiscordClient#UseInteractivity()` extension method.<br/>
Optionally, you can also provide an instance of `InteractivityConfiguration` to modify default behaviors.

Expand All @@ -35,17 +37,18 @@ There are two ways available to use interactivity:

We'll have a quick look at a few common interactivity methods along with an example of use for each.

<br/>
The first (and arguably most useful) extension method is `SendPaginatedMessageAsync` for `DiscordChannel`.

This method displays a collection of *'pages'* which are selected one-at-a-time by the user through reaction buttons.
Each button click will move the page view in one direction or the other until the timeout is reached.

You'll need to create a collection of pages before you can invoke this method.
This can be done easily using the `GeneratePagesInEmbed` and `GeneratePagesInContent` instance methods from `InteractivityExtension`.<br/>
This can be done easily using the `GeneratePagesInEmbed` and `GeneratePagesInContent` instance methods from `InteractivityExtension`.

Alternatively, for pre-generated content, you can create and add individual instances of `Page` to a collection.

This example will use the `GeneratePagesInEmbed` method to generate the pages.

```cs
public async Task PaginationCommand(CommandContext ctx)
{
Expand Down Expand Up @@ -75,11 +78,11 @@ public async Task PaginationCommand(CommandContext ctx)
</discord-message>
</discord-messages>

<br/>
Next we'll look at the `WaitForReactionAsync` extension method for `DiscordMessage`.<br/>
Next we'll look at the `WaitForReactionAsync` extension method for `DiscordMessage`.
This method waits for a reaction from a specific user and returns the emoji that was used.

An overload of this method also enables you to wait for a *specific* reaction, as shown in the example below.

```cs
public async Task ReactionCommand(CommandContext ctx, DiscordMember member)
{
Expand All @@ -104,8 +107,7 @@ public async Task ReactionCommand(CommandContext ctx, DiscordMember member)
</discord-message>
</discord-messages>

<br/>
Another reaction extension method for `DiscordMessage` is `CollectReactionsAsync`.<br/>
Another reaction extension method for `DiscordMessage` is `CollectReactionsAsync`.
As the name implies, this method collects all reactions on a message until the timeout is reached.

```cs
Expand Down Expand Up @@ -136,11 +138,11 @@ public async Task CollectionCommand(CommandContext ctx)
</discord-message>
</discord-messages>

<br/>
The final one we'll take a look at is the `GetNextMessageAsync` extension method for `DiscordMessage`.<br/>
The final one we'll take a look at is the `GetNextMessageAsync` extension method for `DiscordMessage`.

This method will return the next message sent from the author of the original message.<br/>
This method will return the next message sent from the author of the original message.
Our example here will use its alternate overload which accepts an additional predicate.

```cs
public async Task ActionCommand(CommandContext ctx)
{
Expand Down
2 changes: 1 addition & 1 deletion DisCatSharp.Docs/articles/toc.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ items:
uid: modules_audio_lavalink_v4_setup
- name: Configuration
uid: modules_audio_lavalink_v4_configuration
- name: Music Commands
- name: Commands
uid: modules_audio_lavalink_v4_commands
- name: Advanced
uid: modules_audio_lavalink_v4_advanced
Expand Down
Loading

0 comments on commit 8ea377a

Please sign in to comment.