add new changelog modal

client/components/modals/changelog/ViewModal.vue

@@ -0,0 +1,63 @@
+<template>
+  <modals-modal v-model="show" name="changelog" :width="800" :height="'unset'">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <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">
+      <p class="text-xl font-bold">Changelog v{{ currentVersionNumber }}</p>
+      <div class="custom-text" v-html="compiledMarkedown" />
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+import { marked } from "marked";
+export default {
+  props: {
+    value: Boolean,
+    changelog: String,
+    currentVersion: String,
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    compiledMarkedown() {
+      return marked.parse(this.changelog, {gfm: true, breaks: true})
+    },
+    currentVersionNumber() {
+      return this.currentVersion
+    }
+  },
+  methods: {
+    init() {},
+  },
+  mounted() {}
+}
+</script>
+<style scoped>
+.custom-text ::v-deep > h3 {
+  @apply text-lg font-bold pt-4
+}
+
+.custom-text ::v-deep > ul {
+  @apply list-disc list-inside
+}
+</style>

package-lock.json

@@ -13,6 +13,7 @@
         "express": "^4.17.1",
         "graceful-fs": "^4.2.10",
         "htmlparser2": "^8.0.1",
+        "marked": "^4.0.17",
         "socket.io": "^4.4.1",
         "xml2js": "^0.4.23"
       },
@@ -530,6 +531,17 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/marked": {
+      "version": "4.0.17",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.17.tgz",
+      "integrity": "sha512-Wfk0ATOK5iPxM4ptrORkFemqroz0ZDxp5MWfYA7H/F+wO17NRWV5Ypxi6p3g2Xmw2bKeiYOl6oVnLHKxBA0VhA==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -1317,6 +1329,11 @@
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
     },
+    "marked": {
+      "version": "4.0.17",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.17.tgz",
+      "integrity": "sha512-Wfk0ATOK5iPxM4ptrORkFemqroz0ZDxp5MWfYA7H/F+wO17NRWV5Ypxi6p3g2Xmw2bKeiYOl6oVnLHKxBA0VhA=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",

package.json

@@ -34,6 +34,7 @@
     "express": "^4.17.1",
     "graceful-fs": "^4.2.10",
     "htmlparser2": "^8.0.1",
+    "marked": "^4.0.17",
     "socket.io": "^4.4.1",
     "xml2js": "^0.4.23"
   }