feat: theme code injection

client/components/admin/admin-theme.vue

@@ -24,7 +24,7 @@
                     outline
                     background-color='grey lighten-2'
                     prepend-icon='palette'
-                    v-model='selectedTheme'
+                    v-model='config.theme'
                     label='Site Theme'
                     persistent-hint
                     hint='Themes affect how content pages are displayed. Other site sections (such as the editor or admin area) are not affected.'
@@ -47,41 +47,36 @@
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
                     .subheading Code Injection
-                  v-spacer
-                  v-chip(label, color='white', small).primary--text coming soon
                 v-card-text
                   v-textarea(
-                    v-model='injectCSS'
+                    v-model='config.injectCSS'
                     label='CSS Override'
                     outline
                     background-color='grey lighten-1'
                     color='primary'
                     persistent-hint
-                    hint='CSS code to inject after system default CSS'
+                    hint='CSS code to inject after system default CSS. Consider using custom themes if you have a large amount of css code. Injecting too much CSS code will result in poor page load performance! CSS will automatically be minified.'
                     auto-grow
-                    disabled
                     )
                   v-textarea.mt-2(
-                    v-model='injectHeader'
+                    v-model='config.injectHead'
                     label='Head HTML Injection'
                     outline
                     background-color='grey lighten-1'
                     color='primary'
                     persistent-hint
-                    hint='HTML code to be injected just before the closing head tag'
+                    hint='HTML code to be injected just before the closing head tag. Usually for script tags.'
                     auto-grow
-                    disabled
                     )
                   v-textarea.mt-2(
-                    v-model='injectFooter'
+                    v-model='config.injectBody'
                     label='Body HTML Injection'
                     outline
                     background-color='grey lighten-1'
                     color='primary'
                     persistent-hint
-                    hint='HTML code to be injected just before the closing body tag'
+                    hint='HTML code to be injected just before the closing body tag.'
                     auto-grow
-                    disabled
                     )
             v-flex(lg6 xs12)
               v-card
@@ -97,6 +92,7 @@
 import _ from 'lodash'
 import { sync } from 'vuex-pathify'
 
+import themeConfigQuery from 'gql/admin/theme/theme-query-config.gql'
 import themeSaveMutation from 'gql/admin/theme/theme-mutation-save.gql'
 
 export default {
@@ -106,11 +102,14 @@ export default {
       themes: [
         { text: 'Default', author: 'requarks.io', value: 'default' }
       ],
-      selectedTheme: 'default',
-      darkModeInitial: false,
-      injectCSS: '',
-      injectHeader: '',
-      injectFooter: ''
+      config: {
+        theme: 'default',
+        darkMode: false,
+        injectCSS: '',
+        injectHead: '',
+        injectBody: ''
+      },
+      darkModeInitial: false
     }
   },
   computed: {
@@ -130,8 +129,11 @@ export default {
         const respRaw = await this.$apollo.mutate({
           mutation: themeSaveMutation,
           variables: {
-            theme: this.selectedTheme,
-            darkMode: this.darkMode
+            theme: this.config.theme,
+            darkMode: this.darkMode,
+            injectCSS: this.config.injectCSS,
+            injectHead: this.config.injectHead,
+            injectBody: this.config.injectBody
           }
         })
         const resp = _.get(respRaw, 'data.theming.setConfig.responseResult', {})
@@ -151,6 +153,16 @@ export default {
       this.$store.commit(`loadingStop`, 'admin-theme-save')
       this.loading = false
     }
+  },
+  apollo: {
+    config: {
+      query: themeConfigQuery,
+      fetchPolicy: 'network-only',
+      update: (data) => data.theming.config,
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-theme-refresh')
+      }
+    }
   }
 }
 </script>

client/graph/admin/theme/theme-mutation-save.gql

