+));
+NavigationMenuViewport.displayName = Primitive.Viewport.displayName;
+
+export {
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuViewport,
+};
diff --git a/apps/docs/components/ui/popover.tsx b/apps/docs/components/ui/popover.tsx
new file mode 100644
index 0000000..bf54c60
--- /dev/null
+++ b/apps/docs/components/ui/popover.tsx
@@ -0,0 +1,32 @@
+'use client';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '../../lib/cn';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+
+
+
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const PopoverClose = PopoverPrimitive.PopoverClose;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose };
diff --git a/apps/docs/components/ui/scroll-area.tsx b/apps/docs/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..cbd7508
--- /dev/null
+++ b/apps/docs/components/ui/scroll-area.tsx
@@ -0,0 +1,57 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+import { cn } from '../../lib/cn';
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+
+
+));
+
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollViewport = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+
+ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+
+
+
+));
+ScrollBar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
+
+export { ScrollArea, ScrollBar, ScrollViewport };
diff --git a/apps/docs/components/ui/tabs.tsx b/apps/docs/components/ui/tabs.tsx
new file mode 100644
index 0000000..c80ba9b
--- /dev/null
+++ b/apps/docs/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+'use client';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { cn } from '../../lib/cn';
+
+const Tabs = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>((props, ref) => {
+ return (
+
+ );
+});
+
+Tabs.displayName = 'Tabs';
+
+const TabsList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+
+));
+TabsList.displayName = 'TabsList';
+
+const TabsTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+
+));
+TabsTrigger.displayName = 'TabsTrigger';
+
+const TabsContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+
+));
+TabsContent.displayName = 'TabsContent';
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/apps/docs/pages/docs/classes/CommandKit.mdx b/apps/docs/content/docs/classes/CommandKit.mdx
similarity index 92%
rename from apps/docs/pages/docs/classes/CommandKit.mdx
rename to apps/docs/content/docs/classes/CommandKit.mdx
index 717f46f..3f743c8 100644
--- a/apps/docs/pages/docs/classes/CommandKit.mdx
+++ b/apps/docs/content/docs/classes/CommandKit.mdx
@@ -1,3 +1,8 @@
+---
+title: CommandKit
+description: CommandKit is a command handler for Discord.js that makes it easy to create and manage commands, events, and validations.
+---
+
# CommandKit
### `commands`
diff --git a/apps/docs/pages/docs/classes/components/ButtonKit.mdx b/apps/docs/content/docs/classes/components/ButtonKit.mdx
similarity index 93%
rename from apps/docs/pages/docs/classes/components/ButtonKit.mdx
rename to apps/docs/content/docs/classes/components/ButtonKit.mdx
index 4f626c6..eb5efd5 100644
--- a/apps/docs/pages/docs/classes/components/ButtonKit.mdx
+++ b/apps/docs/content/docs/classes/components/ButtonKit.mdx
@@ -1,4 +1,7 @@
-import { Callout } from 'nextra/components';
+---
+title: ButtonKit
+description: ButtonKit extends the ButtonBuilder class, provided by discord.js.
+---
# ButtonKit
diff --git a/apps/docs/content/docs/enums/ReloadType.mdx b/apps/docs/content/docs/enums/ReloadType.mdx
new file mode 100644
index 0000000..00d7fd3
--- /dev/null
+++ b/apps/docs/content/docs/enums/ReloadType.mdx
@@ -0,0 +1,14 @@
+---
+title: ReloadType
+description: The type of reload to perform when reloading commands or events.
+---
+
+# ReloadType
+
+### Developer
+
+- Value: `dev`
+
+### Global
+
+- Value: `global`
diff --git a/apps/docs/pages/docs/typedef/AutocompleteProps.mdx b/apps/docs/content/docs/typedef/AutocompleteProps.mdx
similarity index 75%
rename from apps/docs/pages/docs/typedef/AutocompleteProps.mdx
rename to apps/docs/content/docs/typedef/AutocompleteProps.mdx
index ececdf2..7dbb3c9 100644
--- a/apps/docs/pages/docs/typedef/AutocompleteProps.mdx
+++ b/apps/docs/content/docs/typedef/AutocompleteProps.mdx
@@ -1,3 +1,8 @@
+---
+title: AutocompleteProps
+description: The properties available to the Autocomplete component.
+---
+
# AutocompleteProps
### `client`
diff --git a/apps/docs/pages/docs/typedef/CommandData.mdx b/apps/docs/content/docs/typedef/CommandData.mdx
similarity index 65%
rename from apps/docs/pages/docs/typedef/CommandData.mdx
rename to apps/docs/content/docs/typedef/CommandData.mdx
index 7fb6325..8be17de 100644
--- a/apps/docs/pages/docs/typedef/CommandData.mdx
+++ b/apps/docs/content/docs/typedef/CommandData.mdx
@@ -1,3 +1,8 @@
+---
+title: CommandData
+description: The data required to create a new command.
+---
+
# CommandData
Type: [`RESTPostAPIApplicationCommandsJSONBody`](https://discord-api-types.dev/api/discord-api-types-v10#RESTPostAPIApplicationCommandsJSONBody)
diff --git a/apps/docs/pages/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatch.mdx b/apps/docs/content/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatch.mdx
similarity index 60%
rename from apps/docs/pages/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatch.mdx
rename to apps/docs/content/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatch.mdx
index 8957fda..d1939a0 100644
--- a/apps/docs/pages/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatch.mdx
+++ b/apps/docs/content/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatch.mdx
@@ -1,3 +1,8 @@
+---
+title: CommandKitButtonBuilderInteractionCollectorDispatch
+description: The function signature for the interaction collector dispatch function.
+---
+
# CommandKitButtonBuilderInteractionCollectorDispatch
- Type: `(interaction: ButtonInteraction) => Awaitable;`
diff --git a/apps/docs/pages/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatchContextData.mdx b/apps/docs/content/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatchContextData.mdx
similarity index 77%
rename from apps/docs/pages/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatchContextData.mdx
rename to apps/docs/content/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatchContextData.mdx
index cff5b47..cc34c13 100644
--- a/apps/docs/pages/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatchContextData.mdx
+++ b/apps/docs/content/docs/typedef/CommandKitButtonBuilderInteractionCollectorDispatchContextData.mdx
@@ -1,3 +1,8 @@
+---
+title: CommandKitButtonBuilderInteractionCollectorDispatchContextData
+description: The context data required to dispatch a button interaction collector.
+---
+
# CommandKitButtonBuilderInteractionCollectorDispatchContextData
Extends `Omit, 'filter' | 'componentType'>`
diff --git a/apps/docs/content/docs/typedef/CommandKitButtonBuilderOnEnd.mdx b/apps/docs/content/docs/typedef/CommandKitButtonBuilderOnEnd.mdx
new file mode 100644
index 0000000..cba6ec8
--- /dev/null
+++ b/apps/docs/content/docs/typedef/CommandKitButtonBuilderOnEnd.mdx
@@ -0,0 +1,8 @@
+---
+title: CommandKitButtonBuilderOnEnd
+description: The function signature for the onEnd function of the CommandKitButtonBuilder.
+---
+
+# CommandKitButtonBuilderOnEnd
+
+- Type: `() => Awaitable`
diff --git a/apps/docs/pages/docs/typedef/CommandObject.mdx b/apps/docs/content/docs/typedef/CommandObject.mdx
similarity index 75%
rename from apps/docs/pages/docs/typedef/CommandObject.mdx
rename to apps/docs/content/docs/typedef/CommandObject.mdx
index 320ba5d..dc54474 100644
--- a/apps/docs/pages/docs/typedef/CommandObject.mdx
+++ b/apps/docs/content/docs/typedef/CommandObject.mdx
@@ -1,3 +1,8 @@
+---
+title: CommandObject
+description: The object representing a command.
+---
+
# CommandObject
### `data`
diff --git a/apps/docs/pages/docs/typedef/CommandOptions.mdx b/apps/docs/content/docs/typedef/CommandOptions.mdx
similarity index 93%
rename from apps/docs/pages/docs/typedef/CommandOptions.mdx
rename to apps/docs/content/docs/typedef/CommandOptions.mdx
index 9d83bbc..ee2d2ee 100644
--- a/apps/docs/pages/docs/typedef/CommandOptions.mdx
+++ b/apps/docs/content/docs/typedef/CommandOptions.mdx
@@ -1,3 +1,8 @@
+---
+title: CommandOptions
+description: The options for a command.
+---
+
# CommandOptions
### `devOnly` (optional)
diff --git a/apps/docs/pages/docs/typedef/ContextMenuCommandProps.mdx b/apps/docs/content/docs/typedef/ContextMenuCommandProps.mdx
similarity index 76%
rename from apps/docs/pages/docs/typedef/ContextMenuCommandProps.mdx
rename to apps/docs/content/docs/typedef/ContextMenuCommandProps.mdx
index 55c67e9..8089bc1 100644
--- a/apps/docs/pages/docs/typedef/ContextMenuCommandProps.mdx
+++ b/apps/docs/content/docs/typedef/ContextMenuCommandProps.mdx
@@ -1,3 +1,8 @@
+---
+title: ContextMenuCommandProps
+description: The props for the ContextMenuCommand component.
+---
+
# ContextMenuCommandProps
### `client`
diff --git a/apps/docs/pages/docs/typedef/SlashCommandProps.mdx b/apps/docs/content/docs/typedef/SlashCommandProps.mdx
similarity index 78%
rename from apps/docs/pages/docs/typedef/SlashCommandProps.mdx
rename to apps/docs/content/docs/typedef/SlashCommandProps.mdx
index 4c9488d..d032eab 100644
--- a/apps/docs/pages/docs/typedef/SlashCommandProps.mdx
+++ b/apps/docs/content/docs/typedef/SlashCommandProps.mdx
@@ -1,3 +1,8 @@
+---
+title: SlashCommandProps
+description: The props for the SlashCommand component.
+---
+
# SlashCommandProps
### `client`
diff --git a/apps/docs/pages/docs/typedef/ValidationProps.mdx b/apps/docs/content/docs/typedef/ValidationProps.mdx
similarity index 86%
rename from apps/docs/pages/docs/typedef/ValidationProps.mdx
rename to apps/docs/content/docs/typedef/ValidationProps.mdx
index 809774d..e5d57dc 100644
--- a/apps/docs/pages/docs/typedef/ValidationProps.mdx
+++ b/apps/docs/content/docs/typedef/ValidationProps.mdx
@@ -1,3 +1,8 @@
+---
+title: ValidationProps
+description: The props for the validation function of a command.
+---
+
# ValidationProps
### `client`
diff --git a/apps/docs/pages/guide/buttonkit.mdx b/apps/docs/content/guide/buttonkit.mdx
similarity index 93%
rename from apps/docs/pages/guide/buttonkit.mdx
rename to apps/docs/content/guide/buttonkit.mdx
index 267c9f9..f1f3f8e 100644
--- a/apps/docs/pages/guide/buttonkit.mdx
+++ b/apps/docs/content/guide/buttonkit.mdx
@@ -1,4 +1,7 @@
-import { Tabs, Callout } from 'nextra/components';
+---
+title: ButtonKit
+description: ButtonKit is an enhanced version of the native Discord.js ButtonBuilder, designed to simplify the process of creating and handling button interactions in your Discord bot.
+---
# Using ButtonKit
@@ -8,9 +11,9 @@ It is not recommended to use this to listen for button clicks forever since it c
## Handle button clicks
-
-
- ```js filename="commands/counter.js" copy
+
+
+ ```js title="commands/counter.js"
const { ButtonKit } = require('commandkit');
const { ButtonStyle, ActionRowBuilder } = require('discord.js');
@@ -33,9 +36,9 @@ It is not recommended to use this to listen for button clicks forever since it c
{ message },
);
```
-
-
- ```js filename="commands/counter.js" copy
+
+
+ ```js title="commands/counter.js"
import { ButtonKit } from 'commandkit';
import { ButtonStyle, ActionRowBuilder } from 'discord.js';
@@ -58,9 +61,9 @@ It is not recommended to use this to listen for button clicks forever since it c
{ message },
);
```
-
-
- ```ts filename="commands/counter.ts" copy
+
+
+ ```ts title="commands/counter.ts"
import { ButtonKit } from 'commandkit';
import { type ButtonInteraction, ButtonStyle, ActionRowBuilder } from 'discord.js';
@@ -83,13 +86,13 @@ It is not recommended to use this to listen for button clicks forever since it c
{ message },
);
```
-
+
In the above example, you may notice how similar `ButtonKit` is to the native Discord.js `ButtonBuilder` class. That's because it's built on top of it. It introduces a new method called `onClick` which will allow you to quickly handle button interactions without having to create collectors. CommandKit does that for you!
-
+
ButtonKit doesn't work without a custom ID, so ensure you provide one whenever
instantiating a button. This is required to keep track of what button was
clicked.
@@ -205,7 +208,7 @@ myButton
## Dispose button collector
-
+
This feature is currently only available in the [development
version](/guide/installation#development-version).
diff --git a/apps/docs/pages/guide/command-file-setup.mdx b/apps/docs/content/guide/command-file-setup.mdx
similarity index 90%
rename from apps/docs/pages/guide/command-file-setup.mdx
rename to apps/docs/content/guide/command-file-setup.mdx
index ce1fe79..8026e9d 100644
--- a/apps/docs/pages/guide/command-file-setup.mdx
+++ b/apps/docs/content/guide/command-file-setup.mdx
@@ -1,4 +1,7 @@
-import { Tabs } from 'nextra/components';
+---
+title: Command File Setup
+description: Learn how to set up commands in CommandKit.
+---
# Commands Setup
@@ -8,9 +11,9 @@ CommandKit supports both slash commands and context menu commands. Since both ha
Here's an example `/ping` slash command which replies with "Pong!"
-
-
- ```js filename="commands/Misc/ping.js" copy
+
+
+ ```js title="commands/Misc/ping.js"
module.exports = {
data: {
name: 'ping',
@@ -29,9 +32,9 @@ Here's an example `/ping` slash command which replies with "Pong!"
},
};
```
-
-
- ```js filename="commands/Misc/ping.js" copy
+
+
+ ```js title="commands/Misc/ping.js"
export const data = {
name: 'ping',
description: 'Pong!',
@@ -48,9 +51,9 @@ Here's an example `/ping` slash command which replies with "Pong!"
deleted: false,
}
```
-
-
- ```ts filename="commands/Misc/ping.ts" copy
+
+
+ ```ts title="commands/Misc/ping.ts"
import type { CommandData, SlashCommandProps, CommandOptions } from 'commandkit';
export const data: CommandData = {
@@ -69,7 +72,7 @@ Here's an example `/ping` slash command which replies with "Pong!"
deleted: false,
}
```
-
+
@@ -77,9 +80,9 @@ Here's an example `/ping` slash command which replies with "Pong!"
Here's an example `content` command which replies with the content of the target message.
-
-
- ```js filename="commands/Misc/content.js" copy
+
+
+ ```js title="commands/Misc/content.js"
const { ApplicationCommandType } = require("discord.js");
module.exports = {
@@ -100,9 +103,9 @@ Here's an example `content` command which replies with the content of the target
},
};
```
-
-
- ```js filename="commands/Misc/content.js" copy
+
+
+ ```js title="commands/Misc/content.js"
import { ApplicationCommandType } from "discord.js";
export const data = {
@@ -121,9 +124,9 @@ Here's an example `content` command which replies with the content of the target
deleted: false,
}
```
-
-
- ```ts filename="commands/Misc/content.ts" copy
+
+
+ ```ts title="commands/Misc/content.ts"
import { type CommandData, type ContextMenuCommandProps, type CommandOptions } from "commandkit";
import { ApplicationCommandType } from "discord.js";
@@ -143,7 +146,7 @@ Here's an example `content` command which replies with the content of the target
deleted: false,
}
```
-
+
@@ -153,9 +156,9 @@ In addition to the `run` function, you can also export an `autocomplete` functio
Here's an example of how to use the `autocomplete` function:
-
-
- ```js filename="commands/Fun/pet.js" copy
+
+
+ ```js title="commands/Fun/pet.js"
const pets = require('../data/pets.json');
module.exports = {
@@ -193,9 +196,9 @@ Here's an example of how to use the `autocomplete` function:
}
}
```
-
-
- ```js filename="commands/Fun/pet.js" copy
+
+
+ ```js title="commands/Fun/pet.js"
import pets from '../data/pets.json';
export const data = new SlashCommandBuilder()
@@ -231,9 +234,9 @@ Here's an example of how to use the `autocomplete` function:
interaction.respond(results.slice(0, 25));
}
```
-
-
- ```ts filename="commands/Fun/pet.ts" copy
+
+
+ ```ts title="commands/Fun/pet.ts"
import type { CommandData, AutocompleteProps, CommandOptions } from 'commandkit';
import pets from '../data/pets.json';
@@ -270,7 +273,7 @@ Here's an example of how to use the `autocomplete` function:
interaction.respond(results.slice(0, 25));
}
```
-
+
diff --git a/apps/docs/pages/guide/commandkit-config.mdx b/apps/docs/content/guide/commandkit-config.mdx
similarity index 85%
rename from apps/docs/pages/guide/commandkit-config.mdx
rename to apps/docs/content/guide/commandkit-config.mdx
index 6af0b7b..da62255 100644
--- a/apps/docs/pages/guide/commandkit-config.mdx
+++ b/apps/docs/content/guide/commandkit-config.mdx
@@ -1,4 +1,7 @@
-import { Callout } from 'nextra/components';
+---
+title: CommandKit Configuration
+description: Learn how to configure CommandKit CLI for your project.
+---
# CommandKit Configuration
@@ -12,12 +15,23 @@ CommandKit CLI can be configured using `commandkit.config` file in the root of y
- `commandkit.config.cjs`
- `commandkit.json`
- `commandkit.config.json`
+- `commandkit.ts`
+- `commandkit.config.ts`
+- `commandkit.cts`
+- `commandkit.config.cts`
+- `commandkit.mts`
+- `commandkit.config.mts`
+
+
+ TypeScript configuration files only work if `process.features.typescript` is
+ available.
+
Throughout this guide, we'll be using `commandkit.config.mjs` as an example.
The following is the sample configuration required to run your bot:
-```js filename="commandkit.config.mjs" copy
+```js title="commandkit.config.mjs"
import { defineConfig } from 'commandkit';
export default defineConfig({
@@ -26,7 +40,7 @@ export default defineConfig({
});
```
-
+
For CommandKit CLI on version `0.1.7` it's recommended to use an ESM project
instead of CommonJS due to the behavior of `require()`. If you're using
CommonJS you'll have to use dynamic `import()`. However, this is not an issue
@@ -49,7 +63,7 @@ The entry point to your project.
Example: If your source is structured as `src/index.ts`, this option must be set to `index.mjs`. This is because CommandKit always compiles your source code to esm format.
-
+
The "src" part in this option isn't required because it's already defined in
the `src` option.
diff --git a/apps/docs/pages/guide/commandkit-setup.mdx b/apps/docs/content/guide/commandkit-setup.mdx
similarity index 93%
rename from apps/docs/pages/guide/commandkit-setup.mdx
rename to apps/docs/content/guide/commandkit-setup.mdx
index 2863075..c96eb26 100644
--- a/apps/docs/pages/guide/commandkit-setup.mdx
+++ b/apps/docs/content/guide/commandkit-setup.mdx
@@ -1,12 +1,15 @@
-import { Tabs, Callout } from 'nextra/components';
+---
+title: CommandKit Setup
+description: A simple overview of how to set up CommandKit with all the available options.
+---
# CommandKit Setup
This is a simple overview of how to set up CommandKit with all the available options. Youโd usually set this up in your entry file (e.g. `index.js`) where you have access to your Discord.js client object.
-
-
- ```js filename="index.js" copy {2, 13-23}
+
+
+ ```js title="index.js" {2, 13-23}
const { Client, GatewayIntentBits } = require('discord.js');
const { CommandKit } = require('commandkit');
const path = require('path');
@@ -34,9 +37,9 @@ This is a simple overview of how to set up CommandKit with all the available opt
client.login('YOUR_TOKEN_HERE');
```
-
-
- ```js filename="index.js" copy {2, 16-26}
+
+
+ ```js title="index.js" {2, 16-26}
import { Client, GatewayIntentBits } from 'discord.js';
import { CommandKit } from 'commandkit';
import { fileURLToPath } from 'url';
@@ -66,9 +69,9 @@ This is a simple overview of how to set up CommandKit with all the available opt
client.login('YOUR_TOKEN_HERE');
```
-
-
- ```ts filename="index.ts" copy {2, 13-23}
+
+
+ ```ts title="index.ts" {2, 13-23}
import { Client, GatewayIntentBits } from 'discord.js';
import { CommandKit } from 'commandkit';
import path from 'path';
@@ -95,11 +98,11 @@ This is a simple overview of how to set up CommandKit with all the available opt
client.login('YOUR_TOKEN_HERE');
```
-
+
-
+
Some Discord.js properties are only accessible using the correct intents.
diff --git a/apps/docs/pages/guide/create-commandkit.mdx b/apps/docs/content/guide/create-commandkit.mdx
similarity index 85%
rename from apps/docs/pages/guide/create-commandkit.mdx
rename to apps/docs/content/guide/create-commandkit.mdx
index 4ed5c85..cad7e70 100644
--- a/apps/docs/pages/guide/create-commandkit.mdx
+++ b/apps/docs/content/guide/create-commandkit.mdx
@@ -1,4 +1,7 @@
-import { Callout } from 'nextra/components';
+---
+title: Create CommandKit
+description: Create a new CommandKit application with the command-line utility.
+---
# create-commandkit
@@ -8,7 +11,7 @@ Besides installing CommandKit to your existing project, you can also start a new
If you want to create a new CommandKit application, simply run the following command:
-```sh copy
+```package-install
npm create commandkit@latest
```
@@ -18,11 +21,9 @@ This will start the CLI in the current directory.
Similar to the main package, you could try the `dev` or `next` versions of create-commandkit:
-
- The development version is likely to have bugs.
-
+The development version is likely to have bugs.
-```sh copy
+```package-install
npm create commandkit@dev
```
diff --git a/apps/docs/pages/guide/event-file-setup.mdx b/apps/docs/content/guide/event-file-setup.mdx
similarity index 75%
rename from apps/docs/pages/guide/event-file-setup.mdx
rename to apps/docs/content/guide/event-file-setup.mdx
index 3aac396..30ee707 100644
--- a/apps/docs/pages/guide/event-file-setup.mdx
+++ b/apps/docs/content/guide/event-file-setup.mdx
@@ -1,28 +1,32 @@
+---
+title: Events Setup
+description: A simple overview of how to set up event functions.
+---
+
# Events Setup
-import { Tabs } from 'nextra/components';
This is a simple overview of how to set up a simple function that is called when the "ready" event is triggered. All this code does is log to the console when the bot is ready.
-
-
- ```js filename="events/ready/console-log.js" copy
+
+
+ ```js title="events/ready/console-log.js"
module.exports = (c, client, handler) => {
console.log(`${c.user.username} is ready!`);
};
```
-
+
-
- ```js filename="events/ready/console-log.js" copy
+
+ ```js title="events/ready/console-log.js"
export default function (c, client, handler) {
console.log(`${c.user.username} is ready!`);
};
```
-
+
-
- ```ts filename="events/ready/console-log.ts" copy
+
+ ```ts title="events/ready/console-log.ts"
import type { Client } from 'discord.js';
import type { CommandKit } from 'commandkit';
@@ -30,7 +34,7 @@ This is a simple overview of how to set up a simple function that is called when
console.log(`${c.user.username} is ready!`);
};
```
-
+
@@ -40,29 +44,29 @@ The parameters might look a bit confusing at first, but they're actually quite s
To better understand how the parameters work, here's another example but with the "messageCreate" event listener.
-
-
- ```js filename="events/messageCreate/say-hi.js" copy
+
+
+ ```js title="events/messageCreate/say-hi.js"
module.exports = (message, client) => {
if (message.content === 'hey') {
message.reply('Hi!');
}
};
```
-
+
-
- ```js filename="events/messageCreate/say-hi.js" copy
+
+ ```js title="events/messageCreate/say-hi.js"
export default function (message, client, handler) {
if (message.content === 'hey') {
message.reply('Hi!');
}
};
```
-
+
-
- ```ts filename="events/messageCreate/say-hi.ts" copy
+
+ ```ts title="events/messageCreate/say-hi.ts"
import type { Message, Client } from 'discord.js';
import type { CommandKit } from 'commandkit';
@@ -72,7 +76,7 @@ To better understand how the parameters work, here's another example but with th
}
};
```
-
+
@@ -82,25 +86,25 @@ In this example you can see that the first parameter is the `message` object tha
But what if an event returns multiple parameters? Let's take for example the "messageUpdate" event. This event returns two parameters, `oldMessage` and `newMessage`. The parameters will follow the same behaviour as if you were using the `client.on()` method.
-
-
- ```js filename="events/messageUpdate/log-message-update.js" copy
+
+
+ ```js title="events/messageUpdate/log-message-update.js"
module.exports = (oldMessage, newMessage, client) => {
console.log(`Message edited from ${oldMessage.content} to ${newMessage.content}`);
};
```
-
+
-
- ```js filename="events/messageUpdate/log-message-update.js" copy
+
+ ```js title="events/messageUpdate/log-message-update.js"
export default function (oldMessage, newMessage, client) {
console.log(`Message edited from ${oldMessage.content} to ${newMessage.content}`);
};
```
-
+
-
- ```ts filename="events/messageUpdate/log-message-update.ts" copy
+
+ ```ts title="events/messageUpdate/log-message-update.ts"
import type { Message, PartialMessage } from 'discord.js';
import type { CommandKit } from 'commandkit';
@@ -108,7 +112,7 @@ But what if an event returns multiple parameters? Let's take for example the "me
console.log(`Message edited from ${oldMessage.content} to ${newMessage.content}`);
};
```
-
+
@@ -118,9 +122,9 @@ As you can see, even with multiple parameters, the last parameter will always be
The code above is just a simple example of how to set up an event function. But what if you want to stop the next event function in line from running? This is where the `return` statement comes in handy.
-
-
- ```js filename="events/messageCreate/say-hi.js" copy
+
+
+ ```js title="events/messageCreate/say-hi.js"
module.exports = (message, client) => {
if (message.content === 'hey') {
message.reply('Hi!');
@@ -129,10 +133,10 @@ The code above is just a simple example of how to set up an event function. But
}
}
```
-
+
-
- ```js filename="events/messageCreate/say-hi.js" copy
+
+ ```js title="events/messageCreate/say-hi.js"
export default function (message, client) {
if (message.content === 'hey') {
message.reply('Hi!');
@@ -141,10 +145,10 @@ The code above is just a simple example of how to set up an event function. But
}
}
```
-
+
-
- ```js filename="events/messageCreate/say-hi.ts" copy
+
+ ```js title="events/messageCreate/say-hi.ts"
import type { Message, Client } from 'discord.js';
import type { CommandKit } from 'commandkit';
@@ -156,7 +160,7 @@ The code above is just a simple example of how to set up an event function. But
}
}
```
-
+
diff --git a/apps/docs/pages/guide/installation.mdx b/apps/docs/content/guide/installation.mdx
similarity index 84%
rename from apps/docs/pages/guide/installation.mdx
rename to apps/docs/content/guide/installation.mdx
index 4e3ee31..4373d3a 100644
--- a/apps/docs/pages/guide/installation.mdx
+++ b/apps/docs/content/guide/installation.mdx
@@ -1,4 +1,7 @@
-import { Callout } from 'nextra/components';
+---
+title: Installation
+description: Learn how to install CommandKit.
+---
# Installation
@@ -29,7 +32,7 @@ import { Callout } from 'nextra/components';
To install CommandKit, run one of the following commands based on your preferred package manager:
-```sh npm2yarn copy
+```package-install
npm install commandkit
```
@@ -37,10 +40,8 @@ npm install commandkit
To install the development version of CommandKit, run one of the following commands:
-```sh npm2yarn copy
+```package-install
npm install commandkit@dev
```
-
- The development version is likely to have bugs.
-
+The development version is likely to have bugs.
diff --git a/apps/docs/pages/guide/migrating-from-djs-commander.mdx b/apps/docs/content/guide/migrating-from-djs-commander.mdx
similarity index 95%
rename from apps/docs/pages/guide/migrating-from-djs-commander.mdx
rename to apps/docs/content/guide/migrating-from-djs-commander.mdx
index 4d8a461..70caafe 100644
--- a/apps/docs/pages/guide/migrating-from-djs-commander.mdx
+++ b/apps/docs/content/guide/migrating-from-djs-commander.mdx
@@ -1,10 +1,13 @@
-import { Callout } from 'nextra/components';
+---
+title: Migrating from djs-commander
+description: A guide on migrating from DJS-Commander to CommandKit.
+---
# Migrating from `DJS-Commander`
If you're trying to use CommandKit as a drop-in replacement for DJS-Commander, you'll need to make a few changes to your code.
-
+
This guide is **not** introducing the features this library offers over
DJS-Commander. It's just going over the changes you'll need to make to your
code to get it working with this library.
diff --git a/apps/docs/pages/guide/using-cli.mdx b/apps/docs/content/guide/using-cli.mdx
similarity index 93%
rename from apps/docs/pages/guide/using-cli.mdx
rename to apps/docs/content/guide/using-cli.mdx
index 1e01de3..c039143 100644
--- a/apps/docs/pages/guide/using-cli.mdx
+++ b/apps/docs/content/guide/using-cli.mdx
@@ -1,10 +1,13 @@
-import { Callout } from 'nextra/components';
+---
+title: Using CommandKit CLI
+description: Learn how to use CommandKit CLI to start, build, and manage your bot application.
+---
# Using CommandKit CLI
CommandKit CLI allows you to start, build, and manage your bot application. It also includes features such as anti-crash so you can be rest assured your bot won't crash and go offline during production.
-
+
For CommandKit CLI on version `0.1.7` it's recommended to use an ESM project
instead of CommonJS due to the behavior of `require()`. If you're using
CommonJS you'll have to use dynamic `import()`. However, this is not an issue
diff --git a/apps/docs/pages/guide/validation-file-setup.mdx b/apps/docs/content/guide/validation-file-setup.mdx
similarity index 87%
rename from apps/docs/pages/guide/validation-file-setup.mdx
rename to apps/docs/content/guide/validation-file-setup.mdx
index f9add11..6e157ed 100644
--- a/apps/docs/pages/guide/validation-file-setup.mdx
+++ b/apps/docs/content/guide/validation-file-setup.mdx
@@ -1,4 +1,7 @@
-import { Tabs, Callout } from 'nextra/components';
+---
+title: Validations Setup
+description: Learn how to set up validations for your commands.
+---
# Validations Setup
@@ -12,9 +15,9 @@ Validation functions are called on every command trigger, so it's important to k
commands.
-
-
- ```js filename="validations/cooldowns.js" copy
+
+
+ ```js title="validations/cooldowns.js"
const cooldowns = require('../cooldowns-cache');
module.exports = ({ interaction, commandObj, handler }) => {
@@ -28,10 +31,10 @@ Validation functions are called on every command trigger, so it's important to k
}
};
```
-
+
-
- ```js filename="validations/cooldowns.js" copy
+
+ ```js title="validations/cooldowns.js"
import cooldowns from '../cooldowns-cache';
export default function ({ interaction, commandObj, handler }) {
@@ -45,10 +48,10 @@ Validation functions are called on every command trigger, so it's important to k
}
};
```
-
+
-
- ```ts filename="validations/cooldowns.ts" copy
+
+ ```ts title="validations/cooldowns.ts"
import type { ValidationProps } from 'commandkit';
import cooldowns from '../cooldowns-cache';
@@ -63,7 +66,7 @@ Validation functions are called on every command trigger, so it's important to k
}
};
```
-
+
@@ -79,7 +82,7 @@ The `handler` object is the current CommandKit instance.
You may notice that the code above is returning `true`. This is important as it tells the command handler to not run any other validations and to not run the command. If you do not return `true` (or any truthy value), the command will run as normal.
-
+
Interactions (commands in this case) must be handled within 3 seconds, so make
sure your validations are not using up much of that time. If you're using a
database or an external API, it's recommended to implement caching to keep
diff --git a/apps/docs/lib/api-source.ts b/apps/docs/lib/api-source.ts
new file mode 100644
index 0000000..3bdfdaf
--- /dev/null
+++ b/apps/docs/lib/api-source.ts
@@ -0,0 +1,8 @@
+import { apiDocs, apiMeta } from '@/.source';
+import { createMDXSource } from 'fumadocs-mdx';
+import { loader } from 'fumadocs-core/source';
+
+export const source = loader({
+ baseUrl: '/docs',
+ source: createMDXSource(apiDocs, apiMeta),
+});
diff --git a/apps/docs/lib/cn.ts b/apps/docs/lib/cn.ts
new file mode 100644
index 0000000..ba66fd2
--- /dev/null
+++ b/apps/docs/lib/cn.ts
@@ -0,0 +1 @@
+export { twMerge as cn } from 'tailwind-merge';
diff --git a/apps/docs/lib/get-sidebar-tabs.tsx b/apps/docs/lib/get-sidebar-tabs.tsx
new file mode 100644
index 0000000..6c1dfc4
--- /dev/null
+++ b/apps/docs/lib/get-sidebar-tabs.tsx
@@ -0,0 +1,53 @@
+import type { PageTree } from 'fumadocs-core/server';
+import type { Option } from '../components/layout/root-toggle';
+
+export interface TabOptions {
+ transform?: (option: Option, node: PageTree.Folder) => Option | null;
+}
+
+export function getSidebarTabs(
+ pageTree: PageTree.Root,
+ { transform }: TabOptions = {},
+): Option[] {
+ function findOptions(node: PageTree.Folder): Option[] {
+ const results: Option[] = [];
+
+ if (node.root) {
+ const index = node.index ?? node.children.at(0);
+
+ if (index?.type === 'page') {
+ const option: Option = {
+ url: index.url,
+ title: node.name,
+ icon: node.icon,
+ description: node.description,
+
+ urls: getFolderUrls(node),
+ };
+
+ const mapped = transform ? transform(option, node) : option;
+ if (mapped) results.push(mapped);
+ }
+ }
+
+ for (const child of node.children) {
+ if (child.type === 'folder') results.push(...findOptions(child));
+ }
+
+ return results;
+ }
+
+ return findOptions(pageTree as PageTree.Folder);
+}
+
+function getFolderUrls(folder: PageTree.Folder): string[] {
+ const results: string[] = [];
+ if (folder.index) results.push(folder.index.url);
+
+ for (const child of folder.children) {
+ if (child.type === 'page') results.push(child.url);
+ if (child.type === 'folder') results.push(...getFolderUrls(child));
+ }
+
+ return results;
+}
diff --git a/apps/docs/lib/is-active.ts b/apps/docs/lib/is-active.ts
new file mode 100644
index 0000000..30e37e8
--- /dev/null
+++ b/apps/docs/lib/is-active.ts
@@ -0,0 +1,7 @@
+export function isActive(
+ url: string,
+ pathname: string,
+ nested = true,
+): boolean {
+ return url === pathname || (nested && pathname.startsWith(`${url}/`));
+}
diff --git a/apps/docs/lib/source.ts b/apps/docs/lib/source.ts
new file mode 100644
index 0000000..7d05504
--- /dev/null
+++ b/apps/docs/lib/source.ts
@@ -0,0 +1,8 @@
+import { docs, meta } from '@/.source';
+import { createMDXSource } from 'fumadocs-mdx';
+import { loader } from 'fumadocs-core/source';
+
+export const source = loader({
+ baseUrl: '/guide',
+ source: createMDXSource(docs, meta),
+});
diff --git a/apps/docs/lib/use-copy-button.ts b/apps/docs/lib/use-copy-button.ts
new file mode 100644
index 0000000..1b897a3
--- /dev/null
+++ b/apps/docs/lib/use-copy-button.ts
@@ -0,0 +1,35 @@
+'use client';
+import {
+ useState,
+ useRef,
+ useEffect,
+ useCallback,
+ type MouseEventHandler,
+} from 'react';
+
+export function useCopyButton(
+ onCopy: () => void,
+): [checked: boolean, onClick: MouseEventHandler] {
+ const [checked, setChecked] = useState(false);
+ const timeoutRef = useRef(null);
+ const callbackRef = useRef(onCopy);
+ callbackRef.current = onCopy;
+
+ const onClick: MouseEventHandler = useCallback(() => {
+ if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+ timeoutRef.current = window.setTimeout(() => {
+ setChecked(false);
+ }, 1500);
+ callbackRef.current();
+ setChecked(true);
+ }, []);
+
+ // Avoid updates after being unmounted
+ useEffect(() => {
+ return () => {
+ if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+ };
+ }, []);
+
+ return [checked, onClick];
+}
diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
deleted file mode 100644
index f6ab2b8..0000000
--- a/apps/docs/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const withNextra = require('nextra')({
- theme: 'nextra-theme-docs',
- themeConfig: './theme.config.tsx',
-});
-
-module.exports = withNextra();
diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
new file mode 100644
index 0000000..457dcf2
--- /dev/null
+++ b/apps/docs/next.config.mjs
@@ -0,0 +1,10 @@
+import { createMDX } from 'fumadocs-mdx/next';
+
+const withMDX = createMDX();
+
+/** @type {import('next').NextConfig} */
+const config = {
+ reactStrictMode: true,
+};
+
+export default withMDX(config);
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 56e2d38..28016aa 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -3,22 +3,55 @@
"version": "0.0.0",
"private": true,
"scripts": {
- "dev": "next dev",
"build": "next build",
- "start": "next start"
+ "dev": "next dev",
+ "start": "next start",
+ "postinstall": "fumadocs-mdx",
+ "fumadocs": "fumadocs"
},
"dependencies": {
- "@types/node": "^20.11.6",
- "@types/react": "^18.2.48",
- "@types/react-dom": "^18.2.18",
- "autoprefixer": "^10.4.17",
- "next": "^14.1.0",
- "nextra": "^2.13.2",
- "nextra-theme-docs": "^2.13.2",
- "postcss": "^8.4.33",
- "react": "18.2.0",
- "react-dom": "18.2.0",
- "tailwindcss": "^3.4.1",
- "typescript": "^5.3.3"
+ "@radix-ui/react-accordion": "1.2.2",
+ "@radix-ui/react-collapsible": "1.1.2",
+ "@radix-ui/react-dialog": "1.1.3",
+ "@radix-ui/react-navigation-menu": "1.2.2",
+ "@radix-ui/react-popover": "1.1.3",
+ "@radix-ui/react-scroll-area": "1.2.2",
+ "@radix-ui/react-slot": "1.1.1",
+ "@radix-ui/react-tabs": "1.1.2",
+ "@shikijs/rehype": "1.24.2",
+ "class-variance-authority": "0.7.1",
+ "clsx": "^2.1.1",
+ "fumadocs-core": "14.6.1",
+ "fumadocs-docgen": "^1.3.2",
+ "fumadocs-mdx": "11.1.2",
+ "fumadocs-ui": "14.6.1",
+ "hast": "^1.0.0",
+ "hast-util-to-jsx-runtime": "2.3.2",
+ "lucide-react": "0.468.0",
+ "next": "15.1.0",
+ "next-themes": "0.4.4",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "react-medium-image-zoom": "5.2.12",
+ "rehype-katex": "7.0.1",
+ "remark": "15.0.1",
+ "remark-gfm": "4.0.0",
+ "remark-math": "6.0.0",
+ "remark-rehype": "11.1.1",
+ "shiki": "1.24.2",
+ "tailwind-merge": "^2.5.5"
+ },
+ "devDependencies": {
+ "@fumadocs/cli": "^0.0.4",
+ "@types/mdx": "^2.0.13",
+ "@types/node": "22.10.2",
+ "@types/react": "^19.0.1",
+ "@types/react-dom": "^19.0.2",
+ "autoprefixer": "^10.4.20",
+ "eslint": "^8",
+ "eslint-config-next": "15.1.0",
+ "postcss": "^8.4.49",
+ "tailwindcss": "^3.4.16",
+ "typescript": "^5.7.2"
}
-}
+}
\ No newline at end of file
diff --git a/apps/docs/page.client.tsx b/apps/docs/page.client.tsx
new file mode 100644
index 0000000..276972d
--- /dev/null
+++ b/apps/docs/page.client.tsx
@@ -0,0 +1,191 @@
+'use client';
+
+import {
+ Fragment,
+ type HTMLAttributes,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import Link from 'next/link';
+import { cva } from 'class-variance-authority';
+import { cn } from './lib/cn';
+import { useI18n } from 'fumadocs-ui/provider';
+import { useTreeContext, useTreePath } from 'fumadocs-ui/provider';
+import { useSidebar } from 'fumadocs-ui/provider';
+import type { PageTree } from 'fumadocs-core/server';
+import { usePathname } from 'next/navigation';
+import { useNav } from './components/layout/nav';
+import {
+ type BreadcrumbOptions,
+ getBreadcrumbItemsFromPath,
+} from 'fumadocs-core/breadcrumb';
+
+export function PageHeader(props: HTMLAttributes) {
+ const { open } = useSidebar();
+ const { isTransparent } = useNav();
+
+ return (
+
+ {props.children}
+
+ );
+}
+
+export function LastUpdate(props: { date: Date }) {
+ const { text } = useI18n();
+ const [date, setDate] = useState('');
+
+ useEffect(() => {
+ // to the timezone of client
+ setDate(props.date.toLocaleDateString());
+ }, [props.date]);
+
+ return (
+