🚧 Colorize module

src/templates/modules/documentation/Routes.ts

@@ -10,8 +10,9 @@ import Middleware from './base/Middleware.vue'
 import Hook from './base/Hook.vue'
 import Deployment from './advanced/Deployment.vue'
 import PartialHooks from './base/PartialHooks.vue'
-import ExampleSlashCommand from './examples/SlashCommand.vue'
+import PingPong from './examples/PingPong.vue'
 import ExampleButtons from './examples/Buttons.vue'
+import Colorize from './modules/Colorize.vue'
 
 const routes: RouteRecordRaw[] = [
   { path: '/documentation/getting-started', component: GettingStarted },
@@ -27,7 +28,9 @@ const routes: RouteRecordRaw[] = [
 
   { path: '/documentation/deployment', component: Deployment },
 
-  { path: '/documentation/examples/deployment', component: ExampleSlashCommand },
+  { path: '/documentation/modules/colorize', component: Colorize },
+
+  { path: '/documentation/examples/ping-pong', component: PingPong },
   { path: '/documentation/examples/buttons', component: ExampleButtons },
 ]
 

src/templates/modules/documentation/modules/Colorize.vue

@@ -0,0 +1,35 @@
+<template>
+  <Documentation title="Colorize">
+    <p>
+      In the near future, slash commands will completely replace the "prefixed" commands we all know.
+      Even if these "old commands" will still work because they are based on the messageCreate event, it is important to learn how to use this new medium that discord is introducing.
+    </p>
+
+    <div class="space-y-5">
+      <h2>How to use</h2>
+      <p>
+        Returns the instance of the Discord Client linked to the bot.
+      </p>
+      <CodeHighlight class="" :code="slashCommandWithEmbed" />
+    </div>
+
+    <div class="space-y-5">
+      <h2>Color palet</h2>
+      <ColorContainer />
+    </div>
+  </Documentation>
+</template>
+
+<script setup lang="ts">
+import Documentation from '../../../../components/Documentation.vue'
+import CodeHighlight from '../../../../components/CodeHighlight.vue'
+import ColorContainer from '../../../../components/ColorContainer.vue'
+
+const slashCommandWithEmbed = `
+import { Colors } from '@discord-factory/colorize'
+
+const embed = new MessageEmbed({
+  description: 'Description of your embed',
+  color: Colors.INVISIBLE,
+})`
+</script>