From fabd785f6df58f7d9d369a4ade18dd498546115a Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Sun, 2 Jul 2023 14:48:27 +0200
Subject: [PATCH] STYLES handling changes (via SETTINGS)

---
 web/editor.tsx       | 24 ++++++++++++++----------
 web/types.ts         |  1 +
 website/CHANGELOG.md |  1 +
 website/SETTINGS.md  |  3 +++
 website/STYLES.md    |  2 +-
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/web/editor.tsx b/web/editor.tsx
index 042e20c..0d97e50 100644
--- a/web/editor.tsx
+++ b/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'
     }
   }
 
diff --git a/web/types.ts b/web/types.ts
index e4592de..d07b159 100644
--- a/web/types.ts
+++ b/web/types.ts
@@ -35,6 +35,7 @@ export type BuiltinSettings = {
   indexPage: string;
   // Format: compatible with docker ignore
   spaceIgnore?: string;
+  customStyles?: string;
 };
 
 export type PanelConfig = {
diff --git a/website/CHANGELOG.md b/website/CHANGELOG.md
index 1c62021..76aa2be 100644
--- a/website/CHANGELOG.md
+++ b/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 `|^|`.
diff --git a/website/SETTINGS.md b/website/SETTINGS.md
index b89aa06..2e8e278 100644
--- a/website/SETTINGS.md
+++ b/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/"
diff --git a/website/STYLES.md b/website/STYLES.md
index 3d22418..812c874 100644
--- a/website/STYLES.md
+++ b/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.