feat: history browse diffs

client/js/components/editor-codeblock.vue

@@ -94,7 +94,7 @@ export default {
             })
           }
         }).catch(err => {
-          his.$store.dispatch('alert', {
+          this.$store.dispatch('alert', {
             style: 'red',
             icon: 'square-cross',
             msg: 'Error: ' + err.body.msg

client/js/components/history.vue

@@ -5,10 +5,10 @@
       .column.is-narrow.is-hidden-touch.sidebar
         aside.stickyscroll
           .sidebar-label
-            span {{ $t('sidebar.pastversions') }}
+            span {{ $t('history.pastversions') }}
           ul.sidebar-menu
             li(v-for='item in versions')
-              a.is-multiline(:title='item.dateFull')
+              a.is-multiline(:title='item.dateFull', @click='changeCommit(item)', :class='{ "is-active": item.commit === current.commit }')
                 span {{ item.dateCalendar }}
                 span.is-small {{ item.commitAbbr }}
 
@@ -20,37 +20,39 @@
               .column.history-info-meta
                 p
                   i.nc-icon-outline.ui-1_calendar-check-62
-                  span Timestamp: #[strong 2017/07/02 5:19 PM]
+                  span {{ $t('history.timestamp') }}: #[strong {{ current.dateFull }}]
                 p
                   i.nc-icon-outline.i.nc-icon-outline.users_man-23
-                  span Author: #[strong Nicolas Giard]
+                  span {{ $t('history.author') }}: #[strong {{ current.name }} <{{ current.email }}>]
                 p
                   i.nc-icon-outline.media-1_flash-21
-                  span Commit: #[strong 379ff16957b2b7f978e02bfe50cd0cee182fcb8a]
+                  span {{ $t('history.commit') }}: #[strong {{ current.commit }}]
               .column.history-info-actions
                 .button-group
                   button.button.is-blue-grey()
                     i.nc-icon-outline.design_path-intersect
-                    span Compare With...
+                    span {{ $t('history.comparewith') }}
                   button.button.is-blue-grey()
                     i.nc-icon-outline.ui-1_eye-17
-                    span View
+                    span {{ $t('history.view') }}
                   button.button.is-blue-grey()
                     i.nc-icon-outline.arrows-4_undo-29
-                    span Revert to version
-                toggle.is-dark(v-model='sidebyside', desc='Side-by-side View')
+                    span {{ $t('history.reverttoversion') }}
+                toggle.is-dark(v-model='sidebyside', :desc='$t("history.sidebyside")')
           .history-diff#diff
 
 </template>
 
 <script>
 let diffui
+let diffuiIsReady = false
 export default {
   name: 'history',
   props: ['currentPath', 'historyData'],
   data() {
     return {
       versions: [],
+      current: {},
       diffui: {},
       sidebyside: true
     }
@@ -62,32 +64,41 @@ export default {
   },
   methods: {
     draw() {
-      diffui.draw('#diff', {
-        inputFormat: 'json',
-        outputFormat: this.sidebyside ? 'side-by-side' : 'line-by-line',
-        matching: 'words',
-        synchronisedScroll: true
+      if (diffuiIsReady) {
+        diffui.draw('#diff', {
+          inputFormat: 'diff',
+          outputFormat: this.sidebyside ? 'side-by-side' : 'line-by-line',
+          matching: 'words',
+          synchronisedScroll: true
+        })
+      }
+    },
+    changeCommit(cm) {
+      let self = this
+      diffuiIsReady = false
+      self.current = cm
+      self.$http.post(siteRoot + '/hist', {
+        path: self.currentPath,
+        commit: cm.commit
+      }).then(resp => {
+        return resp.json()
+      }).then(resp => {
+        diffui = new Diff2HtmlUI({ diff: resp.diff })
+        diffuiIsReady = true
+        self.draw()
+      }).catch(err => {
+        console.log(err)
+        self.$store.dispatch('alert', {
+          style: 'red',
+          icon: 'square-cross',
+          msg: 'Error: ' + err.body.error
+        })
       })
     }
   },
   mounted() {
     this.versions = JSON.parse(this.historyData)
-    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()
+    this.changeCommit(this.versions[0])
   }
 }
 </script>

client/scss/components/sidebar.scss

@@ -46,6 +46,7 @@
 					font-size: 14px;
 					transition: all .4s ease;
 					line-height: 14px;
+          cursor: pointer;
 
           &.is-multiline {
             flex-wrap: wrap;

server/controllers/pages.js

@@ -1,6 +1,6 @@
 'use strict'
 
-/* global entries, lang, winston */
+/* global entries, git, lang, winston */
 
 const express = require('express')
 const router = express.Router()
@@ -202,6 +202,25 @@ router.get('/hist/*', (req, res, next) => {
   })
 })
 
+/**
+ * View history of a document
+ */
+router.post('/hist', (req, res, next) => {
+  let commit = req.body.commit
+  let safePath = entryHelper.parsePath(req.body.path)
+
+  if (!/^[a-f0-9]{40}$/.test(commit)) {
+    return res.status(400).json({ ok: false, error: 'Invalid commit' })
+  }
+
+  git.getHistoryDiff(safePath, commit).then((diff) => {
+    res.json({ ok: true, diff })
+    return true
+  }).catch((err) => {
+    res.status(500).json({ ok: false, error: err.message })
+  })
+})
+
 /**
  * View document
  */

server/libs/git.js

@@ -265,7 +265,7 @@ module.exports = {
     let self = this
     let gitFilePath = entryPath + '.md'
 
-    return self._git.exec('log', ['-n', '25', '--format=format:%H %h %cI %cE %cN', '--', gitFilePath]).then((cProc) => {
+    return self._git.exec('log', ['--max-count=25', '--skip=1', '--format=format:%H %h %cI %cE %cN', '--', gitFilePath]).then((cProc) => {
       let out = cProc.stdout.toString()
       if (_.includes(out, 'fatal')) {
         let errorMsg = _.capitalize(_.head(_.split(_.replace(out, 'fatal: ', ''), ',')))
@@ -286,6 +286,24 @@ module.exports = {
       }).value()
       return hist
     })
+  },
+
+  getHistoryDiff(path, commit, comparewith) {
+    let self = this
+    if (!comparewith) {
+      comparewith = 'HEAD'
+    }
+
+    return self._git.exec('diff', ['--no-color', `${commit}:${path}.md`, `${comparewith}:${path}.md`]).then((cProc) => {
+      let out = cProc.stdout.toString()
+      if (_.startsWith(out, 'fatal: ')) {
+        throw new Error(out)
+      } else if (!_.includes(out, 'diff')) {
+        throw new Error('Unable to query diff data.')
+      } else {
+        return out
+      }
+    })
   }
 
 }

server/locales/en/browser.json

@@ -45,6 +45,16 @@
     "videosupportedtitle": "The following are supported:",
     "videotitle": "Insert Video"
   },
+  "history": {
+    "pastversions": "Past Versions",
+    "timestamp": "Timestamp",
+    "author": "Author",
+    "commit": "Commit",
+    "comparewith": "Compare With...",
+    "view": "View",
+    "reverttoversion": "Revert to Version",
+    "sidebyside": "Side-by-side View"
+  },
   "modal": {
     "abort": "Abort",
     "anchorerror": "Clipboard copy failed. Copy the URL manually.",
@@ -103,4 +113,4 @@
     "placeholder": "Search...",
     "results": "Search Results"
   }
-}
+}