STYLES handling changes (via SETTINGS)

web/editor.tsx

@@ -1270,17 +1270,21 @@ export class Editor {
   }
 
   async loadCustomStyles() {
-    try {
-      const { text: stylesText } = await this.space.readPage("STYLES");
-      const cssBlockRegex = /```css([^`]+)```/;
-      const match = cssBlockRegex.exec(stylesText);
-      if (!match) {
-        return;
+    if (this.settings?.customStyles) {
+      try {
+        const { text: stylesText } = await this.space.readPage(
+          this.settings?.customStyles,
+        );
+        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);
       }
-      const css = match[1];
-      document.getElementById("custom-styles")!.innerHTML = css;
-    } catch {
-      // Nuthin'
     }
   }
 

web/types.ts

@@ -35,6 +35,7 @@ export type BuiltinSettings = {
   indexPage: string;
   // Format: compatible with docker ignore
   spaceIgnore?: string;
+  customStyles?: string;
 };
 
 export type PanelConfig = {

website/CHANGELOG.md

@@ -6,6 +6,7 @@ release.
 ## Next
 
 * **Breaking change (for some templates):** Template in various places allowed you to use `{{variables}}` and various handlebars functions. There also used to be a magic `{{page}}` variable that you could use in various places, but not everywhere. This has now been unified. And the magical `{{page}}` now has been replaced with the global `@page` which does not just expose the page’s name, but any page meta data. More information here: [[🔌 Core/Templates@vars]]. You will now get completion for built-in handlebars helpers after typing `{{`.
+* **Breaking change** (for [[STYLES]] users). The [[STYLES]] page is now no longer “magic” and hardcoded. It can (and must) now be specified in [[SETTINGS]] (see example on that page) for styles to be loaded from it.
 * Folding is here (at least with commands, not much UI): {[Fold: Fold]}, {[Fold: Unfold]}, {[Fold: Toggle Fold]}, {[Fold: Fold All]} and {[Fold: Unfold All]}.
 * {[Broken Links: Show]} command (not complete yet, but already useful)
 * The `Daily Note` template now supports setting a caret position with `|^|`.

website/SETTINGS.md

@@ -4,6 +4,9 @@ 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
+customStyles: STYLES
+
 # Template related settings
 pageTemplatePrefix: "template/page/"
 snippetPrefix: "snippet/"

website/STYLES.md

@@ -1,4 +1,4 @@
-If you create a [[STYLES]] page in your project, SilverBullet will look for a CSS code block inside that page and load it upon boot (an example can be found below).
+In [[SETTINGS]] you can define a `customStyles` setting that links to a page like this. SilverBullet will load the specified page, find a CSS code block inside that page and load it upon boot (an example can be found below).
 
 This can be used to achieve various things, such as overriding the default editor font or setting wider page widths. What CSS styles you can override is not very well documented, you’ll have to reverse-engineer things a bit for now, unfortunately.