website: version docs

underctrl-io · Dec 17, 2024 · 9a74913 · 9a74913
1 parent b44628b
commit 9a74913
Show file tree

Hide file tree

Showing 48 changed files with 2,100 additions and 22 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,6 +2,9 @@ node_modules
 
 **/docs/.next/
 **/website/docs/api-reference
+**/website/versioned_docs
+**/website/versioned_sidebars
+.docusaurus
 .astro
 dist
 .commandkit

diff --git a/apps/website/docs/guide/01-installation.mdx b/apps/website/docs/guide/01-installation.mdx
@@ -8,14 +8,26 @@ import TabItem from '@theme/TabItem';
 
 # Installation
 
-<div align="center" className="my-8">
+<div
+  align="center"
+  style={{
+    margin: '2rem 0',
+  }}
+>
   <img src="/img/ckit_logo.svg" width="60%" />
   <br />
-  <div className="flex items-center justify-center gap-2">
+  <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 server"
+        alt="support discord server"
       />
     </a>
     <a href="https://www.npmjs.com/package/commandkit">

diff --git a/apps/website/docs/guide/03-commandkit-setup.mdx b/apps/website/docs/guide/03-commandkit-setup.mdx
@@ -8,11 +8,11 @@ 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.
+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. `src/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}
+      ```js title="src/index.js" {13-23}
       const { Client, GatewayIntentBits } = require('discord.js');
       const { CommandKit } = require('commandkit');
       const path = require('path');
@@ -41,7 +41,7 @@ This is a simple overview of how to set up CommandKit with all the available opt
       ```
     </TabItem>
     <TabItem value='esm' label='ESM'>
-      ```js title="src/index.js" {2, 16-26}
+      ```js title="src/index.js" {16-26}
       import { Client, GatewayIntentBits } from 'discord.js';
       import { CommandKit } from 'commandkit';
       import { fileURLToPath } from 'url';
@@ -73,7 +73,7 @@ This is a simple overview of how to set up CommandKit with all the available opt
       ```
     </TabItem>
     <TabItem value='ts' label='TypeScript'>
-      ```ts title="src/index.ts" {2, 13-23}
+      ```ts title="src/index.ts" {13-23}
       import { Client, GatewayIntentBits } from 'discord.js';
       import { CommandKit } from 'commandkit';
       import path from 'path';
@@ -112,7 +112,7 @@ Some Discord.js properties are only accessible using the correct intents.
 
 ### `client`
 
