From 4e10d64554fdb3fe2097e4080b521bed690a5c5f Mon Sep 17 00:00:00 2001
From: Freeze455 <baptiste.parmantier.pro@gmail.com>
Date: Wed, 6 Oct 2021 18:08:53 +0200
Subject: [PATCH] :pencil: Write documentation

---
 .../modules/documentation/base/Command.vue    | 84 +++----------------
 1 file changed, 13 insertions(+), 71 deletions(-)

diff --git a/src/templates/modules/documentation/base/Command.vue b/src/templates/modules/documentation/base/Command.vue
index 67d845b..f73b2d9 100644
--- a/src/templates/modules/documentation/base/Command.vue
+++ b/src/templates/modules/documentation/base/Command.vue
@@ -1,78 +1,20 @@
 <template>
-  <Documentation title="Commands">
-    <p>
-      The design of a discord bot spends most of the time developing commands.
-      The purpose of these commands is to execute certain actions by the moderation or the community. Creating a command with the framework is very simple.
-    </p>
-
-    <div class="space-y-5">
-      <h2>Create new 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" />
-    </div>
-
-    <div class="space-y-5">
-      <h2>Operation of the controls</h2>
-      <p>
-        Open a new terminal in your project and write the following command :
-      </p>
-      <img class="" src="../../../../assets/application-command.svg" alt="Workflow" />
-    </div>
+  <Documentation>
+    <Markdown v-if="data" :source="data" />
+    <Spinner v-else />
   </Documentation>
 </template>
 
 <script setup lang="ts">
+import Markdown from '../../../../components/Markdown.vue'
 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'
-const file = `
-import { BaseCommand, Command } from '@discord-factory/core'
-import { Message } from 'discord.js'
+import Spinner from '../../../../components/Spinner.vue'
+import useDocumentation from '../../../../services/Documentation'
+import { markdownEndpoint } from '../../../../utils/Navigation'
+import { onMounted, ref } from 'vue'
 
-@Command({ label: 'FooCommand command', description: 'FooCommand description', tag: 'foo' })
-export default class FooCommand implements BaseCommand {
-  public async run(message: Message, args: string[]): Promise<void> {
-    // Your code here
-  }
-}`
-
-const decorator = `
-export interface CommandInterface {
-  label: string
-  description: string
-  tag: string
-  alias?: string[]
-  usages?: string[]
-  roles?: string[]
-  permissions?: PermissionResolvable[]
-  middlewares?: string[]
-}`
-</script>
+const data = ref('')
+onMounted(async () => {
+  data.value = await useDocumentation(markdownEndpoint.COMMAND)
+})
+</script>
\ No newline at end of file