feat: themes foundation + editors load improvements

client/app.js

@@ -115,6 +115,7 @@ Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './component
 Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue'))
 Vue.component('v-card-chin', () => import(/* webpackMode: "eager" */ './components/common/v-card-chin.vue'))
+Vue.component('page', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/app.vue'))
 
 let bootstrap = () => {
   // ====================================

client/components/common/nav-footer.vue

 <template lang="pug">
-  v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
+  v-footer.justify-center(:color='darkMode ? "" : "grey lighten-3"', inset)
     .caption.grey--text.text--darken-1
       span(v-if='company && company.length > 0') {{ $t('common:footer.copyright', { company: company, year: currentYear }) }} |&nbsp;
       span {{ $t('common:footer.poweredBy') }} Wiki.js

client/components/common/nav-header.vue

 <template lang='pug'>
-  v-toolbar(color='black', dark, app, clipped-left, fixed, flat, :dense='dense')
-    v-menu(open-on-hover, offset-y, bottom, left, nudge-top='-18', min-width='250')
+  v-toolbar(color='black', dark, app, clipped-left, fixed, flat)
+    v-menu(open-on-hover, offset-y, bottom, left, min-width='250')
       v-toolbar-side-icon(slot='activator')
         v-icon view_module
       v-list(dense).py-0
         v-list-tile(avatar, href='/')
           v-list-tile-avatar: v-icon(color='blue') home
           v-list-tile-content Home
-        v-list-tile(avatar, @click='')
+        v-list-tile(avatar, @click='pageNew')
           v-list-tile-avatar: v-icon(color='green') add_box
           v-list-tile-content New Page
         v-divider.my-0
         v-subheader Current Page
-        v-list-tile(avatar, @click='')
+        v-list-tile(avatar, @click='pageEdit')
           v-list-tile-avatar: v-icon(color='indigo') edit
           v-list-tile-content Edit
-        v-list-tile(avatar, @click='')
+        v-list-tile(avatar, @click='pageHistory')
           v-list-tile-avatar: v-icon(color='indigo') history
           v-list-tile-content History
-        v-list-tile(avatar, @click='')
+        v-list-tile(avatar, @click='pageSource')
           v-list-tile-avatar: v-icon(color='indigo') code
           v-list-tile-content View Source
-        v-list-tile(avatar, @click='')
+        v-list-tile(avatar, @click='pageMove')
           v-list-tile-avatar: v-icon(color='indigo') forward
           v-list-tile-content Move / Rename
-        v-list-tile(avatar, @click='')
+        v-list-tile(avatar, @click='pageDelete')
           v-list-tile-avatar: v-icon(color='red darken-2') delete
           v-list-tile-content Delete
         v-divider.my-0
@@ -61,11 +61,15 @@
     .navHeaderLoading.mr-3
       v-progress-circular(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading')
     slot(name='actions')
-    v-btn(icon, href='/a')
-      v-icon(color='grey') settings
+    v-tooltip(bottom)
+      v-btn(icon, href='/a', slot='activator')
+        v-icon(color='grey') settings
+      span Admin
     v-menu(offset-y, min-width='300')
-      v-btn(icon, slot='activator')
-        v-icon(color='grey') account_circle
+      v-tooltip(bottom, slot='activator')
+        v-btn(icon, slot='activator')
+          v-icon(color='grey') account_circle
+        span Account
       v-list.py-0
         v-list-tile.py-3(avatar)
           v-list-tile-avatar
@@ -116,6 +120,24 @@ export default {
   methods: {
     searchEnter() {
       this.searchIsLoading = true
+    },
+    pageNew () {
+
+    },
+    pageEdit () {
+
+    },
+    pageHistory () {
+
+    },
+    pageSource () {
+
+    },
+    pageMove () {
+
+    },
+    pageDelete () {
+
     }
   }
 }

client/components/profile/preferences.vue

@@ -14,10 +14,18 @@
                       .subheading Display
                   v-card-text
                     v-subheader.pl-0 Locale
-                    v-select.grey.lighten-5(solo, flat)
-                    v-divider
+                    v-select(
+                      outline
+                      background-color='grey lighten-2'
+                      hide-details
+                      )
+                    v-divider.mt-3
                     v-subheader.pl-0 Timezone
-                    v-select.grey.lighten-5(solo, flat)
+                    v-select(
+                      outline
+                      background-color='grey lighten-2'
+                      hide-details
+                      )
                   v-card-chin
                     v-spacer
                     v-btn(color='primary')
@@ -30,7 +38,11 @@
                     .subheading Editing
                 v-card-text
                   v-subheader.pl-0 Default Editor
-                  v-select.grey.lighten-5(solo, flat)
+                  v-select(
+                    outline
+                    background-color='grey lighten-2'
+                    hide-details
+                    )
                 v-card-chin
                   v-spacer
                   v-btn(color='primary')

client/components/profile/profile.vue

@@ -36,12 +36,12 @@
               )
               v-icon(:color='darkMode ? "grey lighten-1" : "purple darken-4"') supervised_user_circle
               .subheading.ml-3 Local
-            v-divider
+            v-divider.mt-3
             v-subheader.pl-0 Two-Factor Authentication (2FA)
             .caption.mb-2 2FA adds an extra layer of security by requiring a unique code generated on your smartphone when signing in.
             v-btn(color='purple darken-4', dark, depressed).ml-0 Enable 2FA
             v-btn(color='purple darken-4', dark, depressed, disabled).ml-0 Disable 2FA
-            v-divider
+            v-divider.mt-3
             v-subheader.pl-0 Change Password
             v-text-field(label='Current Password', prepend-icon='last_page')
             v-text-field(label='New Password', prepend-icon='last_page')
@@ -68,7 +68,7 @@
             .body-1: strong January 1st, 2018 at 12:00 AM
             .body-2.grey--text.mt-3 Last login on
             .body-1: strong January 1st, 2018 at 12:00 AM
-            v-divider
+            v-divider.mt-3
             .body-2.grey--text.mt-3 Pages created
             .body-1: strong 0
             .body-2.grey--text.mt-3 Comments posted

client/index.js

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

themes/default/views/page.pug → client/themes/default/components/app.vue

-extends /master.pug
+<template lang="pug">
+  v-app
+    nav-header
+    v-navigation-drawer.primary(dark, app, clipped, permanent)
+      v-list(dense)
+        v-list-tile.pt-2
+          v-list-tile-avatar: v-icon home
+          v-list-tile-title Home
+        v-divider.my-2
+        v-subheader.pl-4 Navigation
+        v-list-tile
+          v-list-tile-avatar: v-icon stars
+          v-list-tile-title The Universe
+        v-list-tile
+          v-list-tile-avatar: v-icon directions_boat
+          v-list-tile-title Ships
+        v-list-tile
+          v-list-tile-avatar: v-icon local_airport
+          v-list-tile-title Airports
 
-block head
+    v-content
+      v-toolbar(color='grey lighten-3', flat, dense)
+        v-breadcrumbs.pl-0(divider='/')
+          v-breadcrumbs-item Universe
+          v-breadcrumbs-item Galaxy
+          v-breadcrumbs-item Solar System
+          v-breadcrumbs-item Planet Earth
 
-block body
-  #app
-    v-app
-      nav-header
-      v-navigation-drawer.pb-0.primary(dark, app, fixed, clipped, left, permanent)
-        v-list(dense)
-          v-list-tile.pt-2
-            v-list-tile-avatar: v-icon home
-            v-list-tile-title Home
-          v-divider.my-2
-          v-subheader.pl-4 Navigation
-          v-list-tile
-            v-list-tile-avatar: v-icon stars
-            v-list-tile-title The Universe
+      v-divider
+      v-layout(row)
+        v-flex(xs10)
+          v-toolbar(color='grey lighten-4', flat, :height='90')
+            div
+              .headline.grey--text.text--darken-3 {{title}}
+              .caption.grey--text.text--darken-1 {{description}}
+          .contents
+            slot(name='contents')
+        v-flex(xs2, fill-height)
+          v-toolbar(color='grey lighten-4', flat, :height='90')
+            div
+              .caption.grey--text.text--lighten-1 Last edited by
+              .body-2.grey--text.text--darken-3 John Doe
+              .caption.grey--text.text--darken-1 Monday at 12:34 PM
+            v-spacer
+            v-icon edit
+          v-list.grey.lighten-3(dense)
+            v-subheader.pl-4 Table of contents
+            v-list-tile
+              v-list-tile-avatar: v-icon chevron_right
+              v-list-tile-title Introduction
+            v-list-tile
+              v-list-tile-avatar: v-icon chevron_right
+              v-list-tile-title Cities
+            v-list-tile(inset)
+              v-list-tile-avatar: v-icon chevron_right
+              v-list-tile-title New York
+            v-divider.my-2
+            v-subheader.pl-4 Metadata
+            v-list-tile
+              v-list-tile-avatar: v-icon chevron_right
+              v-list-tile-title Test
+            v-list-tile
+              v-list-tile-avatar: v-icon chevron_right
+              v-list-tile-title Test
+            v-list-tile
+              v-list-tile-avatar: v-icon chevron_right
+              v-list-tile-title Test
+    nav-footer
+</template>
 
-      v-content
-        v-toolbar(color='grey lighten-3', flat, dense)
-          v-breadcrumbs.pl-0(divider='/')
-            v-breadcrumbs-item Universe
-            v-breadcrumbs-item Galaxy
-            v-breadcrumbs-item Solar System
-            v-breadcrumbs-item Planet Earth
-        
-        v-divider
-        v-layout(row)
-          v-flex(xs10)
-            v-toolbar(color='grey lighten-4', flat, :height='90')
-              div
-                .headline.grey--text.text--darken-3 Planet Earth
-                .caption.grey--text.text--darken-1 The 3rd planet of the solar system
-              v-spacer
-              v-icon public
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: 'Untitled Page'
+    },
+    description: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
 
-            .pa-3 Earth is the third planet from the Sun and the only astronomical object known to harbor life. According to radiometric dating and other sources of evidence, Earth formed over 4.5 billion years ago.[24][25][26] Earth's gravity interacts with other objects in space, especially the Sun and the Moon, Earth's only natural satellite. Earth revolves around the Sun in 365.26 days, a period known as an Earth year. During this time, Earth rotates about its axis about 366.26 times.[n 5]
-            .pa-3 Earth's axis of rotation is tilted with respect to its orbital plane, producing seasons on Earth.[27] The gravitational interaction between Earth and the Moon causes ocean tides, stabilizes Earth's orientation on its axis, and gradually slows its rotation.[28] Earth is the densest planet in the Solar System and the largest of the four terrestrial planets.
-            .pa-3 Earth's lithosphere is divided into several rigid tectonic plates that migrate across the surface over periods of many millions of years. About 71% of Earth's surface is covered with water, mostly by oceans.[29] The remaining 29% is land consisting of continents and islands that together have many lakes, rivers and other sources of water that contribute to the hydrosphere. The majority of Earth's polar regions are covered in ice, including the Antarctic ice sheet and the sea ice of the Arctic ice pack. Earth's interior remains active with a solid iron inner core, a liquid outer core that generates the Earth's magnetic field, and a convecting mantle that drives plate tectonics.
-            .pa-3 Within the first billion years of Earth's history, life appeared in the oceans and began to affect the Earth's atmosphere and surface, leading to the proliferation of aerobic and anaerobic organisms. Some geological evidence indicates that life may have arisen as much as 4.1 billion years ago. Since then, the combination of Earth's distance from the Sun, physical properties, and geological history have allowed life to evolve and thrive.[30][31] In the history of the Earth, biodiversity has gone through long periods of expansion, occasionally punctuated by mass extinction events. Over 99% of all species[32] that ever lived on Earth are extinct.[33][34] Estimates of the number of species on Earth today vary widely;[35][36][37] most species have not been described.[38] Over 7.6 billion humans live on Earth and depend on its biosphere and natural resources for their survival.[39] Humans have developed diverse societies and cultures; politically, the world has about 200 sovereign states.
-          v-flex(xs2, fill-height)
-            v-list.grey.lighten-3(dense)
-              v-subheader.pl-4 Table of contents
-              v-list-tile
-                v-list-tile-avatar: v-icon chevron_right
-                v-list-tile-title Test
-              v-list-tile
-                v-list-tile-avatar: v-icon chevron_right
-                v-list-tile-title Test
-              v-list-tile
-                v-list-tile-avatar: v-icon chevron_right
-                v-list-tile-title Test
-              v-divider.my-2
-              v-subheader.pl-4 Metadata
-              v-list-tile
-                v-list-tile-avatar: v-icon chevron_right
-                v-list-tile-title Test
-              v-list-tile
-                v-list-tile-avatar: v-icon chevron_right
-                v-list-tile-title Test
-              v-list-tile
-                v-list-tile-avatar: v-icon chevron_right
-                v-list-tile-title Test
-      nav-footer
+<style lang="scss">
+
+</style>

client/themes/default/js/app.js

+/* THEME SPECIFIC JAVASCRIPT */

client/themes/default/scss/app.scss

+/* THEME SPECIFIC STYLES */
+
+.contents {
+  h1 {
+    padding-left: 16px;
+    color: mc('blue', '800');
+    margin-top: 16px;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(to right, mc('blue', '500'), rgba(mc('blue', '500'), 0));
+    }
+
+    & + h2 {
+      margin-top: 8px;
+    }
+  }
+  h2 {
+    margin-left: 16px;
+    padding: 8px 0 0 0;
+    color: mc('grey', '800');
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));
+    }
+  }
+
+  p {
+    padding: 16px 16px 0 16px;
+    margin: 0;
+  }
+}

