✨ Work in progress

src/components/Documentation.vue

@@ -115,13 +115,14 @@
                     {{ link.label }}
                   </router-link>
                 </div>
-                <router-link
-                  v-else
-                  :key="item.name"
-                  :to="item.href"
-                  :class="[item.current ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900', 'w-1/2 ml-auto group flex items-center py-2 text-base font-medium rounded-md']">
-                  {{ item.label }}
-                </router-link>
+                <div v-else class="w-1/2 ml-auto">
+                  <router-link
+                    :key="item.name"
+                    :to="item.href"
+                    :class="[item.current ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900', 'group flex items-center py-2 text-base font-medium rounded-md']">
+                    {{ item.label }}
+                  </router-link>
+                </div>
               </template>
             </nav>
           </div>
@@ -179,9 +180,7 @@ import { Dialog, DialogOverlay, TransitionChild, TransitionRoot } from '@headles
 import { documentation } from '../utils/Navigation'
 import { CalendarIcon, ChartBarIcon, FolderIcon, HomeIcon, InboxIcon, MenuIcon, UsersIcon, XIcon, MenuAlt2Icon } from '@heroicons/vue/outline'
 
-defineProps<{
-  title: string
-}>()
+defineProps<{ title: string }>()
 
 const sidebarOpen = ref(false)
 

src/templates/modules/documentation/Routes.ts

@@ -10,6 +10,8 @@ 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 ExampleButtons from './examples/Buttons.vue'
 
 const routes: RouteRecordRaw[] = [
   { path: '/documentation/getting-started', component: GettingStarted },
@@ -24,6 +26,9 @@ const routes: RouteRecordRaw[] = [
   { path: '/documentation/hooks', component: Hook },
 
   { path: '/documentation/deployment', component: Deployment },
+
+  { path: '/documentation/examples/deployment', component: ExampleSlashCommand },
+  { path: '/documentation/examples/buttons', component: ExampleButtons },
 ]
 
 export default routes

src/templates/modules/documentation/examples/Buttons.vue

@@ -0,0 +1,65 @@
+<template>
+  <Documentation title="Example of slash command">
+    <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>Basic reply with embed</h2>
+      <p>
+        Returns the instance of the Discord Client linked to the bot.
+      </p>
+      <CodeHighlight class="" :code="slashCommandWithEmbed" />
+    </div>
+  </Documentation>
+</template>
+
+<script setup lang="ts">
+import Documentation from '../../../../components/Documentation.vue'
+import CodeHighlight from '../../../../components/CodeHighlight.vue'
+
+const slashCommandWithEmbed = `
+import { Colors } from '@discord-factory/colorize'
+import { BaseSlashCommand, SlashCommand } from '@discord-factory/core'
+import { CommandInteraction, TextChannel, MessageEmbed } from 'discord.js'
+import { GuildId, Channel, Role } from 'App/Utils/Settings'
+
+@SlashCommand({
+  scope: [GuildId], 👈 // Or 'GLOBAL' if you want to register globally
+  options: {
+    name: 'send-buttons', 👈 // UpperCase isn't valid, please use lowerCase
+    description: 'Sends buttons in the chat',
+    options: [],
+  },
+})
+export default class PingCommand implements BaseSlashCommand {
+  public async run(interaction: CommandInteraction): Promise<void> {
+    // First, we will create two buttons, one "classic" and the other allowing access to a website
+    const button = new MessageButton({
+      label: My button,
+      emoji: '⚡',
+      customId: 'myButton',
+      style: 'SECONDARY', 👈 // Available 'PRIMARY', 'SECONDARY', 'SUCCESS', 'DANGER'
+    })
+
+    const buttonLink = new MessageButton({
+      label: 'Go to my website',
+      emoji: '🌐',
+      url: 'https://discord-factory.com'
+    })
+
+    // Then we create a "line" to which we attach our two buttons
+    const row = {
+      type: 'ACTION_ROW',
+      components: [button, buttonLink]  👈 // You cannot define more than 5 components per row
+    }
+
+    // Then we send the message an emperor or non-emperor message to the user containing our buttons
+    await interaction.reply({
+      components: [row]  👈 // You must create a "line" to which you will attach your buttons
+      ephemeral: true,  👈 // If you want to send the client-side or server-side message
+    })
+  }
+}`
+</script>

src/templates/modules/documentation/examples/SlashCommand.vue

@@ -0,0 +1,64 @@
+<template>
+  <Documentation title="Example of slash command">
+    <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>Basic reply with embed</h2>
+      <p>
+        Returns the instance of the Discord Client linked to the bot.
+      </p>
+      <CodeHighlight class="" :code="enum1" />
+
+      <p>
+        Returns the instance of the Discord Client linked to the bot.
+      </p>
+      <CodeHighlight class="" :code="slashCommandWithEmbed" />
+    </div>
+  </Documentation>
+</template>
+
+<script setup lang="ts">
+import Documentation from '../../../../components/Documentation.vue'
+import CodeHighlight from '../../../../components/CodeHighlight.vue'
+
+const enum1 = `
+export const GuildId = '583050048766476353'
+
+export enum Channel {
+  COMMAND = '583050048766476355'
+}
+`
+
+const slashCommandWithEmbed = `
+import { Colors } from '@discord-factory/colorize'
+import { BaseSlashCommand, SlashCommand } from '@discord-factory/core'
+import { CommandInteraction, TextChannel, MessageEmbed } from 'discord.js'
+import { GuildId, Channel, Role } from 'App/Utils/Settings'
+
+@SlashCommand({
+  scope: [GuildId], 👈 // Or 'GLOBAL' if you want to register globally
+  options: {
+    name: 'ping', 👈 // UpperCase isn't valid, please use lowerCase
+    description: 'Answer pong when the bot returns an answer',
+    options: [],
+  },
+})
+export default class PingCommand implements BaseSlashCommand {
+  public async run(interaction: CommandInteraction): Promise<void> {
+    // First, we design the structure of the embed
+    const embed = new MessageEmbed({
+      description: 'Pong !',
+      color: Colors.INVISIBLE,
+    })
+
+    // Then we send the message an emperor or non-emperor message to the user containing our embed
+    await interaction.reply({
+      embed: [embed]
+      ephemeral: true,  👈 // If you want to send the client-side or server-side message
+    })
+  }
+}`
+</script>

src/utils/Navigation.ts

@@ -37,4 +37,12 @@ export const documentation = [
       { label: 'Deployment', href: '/documentation/deployment', isMenu: false },
     ]
   },
+  {
+    label: 'Example',
+    isMenu: true,
+    child: [
+      { label: 'Slash Command', href: '/documentation/examples/deployment', isMenu: false },
+      { label: 'Buttons', href: '/documentation/examples/buttons', isMenu: false },
+    ]
+  },
 ]