Skip to content

Commit 3ac685d

Browse files
notunderctrlnotunderctrl
committed
docs: add tabs setup for js support
1 parent 0372931 commit 3ac685d

File tree

11 files changed

+1349
-460
lines changed

11 files changed

+1349
-460
lines changed

‎apps/website/docs/guide/01-getting-started/02-setup-commandkit.mdx‎

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ title: Setup CommandKit
33
description: Setup a new CommandKit project using the create-commandkit CLI
44
---
55

6+
import Tabs from '@theme/Tabs';
7+
import TabItem from '@theme/TabItem';
8+
69
:::info
710

811
- CommandKit requires at least [Node.js](https://nodejs.org/) v24
@@ -52,18 +55,38 @@ The `src/app.ts` file is the main entry point for your application.
5255
This file default exports the discord.js client instance which
5356
CommandKit loads at runtime.
5457

55-
```ts title="src/app.ts"
56-
import { Client } from 'discord.js';
58+
<Tabs>
59+
<TabItem value="ts" label="TypeScript" default>
60+
```ts title="src/app.ts"
61+
import { Client } from 'discord.js';
5762

58-
const client = new Client({
59-
intents: ['Guilds', 'GuildMessages', 'MessageContent'],
60-
});
63+
const client = new Client({
64+
intents: ['Guilds', 'GuildMessages', 'MessageContent'],
65+
});
6166

62-
// Optional: Setting up the token manually
63-
client.token = process.env.MY_BOT_TOKEN;
67+
// Optional: Setting up the token manually
68+
client.token = process.env.MY_BOT_TOKEN;
6469

65-
export default client;
66-
```
70+
export default client;
71+
```
72+
73+
</TabItem>
74+
<TabItem value="js" label="JavaScript">
75+
```js title="src/app.js"
76+
import { Client } from 'discord.js';
77+
78+
const client = new Client({
79+
intents: ['Guilds', 'GuildMessages', 'MessageContent'],
80+
});
81+
82+
// Optional: Setting up the token manually
83+
client.token = process.env.MY_BOT_TOKEN;
84+
85+
export default client;
86+
```
87+
88+
</TabItem>
89+
</Tabs>
6790

6891
Notice how there's no `client.login()` in this file. This is because
6992
CommandKit will automatically handle the login process for you when

‎apps/website/docs/guide/02-commands/01-chat-input-commands.mdx‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: Chat Input Commands
33
---
44

5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
58
Chat input commands, more commonly known as 'Slash Commands', are a
69
way for users on Discord to perform actions using your bot.
710

@@ -14,18 +17,43 @@ To create a new chat input command, create a new file in the
1417
will create a basic ping command which will respond with "Pong!" when
1518
executed.
1619

17-
```ts title="src/app/commands/ping.ts"
18-
import type { CommandData, ChatInputCommand } from 'commandkit';
20+
<Tabs>
21+
<TabItem value="ts" label="TypeScript" default>
22+
```ts title="src/app/commands/ping.ts"
23+
import type { CommandData, ChatInputCommand } from 'commandkit';
24+
25+
export const command: CommandData = {
26+
name: 'ping',
27+
description: 'Replies with Pong!',
28+
};
29+
30+
export const chatInput: ChatInputCommand = async (ctx) => {
31+
await ctx.interaction.reply('Pong!');
32+
};
33+
```
34+
35+
</TabItem>
36+
<TabItem value="js" label="JavaScript">
37+
```js title="src/app/commands/ping.js"
38+
/**
39+
* @typedef {import('commandkit').CommandData} CommandData
40+
* @typedef {import('commandkit').ChatInputCommand} ChatInputCommand
41+
*/
42+
43+
/** @type {CommandData} */
44+
export const command = {
45+
name: 'ping',
46+
description: 'Replies with Pong!',
47+
};
1948

20-
export const command: CommandData = {
21-
name: 'ping',
22-
description: 'Replies with Pong!',
23-
};
49+
/** @type {ChatInputCommand} */
50+
export const chatInput = async (ctx) => {
51+
await ctx.interaction.reply('Pong!');
52+
};
53+
```
2454

25-
export const chatInput: ChatInputCommand = async (ctx) => {
26-
await ctx.interaction.reply('Pong!');
27-
};
28-
```
55+
</TabItem>
56+
</Tabs>
2957

3058
## Exports explained
3159

‎apps/website/docs/guide/02-commands/02-command-options-autocomplete.mdx‎

Lines changed: 128 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
title: Options Autocomplete
33
---
44

5+
import Tabs from '@theme/Tabs';
6+
import TabItem from '@theme/TabItem';
7+
58
:::warning
69

710
This feature is only available for
@@ -24,61 +27,131 @@ and managing your own `interactionCreate` event listener.
2427
To begin, export the `autocomplete` function from the command where
2528
you have an option with `autocomplete` set to `true`.
2629

27-
```ts title="src/app/commands/pet.ts"
28-
import type { CommandData, AutocompleteCommand } from 'commandkit';
29-
import { ApplicationCommandOptionType } from 'discord.js';
30-
31-
export const command: CommandData = {
32-
name: 'pet',
33-
description: 'Check in one of your pets.',
34-
options: [
35-
{
36-
name: 'name',
37-
description: 'The name of your pet',
38-
type: ApplicationCommandOptionType.String,
39-
autocomplete: true,
40-
required: true,
41-
},
42-
],
43-
};
44-
45-
const pets = Array.from({ length: 20 }, (_, i) => ({
46-
name: `Pet ${i + 1}`, // e.g. Pet 1, Pet 2, Pet 3, etc.
47-
value: `petId_${i}`,
48-
}));
49-
50-
export const autocomplete: AutocompleteCommand = async ({ interaction }) => {
51-
try {
52-
// Get the input value of your autocomplete option
53-
const input = interaction.options.getString('name', false);
54-
if (!input) {
55-
interaction.respond(pets);
56-
return;
57-
}
58-
59-
const filteredPets = pets.filter((pet) =>
60-
pet.name.toLowerCase().includes(input.toLowerCase()),
61-
);
62-
63-
// Respond with what you think the user may trying to find
64-
interaction.respond(filteredPets);
65-
} catch (error) {
66-
console.error('Autocomplete error', error);
67-
}
68-
};
69-
70-
export const chatInput: ChatInputCommand = async ({ interaction }) => {
71-
const chosenPetId = interaction.options.getString('name', true);
72-
const chosenPet = pets.find((pet) => pet.value === chosenPetId);
73-
74-
if (!chosenPet) {
75-
interaction.reply('Pet not found.');
76-
return;
77-
}
78-
79-
interaction.reply(`You chose ${chosenPet.name}`);
80-
};
81-
```
30+
<Tabs>
31+
<TabItem value="ts" label="TypeScript" default>
32+
```ts title="src/app/commands/pet.ts"
33+
import type { CommandData, AutocompleteCommand, ChatInputCommand } from 'commandkit';
34+
import { ApplicationCommandOptionType } from 'discord.js';
35+
36+
export const command: CommandData = {
37+
name: 'pet',
38+
description: 'Check in one of your pets.',
39+
options: [
40+
{
41+
name: 'name',
42+
description: 'The name of your pet',
43+
type: ApplicationCommandOptionType.String,
44+
autocomplete: true,
45+
required: true,
46+
},
47+
],
48+
};
49+
50+
const pets = Array.from({ length: 20 }, (_, i) => ({
51+
name: `Pet ${i + 1}`, // e.g. Pet 1, Pet 2, Pet 3, etc.
52+
value: `petId_${i}`,
53+
}));
54+
55+
export const autocomplete: AutocompleteCommand = async ({ interaction }) => {
56+
try {
57+
// Get the input value of your autocomplete option
58+
const input = interaction.options.getString('name', false);
59+
if (!input) {
60+
interaction.respond(pets);
61+
return;
62+
}
63+
64+
const filteredPets = pets.filter((pet) =>
65+
pet.name.toLowerCase().includes(input.toLowerCase()),
66+
);
67+
68+
// Respond with what you think the user may trying to find
69+
interaction.respond(filteredPets);
70+
} catch (error) {
71+
console.error('Autocomplete error', error);
72+
}
73+
};
74+
75+
export const chatInput: ChatInputCommand = async ({ interaction }) => {
76+
const chosenPetId = interaction.options.getString('name', true);
77+
const chosenPet = pets.find((pet) => pet.value === chosenPetId);
78+
79+
if (!chosenPet) {
80+
interaction.reply('Pet not found.');
81+
return;
82+
}
83+
84+
interaction.reply(`You chose ${chosenPet.name}`);
85+
};
86+
```
87+
88+
</TabItem>
89+
<TabItem value="js" label="JavaScript">
90+
```js title="src/app/commands/pet.js"
91+
/**
92+
* @typedef {import('commandkit').CommandData} CommandData
93+
* @typedef {import('commandkit').AutocompleteCommand} AutocompleteCommand
94+
* @typedef {import('commandkit').ChatInputCommand} ChatInputCommand
95+
*/
96+
import { ApplicationCommandOptionType } from 'discord.js';
97+
98+
/** @type {CommandData} */
99+
export const command = {
100+
name: 'pet',
101+
description: 'Check in one of your pets.',
102+
options: [
103+
{
104+
name: 'name',
105+
description: 'The name of your pet',
106+
type: ApplicationCommandOptionType.String,
107+
autocomplete: true,
108+
required: true,
109+
},
110+
],
111+
};
112+
113+
const pets = Array.from({ length: 20 }, (_, i) => ({
114+
name: `Pet ${i + 1}`, // e.g. Pet 1, Pet 2, Pet 3, etc.
115+
value: `petId_${i}`,
116+
}));
117+
118+
/** @type {AutocompleteCommand} */
119+
export const autocomplete = async ({ interaction }) => {
120+
try {
121+
// Get the input value of your autocomplete option
122+
const input = interaction.options.getString('name', false);
123+
if (!input) {
124+
interaction.respond(pets);
125+
return;
126+
}
127+
128+
const filteredPets = pets.filter((pet) =>
129+
pet.name.toLowerCase().includes(input.toLowerCase()),
130+
);
131+
132+
// Respond with what you think the user may trying to find
133+
interaction.respond(filteredPets);
134+
} catch (error) {
135+
console.error('Autocomplete error', error);
136+
}
137+
};
138+
139+
/** @type {ChatInputCommand} */
140+
export const chatInput = async ({ interaction }) => {
141+
const chosenPetId = interaction.options.getString('name', true);
142+
const chosenPet = pets.find((pet) => pet.value === chosenPetId);
143+
144+
if (!chosenPet) {
145+
interaction.reply('Pet not found.');
146+
return;
147+
}
148+
149+
interaction.reply(`You chose ${chosenPet.name}`);
150+
};
151+
```
152+
153+
</TabItem>
154+
</Tabs>
82155

83156
:::warning
84157

0 commit comments

Comments
 (0)