Rewrite docs guide

apps/website/docs/guide.old/01-getting-started/01-introduction.mdx

@@ -0,0 +1,70 @@
+---
+title: Introduction
+description: A brief intro to CommandKit
+---
+
+<div
+  align="center"
+  style={{
+    margin: '2rem 0',
+  }}
+>
+  <img src="/img/ckit_logo.svg" width="60%" />
+  <br />
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5rem',
+    }}
+  >
+    <a href="https://ctrl.lol/discord">
+      <img
+        src="https://img.shields.io/discord/1055188344188973066?color=5865F2&logo=discord&logoColor=white"
+        alt="support discord 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>
+
+CommandKit is a powerful meta-framework for building Discord bots with [discord.js](https://discord.js.org/). It provides a simple and intuitive API for creating commands, handling interactions, and managing events. With CommandKit, you can focus on building your bot's features without worrying about the underlying complexities.
+
+## Key Features
+
+- Beginner friendly 🚀
+- Suitable for both beginners and advanced users 👶👨‍💻
+- Slash + context menu commands + prefix commands support ✅
+- Automatic command registration and updates 🤖
+- Command middlewares for easy command management 🛠️
+- Localization support through `@commandkit/i18n` plugin 🌍
+- Plugin system to extend functionality 🔌
+- Built-in command line interface for easy development 🖥️
+- Out-of-the-box support for TypeScript and JavaScript 📜
+- Built-in customizable cache system for speedy data storage and retrieval 🗄️
+- User installable/guild scoped commands 🔧
+- Custom events support 🔔
+- JSX support for declaring Discord interaction components and modals 🎨
+- Easy to use interaction components and modals system (forget about collectors) 🧩
+- Less boilerplate code, more productivity 💪
+- and much more...
+
+## Documentation
+
+You can start with the [setting up CommandKit](./02-setup-commandkit.mdx) guide to get your bot up and running quickly. The documentation covers everything from installation to advanced features.
+
+## Support and Suggestions
+
+Submit any queries or suggestions in our [Discord community](https://ctrl.lol/discord).

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

@@ -0,0 +1,72 @@
+---
+title: Setup CommandKit
+description: Setup a new CommandKit project manually, or using the create-commandkit CLI
+---
+
+You can quickly setup a new CommandKit project using `create-commandkit` — a command-line utility used for creating new discord.js applications with CommandKit. To get started, run the following command:
+
+```sh npm2yarn
+npx create-commandkit@latest
+```
+
+This will start the CLI in the current directory which will help you quickly setup a base CommandKit project.
+
+## Project structure
+
+By using the CLI to create a base project, you should get a project structure that looks like this:
+
+```
+.
+├── src/
+│   ├── app/
+│   │   ├── commands/
+│   │   │   └── ping.ts
+│   │   └── events/
+│   │       └── ready/
+│   │           └── log.ts
+│   └── app.ts
+├── .env
+├── .gitignore
+├── commandkit.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+:::info
+The `src/app.ts` file is the main entry point for your application. This file default exports the discord.js client which CommandKit loads at runtime. For example, the `src/app.ts` file looks like this:
+
+```ts
+import { Client } from 'discord.js';
+
+const client = new Client({
+  intents: [
+    /* add stuff */
+  ],
+});
+
+// setting up the token manually
+client.token = process.env.MY_BOT_TOKEN;
+
+export default client;
+```
+
+Notice how we are not calling `client.login()` in this file. This is because CommandKit will automatically call `client.login()` for you when the application starts.
+
+Also, you might have noticed that we are not using anything from CommandKit in this file. This is because CommandKit is designed to reduce boilerplate code and make it easier to build discord bot applications.
+:::
+
+:::info
+The `src/app` directory is a special directory that CommandKit understands. All the commands and events in this directory will be automatically registered when the application starts.
+:::
+
+## Development version
+
+:::warning
+The development version is likely to have bugs.
+:::
+
+If you'd like to try the latest development builds, you can use the `@dev` tag like so:
+
+```sh npm2yarn
+npx create-commandkit@dev
+```

apps/website/docs/guide/01-getting-started/01-introduction.mdx

@@ -27,44 +27,41 @@ description: A brief intro to CommandKit
     </a>
     <a href="https://www.npmjs.com/package/commandkit">
       <img
-        src="https://img.shields.io/npm/v/commandkit?maxAge=3600"
+        src="https://img.shields.io/npm/v/commandkit?maxAge=3600&logo=npm"
         alt="npm version"
       />
     </a>
     <a href="https://www.npmjs.com/package/commandkit">
       <img
-        src="https://img.shields.io/npm/dt/commandkit?maxAge=3600"
+        src="https://img.shields.io/npm/dt/commandkit?maxAge=3600&logo=npm"
         alt="npm downloads"
       />
     </a>
   </div>
 </div>
 
-CommandKit is a powerful meta-framework for building Discord bots with [discord.js](https://discord.js.org/). It provides a simple and intuitive API for creating commands, handling interactions, and managing events. With CommandKit, you can focus on building your bot's features without worrying about the underlying complexities.
+CommandKit is a powerful meta-framework for building Discord applications with [discord.js](https://discord.js.org/). It provides a simple and intuitive API for creating commands, handling interactions, and managing events. With CommandKit, you can focus on building your Discord application without worrying about the underlying complexities.
 
-## Key Features
+## Key features
 
 - Beginner friendly 🚀
 - Suitable for both beginners and advanced users 👶👨‍💻
-- Slash + context menu commands + prefix commands support ✅
+- Slash + context menu commands + message commands support ✅
 - Automatic command registration and updates 🤖
 - Command middlewares for easy command management 🛠️
-- Localization support through `@commandkit/i18n` plugin 🌍
-- Plugin system to extend functionality 🔌
+- Localization support through [`@commandkit/i18n`](../05-official-plugins/05-commandkit-i18n.mdx) plugin 🌍
+- Powerful plugin system to extend functionality 🔌
 - Built-in command line interface for easy development 🖥️
 - Out-of-the-box support for TypeScript and JavaScript 📜
-- Built-in customizable cache system for speedy data storage and retrieval 🗄️
+- Customizable caching using the [`@commandkit/cache`](../05-official-plugins/03-commandkit-cache.mdx) plugin for speedy data fetching 🗄️
 - User installable/guild scoped commands 🔧
 - Custom events support 🔔
-- JSX support for declaring Discord interaction components and modals 🎨
-- Easy to use interaction components and modals system (forget about collectors) 🧩
+- JSX support for easily managing Discord components 🎨
+- Easy to use interaction components (forget about collectors) 🧩
 - Less boilerplate code, more productivity 💪
-- and much more...
+- ...and much more!
 
-## Documentation
+## Support and suggestions
 
-You can start with the [setting up CommandKit](./02-setup-commandkit.mdx) guide to get your bot up and running quickly. The documentation covers everything from installation to advanced features.
-
-## Support and Suggestions
-
-Submit any queries or suggestions in our [Discord community](https://ctrl.lol/discord).
+- [GitHub repository](https://github.com/underctrl-io/commandkit)
+- [Discord community](https://ctrl.lol/discord)

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

@@ -1,19 +1,25 @@
 ---
 title: Setup CommandKit
-description: Setup a new CommandKit project manually, or using the create-commandkit CLI
+description: Setup a new CommandKit project using the create-commandkit CLI
 ---
 
-You can quickly setup a new CommandKit project using `create-commandkit` — a command-line utility used for creating new discord.js applications with CommandKit. To get started, run the following command:
+:::warning
+
+- CommandKit requires at least [Node.js](https://nodejs.org/) v22
+- This documentation assumes that you have a basic understanding of how to use [discord.js](https://discord.js.org/). If you are new to discord.js, we recommend you to read the [discord.js guide](https://discordjs.guide/) first.
+  :::
+
+The quickest way to setup a new CommandKit project is to use the `create-commandkit` CLI. To get started, run the following command in your terminal:
 
 ```sh npm2yarn
-npx create-commandkit@latest
+npm create commandkit@latest
 ```
 
-This will start the CLI in the current directory which will help you quickly setup a base CommandKit project.
+This will start the CLI in an interactive mode. You can follow the prompts to setup your project.
 
 ## Project structure
 
-By using the CLI to create a base project, you should get a project structure that looks like this:
+By using the CLI to create a base project, you should get a file tree that looks something like this:
 
 ```
 .
@@ -32,41 +38,37 @@ By using the CLI to create a base project, you should get a project structure th
 └── tsconfig.json
 ```
 
-:::info
-The `src/app.ts` file is the main entry point for your application. This file default exports the discord.js client which CommandKit loads at runtime. For example, the `src/app.ts` file looks like this:
+## Entry point
 
-```ts
+The `src/app.ts` file is the main entry point for your application. This file default exports the discord.js client instance which CommandKit loads at runtime.
+
+```ts title="src/app.ts"
 import { Client } from 'discord.js';
 
 const client = new Client({
-  intents: [
-    /* add stuff */
-  ],
+  intents: ['Guilds', 'GuildMessages', 'MessageContent'],
 });
 
-// setting up the token manually
+// Optional: Setting up the token manually
 client.token = process.env.MY_BOT_TOKEN;
 
 export default client;
 ```
 
-Notice how we are not calling `client.login()` in this file. This is because CommandKit will automatically call `client.login()` for you when the application starts.
+Notice how there's no `client.login()` in this file. This is because CommandKit will automatically handle the login process for you when the application starts.
 
-Also, you might have noticed that we are not using anything from CommandKit in this file. This is because CommandKit is designed to reduce boilerplate code and make it easier to build discord bot applications.
-:::
+## Development version
 
-:::info
-The `src/app` directory is a special directory that CommandKit understands. All the commands and events in this directory will be automatically registered when the application starts.
-:::
+If you would like to try the latest development builds, you can use the `@dev` tag like so:
 
-## Development version
+```sh npm2yarn
+npm create commandkit@dev
+```
 
 :::warning
 The development version is likely to have bugs.
 :::
 
-If you'd like to try the latest development builds, you can use the `@dev` tag like so:
+## Manual setup
 
-```sh npm2yarn
-npx create-commandkit@dev
-```
+Alternatively, if you would like to setup a new CommandKit project manually, you can follow [this guide](../08-advanced/01-setup-commandkit-manually.mdx).

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

@@ -0,0 +1,48 @@
+---
+title: Chat input commands
+---
+
+CommandKit provides a very simple way to manage your chat input (slash) commands, including registering them to the Discord API, as well as handling their execution.
+
+To create a new chat input command, create a new file in the `src/app/commands` directory with the name of the command. This guide will create a basic ping command which will respond with "Pong!" when executed.
+
+```ts title="src/app/commands/ping.ts"
+import type { CommandData, ChatInputCommand } from 'commandkit';
+
+export const command: CommandData = {
+  name: 'ping',
+  description: 'Replies with Pong!',
+};
+
+export const chatInput: ChatInputCommand = async (ctx) => {
+  await ctx.interaction.reply('Pong!');
+};
+```
+
+## Exports explained
+
+### `command`
+
+This is the command data object which defines the shape of your command. This is directly registered to the Discord API everytime your commands are refreshed.
+
+### `chatInput`
+
+This is the main handler function for your chat input command. By exporting this function, CommandKit will know that it's a chat input command and will register and handle it accordingly.
+
+:::tip
+Chat input commands are just one of the command types that CommandKit supports. Learn more about [message commands](./04-message-commands.mdx) and [context menu commands](./03-context-menu-commands.mdx).
+:::
+
+## Guild-based commands
+
+You can register your chat input command to specific guilds by using the `guilds` property in the `command` object which accepts an array of guild IDs.
+
+```ts title="src/app/commands/ping.ts" {6}
+import type { CommandData } from 'commandkit';
+
+export const command: CommandData = {
+  name: 'ping',
+  description: 'Replies with Pong!',
+  guilds: ['1055188344188973066'],
+};
+```

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

@@ -0,0 +1,3 @@
+---
+title: Command options autocomplete
+---

apps/website/docs/guide/02-commands/03-context-menu-commands.mdx

@@ -0,0 +1,3 @@
+---
+title: Context menu commands
+---

apps/website/docs/guide/02-commands/04-message-commands.mdx

@@ -0,0 +1,3 @@
+---
+title: Message commands
+---

apps/website/docs/guide/02-commands/05-custom-message-commands-prefix.mdx

@@ -0,0 +1,3 @@
+---
+title: Custom message commands prefix
+---

apps/website/docs/guide/02-commands/06-after-function.mdx

@@ -0,0 +1,3 @@
+---
+title: after function
+---

apps/website/docs/guide/02-commands/07-category-directory.mdx

@@ -0,0 +1,3 @@
+---
+title: Category directory
+---

apps/website/docs/guide/02-commands/08-middlewares/01-global-middlewares.mdx

@@ -0,0 +1,3 @@
+---
+title: Global middlewares
+---

apps/website/docs/guide/02-commands/08-middlewares/02-local-middlewares.mdx

@@ -0,0 +1,3 @@
+---
+title: Local middlewares
+---

apps/website/docs/guide/02-commands/08-middlewares/03-command-scoped-middlewares.mdx

@@ -0,0 +1,3 @@
+---
+title: Command scoped middlewares
+---

apps/website/docs/guide/03-events/01-discordjs-events.mdx

@@ -0,0 +1,3 @@
+---
+title: Discord.js events
+---

apps/website/docs/guide/03-events/02-custom-events.mdx

@@ -0,0 +1,3 @@
+---
+title: Custom events
+---

apps/website/docs/guide/04-jsx-components/01-using-jsx.mdx

@@ -0,0 +1,3 @@
+---
+title: Using JSX
+---

apps/website/docs/guide/04-jsx-components/02-discord-components-v1/01-action-row.mdx

@@ -0,0 +1,3 @@
+---
+title: Action row
+---

apps/website/docs/guide/04-jsx-components/02-discord-components-v1/02-button.mdx

@@ -0,0 +1,3 @@
+---
+title: Button
+---

apps/website/docs/guide/04-jsx-components/02-discord-components-v1/03-select-menu.mdx

@@ -0,0 +1,3 @@
+---
+title: Select menu
+---