feat: view page layout (wip) + footer component + fixes

client/app.js

@@ -110,6 +110,7 @@ Vue.prototype.Velocity = Velocity
 Vue.component('admin', () => import(/* webpackChunkName: "admin" */ './components/admin.vue'))
 Vue.component('editor', () => import(/* webpackChunkName: "editor" */ './components/editor.vue'))
 Vue.component('login', () => import(/* webpackMode: "eager" */ './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'))
 Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue'))

client/components/admin.vue

@@ -75,26 +75,11 @@
       transition(name='admin-router')
         router-view
 
-    v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
+    nav-footer
-      .caption.grey--text.text--darken-1
-        span(v-if='company && company.length > 0') {{ $t('common:footer.copyright', { company: company, year: currentYear }) }} | 
-        span {{ $t('common:footer.poweredBy') }} Wiki.js
-
-    v-snackbar(
-      :color='notification.style'
-      bottom,
-      right,
-      multi-line,
-      v-model='notificationState'
-    )
-      .text-xs-left
-        v-icon.mr-3(dark) {{ notification.icon }}
-        span {{ notification.message }}
 </template>
 
 <script>
 import VueRouter from 'vue-router'
-import { get, sync } from 'vuex-pathify'
 
 import adminStore from '@/store/admin'
 
@@ -133,16 +118,9 @@ export default {
   i18nOptions: { namespaces: 'admin' },
   data() {
     return {
-      currentYear: (new Date()).getFullYear(),
       adminDrawerShown: true
     }
   },
-  computed: {
-    company: get('site/company'),
-    notification: get('notification'),
-    darkMode: get('admin/theme@dark'),
-    notificationState: sync('notification@isActive')
-  },
   router
 }
 </script>

client/components/common/nav-footer.vue

@@ -0,0 +1,35 @@
+<template lang="pug">
+  v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
+    .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
+
+    v-snackbar(
+      :color='notification.style'
+      bottom,
+      right,
+      multi-line,
+      v-model='notificationState'
+    )
+      .text-xs-left
+        v-icon.mr-3(dark) {{ notification.icon }}
+        span {{ notification.message }}
+</template>
+
+<script>
+import { get, sync } from 'vuex-pathify'
+
+export default {
+  data() {
+    return {
+      currentYear: (new Date()).getFullYear()
+    }
+  },
+  computed: {
+    company: get('site/company'),
+    notification: get('notification'),
+    darkMode: get('site/dark'),
+    notificationState: sync('notification@isActive')
+  }
+}
+</script>

client/components/profile.vue

@@ -22,24 +22,11 @@
       transition(name='profile-router')
         router-view
 
-    v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
+    nav-footer
-      .caption.grey--text.text--darken-1 Powered by Wiki.js
-
-    v-snackbar(
-      :color='notification.style'
-      bottom,
-      right,
-      multi-line,
-      v-model='notificationState'
-    )
-      .text-xs-left
-        v-icon.mr-3(dark) {{ notification.icon }}
-        span {{ notification.message }}
 </template>
 
 <script>
 import VueRouter from 'vue-router'
-import { mapState } from 'vuex'
 
 /* global WIKI, siteConfig */
 
@@ -71,11 +58,6 @@ export default {
     }
   },
   computed: {
-    ...mapState(['notification']),
-    notificationState: {
-      get() { return this.notification.isActive },
-      set(newState) { this.$store.commit('updateNotificationState', newState) }
-    },
     darkMode() { return siteConfig.darkMode }
   },
   router

client/store/site.js

@@ -4,6 +4,7 @@ import { make } from 'vuex-pathify'
 
 const state = {
   company: '',
+  dark: false,
   mascot: true,
   title: siteConfig.title
 }

server/controllers/common.js

@@ -1,5 +1,8 @@
 const express = require('express')
 const router = express.Router()
+const path = require('path')
+
+/* global WIKI */
 
 /**
  * Create/Edit document
@@ -25,8 +28,17 @@ router.get(['/p', '/p/*'], (req, res, next) => {
 /**
  * View document
  */
-router.get('/*', (req, res, next) => {
+router.get('/', (req, res, next) => {
   res.render('main/welcome')
 })
 
+/**
+ * View document
+ */
+router.get('/*', (req, res, next) => {
+  res.render(path.join(WIKI.ROOTPATH, 'themes/default/views/page'), {
+    basedir: path.join(WIKI.SERVERPATH, 'views')
+  })
+})
+
 module.exports = router

server/core/config.js

@@ -1,4 +1,5 @@
 const _ = require('lodash')
+const chalk = require('chalk')
 const cfgHelper = require('../helpers/config')
 const fs = require('fs')
 const path = require('path')
@@ -17,6 +18,8 @@ module.exports = {
       dataRegex: path.join(WIKI.SERVERPATH, 'app/regex.js')
     }
 
+    process.stdout.write(chalk.blue(`Loading configuration from ${confPaths.config}... `))
+
     let appconfig = {}
     let appdata = {}
 
@@ -28,8 +31,12 @@ module.exports = {
       )
       appdata = yaml.safeLoad(fs.readFileSync(confPaths.data, 'utf8'))
       appdata.regex = require(confPaths.dataRegex)
-    } catch (ex) {
+      console.info(chalk.green.bold(`OK`))
-      console.error(ex)
+    } catch (err) {
+      console.error(chalk.red.bold(`FAILED`))
+      console.error(err.message)
+
+      console.error(chalk.red.bold(`>>> Unable to read configuration file! Did you create the config.yml file?`))
       process.exit(1)
     }
 

server/core/kernel.js

@@ -1,9 +1,11 @@
+const _ = require('lodash')
+
 /* global WIKI */
 
 module.exports = {
   async init() {
     WIKI.logger.info('=======================================')
-    WIKI.logger.info('= Wiki.js =============================')
+    WIKI.logger.info(`= Wiki.js ${_.padEnd(WIKI.version + ' ', 29, '=')}`)
     WIKI.logger.info('=======================================')
 
     WIKI.models = require('./db').init()
@@ -48,8 +50,9 @@ module.exports = {
    */
   async postBootMaster() {
     await WIKI.models.authentication.refreshStrategiesFromDisk()
-    await WIKI.auth.activateStrategies()
     await WIKI.models.storage.refreshTargetsFromDisk()
+
+    await WIKI.auth.activateStrategies()
     await WIKI.queue.start()
   }
 }

server/setup.js

@@ -270,6 +270,12 @@ module.exports = () => {
       confRaw = yaml.safeDump(conf)
       await fs.writeFileAsync(path.join(WIKI.ROOTPATH, 'config.yml'), confRaw)
 
+      // Create directory structure
+      await fs.ensureDir(conf.paths.data)
+      await fs.ensureDir(path.join(conf.paths.data, 'cache'))
+      await fs.ensureDir(path.join(conf.paths.data, 'temp-upload'))
+      await fs.ensureDir(conf.paths.content)
+
       // Set config
       _.set(WIKI.config, 'defaultEditor', 'markdown')
       _.set(WIKI.config, 'graphEndpoint', 'https://graph.requarks.io')

server/views/main/admin.pug

@@ -1,6 +1,5 @@
 extends ../master.pug
 
 block body
-  body
+  #app
-    #app
+    admin
-      admin

themes/default/views/page.pug

@@ -0,0 +1,65 @@
+extends /master.pug
+
+block head
+
+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-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
+
+            .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