markdown support for cdb description

minetest-go · Aug 9, 2024 · 4e77b01 · 4e77b01
1 parent 17b9e26
commit 4e77b01
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 2 deletions.
diff --git a/public/embed.go b/public/embed.go
@@ -27,6 +27,8 @@ import (
 //go:embed node_modules/codemirror/mode/xml/xml.js
 //go:embed node_modules/codemirror/mode/css/css.js
 //go:embed node_modules/codemirror/mode/toml/toml.js
+//go:embed node_modules/marked/lib/marked.umd.js
+//go:embed node_modules/dompurify/dist/purify.min.js
 var Webapp embed.FS
 
 const DefaultCss = "node_modules/bootstrap/dist/css/bootstrap.min.css"

diff --git a/public/eslint.config.mjs b/public/eslint.config.mjs
@@ -1,7 +1,7 @@
 import globals from "globals";
 import pluginJs from "@eslint/js";
 import pluginVue from "eslint-plugin-vue";
-import stylisticJs from '@stylistic/eslint-plugin-js'
+import stylisticJs from '@stylistic/eslint-plugin-js';
 
 export default [
   {
@@ -18,6 +18,8 @@ export default [
         CodeMirror: "readonly",
         Chart: "readonly",
         VueDatePicker: "readonly",
+        DOMPurify: "readonly",
+        marked: "readonly",
         ...globals.browser
       }
     }

diff --git a/public/index.html b/public/index.html
@@ -41,6 +41,8 @@
 		<script src="node_modules/vue/dist/vue.global.prod.js"></script>
 		<script src="node_modules/vue-router/dist/vue-router.global.prod.js"></script>
 		{{end}}
+		<script src="node_modules/marked/lib/marked.umd.js"></script>
+		<script src="node_modules/dompurify/dist/purify.min.js"></script>
 		<script src="node_modules/@vuepic/vue-datepicker/dist/vue-datepicker.iife.js"></script>
 		<script src="node_modules/chart.js/dist/chart.umd.js"></script>
 		<script src="node_modules/codemirror/lib/codemirror.js"></script>

diff --git a/public/js/components/pages/cdb/Detail.js b/public/js/components/pages/cdb/Detail.js
@@ -24,6 +24,11 @@ export default {
         get_dependencies(this.author, this.name)
         .then(d => this.deps = d[`${this.author}/${this.name}`]);
     },
+    methods: {
+        markdown: function(txt) {
+            return DOMPurify.sanitize(marked.parse(txt));
+        }
+    },
     computed: {
         thumbnails: function() {
             return this.pkg.screenshots.map(s => s.replaceAll("/uploads/", "/thumbnails/2/"));
@@ -54,7 +59,12 @@ export default {
                         <span v-for="tag in pkg.tags" style="margin: 2px;" class="badge bg-success">{{tag}}</span>
                         <hr>
                         <h4>Description</h4>
-                        <pre>{{pkg.long_description || pkg.short_description}}</pre>
+                        <div v-if="pkg.long_description">
+                            <div v-html="markdown(pkg.long_description)"></div>
+                        </div>
+                        <div v-else>
+                            <pre>{{pkg.short_description}}</pre>
+                        </div>
                         <h4>Dependencies</h4>
                         <ul v-if="deps">
                             <li v-for="dep in deps">

diff --git a/public/package-lock.json b/public/package-lock.json
diff --git a/public/package.json b/public/package.json
@@ -18,6 +18,8 @@
     "bootswatch": "^5.3.1",
     "chart.js": "^4.0.1",
     "codemirror": "^5.65.15",
+    "dompurify": "^3.1.6",
+    "marked": "^14.0.0",
     "vue": "^3.2.33",
     "vue-router": "^4.0.14"
   },