-mutation($theme: String!, $darkMode: Boolean!) {
+mutation($theme: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) {
   theming {
-    setConfig(theme: $theme, darkMode: $darkMode) {
+    setConfig(theme: $theme, darkMode: $darkMode, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
       responseResult {
         succeeded
         errorCode

client/graph/admin/theme/theme-query-config.gql

+query {
+  theming {
+    config {
+      theme
+      darkMode
+      injectCSS
+      injectHead
+      injectBody
+    }
+  }
+}

package.json

@@ -54,6 +54,7 @@
     "cheerio": "1.0.0-rc.2",
     "child-process-promise": "2.2.1",
     "chokidar": "2.0.4",
+    "clean-css": "4.2.1",
     "compression": "1.7.3",
     "connect-redis": "3.4.0",
     "cookie-parser": "1.4.3",
@@ -179,7 +180,6 @@
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.1.6",
     "@panter/vue-i18next": "0.13.0",
-    "@vue/cli": "3.1.3",
     "animated-number-vue": "0.1.3",
     "apollo-cache-inmemory": "1.3.10",
     "apollo-client": "2.4.6",

server/controllers/common.js

@@ -149,7 +149,12 @@ router.get('/*', async (req, res, next) => {
     _.set(res.locals, 'pageMeta.title', page.title)
     _.set(res.locals, 'pageMeta.description', page.description)
     const sidebar = await WIKI.models.navigation.getTree({ cache: true })
-    res.render('page', { page, sidebar })
+    const injectCode = {
+      css: WIKI.config.theming.injectCSS,
+      head: WIKI.config.theming.injectHead,
+      body: WIKI.config.theming.injectBody
+    }
+    res.render('page', { page, sidebar, injectCode })
   } else if (pageArgs.path === 'home') {
     _.set(res.locals, 'pageMeta.title', 'Welcome')
     res.render('welcome')

server/graph/resolvers/theming.js

 const graphHelper = require('../../helpers/graph')
+const _ = require('lodash')
+const CleanCSS = require('clean-css')
 
 /* global WIKI */
 
@@ -18,17 +20,27 @@ module.exports = {
       }]
     },
     async config(obj, args, context, info) {
-      return {
-        theme: WIKI.config.theming.theme,
-        darkMode: WIKI.config.theming.darkMode
-      }
+      return _.pick(WIKI.config.theming, ['theme', 'darkMode', 'injectCSS', 'injectHead', 'injectBody'])
     }
   },
   ThemingMutation: {
     async setConfig(obj, args, context, info) {
       try {
-        WIKI.config.theming.theme = args.theme
-        WIKI.config.theming.darkMode = args.darkMode
+        if (!_.isEmpty(args.injectCSS)) {
+          args.injectCSS = new CleanCSS({
+            inline: false
+          }).minify(args.injectCSS).styles
+        }
+
+        WIKI.config.theming = {
+          ...WIKI.config.theming,
+          theme: args.theme,
+          darkMode: args.darkMode,
+          injectCSS: args.injectCSS || '',
+          injectHead: args.injectHead || '',
+          injectBody: args.injectBody || ''
+        }
+
         await WIKI.configSvc.saveToDb(['theming'])
 
         return {

server/graph/schemas/theming.graphql

@@ -27,6 +27,9 @@ type ThemingMutation {
   setConfig(
     theme: String!
     darkMode: Boolean!
+    injectCSS: String
+    injectHead: String
+    injectBody: String
   ): DefaultResponse @auth(requires: ["manage:theme", "manage:system"])
 }
 
@@ -35,8 +38,11 @@ type ThemingMutation {
 # -----------------------------------------------
 
 type ThemingConfig {
-  theme: String
-  darkMode: Boolean
+  theme: String!
+  darkMode: Boolean!
+  injectCSS: String
+  injectHead: String
+  injectBody: String
 }
 
 type ThemingTheme {

server/views/page.pug

 extends master.pug
 
 block head
+  if injectCode.css
+    style(type='text/css')!= injectCode.css
+  if injectCode.head
+    != injectCode.head
 
 block body
   #root
@@ -31,3 +35,5 @@ block body
           else if navItem.kind === 'header'
             v-subheader.pl-4= navItem.label
       template(slot='contents')!= page.render
+  if injectCode.body
+    != injectCode.body