Adds custom CSS functionality

README.md

@@ -95,6 +95,7 @@ All fields are optional, unless otherwise stated.
 - `backgroundImg` - String: Path to an optional full-screen app background image. This can be either remote (http) or local (/). Note that this will slow down initial load
 - `enableFontAwesome` - Boolean: Where `true` is enabled, if left blank font-awesome will be enabled only if required by 1 or more icons
 - `fontAwesomeKey` - String: If you have a font-awesome key, then you can use it here and make use of premium icons. It is a 10-digit alpha-numeric string from you're FA kit URL  (e.g. `13014ae648`)
+- `customCss` - String: Raw CSS that will be applied to the page. Please minify it first.
 - `theme`- String: The default theme for first load (you can change this later from the UI)
 - `cssThemes` - String[]: An array of custom theme names which can be used in the theme switcher dropdown - _See **theming** below_
 - `externalStyleSheet` - String or String[] - Either a URL to an external stylesheet or an array or URLs, which can be applied as themes within the UI

src/App.vue

@@ -20,11 +20,21 @@ export default {
   },
   data: () => ({
     // pageInfo: this.getPageInfo(conf.pageInfo),
-    appConfig: conf.appConfig || Defaults.appConfig,
     showFooter: Defaults.visibleComponents.footer,
   }),
   computed: {
-    pageInfo: function pi() { return this.getPageInfo(conf.pageInfo); },
+    pageInfo() {
+      return this.getPageInfo(conf.pageInfo);
+    },
+    appConfig() {
+      if (localStorage[localStorageKeys.APP_CONFIG]) {
+        return JSON.parse(localStorage[localStorageKeys.APP_CONFIG]);
+      } else if (conf.appConfig) {
+        return conf.appConfig;
+      } else {
+        return Defaults.appConfig;
+      }
+    },
   },
   methods: {
     /* Returns either page info from the config, or default values */
@@ -53,6 +63,17 @@ export default {
       }
       return '';
     },
+    injectCustomStyles(usersCss) {
+      const style = document.createElement('style');
+      style.textContent = usersCss;
+      document.head.append(style);
+    },
+  },
+  mounted() {
+    if (this.appConfig.customCss) {
+      const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
+      this.injectCustomStyles(cleanedCss);
+    }
   },
 };
 </script>

src/components/Configuration/ConfigContainer.vue

@@ -49,6 +49,9 @@
     <TabItem name="Edit Site Meta">
       <EditSiteMeta :config="config" />
     </TabItem>
+    <TabItem name="Custom Styles">
+      <CustomCssEditor :config="config" initialCss="hello" />
+    </TabItem>
   </Tabs>
 </template>
 
@@ -58,6 +61,7 @@ import JsonToYaml from '@/utils/JsonToYaml';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import EditSiteMeta from '@/components/Configuration/EditSiteMeta';
 import JsonEditor from '@/components/Configuration/JsonEditor';
+import CustomCssEditor from '@/components/Configuration/CustomCss';
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
@@ -83,6 +87,7 @@ export default {
   components: {
     EditSiteMeta,
     JsonEditor,
+    CustomCssEditor,
     DownloadIcon,
     DeleteIcon,
     EditIcon,

src/components/Configuration/CustomCss.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="json-editor-outer">
+    <textarea v-model="customCss"></textarea>
+    <button class="save-button" @click="save()">Save Changes</button>
+  </div>
+</template>
+
+<script>
+
+import { localStorageKeys } from '@/utils/defaults';
+
+export default {
+  name: 'JsonEditor',
+  props: {
+    config: Object,
+  },
+  data() {
+    return {
+      customCss: this.config.appConfig.customCss || '',
+    };
+  },
+  methods: {
+    validate() {
+      return true;
+    },
+    save() {
+      let msg = '';
+      if (this.validate()) {
+        const appConfig = { ...this.config.appConfig };
+        appConfig.customCss = this.customCss;
+        localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(appConfig));
+        msg = 'Changes saved succesfully';
+        this.inject(this.customCss);
+      } else {
+        msg = 'Error - Invalid CSS';
+      }
+      this.$toasted.show(msg);
+    },
+    inject(userStyles) {
+      const cleanedCss = userStyles.replace(/<\/?[^>]+(>|$)/g, '');
+      const style = document.createElement('style');
+      style.textContent = cleanedCss;
+      document.head.append(style);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+button.save-button {
+  padding:  0.5rem 1rem;
+  margin: 0.25rem auto;
+  font-size: 1.2rem;
+  background: var(--config-settings-color);
+  color: var(--config-settings-background);
+  border: 1px solid var(--config-settings-background);
+  border-radius: var(--curve-factor);
+  cursor: pointer;
+  &:hover {
+    background: var(--config-settings-background);
+    color: var(--config-settings-color);
+    border-color: var(--config-settings-color);
+  }
+}
+
+</style>

src/router.js

@@ -14,6 +14,13 @@ try {
   localPageInfo = undefined;
 }
 
+let localAppConfig;
+try {
+  localAppConfig = JSON.parse(localStorage[localStorageKeys.APP_CONFIG]);
+} catch (e) {
+  localAppConfig = undefined;
+}
+
 const router = new Router({
   routes: [
     {
@@ -23,7 +30,7 @@ const router = new Router({
       props: {
         sections: sections || [],
         pageInfo: localPageInfo || pageInfo || defaultPageInfo,
-        appConfig: appConfig || {},
+        appConfig: localAppConfig || appConfig || {},
       },
       meta: {
         title: 'Home Page',