Fix/external style loading

docs/theming.md

@@ -81,7 +81,7 @@ For example, if the pages name was "CFT Toolbox", and you wanted to target `.ite
 ## Loading External Stylesheets
 
 The URI of a stylesheet, either local or hosted on a remote CDN can be passed into the config file. The attribute `appConfig.externalStyleSheet` accepts either a string, or an array of strings. You can also pass custom font stylesheets here, they must be in a CSS format (for example, `https://fonts.googleapis.com/css2?family=Cutive+Mono`).
-This is handled in [`ThemeHelper.js`](https://github.com/Lissy93/dashy/blob/master/src/utils/ThemeHelper.js).
+This is handled in [`App.vue`](https://github.com/Lissy93/dashy/blob/master/src/App.vue).
 
 For example:
 

src/App.vue

@@ -101,6 +101,32 @@ export default {
       style.textContent = usersCss;
       document.head.append(style);
     },
+    /* Applies user-defined custom CSS and external stylesheets from appConfig */
+    applyCustomStyles() {
+      if (this.appConfig.customCss) {
+        const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
+        this.injectCustomStyles(cleanedCss);
+      }
+      if (this.appConfig.externalStyleSheet) {
+        // Remove any previously injected external stylesheets to avoid duplicates bug
+        document.querySelectorAll('[data-external-source]').forEach((el) => el.remove());
+        // Then add the external stylesheet(s)
+        const externals = this.appConfig.externalStyleSheet;
+        const urls = Array.isArray(externals) ? externals : [externals];
+        urls.forEach((url) => {
+          if (typeof url !== 'string' || (!url.startsWith('http') && !url.startsWith('/'))) {
+            ErrorHandler(`Invalid external stylesheet URL: ${url}`);
+            return;
+          }
+          const link = document.createElement('link');
+          link.setAttribute('rel', 'stylesheet');
+          link.setAttribute('type', 'text/css');
+          link.setAttribute('href', url);
+          link.setAttribute('data-external-source', 'dashy');
+          document.head.appendChild(link);
+        });
+      }
+    },
     /* Hide splash screen, either after 2 seconds, or immediately based on user preference */
     hideSplash() {
       if (this.shouldShowSplash) {
@@ -171,10 +197,7 @@ export default {
     this.applyLanguage(); // Apply users local language
     this.applyThemeBasedOnOSPreference(); // Apply theme based on OS preference
     this.hideSplash(); // Hide the splash screen, if visible
-    if (this.appConfig.customCss) { // Inject users custom CSS, if present
-      const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
-      this.injectCustomStyles(cleanedCss);
-    }
+    this.applyCustomStyles(); // Apply custom CSS and external stylesheets
     this.hideLoader(); // If initial placeholder still visible, hide it
     welcomeMsg(); // Show message in console
   },

src/utils/ConfigSchema.json

@@ -444,8 +444,8 @@
         },
         "externalStyleSheet": {
           "title": "External Stylesheets",
-          "description": "List of URLs of external stylesheets to add to dropdown/ load",
-          "type": "array",
+          "description": "URL or list of URLs of external stylesheets to load",
+          "type": ["string", "array"],
           "items": {
             "type": "string"
           }