Added support for overriding CSS styles with STYLES page

web/cm_plugins/inline_image.ts

@@ -67,6 +67,7 @@ export function inlineImagesPlugin(space: Space) {
         widgets.push(
           Decoration.widget({
             widget: new InlineImageWidget(url, title, space),
+            block: true,
           }).range(node.to),
         );
       },

web/cm_plugins/link.ts

@@ -1,4 +1,3 @@
-import { ClickEvent } from "../../plug-api/app_event.ts";
 import { Decoration, syntaxTree } from "../deps.ts";
 import { Editor } from "../editor.tsx";
 import {
@@ -6,7 +5,6 @@ import {
   invisibleDecoration,
   isCursorInRange,
 } from "./util.ts";
-import { LinkWidget } from "./util.ts";
 
 export function linkPlugin(editor: Editor) {
   return decoratorStateField((state) => {

web/components/top_bar.tsx

@@ -40,7 +40,6 @@ export function TopBar({
   lhs?: ComponentChildren;
   rhs?: ComponentChildren;
 }) {
-  // const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Another one of my less proud moments:
@@ -48,6 +47,11 @@ export function TopBar({
   // it this way. If you have a better way to do this, please let me know!
   useEffect(() => {
     function resizeHandler() {
+      const editorWidth = parseInt(
+        getComputedStyle(document.getElementById("sb-root")!).getPropertyValue(
+          "--editor-width",
+        ),
+      );
       const currentPageElement = document.getElementById("sb-current-page");
       if (currentPageElement) {
         // Temporarily make it very narrow to give the parent space
@@ -56,7 +60,7 @@ export function TopBar({
 
         // Then calculate a new width
         currentPageElement.style.width = `${
-          Math.min(650, innerDiv.clientWidth - 150)
+          Math.min(editorWidth - 150, innerDiv.clientWidth - 150)
         }px`;
       }
     }

web/editor.tsx

@@ -331,13 +331,7 @@ export class Editor {
       }
     });
 
-    // Need to find a nicer way of doing this stuff
+    this.loadCustomStyles().catch(console.error);
-    if (this.builtinSettings.fontFamily) {
-      document.getElementById("sb-root")!.setAttribute(
-        "style",
-        `--editor-font: ${this.builtinSettings.fontFamily};`,
-      );
-    }
 
     await this.dispatchAppEvent("editor:init");
   }
@@ -995,6 +989,21 @@ export class Editor {
     contentDOM.setAttribute("autocapitalize", "on");
   }
 
+  async loadCustomStyles() {
+    try {
+      const { text: stylesText } = await this.space.readPage("STYLES");
+      const cssBlockRegex = /```css([^`]+)```/;
+      const match = cssBlockRegex.exec(stylesText);
+      if (!match) {
+        return;
+      }
+      const css = match[1];
+      document.getElementById("custom-styles")!.innerHTML = css;
+    } catch {
+      // Nuthin'
+    }
+  }
+
   private restoreState(pageName: string): boolean {
     const pageState = this.openPages.get(pageName);
     const editorView = this.editorView!;

web/index.html

@@ -33,6 +33,9 @@
       width: 100%;
       overflow: hidden;
     }
+  </style>
+  <style id="custom-styles">
+
   </style>
   <link rel="stylesheet" href="/main.css" />
   <script type="module" src="/client.js"></script>

web/styles/editor.scss

@@ -4,13 +4,12 @@
 
 #sb-main .cm-editor {
   font-size: 18px;
-  --max-width: 800px;
   height: 100%;
 
   .cm-content {
     margin-left: auto;
     margin-right: auto;
-    max-width: var(--max-width);
+    max-width: var(--#{"editor-width"});
     padding: 5px 20px;
   }
 

web/styles/main.scss

@@ -49,7 +49,8 @@
     max-width: 100%;
 
     .inner {
-      max-width: 800px;
+      // Hack to not have SCSS precompile this value but use proper CSS variables
+      max-width: var(--#{"editor-width"});
       margin: auto;
       font-size: 28px;
       padding: 10px 0;

web/styles/theme.scss

@@ -5,6 +5,7 @@
 
   --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --editor-font: "iA-Mono", "Menlo";
+  --editor-width: 800px;
   font-family: var(--ui-font);
 }
 

web/types.ts

@@ -8,13 +8,10 @@ export type Notification = {
   date: Date;
 };
 
-type EditorMode = "ro" | "rw";
-
 export type PanelMode = number;
 
 export type BuiltinSettings = {
   indexPage: string;
-  fontFamily?: string;
 };
 
 export type PanelConfig = {

website/CHANGELOG.md

@@ -6,6 +6,7 @@ release.
 ## Next
 
 * Support template variables in a page template's `$name`
+* Added support to override CSS styles on a per-space basis. This replaces the previous `fontFamily` setting. See [[STYLES]] for hints on how to use this new experimental feature.
 * Reverted behavior of using up/down arrow keys to move between the page title and page content (and rename based on it). This resulted in undesirable behavior too often. You can now rename a page by clicking/tapping on the title, changing the name and hitting Enter or clicking anywhere outside the page title to apply the rename. 
 * Dependency upgrades
 * Various bug fixes
@@ -36,7 +37,7 @@ release.
 * Fixed copy & paste, drag & drop of attachments in the [[Desktop]] app
 * Continuous [[Sync]]
 * Support for embedding [[Markdown/Code Widgets]].
-* Ability to set the editor font via the `fontFamily` setting in [[SETTINGS]] (restart the app/reload the page to make it go into effect).
+* ~~Ability to set the editor font via the `fontFamily` setting~~ in [[SETTINGS]] (restart the app/reload the page to make it go into effect). **Update**: now done via [[STYLES]]
 
 ---
 ## 0.2.8

website/STYLES.md

@@ -0,0 +1,12 @@
+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).
+
+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.
+
+```css
+#sb-root {
+   /* Uncomment the next line to set the editor font to Courier */
+   /* --editor-font: "Courier" !important; */
+   /* Uncomment the next line to set the editor width to 1400px */
+   /* --editor-width: 1400px !important; */
+}
+```

website/SilverBullet.md

@@ -96,7 +96,7 @@ Click on the links below to explore various aspects of SilverBullet more in-dept
 
 * [[CHANGELOG]]: What’s new?
 * [[🔌 Plugs]]: extensions available for, and as part of SilverBullet
-* [[💡 Inspiration]]: some of the projects that inspired SilverBullet
+* [[Special Pages]]: a few page names in Silver Bullet have special meaning
 * [[🔨 Development]]: how to start hacking on SilverBullet itself
 
 ## Support

website/Special Pages.md

@@ -0,0 +1,10 @@
+SilverBullet has a few “special pages.” The convention is to always use ALL CAPS for these page names. Generally the format of these pages is that they can contain arbitrary text, but embedded in them is some sort of fenced code block (triple backtick blocks) that encode something special. What _exactly_ depends on the page.
+
+All special pages except [[SETTINGS]] are optional: if they don’t exist, well, they don’t do anything.
+
+Here are the current list of “special pages” known to humankind:
+
+* [[SETTINGS]] for setting various settings
+* [[PLUGS]] as a source for the plug manager to decide what plugs to load and where from
+* [[VIMRC]] for tweaking [[Vim]] mode
+* [[STYLES]] to override SilverBullet CSS styles (experimental)

website/VIMRC.md

@@ -0,0 +1,7 @@
+As part of SilverBullet’s [[Vim]] support, the [[VIMRC]] page allows you to run a set of _ex_ commands on boot. To use this functionality, create a page in your space named [[VIMRC]] and put a fenced code block (as demonstrated below) with one ex command per line, for example:
+
+```
+imap jj <Esc>
+```
+
+To manually reload your [[VIMRC]] you can use the {[Editor: Vim: Load VIMRC]} command.

website/Vim.md

@@ -2,11 +2,4 @@ SilverBullet has a basic Vim mode. You can toggle it using the {[Editor: Toggle
 
 In addition, it supports various ex commands that you can run as you would expect, for instance: `:imap jj <Esc>`.
 
-## VIMRC
+Also, you can use [[VIMRC]]
-SilverBullet also has the ability to load a set of these ex command on boot. To use this functionality, create a page in your space named [[VIMRC]] and put a fenced code block in it (similar to how this is done in [[SETTINGS]]) with one ex command per line, for example:
-
-    ```
-    imap jj <Esc>
-    ```
-
-To manually reload your [[VIMRC]] you can use the {[Editor: Vim: Load VIMRC]} command.