From 4fa7ed4e933b3f8efddfa85c9eb2edff3914d70e Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Sat, 24 Feb 2018 17:35:56 -0500
Subject: [PATCH] refactor: client structure + editor preview logic

---
 client/{js => }/app.js                        |  2 +-
 client/{js => }/components/editor-code.vue    | 24 ++++++++++++++++---
 .../components/editor-modal-access.vue        |  0
 .../components/editor-modal-properties.vue    |  0
 client/{js => }/components/editor.vue         |  0
 client/{js => }/components/login.vue          |  4 ++--
 client/{js => }/components/navigator.vue      |  0
 client/{js => }/components/setup.vue          |  0
 client/{js => }/components/toggle.vue         |  0
 client/{js => }/constants/graphql.js          |  0
 client/{js => }/constants/index.js            |  0
 client/{js => helpers}/compatibility.js       |  0
 client/{js => }/helpers/index.js              |  0
 client/index.js                               |  4 ++--
 client/{js => }/modules/boot.js               |  0
 client/{js => }/modules/localization.js       |  0
 client/{js => }/polyfills/array-from.js       |  0
 client/{js => }/store/index.js                |  0
 client/{js => }/store/modules/navigator.js    |  0
 19 files changed, 26 insertions(+), 8 deletions(-)
 rename client/{js => }/app.js (98%)
 rename client/{js => }/components/editor-code.vue (95%)
 rename client/{js => }/components/editor-modal-access.vue (100%)
 rename client/{js => }/components/editor-modal-properties.vue (100%)
 rename client/{js => }/components/editor.vue (100%)
 rename client/{js => }/components/login.vue (99%)
 rename client/{js => }/components/navigator.vue (100%)
 rename client/{js => }/components/setup.vue (100%)
 rename client/{js => }/components/toggle.vue (100%)
 rename client/{js => }/constants/graphql.js (100%)
 rename client/{js => }/constants/index.js (100%)
 rename client/{js => helpers}/compatibility.js (100%)
 rename client/{js => }/helpers/index.js (100%)
 rename client/{js => }/modules/boot.js (100%)
 rename client/{js => }/modules/localization.js (100%)
 rename client/{js => }/polyfills/array-from.js (100%)
 rename client/{js => }/store/index.js (100%)
 rename client/{js => }/store/modules/navigator.js (100%)

diff --git a/client/js/app.js b/client/app.js
similarity index 98%
rename from client/js/app.js
rename to client/app.js
index 6a34f9d8..ad2ac32e 100644
--- a/client/js/app.js
+++ b/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)
   })
 }
diff --git a/client/js/components/editor-code.vue b/client/components/editor-code.vue
similarity index 95%
rename from client/js/components/editor-code.vue
rename to client/components/editor-code.vue
index cb6a6ae7..382bf6d2 100644
--- a/client/js/components/editor-code.vue
+++ b/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>
diff --git a/client/js/components/editor-modal-access.vue b/client/components/editor-modal-access.vue
similarity index 100%
rename from client/js/components/editor-modal-access.vue
rename to client/components/editor-modal-access.vue
diff --git a/client/js/components/editor-modal-properties.vue b/client/components/editor-modal-properties.vue
similarity index 100%
rename from client/js/components/editor-modal-properties.vue
rename to client/components/editor-modal-properties.vue
diff --git a/client/js/components/editor.vue b/client/components/editor.vue
similarity index 100%
rename from client/js/components/editor.vue
rename to client/components/editor.vue
diff --git a/client/js/components/login.vue b/client/components/login.vue
similarity index 99%
rename from client/js/components/login.vue
rename to client/components/login.vue
index 71f38a70..468eadec 100644
--- a/client/js/components/login.vue
+++ b/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;
diff --git a/client/js/components/navigator.vue b/client/components/navigator.vue
similarity index 100%
rename from client/js/components/navigator.vue
rename to client/components/navigator.vue
diff --git a/client/js/components/setup.vue b/client/components/setup.vue
similarity index 100%
rename from client/js/components/setup.vue
rename to client/components/setup.vue
diff --git a/client/js/components/toggle.vue b/client/components/toggle.vue
similarity index 100%
rename from client/js/components/toggle.vue
rename to client/components/toggle.vue
diff --git a/client/js/constants/graphql.js b/client/constants/graphql.js
similarity index 100%
rename from client/js/constants/graphql.js
rename to client/constants/graphql.js
diff --git a/client/js/constants/index.js b/client/constants/index.js
similarity index 100%
rename from client/js/constants/index.js
rename to client/constants/index.js
diff --git a/client/js/compatibility.js b/client/helpers/compatibility.js
similarity index 100%
rename from client/js/compatibility.js
rename to client/helpers/compatibility.js
diff --git a/client/js/helpers/index.js b/client/helpers/index.js
similarity index 100%
rename from client/js/helpers/index.js
rename to client/helpers/index.js
diff --git a/client/index.js b/client/index.js
index 26305810..c857512e 100644
--- a/client/index.js
+++ b/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')
diff --git a/client/js/modules/boot.js b/client/modules/boot.js
similarity index 100%
rename from client/js/modules/boot.js
rename to client/modules/boot.js
diff --git a/client/js/modules/localization.js b/client/modules/localization.js
similarity index 100%
rename from client/js/modules/localization.js
rename to client/modules/localization.js
diff --git a/client/js/polyfills/array-from.js b/client/polyfills/array-from.js
similarity index 100%
rename from client/js/polyfills/array-from.js
rename to client/polyfills/array-from.js
diff --git a/client/js/store/index.js b/client/store/index.js
similarity index 100%
rename from client/js/store/index.js
rename to client/store/index.js
diff --git a/client/js/store/modules/navigator.js b/client/store/modules/navigator.js
similarity index 100%
rename from client/js/store/modules/navigator.js
rename to client/store/modules/navigator.js