Support multiple customStyles pages

web/client.ts

@@ -794,20 +794,29 @@ export class Client {
 
   async loadCustomStyles() {
     if (this.settings.customStyles) {
-      try {
+      const accumulatedCSS: string[] = [];
-        const { text: stylesText } = await this.space.readPage(
+      let customStylePages = this.settings.customStyles;
-          cleanPageRef(this.settings.customStyles),
+      if (!Array.isArray(customStylePages)) {
-        );
+        customStylePages = [customStylePages];
-        const cssBlockRegex = /```css([^`]+)```/;
-        const match = cssBlockRegex.exec(stylesText);
-        if (!match) {
-          return;
-        }
-        const css = match[1];
-        document.getElementById("custom-styles")!.innerHTML = css;
-      } catch (e: any) {
-        console.error("Failed to load custom styles", e);
       }
+      for (const customStylesPage of customStylePages) {
+        try {
+          const { text: stylesText } = await this.space.readPage(
+            cleanPageRef(customStylesPage),
+          );
+          const cssBlockRegex = /```css([^`]+)```/;
+          const match = cssBlockRegex.exec(stylesText);
+          if (!match) {
+            return;
+          }
+          accumulatedCSS.push(match[1]);
+        } catch (e: any) {
+          console.error("Failed to load custom styles", e);
+        }
+      }
+      document.getElementById("custom-styles")!.innerHTML = accumulatedCSS.join(
+        "\n\n",
+      );
     }
   }
 

web/types.ts

@@ -34,7 +34,7 @@ export type PanelMode = number;
 
 export type BuiltinSettings = {
   indexPage: string;
-  customStyles?: string;
+  customStyles?: string | string[];
   plugOverrides?: Record<string, Partial<Manifest>>;
   // Format: compatible with docker ignore
   spaceIgnore?: string;

website/SETTINGS.md

@@ -4,7 +4,7 @@ This page contains settings for configuring SilverBullet and its Plugs. Changing
 # Initial page to load when launching SB
 indexPage: "[[SilverBullet]]"
 
-# Load custom CSS styles from the following page
+# Load custom CSS styles from the following page, can also be an array
 customStyles: "[[STYLES]]"
 
 # Template related settings