refactor: client structure + editor preview logic

client/app.js

@@ -137,7 +137,7 @@ let bootstrap = () => {
   // Load Icons
   // ====================================
 
-  import(/* webpackChunkName: "icons" */ '../svg/icons.svg').then(icons => {
+  import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => {
     document.body.insertAdjacentHTML('beforeend', icons)
   })
 }

client/components/editor-code.vue

@@ -62,9 +62,10 @@
     .editor-code-main
       .editor-code-editor
         .editor-code-editor-title Editor
-        codemirror(ref='cm', v-model='code', :options='cmOptions', @ready="onCmReady")
+        codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
       .editor-code-preview
         .editor-code-preview-title Preview
+        .editor-code-preview-content(v-html='previewHTML')
       v-speed-dial(v-model='fabInsertMenu', :open-on-hover='true', direction='top', transition='slide-y-reverse-transition', :fixed='true', :right='!isMobile', :left='isMobile', :bottom='true')
         v-btn(color='blue', fab, dark, v-model='fabInsertMenu', slot='activator')
           v-icon add_circle
@@ -87,6 +88,8 @@
 </template>
 
 <script>
+import _ from 'lodash'
+
 import { codemirror } from 'vue-codemirror'
 import 'codemirror/lib/codemirror.css'
 
@@ -106,6 +109,16 @@ import 'codemirror/addon/search/matchesonscrollbar.js'
 import 'codemirror/addon/search/searchcursor.js'
 import 'codemirror/addon/search/match-highlighter.js'
 
+// Markdown-it
+import MarkdownIt from 'markdown-it'
+
+const md = new MarkdownIt({
+  html: true,
+  breaks: true,
+  linkify: true,
+  typography: true
+})
+
 export default {
   components: {
     codemirror
@@ -127,7 +140,8 @@ export default {
           annotateScrollbar: true
         },
         viewportMargin: 50
-      }
+      },
+      previewHTML: ''
     }
   },
   computed: {
@@ -156,7 +170,11 @@ export default {
           self.$parent.save()
         }
       })
-    }
+      this.onCmInput(this.code)
+    },
+    onCmInput: _.debounce(function (newContent) {
+      this.previewHTML = md.render(newContent)
+    }, 500)
   }
 }
 </script>

client/components/login.vue

@@ -199,7 +199,7 @@ export default {
 <style lang="scss">
   .login {
     background-color: mc('blue', '800');
-    background-image: url('../../static/svg/login-bg-motif.svg');
+    background-image: url('../static/svg/login-bg-motif.svg');
     background-repeat: repeat;
     background-size: 200px;
     width: 100%;
@@ -221,7 +221,7 @@ export default {
     &::before {
       content: '';
       position: absolute;
-      background-image: url('../../static/svg/login-bg.svg');
+      background-image: url('../static/svg/login-bg.svg');
       background-position: center bottom;
       background-size: cover;
       top: 0;

client/index.js

@@ -2,6 +2,6 @@
 
 require('vuetify/src/stylus/main.styl')
 require('./scss/app.scss')
-require('./js/compatibility.js')
+require('./helpers/compatibility.js')
 require('offline-plugin/runtime').install()
-require('./js/app.js')
+require('./app.js')