Global contants for default keys

src/App.vue

@@ -19,13 +19,14 @@ export default {
     Footer,
   },
   data: () => ({
-    pageInfo: conf.pageInfo,
+    pageInfo: conf.pageInfo || Defaults.pageInfo,
+    appConfig: conf.appConfig || Defaults.appConfig,
     showFooter: Defaults.visibleComponents.footer,
   }),
   methods: {
     /* Returns either page info from the config, or default values */
     getPageInfo(pageInfo) {
-      const defaults = { title: 'Demo', description: '' };
+      const defaults = Defaults.pageInfo;
       if (pageInfo) {
         return {
           title: pageInfo.title || defaults.title,

src/components/LinkItems/Collapsable.vue

@@ -22,6 +22,9 @@
 </template>
 
 <script>
+
+import { localStorageKeys } from '@/utils/defaults';
+
 export default {
   name: 'CollapsableContainer',
   props: {
@@ -52,14 +55,17 @@ export default {
     },
     /* If not already done, then add object structure to local storage */
     initialiseStorage() {
-      const initStorage = () => localStorage.setItem('collapseState', JSON.stringify({}));
+      /* Initialize function will create and set a blank object to storage */
-      if (!localStorage.collapseState) initStorage(); // If not yet set, then init localstorage
+      const initStorage = () => localStorage.setItem(
+        localStorageKeys.COLLAPSE_STATE, JSON.stringify({}),
+      );
+      if (!localStorage[localStorageKeys.COLLAPSE_STATE]) initStorage(); // Initialise if not set
       try { // Check storage is valid JSON, and has not been corrupted
-        JSON.parse(localStorage.collapseState);
+        JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
       } catch {
         initStorage();
       }
-      return JSON.parse(localStorage.collapseState);
+      return JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
     },
     getCollapseState() {
       const collapseStateObject = this.initialiseStorage();
@@ -71,11 +77,11 @@ export default {
     },
     setCollapseState(id, newState) {
       // Get the current localstorage collapse state object
-      const collapseState = JSON.parse(localStorage.collapseState);
+      const collapseState = JSON.parse(localStorage[localStorageKeys.COLLAPSE_STATE]);
       // Add the new state to it
       collapseState[id] = newState;
       // Stringify, and set the new object into local storage
-      localStorage.setItem('collapseState', JSON.stringify(collapseState));
+      localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify(collapseState));
     },
     collapseChanged(whatChanged) {
       this.initialiseStorage();

src/components/PageStrcture/Header.vue

@@ -8,7 +8,7 @@
 <script>
 import PageTitle from '@/components/PageStrcture/PageTitle.vue';
 import Nav from '@/components/PageStrcture/Nav.vue';
-import Defaults from '@/utils/defaults';
+import { visibleComponents } from '@/utils/defaults';
 
 export default {
   name: 'Header',
@@ -21,8 +21,9 @@ export default {
   },
   data() {
     return {
-      titleVisible: Defaults.visibleComponents.pageTitle,
+      hiddenComponents: this.pageInfo.hiddenComponents || {},
-      navVisible: Defaults.visibleComponents.navigation,
+      titleVisible: visibleComponents.pageTitle,
+      navVisible: visibleComponents.navigation,
     };
   },
 };

src/components/Settings/KeyboardShortcutInfo.vue

@@ -13,6 +13,9 @@
 </template>
 
 <script>
+
+import { localStorageKeys } from '@/utils/defaults';
+
 export default {
   name: 'KeyboardShortcutInfo',
   data() {
@@ -27,7 +30,7 @@ export default {
      * Note the !! just converts 'false' to false, as strings resolve to true
      */
     shouldHideWelcomeMessage() {
-      return !!localStorage.hideWelcomeHelpers;
+      return !!localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
     },
     /**
      * Update session storage, so that it won't be shown again
@@ -35,7 +38,7 @@ export default {
      */
     hideWelcomeHelper() {
       this.shouldHide = true;
-      localStorage.setItem('hideWelcomeHelpers', true);
+      localStorage.setItem(localStorageKeys.HIDE_WELCOME_BANNER, true);
       window.removeEventListener('keyup');
     },
   },

src/components/Settings/ThemeSelector.vue

@@ -13,7 +13,7 @@
 <script>
 
 import ThemeHelper from '@/utils/ThemeHelper';
-import Defaults from '@/utils/defaults';
+import Defaults, { localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'ThemeSelector',
@@ -47,7 +47,7 @@ export default {
     if (this.isThemeLocal(this.selectedTheme)) {
       this.updateTheme(this.selectedTheme);
     // If it's an external stylesheet, then wait for promise to resolve
-    } else if (this.selectedTheme !== 'Default') {
+    } else if (this.selectedTheme !== Defaults.theme) {
       Promise.all(added).then(() => {
         this.updateTheme(this.selectedTheme);
       });
@@ -61,7 +61,7 @@ export default {
     },
     /* Get default theme */
     getInitialTheme() {
-      return localStorage.theme || this.confTheme || Defaults.defaultTheme;
+      return localStorage[localStorageKeys.THEME] || this.confTheme || Defaults.theme;
     },
     isThemeLocal(themeToCheck) {
       return this.builtInThemes.includes(themeToCheck);
@@ -77,7 +77,7 @@ export default {
       } else {
         this.themeHelper.theme = newTheme;
       }
-      localStorage.setItem('theme', newTheme);
+      localStorage.setItem(localStorageKeys.THEME, newTheme);
     },
     resetToDefault() {
       document.getElementsByTagName('html')[0].removeAttribute('data-theme');

src/data/conf.yml

@@ -2,6 +2,16 @@
 pageInfo:
   title: Hello World
   description: 'This is a demo'
+appConfig:
+  theme: 'default'
+  externalStyleSheet: 'https://bootswatch.com/4/solar/bootstrap.min.css'
+  cssThemes: ['hello', 'world']
+  enableFontAwesome: true
+  fontAwesomeKey: ''
+  hiddenComponents:
+  - footer: true
+    navigation: false
+    pageTitle: false
 sections:
 - name: Firewall
   items:

src/utils/defaults.js

@@ -1,7 +1,13 @@
 module.exports = {
+  pageInfo: {
+    title: 'Dashy',
+    description: '',
+  },
+  appConfig: {},
   iconSize: 'medium',
   layout: 'auto',
-  defaultTheme: 'default',
+  theme: 'default',
+  fontAwesomeKey: 'def7c3ce4c',
   builtInThemes: [
     'nord',
     'nord-frost',
@@ -26,4 +32,11 @@ module.exports = {
     settings: true,
     footer: true,
   },
+  localStorageKeys: {
+    HIDE_WELCOME_BANNER: 'hideWelcomeHelpers',
+    LAYOUT_ORIENTATION: 'layoutOrientation',
+    COLLAPSE_STATE: 'collapseState',
+    ICON_SIZE: 'iconSize',
+    THEME: 'theme',
+  },
 };

src/views/Home.vue

@@ -33,7 +33,7 @@
 
 import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 import ItemGroup from '@/components/LinkItems/ItemGroup.vue';
-import Defaults from '@/utils/defaults';
+import Defaults, { localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'home',
@@ -52,16 +52,16 @@ export default {
   }),
   computed: {
     layoutOrientation: {
-      get: () => localStorage.layoutOrientation || Defaults.layout,
+      get: () => localStorage[localStorageKeys.LAYOUT_ORIENTATION] || Defaults.layout,
       set: function setLayout(layout) {
-        localStorage.setItem('layoutOrientation', layout);
+        localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
         this.layout = layout;
       },
     },
     iconSize: {
-      get: () => localStorage.iconSize || Defaults.iconSize,
+      get: () => localStorage[localStorageKeys.ICON_SIZE] || Defaults.iconSize,
       set: function setIconSize(iconSize) {
-        localStorage.setItem('iconSize', iconSize);
+        localStorage.setItem(localStorageKeys.ICON_SIZE, iconSize);
         this.itemSizeBound = iconSize;
       },
     },
@@ -140,9 +140,10 @@ export default {
     },
     /* Injects font-awesome's script tag, only if needed */
     initiateFontAwesome() {
-      if (this.checkIfFontAwesomeNeeded()) {
+      if (this.appConfig.enableFontAwesome || this.checkIfFontAwesomeNeeded()) {
         const fontAwesomeScript = document.createElement('script');
-        fontAwesomeScript.setAttribute('src', 'https://kit.fontawesome.com/def7c3ce4c.js');
+        const faKey = this.appConfig.fontAwesomeKey || Defaults.fontAwesomeKey;
+        fontAwesomeScript.setAttribute('src', `https://kit.fontawesome.com/${faKey}.js`);
         document.head.appendChild(fontAwesomeScript);
       }
     },