-- Type: [`Client`](https://old.discordjs.dev/#/docs/discord.js/main/class/Client)
+- Type: [`Client`](https://discord.js.org/docs/packages/discord.js/14.16.3/Client:Class)
 
 This is your Discord.js client object. This is required to register and handle application commands and events.
 
@@ -170,4 +170,4 @@ This is used to disable CommandKit's built-in validation functions. Setting this
 - 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.
+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#public-reloadcommandstype-promisevoid) is called.
diff --git a/apps/website/docs/guide/04-command-file-setup.mdx b/apps/website/docs/guide/04-command-file-setup.mdx
@@ -284,27 +284,27 @@ Here's an example of how to use the `autocomplete` function:
 
 ### `data`
 
-- Type: [`CommandData`](/docs/types/CommandData) | [`SlashCommandBuilder`](https://discord.js.org/docs/packages/builders/main/SlashCommandBuilder:Class) | [`ContextMenuCommandBuilder`](https://discord.js.org/docs/packages/builders/main/ContextMenuCommandBuilder:Class)
+- Type: [`CommandData`](/docs/api-reference/types/CommandData) | [`SlashCommandBuilder`](https://discord.js.org/docs/packages/builders/1.9.0/SlashCommandBuilder:Class) | [`ContextMenuCommandBuilder`](https://discord.js.org/docs/packages/builders/1.9.0/ContextMenuCommandBuilder:Class)
 
 This property contains the command's structural information, and is required to register and handle commands.
 
 ### `run`
 
 - Type: `void`
 
-- Props Type: [`SlashCommandProps`](/docs/types/SlashCommandProps) | [`ContextMenuCommandProps`](/docs/types/ContextMenuCommandProps)
+- Props Type: [`SlashCommandProps`](/docs/api-reference/types/SlashCommandProps) | [`ContextMenuCommandProps`](/docs/api-reference/types/ContextMenuCommandProps)
 
 This function will be called when the command is executed.
 
 ### `autocomplete`
 
 - Type: `void`
-- Props Type: [`AutocompleteProps`](/docs/types/AutocompleteProps)
+- Props Type: [`AutocompleteProps`](/docs/api-reference/types/AutocompleteProps)
 
 This function will be called when an autocomplete interaction event is triggered for any option set as autocomplete in this command's `data` object.
 
 ### `options` (optional)
 
-- Type: [`CommandOptions`](/docs/types/CommandOptions)
+- Type: [`CommandOptions`](/docs/api-reference/types/CommandOptions)
 
 This property contains the command's registration/handling behaviour.
diff --git a/apps/website/docs/guide/07-buttonkit.mdx b/apps/website/docs/guide/07-buttonkit.mdx
@@ -8,7 +8,7 @@ import TabItem from '@theme/TabItem';
 
 # Using ButtonKit
 
-ButtonKit is an enhanced version of the native Discord.js [`ButtonBuilder`](https://old.discordjs.dev/#/docs/discord.js/main/class/ButtonBuilder), designed to simplify the process of creating and handling button interactions in your Discord bot.
+ButtonKit is an enhanced version of the native Discord.js [`ButtonBuilder`](https://discord.js.org/docs/packages/builders/1.9.0/ButtonBuilder:Class), designed to simplify the process of creating and handling button interactions in your Discord bot.
 
 It is not recommended to use this to listen for button clicks forever since it creates collectors. For that purpose, it's recommended to use a regular "interactionCreate" event listener.
 
@@ -160,7 +160,7 @@ myButton.onClick(
 
 ### `message`
 
-- Type: [`Message`](https://old.discordjs.dev/#/docs/discord.js/main/class/Message)
+- Type: [`Message`](https://discord.js.org/docs/packages/discord.js/14.16.3/Message:Class)
 
 The message object that ButtonKit uses to listen for button clicks (interactions).
 
@@ -179,13 +179,13 @@ Whether or not the collector should automatically reset the timer when a button
 
 ### Additional optional options
 
-- Type: [`InteractionCollectorOptions`](https://old.discordjs.dev/#/docs/discord.js/main/typedef/InteractionCollectorOptions)
+- Type: [`InteractionCollectorOptions`](https://discord.js.org/docs/packages/discord.js/14.16.3/InteractionCollectorOptions:Interface)
 
 ## Handle collector end
 
 When setting up an `onClick()` method using ButtonKit, you may also want to run some code after the collector ends running. The default timeout is 1 day, but you can modify this in [`onClickOptions#time`](#time-optional). To handle when the collector ends, you can setup an `onEnd()` method like this:
 
-```js {16-21}
+```js {19-24}
 const myButton = new ButtonKit()
   .setCustomId('custom_button')
   .setLabel('Click me!')

diff --git a/apps/website/docusaurus.config.ts b/apps/website/docusaurus.config.ts
@@ -73,13 +73,28 @@ const config: Config = {
     },
     footer: {
       style: 'light',
-      copyright: `Copyright © ${new Date().getFullYear()} CommandKit`,
+      copyright: `MIT © ${new Date().getFullYear()} CommandKit`,
     },
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,
+  plugins: [
+    function tailwindPlugin(context, options) {
+      return {
+        name: 'tailwind-plugin',
+        configurePostCss(postcssOptions) {
+          postcssOptions.plugins = [
+            require('postcss-import'),
+            require('tailwindcss'),
+            require('autoprefixer'),
+          ];
+          return postcssOptions;
+        },
+      };
+    },
+  ],
 };
 
 export default config;
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -29,7 +29,10 @@
     "@docusaurus/remark-plugin-npm2yarn": "^3.6.3",
     "@docusaurus/tsconfig": "3.6.3",
     "@docusaurus/types": "3.6.3",
+    "autoprefixer": "^10.4.20",
     "micro-docgen": "^0.3.5",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16",
     "typescript": "~5.6.2"
   },
   "browserslist": {

diff --git a/apps/website/src/css/custom.css b/apps/website/src/css/custom.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -26,5 +30,5 @@
   --ifm-color-primary-light: #7e33f6;
   --ifm-color-primary-lighter: #9a60f7;
   --ifm-color-primary-lightest: #a46ef8;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --docusaurus-highlighted-code-line-bg: rgba(137, 137, 137, 0.3);
 }
diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
@@ -1,11 +1,54 @@
 import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
 
 export default function Home(): React.JSX.Element {
   return (
     <Layout>
-      <main>
-        <div>Home page</div>
-      </main>
+      <section className="w-72 h-96 mx-auto text-center mt-32 mb-28 md:mb-16 flex items-center justify-center flex-col md:flex-row-reverse md:gap-2 md:text-left md:mt-12 md:w-[700px] lg:w-[850px]">
+        <img
+          src="/img/logo.png"
+          alt="CommandKit logo"
+          className="md:w-[230px] lg:w-[280px] mb-10 md:mb-0"
+          width={250}
+          height={250}
+        />
+
+        <div>
+          <p className="text-4xl font-bold mb-5 md:text-5xl lg:text-6xl">
+            Let{' '}
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#ffbc6f] to-[#b079fc]">
+              CommandKit
+            </span>{' '}
+            handle it for you!
+          </p>
+          <p className="font-semibold lg:text-xl">
+            A Discord.js handler for commands and events.
+          </p>
+
+          <div className="flex items-center justify-center gap-3 mt-10 md:justify-start [&>a]:text-white [&>a]:hover:text-white">
+            <Link
+              to="/docs/guide/installation"
+              className="font-semibold bg-[#b079fc] py-2 px-4 rounded-full"
+            >
+              Guide
+            </Link>
+            <Link
+              to="/docs/api-reference/classes/ButtonKit"
+              className="font-semibold bg-blue-500 py-2 px-4 rounded-full"
+            >
+              API Reference
+            </Link>
+            <Link
+              href="https://github.com/underctrl-io/commandkit"
+              className="font-semibold bg-[#fc7993] py-2 px-4 rounded-full"
+              // target="_blank"
+              // rel="noopener noreferrer"
+            >
+              GitHub
+            </Link>
+          </div>
+        </div>
+      </section>
     </Layout>
   );
 }
diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js
@@ -0,0 +1,13 @@
+const { fontFamily } = require('tailwindcss/defaultTheme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  corePlugins: {
+    preflight: false,
+    container: false,
+  },
+  darkMode: ['class', '[data-theme="dark"]'],
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {},
+  plugins: [],
+};