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

---
 .../documentation/examples/Buttons.vue        | 67 +++----------------
 1 file changed, 11 insertions(+), 56 deletions(-)

diff --git a/src/templates/modules/documentation/examples/Buttons.vue b/src/templates/modules/documentation/examples/Buttons.vue
index 128cc8e..06f1663 100644
--- a/src/templates/modules/documentation/examples/Buttons.vue
+++ b/src/templates/modules/documentation/examples/Buttons.vue
@@ -1,65 +1,20 @@
 <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>
+    <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 Spinner from '../../../../components/Spinner.vue'
+import useDocumentation from '../../../../services/Documentation'
+import { markdownEndpoint } from '../../../../utils/Navigation'
+import { onMounted, ref } from '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: [],
-  },
+const data = ref('')
+onMounted(async () => {
+  data.value = await useDocumentation(markdownEndpoint.BUTTONS)
 })
-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>
\ No newline at end of file