add grouping to sidebar

notunderctrl · notunderctrl · commit 19e16e936c7c · 2025-05-01T21:47:01.000+03:00
diff --git a/apps/website/docs/guide/01-getting-started/01-introduction.mdx b/apps/website/docs/guide/01-getting-started/01-introduction.mdx
@@ -1,12 +1,11 @@
 ---
-title: Installation
-description: Learn how to install CommandKit.
+title: Introduction
+description: A brief intro to CommandKit
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-# Installation
+:::info
+The following documentation is for the upcoming v1 release of CommandKit and currently incomplete. To get support for v0.1.10, use [this guide](/docs/guide/installation).
+:::
 
 <div
   align="center"
@@ -45,20 +44,4 @@ import TabItem from '@theme/TabItem';
   </div>
 </div>
 
-To install CommandKit, run one of the following commands based on your preferred package manager:
-
-```bash npm2yarn
-npm install commandkit
-```
-
-## Development version
-
-To install the development version of CommandKit, run one of the following commands:
-
-```bash npm2yarn
-npm install commandkit@dev
-```
-
-:::warning
-The development version is likely to have bugs.
-:::
+CommandKit is a powerful framework for building Discord bots.
diff --git a/apps/website/docs/guide/01-getting-started/02-setup-commandkit.mdx b/apps/website/docs/guide/01-getting-started/02-setup-commandkit.mdx
@@ -0,0 +1,24 @@
+---
+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:
+
+```bash npm2yarn
+npx create-commandkit@latest
+```
+
+This will start the CLI in the current directory which will help you quickly setup a base CommandKit project.
+
+## Development version
+
+If you'd like to try the latest development builds, you can use the `@dev` tag when setting up a CommandKit project using the CLI.
+
+:::warning
+The development version is likely to have bugs.
+:::
+
+```bash npm2yarn
+npx create-commandkit@dev
+```
diff --git a/apps/website/docs/guide/01-getting-started/03-setup-commandkit-manually.mdx b/apps/website/docs/guide/01-getting-started/03-setup-commandkit-manually.mdx
@@ -1,21 +1,10 @@
 ---
-title: Getting Started
-description: Get started with CommandKit.
+title: Setup CommandKit manually
+description: Learn how to install CommandKit.
 ---
 
-# Getting Started
-
-CommandKit is a powerful framework for building Discord bots. In this guide, we'll walk you through the process of getting started with CommandKit.
-
-## Prerequisites
-
-Before you begin, make sure you have installed `discord.js` and `commandkit` in your project.
-
-## Building a simple bot
-
-:::info
-It is recommended to use `modules` instead of `commonjs` for commandkit projects. CommandKit will allow you to use both `require` and `import` in `modules` projects.
-:::
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 First of all, create a `commandkit.config.ts` at the root of your project. This file is used to configure CommandKit and its plugins.
 
diff --git a/apps/website/docs/guide/02-components/01-buttonkit.mdx b/apps/website/docs/guide/02-components/01-buttonkit.mdx
@@ -1,13 +1,11 @@
 ---
-title: Using ButtonKit
+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.
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-# Using ButtonKit
-
 ButtonKit extends Discord.js's [`ButtonBuilder`](https://discord.js.org/docs/packages/builders/1.9.0/ButtonBuilder:Class) to provide a simpler way to handle button interactions. It adds methods like `onClick()` to handle button clicks without manually setting up collectors.
 
 ## Basic Usage
diff --git a/apps/website/docs/guide/02-components/02-modalkit.mdx b/apps/website/docs/guide/02-components/02-modalkit.mdx
@@ -1,13 +1,11 @@
 ---
-title: Using ModalKit
+title: ModalKit
 description: ModalKit is an enhanced version of the native Discord.js ModalBuilder, designed to simplify the process of creating and handling modal submissions in your Discord bot.
 ---
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
-# Using ModalKit
-
 ModalKit is an enhanced version of the native Discord.js [`ModalBuilder`](https://discord.js.org/docs/packages/builders/1.9.0/ModalBuilder:Class), designed to simplify the process of creating and handling modal submissions in your Discord bot.
 
 ## Creating and handling modals
diff --git a/apps/website/docs/guide/02-create-commandkit.mdx b/apps/website/docs/guide/02-create-commandkit.mdx
diff --git a/apps/website/docs/guide/03-using-cli.mdx b/apps/website/docs/guide/03-using-cli.mdx
@@ -3,8 +3,6 @@ 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 HMR during development, anti-crash, etc. so you can be rest assured your bot won't crash and go offline during production.
 
 To get a list of the available CLI commands, run the following command inside your project directory:
diff --git a/apps/website/docs/guide/04-commandkit-config.mdx b/apps/website/docs/guide/04-commandkit-config.mdx
@@ -3,8 +3,6 @@ title: CommandKit config file
 description: Learn how to configure CommandKit CLI for your project.
 ---
 
-# CommandKit Configuration
-
 CommandKit CLI can be configured using `commandkit.config` file in the root of your project directory (for example, by `package.json`). You can use either of the following files:
 
 - `commandkit.config.js`
diff --git a/apps/website/docs/guide/05-caching.mdx b/apps/website/docs/guide/05-caching.mdx
@@ -3,8 +3,6 @@ title: Caching
 description: A guide on how to implement caching in your bot using CommandKit.
 ---
 
-# Caching
-
 Caching is a technique used to store data in a temporary storage to reduce the time it takes to fetch the data from the original source. This can be useful in Discord bots to reduce the number of database queries or external API calls.
 
 CommandKit provides an easy way to implement caching in your bot without having to worry about the underlying implementation. This guide will show you how to use the caching feature in CommandKit.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -16,8 +16,8 @@
     "docgen": "tsx ./scripts/docgen.ts"
   },
   "dependencies": {
-    "@docusaurus/core": "3.6.3",
-    "@docusaurus/preset-classic": "3.6.3",
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
     "@docusaurus/theme-search-algolia": "^3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
@@ -26,10 +26,10 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.6.3",
-    "@docusaurus/remark-plugin-npm2yarn": "^3.6.3",
-    "@docusaurus/tsconfig": "3.6.3",
-    "@docusaurus/types": "3.6.3",
+    "@docusaurus/module-type-aliases": "3.7.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.7.0",
+    "@docusaurus/tsconfig": "3.7.0",
+    "@docusaurus/types": "3.7.0",
     "autoprefixer": "^10.4.20",
     "micro-docgen": "^0.3.5",
     "postcss": "^8.4.49",
diff --git a/apps/website/sidebars.ts b/apps/website/sidebars.ts
@@ -1,17 +1,30 @@
 import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
 
 const sidebars: SidebarsConfig = {
+  // NOTE: The number prefixed in the folder/file names are ignored by Docusaurus.
+  // E.g.: guide/01-getting-started/01-introduction.mdx will have go under `items` as guide/getting-started/introduction
   guide: [
     {
-      type: 'autogenerated',
-      dirName: 'guide',
+      type: 'category',
+      label: 'Getting Started',
+      items: [
+        'guide/getting-started/introduction',
+        'guide/getting-started/setup-commandkit',
+        'guide/getting-started/setup-commandkit-manually',
+      ],
     },
-  ],
-  api: [
     {
-      type: 'autogenerated',
-      dirName: 'api-reference',
+      type: 'category',
+      label: 'Components',
+      items: [
+        'guide/components/buttonkit',
+        'guide/components/modalkit',
+        //
+      ],
     },
+    'guide/using-cli',
+    'guide/commandkit-config',
+    'guide/caching',
   ],
 };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