client/themes/default/theme.yml

+name: Default
+author: requarks.io
+site: https://wiki.requarks.io/
+version: 1.0.0
+requirements:
+  minimum: '>= 2.0.0'
+  maximum: '< 3.0.0'

dev/config/config.yml

-lokalise:
-  api: https://api.lokalise.co/api
-  project: 2994254859f751ea605a00.03473540
-  key: 34b38266e48cb23b6e5dbd25eabe77ad8e6ec6f6
\ No newline at end of file

dev/tasks/localization.js

-const Promise = require('bluebird')
-const colors = require('colors/safe')
-const fs = Promise.promisifyAll(require('fs-extra'))
-const path = require('path')
-const request = require('request-promise')
-const yaml = require('js-yaml')
-const _ = require('lodash')
-
-const config = yaml.safeLoad(fs.readFileSync(path.join(process.cwd(), 'dev/config/config.yml'), 'utf8'))
-
-/**
- * Fetch Localization Resources from Lokalise
- */
-const fetchLocalizationResources = async () => {
-  console.info(colors.green('Fetching latest localization resources...'))
-  let langs = await request({
-    method: 'POST',
-    uri: `${config.lokalise.api}/string/list`,
-    form: {
-      api_token: config.lokalise.key,
-      id: config.lokalise.project
-    },
-    json: true
-  })
-  if (langs && langs.strings && _.isPlainObject(langs.strings)) {
-    _.forIn(langs.strings, (langData, langKey) => {
-      let lang = {}
-      let langTotal = 0
-      langData.forEach(item => {
-        if (item.is_archived === '1' || _.includes(item.key, '::')) { return }
-        let keyParts = item.key.split(':')
-        let keyNamespace = (keyParts.length > 1) ? _.head(keyParts) : 'common'
-        let keyString = _.last(keyParts)
-        _.set(lang, `${keyNamespace}.${keyString}`, item.translation)
-        langTotal++
-      })
-      _.forOwn(lang, (langObject, langNamespace) => {
-        let langYaml = yaml.safeDump(langObject, {
-          indent: 2,
-          sortKeys: true,
-          lineWidth: 2048
-        })
-        fs.outputFileSync(path.join(process.cwd(), `server/locales/${langKey}/${langNamespace}.yml`), langYaml, 'utf8')
-      })
-      console.info(colors.grey(`└─ ${langKey} - ${langTotal} keys written`))
-    })
-  } else {
-    throw new Error('Failed to fetch language list from Lokalise API.')
-  }
-}
-
-try {
-  fetchLocalizationResources()
-} catch (err) {
-  console.error(colors.red(err))
-}

