add guide to website

apps/website/docs/api-reference/intro.md

@@ -2,4 +2,4 @@
 sidebar_position: 1
 ---
 
-# API reference intro
+# API reference

apps/website/docs/guide/01-installation.mdx

@@ -0,0 +1,92 @@
+---
+title: Installation
+description: Learn how to install CommandKit.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Installation
+
+<div align="center" className="my-8">
+  <img src="/img/ckit_logo.svg" width="60%" />
+  <br />
+  <div className="flex items-center justify-center gap-2">
+    <a href="https://ctrl.lol/discord">
+      <img
+        src="https://img.shields.io/discord/1055188344188973066?color=5865F2&logo=discord&logoColor=white"
+        alt="support server"
+      />
+    </a>
+    <a href="https://www.npmjs.com/package/commandkit">
+      <img
+        src="https://img.shields.io/npm/v/commandkit?maxAge=3600"
+        alt="npm version"
+      />
+    </a>
+    <a href="https://www.npmjs.com/package/commandkit">
+      <img
+        src="https://img.shields.io/npm/dt/commandkit?maxAge=3600"
+        alt="npm downloads"
+      />
+    </a>
+  </div>
+</div>
+
+To install CommandKit, run one of the following commands based on your preferred package manager:
+
+<Tabs> 
+    <TabItem value='npm' label='npm'>
+      ```
+      npm install commandkit
+      ```
+    </TabItem>
+    <TabItem value='yarn' label='yarn'>
+      ```
+      yarn add commandkit
+      ```
+    </TabItem>
+    <TabItem value='pnpm' label='pnpm'>
+      ```
+      pnpm install commandkit
+      ```
+    </TabItem>
+    <TabItem value='bun' label='bun'>
+      ```
+      bun install commandkit
+      ```
+    </TabItem>
+
+</Tabs>
+
+## Development version
+
+To install the development version of CommandKit, run one of the following commands:
+
+<Tabs> 
+    <TabItem value='npm' label='npm'>
+      ```
+      npm install commandkit@dev
+      ```
+    </TabItem>
+    <TabItem value='yarn' label='yarn'>
+      ```
+      yarn add commandkit@dev
+      ```
+    </TabItem>
+    <TabItem value='pnpm' label='pnpm'>
+      ```
+      pnpm install commandkit@dev
+      ```
+    </TabItem>
+    <TabItem value='bun' label='bun'>
+      ```
+      bun install commandkit@dev
+      ```
+    </TabItem>
+
+</Tabs>
+
+:::warning
+The development version is likely to have bugs.
+:::

apps/website/docs/guide/02-create-commandkit.mdx

