fix(my): add markdown text (#280)

Author: cybercoder-naj

app/pages/category/[slug].vue

@@ -9,15 +9,16 @@
 
     <div class="flex flex-col">
       <span class="bg-blue-ic self-start px-4 py-3 font-bold">Description</span>
-      <div class="max-w-[50rem] border border-white p-4">
-        {{ data?.shortDescription }}
-      </div>
+      <div
+        class="mardown max-w-[50rem] border border-white p-4"
+        v-html="description"></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Category } from '#shared/types';
+import { marked } from 'marked';
 
 // Get the slug from URL and fetch the category details
 const route = useRoute();
@@ -38,6 +39,11 @@ if (error.value) {
   });
 }
 
+const description = ref<string>('');
+onMounted(async () => {
+  description.value = await marked(data.value?.shortDescription || '');
+});
+
 // NOTE: the following is decrepecated as per Directors' decision.
 // shortDescription is the only available description for now.
 

app/pages/index.vue

@@ -36,7 +36,7 @@ useHead({
 </script>
 
 <template>
-  <div class="flex flex-col gap-5">
+  <div class="flex flex-col gap-5 pb-10">
     <div v-if="store.profile?.role !== 'hacker'">
       <DashboardButton v-model="showAdminButtons" background="bg-red-ic">
         Admin Panels

bun.lock

@@ -23,6 +23,7 @@
         "hono": "^4.5.5",
         "hono-passkit-webservice": "^1.0.2",
         "lucia": "^3.2.0",
+        "marked": "^15.0.6",
         "matter-js": "^0.20.0",
         "nodemailer": "^6.10.0",
         "nunjucks": "^3.2.4",
@@ -1340,6 +1341,8 @@
 
     "mark.js": ["[email protected]", "", {}, "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ=="],
 
+    "marked": ["[email protected]", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-Y07CUOE+HQXbVDCGl3LXggqJDbXDP2pArc2C1N1RRMN0ONiShoSsIInMd5Gsxupe7fKLpgimTV+HOJ9r7bA+pg=="],
+
     "marky": ["[email protected]", "", {}, "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q=="],
 
     "math-intrinsics": ["[email protected]", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],

package.json

@@ -70,6 +70,7 @@
     "hono": "^4.5.5",
     "hono-passkit-webservice": "^1.0.2",
     "lucia": "^3.2.0",
+    "marked": "^15.0.6",
     "matter-js": "^0.20.0",
     "nodemailer": "^6.10.0",
     "nunjucks": "^3.2.4",

packages/ui25/assets/css/tailwind.css

@@ -28,3 +28,7 @@
     @apply -right-4;
   }
 }
+
+.markdown ul {
+  @apply ml-4 list-disc;
+}