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

---
 .../documentation/modules/Colorize.vue        | 44 ++++++++-----------
 1 file changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/templates/modules/documentation/modules/Colorize.vue b/src/templates/modules/documentation/modules/Colorize.vue
index cfd3c43..64b18ec 100644
--- a/src/templates/modules/documentation/modules/Colorize.vue
+++ b/src/templates/modules/documentation/modules/Colorize.vue
@@ -1,35 +1,27 @@
 <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>Colour palette</h2>
-      <ColorContainer />
-    </div>
+  <Documentation>
+    <template v-if="data">
+      <Markdown :source="data" />
+      <div class="space-y-5">
+        <h2>Colour palette</h2>
+        <ColorContainer />
+      </div>
+    </template>
+    <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 ColorContainer from '../../../../components/ColorContainer.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'
-
-const embed = new MessageEmbed({
-  description: 'Description of your embed',
-  color: Colors.INVISIBLE,
-})`
+const data = ref('')
+onMounted(async () => {
+  data.value = await useDocumentation(markdownEndpoint.COLORIZE)
+})
 </script>
\ No newline at end of file