@@ -0,0 +1,42 @@
+---
+title: create-commandkit
+description: Create a new CommandKit application with the command-line utility.
+---
+
+# create-commandkit
+
+Besides installing CommandKit to your existing project, you can also start a new one with `create-commandkit` — a command-line utility used for creating new discord.js bots with CommandKit.
+
+## Usage
+
+If you want to create a new CommandKit application, simply run the following command:
+
+```
+npm create commandkit@latest
+```
+
+This will start the CLI in the current directory.
+
+### Development version
+
+Similar to the main package, you could try the `dev` version of create-commandkit:
+
+:::warning
+The development version is likely to have bugs.
+:::
+
+```
+npm create commandkit@dev
+```
+
+## Prompts
+
+When running create-commandkit, you should be asked the following questions:
+
+- **Directory:** Defines where your project will be located. It defaults to the current working directory.
+- **Package Manager:** Lets you choose which package manager to use — npm, pnpm, or Yarn.
+- **Language ([Development version](#development-version) only):** The language to use for your project — JavaScript or TypeScript.
+- **Module Type:** Allows you to pick between CommonJS (using require and module.exports), and ESM (using import and export).
+- **Bot Token:** Asks you for your bot token, and writes it into the `.env` file where it will be stored.
+
+After these questions are answered, your project solution should appear in the selected folder.

apps/website/docs/guide/03-commandkit-setup.mdx

@@ -0,0 +1,173 @@
+---
+title: CommandKit setup
+description: A simple overview of how to set up CommandKit with all the available options.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# 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.
+
+<Tabs>
+    <TabItem value='cjs' label='CommonJS' default>
+      ```js title="src/index.js" {2, 13-23}
+      const { Client, GatewayIntentBits } = require('discord.js');
+      const { CommandKit } = require('commandkit');
+      const path = require('path');
+
+      const client = new Client({
+        intents: [
+          GatewayIntentBits.Guilds,
+          GatewayIntentBits.GuildMessages,
+          GatewayIntentBits.MessageContent,
+        ],
+      });
+
+      new CommandKit({
+        client,
+        commandsPath: path.join(__dirname, 'commands'),
+        eventsPath: path.join(__dirname, 'events'),
+        validationsPath: path.join(__dirname, 'validations'),
+        devGuildIds: ['DEV_SERVER_ID_1', 'DEV_SERVER_ID_2'],
+        devUserIds: ['DEV_USER_ID_1', 'DEV_USER_ID_2'],
+        devRoleIds: ['DEV_ROLE_ID_1', 'DEV_ROLE_ID_2'],
+        skipBuiltInValidations: true,
+        bulkRegister: true,
+      });
+
+      client.login('YOUR_TOKEN_HERE');
+      ```
+    </TabItem>
+    <TabItem value='esm' label='ESM'>
+      ```js title="src/index.js" {2, 16-26}
+      import { Client, GatewayIntentBits } from 'discord.js';
+      import { CommandKit } from 'commandkit';
+      import { fileURLToPath } from 'url';
+      import path from 'path';
+
+      const client = new Client({
+        intents: [
+          GatewayIntentBits.Guilds,
+          GatewayIntentBits.GuildMessages,
+          GatewayIntentBits.MessageContent
+        ],
+      });
+
+      const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+      new CommandKit({
+        client,
+        commandsPath: path.join(__dirname, 'commands'),
+        eventsPath: path.join(__dirname, 'events'),
+        validationsPath: path.join(__dirname, 'validations'),
+        devGuildIds: ['DEV_SERVER_ID_1', 'DEV_SERVER_ID_2'],
+        devUserIds: ['DEV_USER_ID_1', 'DEV_USER_ID_2'],
+        devRoleIds: ['DEV_ROLE_ID_1', 'DEV_ROLE_ID_2'],
+        skipBuiltInValidations: true,
+        bulkRegister: true,
+      });
+
+      client.login('YOUR_TOKEN_HERE');
+      ```
+    </TabItem>
+    <TabItem value='ts' label='TypeScript'>
+      ```ts title="src/index.ts" {2, 13-23}
+      import { Client, GatewayIntentBits } from 'discord.js';
+      import { CommandKit } from 'commandkit';
+      import path from 'path';
+
+      const client = new Client({
+        intents: [
+          GatewayIntentBits.Guilds,
+          GatewayIntentBits.GuildMessages,
+          GatewayIntentBits.MessageContent
+        ],
+      });
+
+      new CommandKit({
+        client,
+        commandsPath: path.join(__dirname, 'commands'),
+        eventsPath: path.join(__dirname, 'events'),
+        validationsPath: path.join(__dirname, 'validations'),
+        devGuildIds: ['DEV_SERVER_ID_1', 'DEV_SERVER_ID_2'],
+        devUserIds: ['DEV_USER_ID_1', 'DEV_USER_ID_2'],
+        devRoleIds: ['DEV_ROLE_ID_1', 'DEV_ROLE_ID_2'],
+        skipBuiltInValidations: true,
+        bulkRegister: true,
+      });
+
+      client.login('YOUR_TOKEN_HERE');
+      ```
+    </TabItem>
+
+</Tabs>
+
+:::info
+Some Discord.js properties are only accessible using the correct intents.
+:::
+
+## CommandKit options
+
+### `client`
+
+- Type: [`Client`](https://old.discordjs.dev/#/docs/discord.js/main/class/Client)
+
+This is your Discord.js client object. This is required to register and handle application commands and events.
+
+### `commandsPath` (optional)
+
+- Type: `string`
+
+This is the path to your commands directory. It's used to fetch, register, and listen for application commands.
+
+### `eventsPath` (optional)
+
+- Type: `string`
+
+This is the path to your events directory. It's used to fetch and set event listeners based on the folder names inside of it.
+
+### `validationsPath` (optional)
+
+- Type: `string`
+
+This is the path to your validations directory. It's used to fetch and call validation functions before running application commands.
+
+### `devGuildIds` (optional)
+
+- Type: `string[]`
+
+This is a list of development server IDs. It's used to restrict commands marked with `devOnly` to specific servers.
+
+If there is at least 1 guild ID provided, CommandKit will register any commands marked as `devOnly` inside the listed servers.
+
+### `devUserIds` (optional)
+
+- Type: `string[]`
+
+This is a list of developer user IDs. It's used to restrict commands marked with `devOnly` to specific users.
+
+Trying to execute a command when this is set to at-least 1 user ID will call a built-in validation function everytime to validate that the user running the command belongs to the provided `devUserIds` array.
+
+### `devRoleIds` (optional)
+
+- Type: `string[]`
+
+This is a list of developer role IDs. It's used to restrict commands marked with `devOnly` to specific roles.
+
+Trying to execute a command when this is set to at-least 1 role ID will call a built-in validation function everytime to validate that the user running the command has at least one of the provided roles.
+
+### `skipBuiltInValidations` (optional)
+
+- Type: `boolean`
+- Default: `false`
+
+This is used to disable CommandKit's built-in validation functions. Setting this to `true` will ignore the default behaviour of validating who is running commands marked with `devOnly`.
+
+### `bulkRegister` (optional)
+
+- Type: `boolean`
+- Default: `false`
+
+This is used to change the behaviour of how CommandKit loads application commands. By default it's one-by-one while comparing changes. Setting this option to `true` will load application commands all at once on every restart, and when [`reloadCommands()`](/docs/api-reference/classes/CommandKit#reloadcommands) is called.