From 83b83a7510007a58d66aeba0c556ca28151712ee Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sat, 20 Jun 2020 16:39:36 -0400 Subject: [PATCH] feat: page css + scripts --- client/components/editor.vue | 26 +++++++++++++------ .../editor/editor-modal-properties.vue | 10 +++---- server/controllers/common.js | 14 ++++++++++ server/models/pages.js | 17 ++++++++++-- server/views/editor.pug | 2 ++ server/views/error.pug | 2 +- 6 files changed, 55 insertions(+), 16 deletions(-) diff --git a/client/components/editor.vue b/client/components/editor.vue index b360437c..2c2b5c3b 100644 --- a/client/components/editor.vue +++ b/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() diff --git a/client/components/editor/editor-modal-properties.vue b/client/components/editor/editor-modal-properties.vue index f3a00adf..cc185ba5 100644 --- a/client/components/editor/editor-modal-properties.vue +++ b/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() diff --git a/server/controllers/common.js b/server/controllers/common.js index 3d61ba10..a7d3ed77 100644 --- a/server/controllers/common.js +++ b/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)) { diff --git a/server/models/pages.js b/server/models/pages.js index 156821c0..85dabacd 100644 --- a/server/models/pages.js +++ b/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, diff --git a/server/views/editor.pug b/server/views/editor.pug index 5b35d3a5..30292b69 100644 --- a/server/views/editor.pug +++ b/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 diff --git a/server/views/error.pug b/server/views/error.pug index b941c6c4..acc8e280 100644 --- a/server/views/error.pug +++ b/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