feat: page css + scripts

client/components/editor.vue

@@ -111,6 +111,14 @@ export default {
       type: Boolean,
       default: true
     },
+    scriptCss: {
+      type: String,
+      default: ''
+    },
+    scriptJs: {
+      type: String,
+      default: ''
+    },
     initEditor: {
       type: String,
       default: null
@@ -185,15 +193,17 @@ export default {
     }
   },
   created() {
-    this.$store.commit('page/SET_ID', this.pageId)
-    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.set('page/id', this.pageId)
+    this.$store.set('page/description', this.description)
+    this.$store.set('page/isPublished', this.isPublished)
+    this.$store.set('page/locale', this.locale)
+    this.$store.set('page/path', this.path)
+    this.$store.set('page/tags', this.tags)
+    this.$store.set('page/title', this.title)
+    this.$store.set('page/scriptCss', this.scriptCss)
+    this.$store.set('page/scriptJs', this.scriptJs)
 
-    this.$store.commit('page/SET_MODE', 'edit')
+    this.$store.set('page/mode', 'edit')
 
     this.setCurrentSavedState()
 

client/components/editor/editor-modal-properties.vue

@@ -189,11 +189,11 @@
 
         v-tab-item(:transition='false', :reverse-transition='false')
           .editor-props-codeeditor-title
-            .overline {{$t('editor:props.js')}}
+            .overline {{$t('editor:props.html')}}
           .editor-props-codeeditor
             textarea(ref='codejs')
           .editor-props-codeeditor-hint
-            .caption {{$t('editor:props.jsHint')}}
+            .caption {{$t('editor:props.htmlHint')}}
 
         v-tab-item(transition='fade-transition', reverse-transition='fade-transition')
           v-card-text
@@ -250,7 +250,7 @@ import gql from 'graphql-tag'
 
 import CodeMirror from 'codemirror'
 import 'codemirror/lib/codemirror.css'
-import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/htmlmixed/htmlmixed.js'
 import 'codemirror/mode/css/css.js'
 
 /* global siteLangs, siteConfig */
@@ -323,7 +323,7 @@ export default {
       if (newValue === 2) {
         this.$nextTick(() => {
           setTimeout(() => {
-            this.loadEditor(this.$refs.codejs, 'javascript')
+            this.loadEditor(this.$refs.codejs, 'html')
           }, 100)
         })
       } else if (newValue === 4) {
@@ -363,7 +363,7 @@ export default {
         direction: 'ltr'
       })
       switch (mode) {
-        case 'javascript':
+        case 'html':
           this.cm.setValue(this.scriptJs)
           this.cm.on('change', c => {
             this.scriptJs = c.getValue()

server/controllers/common.js

@@ -2,6 +2,7 @@ const express = require('express')
 const router = express.Router()
 const pageHelper = require('../helpers/page')
 const _ = require('lodash')
+const CleanCSS = require('clean-css')
 
 /* global WIKI */
 
@@ -153,6 +154,11 @@ router.get(['/e', '/e/*'], async (req, res, next) => {
     await page.$relatedQuery('tags')
     page.tags = _.map(page.tags, 'tag')
 
+    // -> Beautify Script CSS
+    if (!_.isEmpty(page.extra.css)) {
+      page.extra.css = new CleanCSS({ format: 'beautify' }).minify(page.extra.css).styles
+    }
+
     _.set(res.locals, 'pageMeta.title', `Edit ${page.title}`)
     _.set(res.locals, 'pageMeta.description', page.description)
     page.mode = 'update'
@@ -454,6 +460,14 @@ router.get('/*', async (req, res, next) => {
           body: WIKI.config.theming.injectBody
         }
 
+        if (!_.isEmpty(page.extra.css)) {
+          injectCode.css = `${injectCode.css}\n${page.extra.css}`
+        }
+
+        if (!_.isEmpty(page.extra.js)) {
+          injectCode.body = `${injectCode.body}\n${page.extra.js}`
+        }
+
         if (req.query.legacy || req.get('user-agent').indexOf('Trident') >= 0) {
           // -> Convert page TOC
           if (_.isString(page.toc)) {

server/models/pages.js

@@ -51,6 +51,10 @@ module.exports = class Page extends Model {
     }
   }
 
+  static get jsonAttributes() {
+    return ['extra']
+  }
+
   static get relationMappings() {
     return {
       tags: {
@@ -139,6 +143,10 @@ module.exports = class Page extends Model {
           title: 'string'
         }
       ],
+      extra: {
+        js: 'string',
+        css: 'string'
+      },
       title: 'string',
       toc: 'string',
       updatedAt: 'string'
@@ -248,7 +256,7 @@ module.exports = class Page extends Model {
       throw new WIKI.Error.PageEmptyContent()
     }
 
-    // -> Format JS Scripts
+    // -> Format CSS Scripts
     let scriptCss = ''
     if (WIKI.auth.checkAccess(opts.user, ['write:styles'], {
       locale: opts.locale,
@@ -375,7 +383,7 @@ module.exports = class Page extends Model {
       ogPage.extra = {}
     }
 
-    // -> Format JS Scripts
+    // -> Format CSS Scripts
     let scriptCss = _.get(ogPage, 'extra.css', '')
     if (WIKI.auth.checkAccess(opts.user, ['write:styles'], {
       locale: opts.locale,
@@ -787,6 +795,7 @@ module.exports = class Page extends Model {
           'pages.localeCode',
           'pages.authorId',
           'pages.creatorId',
+          'pages.extra',
           {
             authorName: 'author.name',
             authorEmail: 'author.email',
@@ -846,6 +855,10 @@ module.exports = class Page extends Model {
       creatorId: page.creatorId,
       creatorName: page.creatorName,
       description: page.description,
+      extra: {
+        css: page.extra ? page.extra.css : '',
+        js: page.extra ? page.extra.js : ''
+      },
       isPrivate: page.isPrivate === 1 || page.isPrivate === true,
       isPublished: page.isPublished === 1 || page.isPublished === true,
       publishEndDate: page.publishEndDate,

server/views/editor.pug

@@ -14,6 +14,8 @@ block body
       description=page.description
       :tags=page.tags
       :is-published=page.isPublished
+      script-css=page.extra.css
+      script-js=page.extra.js
       init-mode=page.mode
       init-editor=page.editorKey
       init-content=page.content

server/views/error.pug

@@ -4,7 +4,7 @@ block body
   #root.is-fullscreen
     .app-error
       a(href='/')
-        img(src='/svg/logo-wikijs.svg')
+        img(src='/_assets/svg/logo-wikijs.svg')
       strong Oops, something went wrong...
       span= message