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 }}
@@ -305,19 +306,19 @@
         window.allowedThemes = themes.map(str => str.trim())
       }
       window.langs = [
-        {value: 'en', label: 'English', display: 'EN'},
-        {value: 'de', label: 'Deutsch', display: 'DE'},
-        {value: 'es', label: 'Español', display: 'ES'},
-        {value: 'jp', label: '日本語', display: 'JP'},
-        {value: 'cn', label: '中文', display: 'CN'},
-        {value: 'fr', label: 'Français', display: 'FR'},
-        {value: 'it', label: 'Italiano', display: 'IT'},
-        {value: 'pi', label: 'Pirate', display: 'PI'},
-        {value: 'nl', label: 'Nederlands', display: 'NL'},
-        {value: 'we', label: 'Cymraeg', display: 'CY'},
-        {value: 'pl', label: 'Polski', display: 'PL'},
-        {value: 'pt', label: 'Português', display: 'PT'},
-        {value: 'br', label: 'Português', display: 'BR'}
+        { value: 'en', label: 'English', display: 'EN' },
+        { value: 'de', label: 'Deutsch', display: 'DE' },
+        { value: 'es', label: 'Español', display: 'ES' },
+        { value: 'jp', label: '日本語', display: 'JP' },
+        { value: 'cn', label: '中文', display: 'CN' },
+        { value: 'fr', label: 'Français', display: 'FR' },
+        { value: 'it', label: 'Italiano', display: 'IT' },
+        { value: 'pi', label: 'Pirate', display: 'PI' },
+        { value: 'nl', label: 'Nederlands', display: 'NL' },
+        { value: 'we', label: 'Cymraeg', display: 'CY' },
+        { value: 'pl', label: 'Polski', display: 'PL' },
+        { value: 'pt', label: 'Português', display: 'PT' },
+        { value: 'br', label: 'Português', display: 'BR' }
       ]
     </script>
     {% block scripts %}{% endblock %}