From b7fbcaab4be6ba1486905b7acf5e602b3bde2f2e Mon Sep 17 00:00:00 2001
From: Freeze455 <baptiste.parmantier.pro@gmail.com>
Date: Fri, 3 Sep 2021 17:29:22 +0200
Subject: [PATCH] :sparkles: Implement slash command

---
 src/templates/modules/documentation/Routes.ts |  2 +
 .../documentation/base/SlashCommand.vue       | 81 +++++++++++++++++++
 src/utils/Navigation.ts                       |  1 +
 3 files changed, 84 insertions(+)
 create mode 100644 src/templates/modules/documentation/base/SlashCommand.vue

diff --git a/src/templates/modules/documentation/Routes.ts b/src/templates/modules/documentation/Routes.ts
index fa37570..8ba4095 100644
--- a/src/templates/modules/documentation/Routes.ts
+++ b/src/templates/modules/documentation/Routes.ts
@@ -4,6 +4,7 @@ import Starting from './base/Starting.vue'
 import Environment from './base/Environment.vue'
 import Structure from './base/Structure.vue'
 import Command from './base/Command.vue'
+import SlashCommand from './base/SlashCommand.vue'
 import Event from './base/Event.vue'
 import Middleware from './base/Middleware.vue'
 import Hook from './base/Hook.vue'
@@ -15,6 +16,7 @@ const routes: RouteRecordRaw[] = [
   { path: '/documentation/environment', component: Environment },
   { path: '/documentation/structure', component: Structure },
   { path: '/documentation/commands', component: Command },
+  { path: '/documentation/slash-commands', component: SlashCommand },
   { path: '/documentation/events', component: Event },
   { path: '/documentation/middlewares', component: Middleware },
   { path: '/documentation/hooks', component: Hook },
diff --git a/src/templates/modules/documentation/base/SlashCommand.vue b/src/templates/modules/documentation/base/SlashCommand.vue
new file mode 100644
index 0000000..f6de070
--- /dev/null
+++ b/src/templates/modules/documentation/base/SlashCommand.vue
@@ -0,0 +1,81 @@
+<template>
+  <Documentation title="Slash commands">
+    <p>
+      The version 13 update of discord.js marks the arrival of Slash Commands.<br>This new feature provides real support for developers who want to create commands on their bots.
+
+      It was announced by Discord that they will gradually replace the old command system that we all knew based on the presence of a prefix as the first character of a message with this new suppo
+    </p>
+
+    <div class="space-y-5">
+      <h2>Create new slash command from CLI</h2>
+      <p>
+        Open a new terminal in your project and write the following command :
+      </p>
+      <CodeHighlight class="w-min" code="$ factory make:file" />
+      <AlertInfo>
+        <template v-slot:label>
+          Info
+        </template>
+        <template v-slot:message>
+          Choose to create a command and then answer the questions you will be asked. It is important to note that when you define the file name, you can "place" the file in folders by specifying a path directory in addition to the file name as in the following example.
+        </template>
+      </AlertInfo>
+    </div>
+
+    <div class="space-y-5">
+      <h2>Default command file</h2>
+      <p>
+        A file will be created in the specified location otherwise in the root of your project with the following structure :
+      </p>
+      <CodeHighlight class="w-min" :code="file" />
+    </div>
+    <div class="space-y-5">
+      <h2>Decorator options</h2>
+      <p>
+        A file will be created in the specified location otherwise in the root of your project with the following structure :
+      </p>
+      <CodeHighlight class="w-min" :code="decorator" />
+      <p>
+        See more about ApplicationCommandOption <LinkExternal url="https://discord.js.org/#/docs/main/stable/typedef/ApplicationCommandOption">here</LinkExternal>
+      </p>
+    </div>
+  </Documentation>
+</template>
+
+<script setup lang="ts">
+import Documentation from '../../../../components/Documentation.vue'
+import CodeHighlight from '../../../../components/CodeHighlight.vue'
+import Divider from '../../../../components/Divider.vue'
+import LinkExternal from '../../../../components/LinkExternal.vue'
+import AlertInfo from '../../../../components/AlertInfo.vue'
+import Hightlight from '../../../../components/Hightlight.vue'
+
+const file = `
+import { BaseSlashCommand, SlashCommand } from '@discord-factory/core'
+import { CommandInteraction } from 'discord.js'
+
+@SlashCommand({
+  scope: ['your guild id'], 👈 // Or 'GLOBAL' if you want to register globally
+  options: {
+    name: 'foo', 👈 // UpperCase isn't valid, please use lowerCase
+    description: 'Your foo command description',
+    options: [],
+  },
+})
+export default class FooCommand implements BaseSlashCommand {
+  public async run(interaction: CommandInteraction): Promise<void> {
+    // Your code here
+  }
+}`
+
+const decorator = `
+export interface SlashCommandInterface {
+  scope: 'GLOBAL' | Snowflake[], 👈 // Or 'GLOBAL' if you want to register globally
+  roles: Snowflake[],
+  options: {
+    name: string, 👈 // UpperCase isn't valid, please use lowerCase
+    description: string,
+    options: ApplicationCommandOption[],
+  }
+}`
+</script>
diff --git a/src/utils/Navigation.ts b/src/utils/Navigation.ts
index c4952db..ca72c4e 100644
--- a/src/utils/Navigation.ts
+++ b/src/utils/Navigation.ts
@@ -23,6 +23,7 @@ export const documentation = [
       { label: 'Environment', href: '/documentation/environment', isMenu: false },
       { label: 'Structure', href: '/documentation/structure', isMenu: false },
       { label: 'Commands', href: '/documentation/commands', isMenu: false },
+      { label: 'Slash Commands', href: '/documentation/slash-commands', isMenu: false },
       { label: 'Events', href: '/documentation/events', isMenu: false },
       { label: 'Middlewares', href: '/documentation/middlewares', isMenu: false },
       { label: 'Hooks', href: '/documentation/hooks', isMenu: false },