Add marked package in static libs

client/components/modals/changelog/ViewModal.vue

@@ -5,7 +5,7 @@
         <p class="font-book text-3xl text-white truncate">Changelog</p>
       </div>
     </template>
-    <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+    <div class="px-8 py-6 w-full rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-y-scroll" style="max-height: 80vh">
       <p class="text-xl font-bold pb-4">Changelog v{{ currentVersionNumber }}</p>
       <div class="custom-text" v-html="compiledMarkedown" />
     </div>
@@ -13,12 +13,13 @@
 </template>
 
 <script>
-import { marked } from "marked";
+import { marked } from '@/static/libs/marked/index.js'
+
 export default {
   props: {
     value: Boolean,
     changelog: String,
-    currentVersion: String,
+    currentVersion: String
   },
   watch: {
     show: {
@@ -40,18 +41,19 @@ export default {
       }
     },
     compiledMarkedown() {
-      return marked.parse(this.changelog, {gfm: true, breaks: true})
+      return marked.parse(this.changelog, { gfm: true, breaks: true })
     },
     currentVersionNumber() {
       return this.currentVersion
     }
   },
   methods: {
-    init() {},
+    init() {}
   },
   mounted() {}
 }
 </script>
+
 <style scoped>
 /*
 1. we need to manually define styles to apply to the parsed markdown elements,
@@ -60,12 +62,12 @@ since we don't have access to the actual elements in this component
 2. v-deep allows these to take effect on the content passed in to the v-html in the div above
 */
 .custom-text ::v-deep > h2 {
-  @apply text-lg font-bold
+  @apply text-lg font-bold;
 }
 .custom-text ::v-deep > h3 {
-  @apply text-lg font-bold
+  @apply text-lg font-bold;
 }
 .custom-text ::v-deep > ul {
-  @apply list-disc list-inside pb-4
+  @apply list-disc list-inside pb-4;
 }
 </style>