feat: History diff UI

client/js/components/history.vue

 <template lang="pug">
-  div {{ currentPath }}
+  .history
+    .history-title {{ currentPath }}
+    .history-info
+      .columns
+        .column
+          p Timestamp: #[strong 2017/07/02 5:19 PM]
+          p Author: #[strong Nicolas Giard]
+          p Commit: #[strong 379ff16957b2b7f978e02bfe50cd0cee182fcb8a]
+        .column.history-info-actions
+          .button-group
+            button.button.is-blue-grey() Compare With...
+            button.button.is-blue-grey() Revert to version
+          toggle.is-dark(v-model='sidebyside', desc='Side-by-side View')
+    .history-diff#diff
+
 </template>
 
 <script>
+let diffui
 export default {
   name: 'history',
   props: ['currentPath'],
   data() {
     return {
-      tree: []
+      diffui: {},
+      sidebyside: true
     }
   },
   methods: {
-    fetch(basePath) {
-      let self = this
-      self.$store.dispatch('startLoading')
-      self.$nextTick(() => {
-        socket.emit('treeFetch', { basePath }, (data) => {
-          if (self.tree.length > 0) {
-            let branch = self._.last(self.tree)
-            branch.hasChildren = true
-            self._.find(branch.pages, { _id: basePath }).isActive = true
-          }
-          self.tree.push({
-            hasChildren: false,
-            pages: data
-          })
-          self.$store.dispatch('stopLoading')
-        })
+    draw() {
+      diffui.draw('#diff', {
+        inputFormat: 'json',
+        outputFormat: 'side-by-side',
+        matching: 'words',
+        synchronisedScroll: true
       })
-    },
-    goto(entryPath) {
-      window.location.assign(siteRoot + '/' + entryPath)
     }
   },
   mounted() {
+    diffui = new Diff2HtmlUI({
+      diff: `diff --git a/wiki/prerequisites.md b/wiki/prerequisites.md
+index 89a10de..4bc0d66 100644
+--- a/wiki/prerequisites.md
++++ b/wiki/prerequisites.md
+@@ -13,7 +13,7 @@ Wiki.js runs on pretty much any platform that supports the requirements below. H
+
+ **CPU:** Runs perfectly fine on a single CPU core machine. However, to maximize Wiki.js background agent feature, using 2 cores is highly recommended.
+
+-**RAM:** Wiki.js uses between 100-200MB of RAM. While Wiki.js itself is able to run with only 512MB total RAM, you will not be able to install and compile the dependencies. You need a minimum of 768MB just to install the dependencies. Note that Windows machines may require more RAM.
++**RAM:** Wiki.js uses between 100-200MB of RAM. While Wiki.js itself is able to run with only 512MB total RAM, you will not be able to install all the dependencies. You need a minimum of 768MB just to install the dependencies. Note that Windows machines may require more RAM.
 
+ **Disk Space:** Wiki.js requires about 300MB of disk space when including the dependencies. The actual total space needed for your installation depends on the content and most importantly, the uploads. A wiki with only text content will only use a few megabytes, even for thousands of articles. However, if you start adding images, documents, videos, etc., you must plan required disk space accordingly.
+`
+    })
+    this.draw()
   }
 }
 </script>

client/scss/app.scss

@@ -19,6 +19,7 @@ $primary: 'indigo';
 @import 'components/form';
 @import 'components/grid';
 @import 'components/hero';
+@import 'components/history';
 @import 'components/markdown-content';
 @import 'components/modal';
 @import 'components/nav';
@@ -34,6 +35,7 @@ $primary: 'indigo';
 @import 'libs/jquery-contextmenu';
 @import 'node_modules/highlight.js/styles/atom-one-dark';
 @import 'node_modules/simplemde/dist/simplemde.min';
+@import 'node_modules/diff2html/dist/diff2html.min';
 
 @import 'components/editor';
 

client/scss/components/history.scss

+.history {
+
+  &-title {
+    border-top: 1px solid mc('blue-grey', '900');
+    padding: 8px;
+    color: mc('blue-grey', '800');
+    font-size: 13px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    background-color: mc('blue-grey', '100');
+    text-align: center;
+    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  }
+
+  &-info {
+    background-color: mc('blue-grey', '50');
+    padding: 5px 15px;
+
+    p {
+      padding: 5px 0;
+      font-size: 14px;
+      color: mc('blue-grey', '800');
+    }
+
+    &-actions {
+      display: flex;
+      flex-basis: initial;
+      flex-grow: initial;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      .button-group {
+        margin-bottom: 10px;
+      }
+    }
+
+  }
+
+  &-diff {
+    position: relative;
+
+    .d2h-wrapper {
+      position: absolute;
+      left: 0;
+      right: 0;
+    }
+
+  }
+
+}

client/scss/components/toggle.scss

@@ -14,7 +14,7 @@
     align-items: center;
     height: 24px;
     width: 50px;
-    background-color: mc('grey', '300');
+    background-color: mc('blue-grey', '200');
     border-radius: 12px;
     padding: 2px;
     transition: background-color .5s ease;
@@ -51,3 +51,17 @@
   }
 
 }
+
+/* THEME OVERRIDE - START */
+
+@each $color, $colorvalue in $material-colors {
+  .is-primary-#{$color} .toggle {
+    &.is-active {
+      .toggle-container {
+        background-color: mc($color, '500');
+      }
+    }
+  }
+}
+
+/* THEME OVERRIDE - END */

fuse.js

@@ -56,6 +56,14 @@ const SHIMS = {
   jquery: {
     source: 'node_modules/jquery/dist/jquery.js',
     exports: '$'
+  },
+  diff2html: {
+    source: 'node_modules/diff2html/dist/diff2html.min.js',
+    exports: 'Diff2Html'
+  },
+  diff2htmlui: {
+    source: 'node_modules/diff2html/dist/diff2html-ui.min.js',
+    exports: 'Diff2HtmlUI'
   }
 }