dev/webpack/webpack.dev.js

 const webpack = require('webpack')
 const path = require('path')
 const fs = require('fs-extra')
+const yargs = require('yargs').argv
+const _ = require('lodash')
 
 const { VueLoaderPlugin } = require('vue-loader')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -181,7 +183,8 @@ module.exports = {
       format: 'compact'
     }),
     new webpack.DefinePlugin({
-      'process.env': { NODE_ENV: '"development"' },
+      'process.env.NODE_ENV': JSON.stringify('development'),
+      'process.env.CURRENT_THEME': JSON.stringify(_.defaultTo(yargs.theme, 'default')),
       '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
     }),
     new WriteFilePlugin(),

dev/webpack/webpack.prod.js

 const webpack = require('webpack')
 const path = require('path')
 const fs = require('fs-extra')
+const yargs = require('yargs').argv
+const _ = require('lodash')
 
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OfflinePlugin = require('offline-plugin')
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
 const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')
@@ -208,24 +209,10 @@ module.exports = {
       cssProcessorOptions: { discardComments: { removeAll: true } },
       canPrint: true
     }),
-    new OfflinePlugin({
-      ServiceWorker: {
-        minify: false
-      },
-      publicPath: '/',
-      externals: ['/'],
-      caches: {
-        main: [
-          'js/client.js'
-        ],
-        additional: [
-          ':externals:'
-        ],
-        optional: [
-          'js/*.chunk.js'
-        ]
-      },
-      safeToUseOptionalCaches: true
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env.CURRENT_THEME': JSON.stringify(_.defaultTo(yargs.theme, 'default')),
+      '__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
     })
   ],
   optimization: {

package.json

@@ -71,7 +71,7 @@
     "graphql-list-fields": "2.0.2",
     "graphql-tools": "3.1.1",
     "i18next": "11.5.0",
-    "i18next-express-middleware": "1.2.0",
+    "i18next-express-middleware": "1.2.1",
     "i18next-localstorage-cache": "1.1.1",
     "i18next-node-fs-backend": "1.2.1",
     "image-size": "0.6.3",
@@ -147,7 +147,7 @@
   },
   "devDependencies": {
     "@panter/vue-i18next": "0.12.0",
-    "@vue/cli": "3.0.0-rc.10",
+    "@vue/cli": "3.0.0-rc.11",
     "apollo-cache-inmemory": "1.2.6",
     "apollo-client": "2.3.7",
     "apollo-fetch": "0.7.0",
@@ -177,7 +177,7 @@
     "cssnano": "4.0.5",
     "duplicate-package-checker-webpack-plugin": "3.0.0",
     "epic-spinners": "1.0.3",
-    "eslint": "5.2.0",
+    "eslint": "5.3.0",
     "eslint-config-requarks": "1.0.7",
     "eslint-config-standard": "11.0.0",
     "eslint-plugin-import": "2.13.0",
@@ -206,7 +206,7 @@
     "postcss-cssnext": "3.1.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-flexibility": "2.0.0",
-    "postcss-import": "11.1.0",
+    "postcss-import": "12.0.0",
     "postcss-loader": "2.1.6",
     "postcss-preset-env": "5.3.0",
     "postcss-selector-parser": "5.0.0-rc.3",
@@ -220,7 +220,7 @@
     "sass-resources-loader": "1.3.3",
     "script-ext-html-webpack-plugin": "2.0.1",
     "simple-progress-webpack-plugin": "1.1.2",
-    "style-loader": "0.21.0",
+    "style-loader": "0.22.1",
     "stylus": "0.54.5",
     "stylus-loader": "3.0.2",
     "twemoji-awesome": "1.0.6",
@@ -229,11 +229,11 @@
     "velocity-animate": "1.5.2",
     "vue": "2.5.17",
     "vue-apollo": "3.0.0-beta.19",
-    "vue-chartjs": "3.3.2",
+    "vue-chartjs": "3.4.0",
     "vue-clipboards": "1.2.4",
     "vue-codemirror": "4.0.5",
     "vue-hot-reload-api": "2.3.0",
-    "vue-loader": "15.2.6",
+    "vue-loader": "15.3.0",
     "vue-material-design-icons": "1.6.0",
     "vue-moment": "4.0.0",
     "vue-router": "3.0.1",
@@ -241,11 +241,11 @@
     "vue-template-compiler": "2.5.17",
     "vue-tour": "1.0.1",
     "vuedraggable": "2.16.0",
-    "vuetify": "1.1.9",
+    "vuetify": "1.1.10",
     "vuex": "3.0.1",
-    "vuex-pathify": "1.1.2",
+    "vuex-pathify": "1.1.3",
     "vuex-persistedstate": "2.5.4",
-    "webpack": "4.16.4",
+    "webpack": "4.16.5",
     "webpack-bundle-analyzer": "2.13.1",
     "webpack-cli": "3.1.0",
     "webpack-dev-middleware": "3.1.3",

server/controllers/common.js

 const express = require('express')
 const router = express.Router()
-const path = require('path')
-
-/* global WIKI */
 
 /**
  * Create/Edit document
  */
-router.get('/e/*', (req, res, next) => {
+router.get(['/e', '/e/*'], (req, res, next) => {
   res.render('main/editor')
 })
 
@@ -36,9 +33,7 @@ router.get('/', (req, res, next) => {
  * View document
  */
 router.get('/*', (req, res, next) => {
-  res.render(path.join(WIKI.ROOTPATH, 'themes/default/views/page'), {
-    basedir: path.join(WIKI.SERVERPATH, 'views')
-  })
+  res.render('main/page')
 })
 
 module.exports = router

server/db/migrations/2.0.0.js

@@ -91,6 +91,7 @@ exports.up = knex => {
       table.string('publishStartDate')
       table.string('publishEndDate')
       table.text('content')
+      table.text('render')
       table.string('contentType').notNullable()
       table.string('createdAt').notNullable()
       table.string('updatedAt').notNullable()

server/jobs/render-page.js

+require('../core/worker')
+
+/* global WIKI */
+
+module.exports = async (job) => {
+  WIKI.logger.info(`Rendering page ${job.data.path}...`)
+
+  try {
+
+    WIKI.logger.info(`Rendering page ${job.data.path}: [ COMPLETED ]`)
+  } catch (err) {
+    WIKI.logger.error(`Rendering page ${job.data.path}: [ FAILED ]`)
+    WIKI.logger.error(err.message)
+  }
+}

server/models/editors.js

 const Model = require('objection').Model
-const autoload = require('auto-load')
+const fs = require('fs-extra')
 const path = require('path')
 const _ = require('lodash')
+const yaml = require('js-yaml')
+const commonHelper = require('../helpers/common')
 
 /* global WIKI */
 
@@ -14,42 +16,63 @@ module.exports = class Editor extends Model {
   static get jsonSchema () {
     return {
       type: 'object',
-      required: ['key', 'title', 'isEnabled'],
+      required: ['key', 'isEnabled'],
 
       properties: {
         id: {type: 'integer'},
         key: {type: 'string'},
-        title: {type: 'string'},
         isEnabled: {type: 'boolean'},
         config: {type: 'object'}
       }
     }
   }
 
-  static async getEnabledEditors() {
-    return WIKI.models.editors.query().where({ isEnabled: true })
+  static async getEditors() {
+    return WIKI.models.editors.query()
   }
 
   static async refreshEditorsFromDisk() {
     try {
       const dbEditors = await WIKI.models.editors.query()
-      const diskEditors = autoload(path.join(WIKI.SERVERPATH, 'modules/editor'))
+
+      // -> Fetch definitions from disk
+      const editorDirs = await fs.readdir(path.join(WIKI.SERVERPATH, 'modules/editors'))
+      let diskEditors = []
+      for (let dir of editorDirs) {
+        const def = await fs.readFile(path.join(WIKI.SERVERPATH, 'modules/editors', dir, 'definition.yml'), 'utf8')
+        diskEditors.push(yaml.safeLoad(def))
+      }
+      WIKI.data.editors = diskEditors.map(editor => ({
+        ...editor,
+        props: commonHelper.parseModuleProps(editor.props)
+      }))
+
+      // -> Insert new editors
       let newEditors = []
-      _.forOwn(diskEditors, (strategy, strategyKey) => {
-        if (!_.some(dbEditors, ['key', strategy.key])) {
+      for (let editor of WIKI.data.editors) {
+        if (!_.some(dbEditors, ['key', editor.key])) {
           newEditors.push({
-            key: strategy.key,
-            title: strategy.title,
+            key: editor.key,
             isEnabled: false,
-            config: _.reduce(strategy.props, (result, value, key) => {
-              _.set(result, value, '')
+            config: _.transform(editor.props, (result, value, key) => {
+              _.set(result, key, value.default)
               return result
             }, {})
           })
+        } else {
+          const editorConfig = _.get(_.find(dbEditors, ['key', editor.key]), 'config', {})
+          await WIKI.models.editors.query().patch({
+            config: _.transform(editor.props, (result, value, key) => {
+              if (!_.has(result, key)) {
+                _.set(result, key, value.default)
+              }
+              return result
+            }, editorConfig)
+          }).where('key', editor.key)
         }
-      })
+      }
       if (newEditors.length > 0) {
-        await WIKI.models.editors.query().insert(newEditors)
+        await WIKI.models.storage.query().insert(newEditors)
         WIKI.logger.info(`Loaded ${newEditors.length} new editors: [ OK ]`)
       } else {
         WIKI.logger.info(`No new editors found: [ SKIPPED ]`)

server/models/pages.js

@@ -88,10 +88,12 @@ module.exports = class Page extends Model {
   }
 
   static async createPage(opts) {
+    await WIKI.models.pages.renderPage(opts)
     const page = await WIKI.models.pages.query().insertAndFetch({
       authorId: opts.authorId,
       content: opts.content,
       creatorId: opts.authorId,
+      contentType: _.get(WIKI.data.editors, `${opts.editor}.contentType`, 'text'),
       description: opts.description,
       editorKey: opts.editor,
       isPrivate: opts.isPrivate,
@@ -130,4 +132,11 @@ module.exports = class Page extends Model {
     })
     return page
   }
+
+  static async renderPage(opts) {
+    WIKI.queue.job.renderPage.add(opts, {
+      removeOnComplete: true,
+      removeOnFail: true
+    })
+  }
 }

server/modules/editor/markdown.js

-// ------------------------------------
-// Markdown Editor (default)
-// ------------------------------------
-
-module.exports = {
-  key: 'markdown',
-  title: 'Markdown (default)',
-  props: [],
-  init (conf) {}
-}

server/modules/editor/markdown/definition.yml

+key: markdown
+title: Markdown
+description: Default Markdown editor
+contentType: markdown
+author: requarks.io
+props: {}

server/views/main/editor.pug

 extends ../master.pug
 
 block body
-  body
-    #app
-      v-app
-        editor
+  #app
+    v-app
+      editor

server/views/main/profile.pug

 extends ../master.pug
 
 block body
-  body
-    #app
-      profile
+  #app
+    profile

server/views/main/setup.pug

 extends ../master.pug
 
 block body
-  body
-    #app
-      setup(telemetry-id=telemetryClientID, wiki-version=packageObj.version)
+  #app
+    setup(telemetry-id=telemetryClientID, wiki-version=packageObj.version)

themes/default/theme.yml

-name: Default
-author: Nicolas Giard
-site: https://wiki.requarks.io/
-version: 1.0.0
-requirements:
-  minimum: '>= 2.0.0'
-  maximum: '< 3.0.0'
-fields:
-  primary:
-    title: Primary Color
-    description: Used for top navigation bar, headers, links, etc.
-    type: color
-    default: indigo
-  alt:
-    title: Alternate Color
-    description: Used for the sidebar (in a darker tone)
-    type: color
-    default: blue-grey
-  codeDark:
-    title: Code Blocks - Use Dark Theme
-    description: todo
-    type: boolean
-    default: true
-  codeColorize:
-    title: Code Blocks - Colorize syntax
-    description: todo
-    type: boolean
-    default: true
\ No newline at end of file