feat: page history UI + nav links fix

client/client-app.js

@@ -159,6 +159,7 @@ Vue.prototype.Velocity = Velocity
 
 Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
 Vue.component('editor', () => import(/* webpackPrefetch: -100, webpackChunkName: "editor" */ './components/editor.vue'))
+Vue.component('history', () => import(/* webpackChunkName: "history" */ './components/history.vue'))
 Vue.component('login', () => import(/* webpackPrefetch: true, webpackChunkName: "login" */ './components/login.vue'))
 Vue.component('nav-footer', () => import(/* webpackMode: "eager" */ './components/common/nav-footer.vue'))
 Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue'))

client/components/common/nav-header.vue

@@ -134,7 +134,8 @@ export default {
   },
   computed: {
     isLoading: get('isLoading'),
-    title: get('site/title')
+    title: get('site/title'),
+    path: get('page/path')
   },
   created() {
     if (this.hideSearch || this.dense || this.$vuetify.breakpoint.smAndDown) {
@@ -157,10 +158,10 @@ export default {
 
     },
     pageEdit () {
-
+      window.location.assign(`/e/${this.path}`)
     },
     pageHistory () {
-
+      window.location.assign(`/h/${this.path}`)
     },
     pageSource () {
 

client/components/editor.vue

@@ -157,6 +157,14 @@ export default {
     notification: get('notification'),
     notificationState: sync('notification@isActive')
   },
+  created() {
+    this.$store.commit('page/SET_DESCRIPTION', this.description)
+    this.$store.commit('page/SET_IS_PUBLISHED', this.isPublished)
+    this.$store.commit('page/SET_LOCALE', this.locale)
+    this.$store.commit('page/SET_PATH', this.path)
+    this.$store.commit('page/SET_TAGS', this.tags)
+    this.$store.commit('page/SET_TITLE', this.title)
+  },
   mounted() {
     this.$store.set('editor/mode', this.initMode || 'create')
     this.$store.set('editor/content', this.initContent ? window.atob(this.initContent) : '# Header\n\nYour content here')

client/components/history.vue

+<template lang='pug'>
+  v-app(:dark='darkMode').history
+    nav-header
+    v-content
+      v-toolbar(color='primary', dark)
+        .subheading Viewing history of page #[strong /{{path}}]
+        v-spacer
+        .caption.blue--text.text--lighten-3 ID {{id}}
+        v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Live Version
+      v-container(fluid, grid-list-xl)
+        v-layout(row, wrap)
+          v-flex(xs5)
+            v-chip.ma-0.grey--text.text--darken-2(
+              label
+              small
+              color='grey lighten-2'
+              )
+              span Live
+            v-timeline(
+              dense
+              )
+              v-timeline-item(
+                fill-dot
+                color='primary'
+                icon='edit'
+                )
+                v-card.grey.lighten-3.radius-7(flat)
+                  v-card-text
+                    v-layout(justify-space-between)
+                      v-flex(xs7)
+                        v-chip.ml-0.mr-3(
+                          label
+                          small
+                          color='primary'
+                          )
+                          span.white--text Viewing
+                        span Edited by John Doe
+                      v-flex(xs5, text-xs-right, align-center, d-flex)
+                        .caption Today at 12:34 PM
+
+              v-timeline-item(
+                fill-dot
+                small
+                color='primary'
+                icon='edit'
+                )
+                v-card.grey.lighten-3.radius-7(flat)
+                  v-card-text
+                    v-layout(justify-space-between)
+                      v-flex(xs7)
+                        span Edited by Jane Doe
+                      v-flex(xs5, text-xs-right, align-center, d-flex)
+                        .caption Today at 12:27 PM
+
+              v-timeline-item(
+                fill-dot
+                small
+                color='purple'
+                icon='forward'
+                )
+                v-card.purple.lighten-5.radius-7(flat)
+                  v-card-text
+                    v-layout(justify-space-between)
+                      v-flex(xs7)
+                        span Moved page from #[strong /test] to #[strong /home] by John Doe
+                      v-flex(xs5, text-xs-right, align-center, d-flex)
+                        .caption Yesterday at 10:45 AM
+
+              v-timeline-item(
+                fill-dot
+                color='teal'
+                icon='add'
+                )
+                v-card.teal.lighten-5.radius-7(flat)
+                  v-card-text
+                    v-layout(justify-space-between)
+                      v-flex(xs7): span Initial page creation by John Doe
+                      v-flex(xs5, text-xs-right, align-center, d-flex)
+                        .caption Last Tuesday at 7:56 PM
+            v-chip.ma-0.grey--text.text--darken-2(
+              label
+              small
+              color='grey lighten-2'
+              ) End of history
+
+          v-flex(xs7)
+            v-card.radius-7
+              v-card-text
+                v-card.grey.lighten-4.radius-7(flat)
+                  v-card-text
+                    .subheading Page Title
+                    .caption Some page description
+
+    nav-footer
+</template>
+
+<script>
+/* global siteConfig */
+
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: 0
+    },
+    locale: {
+      type: String,
+      default: 'en'
+    },
+    path: {
+      type: String,
+      default: 'home'
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    darkMode() { return siteConfig.darkMode }
+  },
+  created () {
+    this.$store.commit('page/SET_ID', this.id)
+    this.$store.commit('page/SET_LOCALE', this.locale)
+    this.$store.commit('page/SET_PATH', this.path)
+  },
+  methods: {
+    goLive() {
+      window.location.assign(`/${this.path}`)
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/store/index.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex'
 import pathify from 'vuex-pathify' // eslint-disable-line import/no-duplicates
 import { make } from 'vuex-pathify' // eslint-disable-line import/no-duplicates
 
+import page from './page'
 import site from './site'
 
 Vue.use(Vuex)
@@ -49,6 +50,7 @@ export default new Vuex.Store({
   },
   actions: { },
   modules: {
+    page,
     site
   }
 })

client/store/page.js

+import { make } from 'vuex-pathify'
+
+const state = {
+  id: 0,
+  authorId: 0,
+  authorName: 'Unknown',
+  createdAt: '',
+  description: '',
+  isPublished: true,
+  locale: 'en',
+  path: '',
+  tags: [],
+  title: '',
+  updatedAt: ''
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations: make.mutations(state)
+}

client/themes/default/components/app.vue

@@ -194,6 +194,18 @@ export default {
       }
     }
   },
+  created() {
+    this.$store.commit('page/SET_AUTHOR_ID', this.authorId)
+    this.$store.commit('page/SET_AUTHOR_NAME', this.authorName)
+    this.$store.commit('page/SET_CREATED_AT', this.createdAt)
+    this.$store.commit('page/SET_DESCRIPTION', this.description)
+    this.$store.commit('page/SET_IS_PUBLISHED', this.isPublished)
+    this.$store.commit('page/SET_LOCALE', this.locale)
+    this.$store.commit('page/SET_PATH', this.path)
+    this.$store.commit('page/SET_TAGS', this.tags)
+    this.$store.commit('page/SET_TITLE', this.title)
+    this.$store.commit('page/SET_UPDATED_AT', this.updatedAt)
+  },
   mounted () {
     Prism.highlightAllUnder(this.$refs.container)
   },

package.json

@@ -67,7 +67,7 @@
     "express-brute": "1.0.1",
     "express-brute-redis": "0.0.1",
     "express-session": "1.15.6",
-    "file-type": "10.0.0",
+    "file-type": "10.2.0",
     "filesize.js": "1.0.2",
     "follow-redirects": "1.5.9",
     "fs-extra": "7.0.0",
@@ -75,14 +75,14 @@
     "graphql": "14.0.2",
     "graphql-list-fields": "2.0.2",
     "graphql-subscriptions": "1.0.0",
-    "graphql-tools": "4.0.1",
-    "highlight.js": "9.13.0",
-    "i18next": "11.9.1",
+    "graphql-tools": "4.0.2",
+    "highlight.js": "9.13.1",
+    "i18next": "12.0.0",
     "i18next-express-middleware": "1.4.1",
     "i18next-localstorage-cache": "1.1.1",
     "i18next-node-fs-backend": "2.1.0",
     "image-size": "0.6.3",
-    "ioredis": "4.0.2",
+    "ioredis": "4.2.0",
     "js-binary": "1.2.0",
     "js-yaml": "3.12.0",
     "jsonwebtoken": "8.3.0",
@@ -104,20 +104,20 @@
     "markdown-it-sup": "1.0.0",
     "markdown-it-task-lists": "2.1.1",
     "mathjax-node": "2.1.1",
-    "mime-types": "2.1.20",
+    "mime-types": "2.1.21",
     "moment": "2.22.2",
     "moment-timezone": "0.5.21",
     "mongodb": "3.1.8",
-    "mssql": "4.2.1",
+    "mssql": "4.2.2",
     "multer": "1.4.1",
     "mysql2": "1.6.1",
     "node-2fa": "1.1.2",
     "node-cache": "4.2.0",
     "oauth2orize": "1.11.0",
-    "objection": "1.3.0",
+    "objection": "1.4.0",
     "ora": "3.0.0",
     "passport": "0.4.0",
-    "passport-auth0": "1.0.0",
+    "passport-auth0": "1.1.0",
     "passport-azure-ad-oauth2": "0.0.4",
     "passport-cas": "0.1.1",
     "passport-discord": "0.1.3",
@@ -135,7 +135,7 @@
     "passport-slack": "0.0.7",
     "passport-twitch": "1.0.3",
     "passport-windowslive": "1.0.2",
-    "pg": "7.5.0",
+    "pg": "7.6.0",
     "pg-hstore": "2.3.2",
     "pm2": "3.2.2",
     "pug": "2.0.3",
@@ -148,7 +148,7 @@
     "scim-query-filter-parser": "1.1.0",
     "semver": "5.6.0",
     "serve-favicon": "2.5.0",
-    "sqlite3": "4.0.2",
+    "sqlite3": "4.0.3",
     "subscriptions-transport-ws": "0.9.15",
     "uslug": "1.0.4",
     "uuid": "3.3.2",
@@ -174,8 +174,8 @@
     "@panter/vue-i18next": "0.13.0",
     "@vue/cli": "3.0.5",
     "animated-number-vue": "0.1.3",
-    "apollo-cache-inmemory": "1.3.5",
-    "apollo-client": "2.4.2",
+    "apollo-cache-inmemory": "1.3.7",
+    "apollo-client": "2.4.4",
     "apollo-fetch": "0.7.0",
     "apollo-link": "1.2.3",
     "apollo-link-batch-http": "1.2.3",
@@ -183,8 +183,8 @@
     "apollo-link-http": "1.5.5",
     "apollo-link-persisted-queries": "0.2.1",
     "apollo-link-ws": "1.0.9",
-    "apollo-utilities": "1.0.21",
-    "autoprefixer": "9.1.5",
+    "apollo-utilities": "1.0.24",
+    "autoprefixer": "9.3.1",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "babel-loader": "^8.0.4",
@@ -193,18 +193,18 @@
     "babel-plugin-transform-imports": "1.5.1",
     "brace": "0.11.1",
     "cache-loader": "1.2.2",
-    "chart.js": "2.7.2",
+    "chart.js": "2.7.3",
     "clean-webpack-plugin": "0.1.19",
-    "copy-webpack-plugin": "4.5.3",
+    "copy-webpack-plugin": "4.5.4",
     "css-loader": "1.0.0",
-    "cssnano": "4.1.4",
+    "cssnano": "4.1.7",
     "duplicate-package-checker-webpack-plugin": "3.0.0",
-    "epic-spinners": "1.0.3",
-    "eslint": "5.7.0",
+    "epic-spinners": "1.0.4",
+    "eslint": "5.8.0",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "12.0.0",
     "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-node": "7.0.1",
+    "eslint-plugin-node": "8.0.0",
     "eslint-plugin-promise": "4.0.1",
     "eslint-plugin-standard": "4.0.0",
     "eslint-plugin-vue": "4.7.1",
@@ -221,25 +221,25 @@
     "ignore-loader": "0.1.2",
     "js-cookie": "2.2.0",
     "mini-css-extract-plugin": "0.4.4",
-    "node-sass": "4.9.3",
+    "node-sass": "4.9.4",
     "offline-plugin": "5.0.5",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "postcss-cssnext": "3.1.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-flexibility": "2.0.0",
-    "postcss-import": "12.0.0",
+    "postcss-import": "12.0.1",
     "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.1.1",
-    "postcss-selector-parser": "5.0.0-rc.3",
+    "postcss-preset-env": "6.3.0",
+    "postcss-selector-parser": "5.0.0-rc.4",
     "pug-lint": "2.5.0",
     "pug-loader": "2.4.0",
     "pug-plain-loader": "1.0.0",
     "raw-loader": "0.5.1",
-    "react": "16.5.2",
-    "react-dom": "16.5.2",
+    "react": "16.6.0",
+    "react-dom": "16.6.0",
     "resolve-url-loader": "3.0.0",
     "sass-loader": "7.1.0",
-    "sass-resources-loader": "1.3.3",
+    "sass-resources-loader": "1.3.4",
     "script-ext-html-webpack-plugin": "2.0.1",
     "simple-progress-webpack-plugin": "1.1.2",
     "style-loader": "0.23.1",
@@ -247,7 +247,7 @@
     "stylus-loader": "3.0.2",
     "twemoji-awesome": "1.0.6",
     "url-loader": "1.1.2",
-    "vee-validate": "2.1.0-beta.11",
+    "vee-validate": "2.1.1",
     "velocity-animate": "1.5.2",
     "viz.js": "2.0.0",
     "vue": "2.5.17",
@@ -261,18 +261,18 @@
     "vue-moment": "4.0.0",
     "vue-router": "3.0.1",
     "vue-simple-breakpoints": "1.0.3",
-    "vue-status-indicator": "1.1.0",
+    "vue-status-indicator": "1.1.1",
     "vue-template-compiler": "2.5.17",
-    "vue-tour": "1.0.1",
+    "vue-tour": "1.1.0",
     "vue-tree-navigation": "3.0.1",
     "vue2-animate": "2.1.0",
     "vuedraggable": "2.16.0",
-    "vuetify": "1.2.9",
+    "vuetify": "1.3.3",
     "vuex": "3.0.1",
     "vuex-pathify": "1.1.3",
     "vuex-persistedstate": "2.5.4",
-    "webpack": "4.20.2",
-    "webpack-bundle-analyzer": "3.0.2",
+    "webpack": "4.23.1",
+    "webpack-bundle-analyzer": "3.0.3",
     "webpack-cli": "3.1.2",
     "webpack-dev-middleware": "3.4.0",
     "webpack-hot-middleware": "2.24.3",

server/controllers/common.js

@@ -48,6 +48,24 @@ router.get(['/p', '/p/*'], (req, res, next) => {
 /**
  * View document
  */
+router.get(['/h', '/h/*'], async (req, res, next) => {
+  const pageArgs = pageHelper.parsePath(req.path)
+  const page = await WIKI.models.pages.getPage({
+    path: pageArgs.path,
+    locale: pageArgs.locale,
+    userId: req.user.id,
+    isPrivate: false
+  })
+  if (page) {
+    res.render('history', { page })
+  } else {
+    res.redirect(`/${pageArgs.path}`)
+  }
+})
+
+/**
+ * View document
+ */
 router.get('/*', async (req, res, next) => {
   const pageArgs = pageHelper.parsePath(req.path)
   const page = await WIKI.models.pages.getPage({

server/views/history.pug

+extends master.pug
+
+block head
+
+block body
+  #root
+    history(
+      id=page.id
+      locale=page.localeCode
+      path=page.path
+      )