feat: theme code injection

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

@@ -1,4 +1,6 @@
 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

@@ -1,6 +1,10 @@
 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