Add Markdown capability globally (#1965)

* add markdown capability globally

* add markdown to site description

* add showdown to package.json

remove it from vendor.json, its bundled

* formatting

* io

* Update lnbits/core/templates/core/index.html

---------

Co-authored-by: dni ⚡ <office@dnilabs.com>

lnbits/core/static/js/index.js

@@ -5,11 +5,17 @@ new Vue({
     return {
       disclaimerDialog: {
         show: false,
-        data: {}
+        data: {},
+        description: ''
       },
       walletName: ''
     }
   },
+  computed: {
+    formatDescription() {
+      return LNbits.utils.convertMarkdown(this.description)
+    }
+  },
   methods: {
     createWallet: function () {
       LNbits.api.createAccount(this.walletName).then(res => {
@@ -23,5 +29,8 @@ new Vue({
         icon: null
       })
     }
+  },
+  created() {
+    this.description = SITE_DESCRIPTION
   }
 })

lnbits/core/static/js/service-worker.js

@@ -1,6 +1,6 @@
 // update cache version every time there is a new deployment
 // so the service worker reinitializes the cache
-const CACHE_VERSION = 56
+const CACHE_VERSION = 58
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
 
 const getApiKey = request => {

lnbits/core/templates/admin/_tab_theme.html

@@ -31,7 +31,7 @@
           v-model="formData.lnbits_site_description"
           filled
           type="textarea"
-          hint="Use plain text or raw HTML"
+          hint="Use plain text, Markdown, or raw HTML"
         />
       </div>
       <br />

lnbits/core/templates/core/index.html

@@ -61,7 +61,9 @@
             ></q-btn>
           </div>
         </div>
-        <p v-else>{{SITE_DESCRIPTION | safe}}</p>
+        <div v-else>
+          <div v-html="formatDescription"></div>
+        </div>
       </q-card-section>
     </q-card>
   </div>

lnbits/static/js/base.js

@@ -357,6 +357,12 @@ window.LNbits = {
           icon: null
         })
       }
+    },
+    convertMarkdown(text) {
+      const converter = new showdown.Converter()
+      converter.setFlavor('github')
+      converter.setOption('simpleLineBreaks', true)
+      return converter.makeHtml(text)
     }
   }
 }

lnbits/static/vendor.json

@@ -12,6 +12,7 @@
     "/static/vendor/quasar.umd.js",
     "/static/vendor/Chart.bundle.js",
     "/static/vendor/vue-i18n.js",
+    "/static/vendor/showdown.js",
     "/static/i18n/i18n.js",
     "/static/i18n/de.js",
     "/static/i18n/en.js",

lnbits/templates/base.html

@@ -298,6 +298,7 @@
     {% endfor %}
     <!---->
     <script type="text/javascript">
+      const SITE_DESCRIPTION = {{ SITE_DESCRIPTION | tojson}}
       const themes = {{ LNBITS_THEME_OPTIONS | tojson }}
       const LNBITS_DENOMINATION = {{ LNBITS_DENOMINATION | tojson }}
       const LNBITS_VERSION = {{ LNBITS_VERSION | tojson }}

package-lock.json

@@ -11,6 +11,7 @@
         "chart.js": "2.9",
         "moment": "^2.29.4",
         "quasar": "1.13.2",
+        "showdown": "^2.1.0",
         "underscore": "^1.13.6",
         "vue": "2.6.12",
         "vue-i18n": "^8.28.2",
@@ -1059,6 +1060,29 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "license": "ISC"
     },
+    "node_modules/showdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/showdown/-/showdown-2.1.0.tgz",
+      "integrity": "sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==",
+      "dependencies": {
+        "commander": "^9.0.0"
+      },
+      "bin": {
+        "showdown": "bin/showdown.js"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://www.paypal.me/tiviesantos"
+      }
+    },
+    "node_modules/showdown/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
     "node_modules/simport": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/simport/-/simport-1.2.0.tgz",

package.json

@@ -22,6 +22,7 @@
     "chart.js": "2.9",
     "moment": "^2.29.4",
     "quasar": "1.13.2",
+    "showdown": "^2.1.0",
     "underscore": "^1.13.6",
     "vue": "2.6.12",
     "vue-i18n": "^8.28.2",
@@ -43,7 +44,8 @@
     "./node_modules/chart.js/dist/Chart.bundle.js",
     "./node_modules/quasar/dist/quasar.css",
     "./node_modules/chart.js/dist/Chart.css",
-    "./node_modules/vue-i18n/dist/vue-i18n.js"
+    "./node_modules/vue-i18n/dist/vue-i18n.js",
+    "./node_modules/showdown/dist/showdown.js"
   ],
   "bundle": {
     "js": [
@@ -59,6 +61,7 @@
       "/static/vendor/quasar.umd.js",
       "/static/vendor/Chart.bundle.js",
       "/static/vendor/vue-i18n.js",
+      "/static/vendor/showdown.js",
       "/static/i18n/i18n.js",
       "/static/i18n/de.js",
       "/static/i18n/en.js",