Skip to content

Commit bb0f827

Browse files
twlitetwlite
committed
feat: new docs setup
1 parent 7913fde commit bb0f827

File tree

72 files changed

+12397
-143
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+12397
-143
lines changed

‎apps/docs/.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# deps
2+
/node_modules
3+
4+
# generated content
5+
.source
6+
7+
# test & build
8+
/coverage
9+
/.next/
10+
/out/
11+
/build
12+
*.tsbuildinfo
13+
14+
# misc
15+
.DS_Store
16+
*.pem
17+
/.pnp
18+
.pnp.js
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*
22+
23+
# others
24+
.env*.local
25+
.vercel
26+
next-env.d.ts

‎apps/docs/README.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# docs
2+
3+
This is a Next.js application generated with
4+
[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
5+
6+
Run development server:
7+
8+
```bash
9+
npm run dev
10+
# or
11+
pnpm dev
12+
# or
13+
yarn dev
14+
```
15+
16+
Open http://localhost:3000 with your browser to see the result.
17+
18+
## Explore
19+
20+
In the project, you can see:
21+
22+
- `lib/source.ts`: Code for content source adapter, [`loader()`](https://fumadocs.dev/docs/headless/source-api) provides the interface to access your content.
23+
- `lib/layout.shared.tsx`: Shared options for layouts, optional but preferred to keep.
24+
25+
| Route | Description |
26+
| ------------------------- | ------------------------------------------------------ |
27+
| `app/(home)` | The route group for your landing page and other pages. |
28+
| `app/docs` | The documentation layout and pages. |
29+
| `app/api/search/route.ts` | The Route Handler for search. |
30+
31+
### Fumadocs MDX
32+
33+
A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.
34+
35+
Read the [Introduction](https://fumadocs.dev/docs/mdx) for further details.
36+
37+
## Learn More
38+
39+
To learn more about Next.js and Fumadocs, take a look at the following
40+
resources:
41+
42+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
43+
features and API.
44+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
45+
- [Fumadocs](https://fumadocs.dev) - learn about Fumadocs

‎apps/docs/content/docs/01-getting-started/01-introduction.mdx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Introduction
3+
description: A brief intro to CommandKit, a modern framework for building Discord bots with TypeScript and JavaScript.
4+
---
5+
6+
import Logo from './Logo';
7+
8+
<div
9+
align="center"
10+
style={{
11+
margin: '2rem 0',
12+
}}
13+
>
14+
<Logo/>
15+
16+
<br />
17+
<div
18+
style={{
19+
display: 'flex',
20+
alignItems: 'center',
21+
justifyContent: 'center',
22+
gap: '0.5rem',
23+
}}
24+
>
25+
<a href="https://ctrl.lol/discord">
26+
<img
27+
src="https://img.shields.io/discord/1055188344188973066?color=5865F2&logo=discord&logoColor=white"
28+
alt="support discord server"
29+
/>
30+
</a>
31+
<a href="https://www.npmjs.com/package/commandkit">
32+
<img
33+
src="https://img.shields.io/npm/v/commandkit?maxAge=3600&logo=npm"
34+
alt="npm version"
35+
/>
36+
</a>
37+
<a href="https://www.npmjs.com/package/commandkit">
38+
<img
39+
src="https://img.shields.io/npm/dt/commandkit?maxAge=3600&logo=npm"
40+
alt="npm downloads"
41+
/>
42+
</a>
43+
</div>
44+
</div>
45+
46+
CommandKit is a powerful meta-framework for building Discord
47+
applications with [discord.js](https://discord.js.org/). It provides a
48+
simple and intuitive API for creating commands, handling interactions,
49+
and managing events. With CommandKit, you can focus on building your
50+
Discord application without worrying about the underlying
51+
complexities.
52+
53+
## Key features
54+
55+
- Beginner friendly 🚀
56+
- Suitable for both beginners and advanced users 👶👨‍💻
57+
- Slash + context menu commands + message commands support ✅
58+
- Automatic command registration and updates 🤖
59+
- Command middlewares for easy command management 🛠️
60+
- Localization support through
61+
[`@commandkit/i18n`](../05-official-plugins/05-commandkit-i18n.mdx)
62+
plugin 🌍
63+
- Powerful plugin system to extend functionality 🔌
64+
- Built-in command line interface for easy development 🖥️
65+
- Out-of-the-box support for TypeScript and JavaScript 📜
66+
- Customizable caching using the
67+
[`@commandkit/cache`](../05-official-plugins/03-commandkit-cache.mdx)
68+
plugin for speedy data fetching 🗄️
69+
- User installable/guild scoped commands 🔧
70+
- Custom events support 🔔
71+
- JSX support for easily managing Discord components 🎨
72+
- Easy to use interaction components (forget about collectors) 🧩
73+
- Less boilerplate code, more productivity 💪
74+
- ...and much more!
75+
76+
## Support and suggestions
77+
78+
- [GitHub repository](https://github.com/underctrl-io/commandkit)
79+
- [Discord community](https://ctrl.lol/discord)

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

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
title: Setup CommandKit
3+
description: Setup a new CommandKit project using the create-commandkit CLI
4+
---
5+
6+
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
7+
8+
<Callout title="Important">
9+
1. CommandKit requires at least [Node.js](https://nodejs.org/) v24
10+
2. This documentation assumes that you have a basic understanding of
11+
how to use [discord.js](https://discord.js.org/). If you are new to
12+
discord.js, we recommend you to read the
13+
[discord.js guide](https://discordjs.guide/) first.
14+
</Callout>
15+
16+
The quickest way to setup a new CommandKit project is to use the
17+
`create-commandkit` CLI. To get started, run the following command in
18+
your terminal:
19+
20+
```npm
21+
npm create commandkit@latest
22+
```
23+
24+
This will start the CLI in an interactive mode. You can follow the
25+
prompts to setup your project.
26+
27+
## Available Examples
28+
29+
CommandKit comes with several pre-built examples to help you get started quickly. You can list all available examples using:
30+
31+
```npm
32+
npm create commandkit@latest --list-examples
33+
```
34+
35+
### Using Examples
36+
37+
You can create a project from any example using the `--example` flag:
38+
39+
```npm
40+
# Create a basic TypeScript bot
41+
npm create commandkit@latest --example basic-ts
42+
43+
# Create a basic JavaScript bot
44+
npm create commandkit@latest --example basic-js
45+
46+
# Create a Deno TypeScript bot
47+
npm create commandkit@latest --example deno-ts
48+
49+
# Create a bot without CLI integration
50+
npm create commandkit@latest --example without-cli
51+
```
52+
53+
### CLI Options
54+
55+
The CLI supports various options for customization:
56+
57+
```npm
58+
# Skip prompts and use defaults
59+
npm create commandkit@latest --yes
60+
61+
# Use a specific package manager
62+
npm create commandkit@latest --use-pnpm
63+
npm create commandkit@latest --use-yarn
64+
npm create commandkit@latest --use-bun
65+
npm create commandkit@latest --use-deno
66+
67+
# Skip dependency installation
68+
npm create commandkit@latest --skip-install
69+
70+
# Skip git initialization
71+
npm create commandkit@latest --no-git
72+
73+
# Create in a specific directory
74+
npm create commandkit@latest my-bot
75+
76+
# Use a custom GitHub repository
77+
npm create commandkit@latest --example "https://github.com/user/repo"
78+
```
79+
80+
## Project structure
81+
82+
By using the CLI to create a base project, you should get a file tree
83+
that looks something like this:
84+
85+
```
86+
.
87+
├── src/
88+
│ ├── app/
89+
│ │ ├── commands/
90+
│ │ │ └── ping.ts
91+
│ │ └── events/
92+
│ │ └── clientReady/
93+
│ │ └── log.ts
94+
│ └── app.ts
95+
├── .env
96+
├── .gitignore
97+
├── commandkit.config.ts
98+
├── package.json
99+
└── tsconfig.json
100+
```
101+
102+
<Callout>
103+
The exact project structure may vary depending on the example you choose. Each example comes with its own configuration and dependencies tailored to its specific use case.
104+
</Callout>
105+
106+
## Entry point
107+
108+
The `src/app.ts` file is the main entry point for your application.
109+
This file default exports the discord.js client instance which
110+
CommandKit loads at runtime.
111+
112+
<Tabs groupId='language' persist items={['TypeScript', 'JavaScript']} defaultIndex={0}>
113+
<Tab value="TypeScript">
114+
```ts title="src/app.ts"
115+
import { Client } from 'discord.js';
116+
117+
const client = new Client({
118+
intents: ['Guilds', 'GuildMessages', 'MessageContent'],
119+
});
120+
121+
// Optional: Setting up the token manually
122+
client.token = process.env.MY_BOT_TOKEN;
123+
124+
export default client;
125+
```
126+
127+
</Tab>
128+
<Tab value="JavaScript">
129+
```js title="src/app.js"
130+
import { Client } from 'discord.js';
131+
132+
const client = new Client({
133+
intents: ['Guilds', 'GuildMessages', 'MessageContent'],
134+
});
135+
136+
// Optional: Setting up the token manually
137+
client.token = process.env.MY_BOT_TOKEN;
138+
139+
export default client;
140+
```
141+
142+
</Tab>
143+
</Tabs>
144+
145+
Notice how there's no `client.login()` in this file. This is because
146+
CommandKit will automatically handle the login process for you when
147+
the application starts.
148+
149+
## Development version
150+
151+
If you would like to try the latest development builds, you can use
152+
the `@dev` tag like so:
153+
154+
```npm
155+
npm create commandkit@dev
156+
```
157+
158+
<Callout type="warning">
159+
160+
The development version is likely to have bugs.
161+
162+
</Callout>
163+
164+
## Getting Help
165+
166+
For more information about the CLI options, you can use the help flag:
167+
168+
```npm
169+
npm create commandkit@latest --help
170+
```
171+
172+
This will display all available options and usage examples.
173+
174+
## Manual setup
175+
176+
Alternatively, if you would like to setup a new CommandKit project
177+
manually, you can follow
178+
[this guide](../08-advanced/01-setup-commandkit-manually.mdx).

‎apps/docs/content/docs/01-getting-started/Logo.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
3+
export default function Logo() {
4+
return <>
5+
<img src={'/img/ckit_logo_d.svg'} width="60%" alt="CommandKit Logo" className='dark:hidden' data-info='light logo' />
6+
<img src={'/img/ckit_logo.svg'} width="60%" alt="CommandKit Logo" className='hidden dark:block' data-info='dark logo' />
7+
</>
8+
}

0 commit comments

Comments
 (0)