A bit of cleanup

index.html

@@ -16,7 +16,8 @@
 		<template id="template-vault">
 			<style>
 				.vault {
-
+					margin-left: 64px;
+					margin-right: 64px;
 				}
 			</style>
 			<div class="vault">
@@ -32,6 +33,9 @@
 
 					width: max-content;
 					height: max-content;
+
+					margin-top: 64px;
+					margin-bottom: 64px;
 				}
 			</style>
 			<div class="canvas">

src/elements/browse.mjs

@@ -1,3 +1,5 @@
+import {fileDetails} from "../utils/file.mjs";
+
 /**
  * The body element for the pages viewer, handling most low-level things.
  */
@@ -40,6 +42,12 @@ export class BrowseElement extends HTMLBodyElement {
      */
     vaultElement
 
+    /**
+     * The title of the page.
+     * @type {HTMLHeadingElement}
+     */
+    titleElement
+
     /**
      * The display element showing the contents of the specified file.
      * @type {DisplayElement}
@@ -56,6 +64,11 @@ export class BrowseElement extends HTMLBodyElement {
             this.rootDisplayElement = null
         }
 
+        const {name} = fileDetails(this.parameters.path)
+        this.titleElement = document.createElement("h1")
+        this.titleElement.innerText = name
+        this.appendChild(this.titleElement)
+
         this.vaultElement = document.createElement("x-vault")
         this.vaultElement.base = this.parameters.vault
         this.vaultElement.cooldownMs = 0

src/elements/vault.mjs

@@ -59,9 +59,7 @@ export class VaultElement extends CustomElement {
     async fetchQueueTurn() {
         return new Promise(resolve => {
             this.#fetchQueue.push(resolve)
-            console.debug("[Fetch queue] Waiting for my turn...")
             if(this.#somethingInFetchQueue !== null) {
-                console.debug("[Fetch queue] Asking scheduler to resume...")
                 this.#somethingInFetchQueue(undefined)
                 this.#somethingInFetchQueue = null
             }
@@ -74,18 +72,14 @@ export class VaultElement extends CustomElement {
      */
     async #fetchQueueScheduler() {
         while(this.isConnected) {
-            console.debug("[Fetch scheduler] Scheduler running one iteration...")
             if(this.#fetchQueue.length === 0) {
                 const somethingInFetchQueue = new Promise(resolve => {
                     this.#somethingInFetchQueue = resolve
-                    console.debug("[Fetch scheduler] Nothing to do, waiting...")
                 })
                 await somethingInFetchQueue
             }
             const promise = this.#fetchQueue.shift()
-            console.debug("[Fetch scheduler] Advancing...")
             promise()
-            console.debug("[Fetch scheduler] Cooling down for:", this.cooldownMs)
             await sleep(this.cooldownMs)
         }
     }
@@ -105,10 +99,58 @@ export class VaultElement extends CustomElement {
         return result
     }
 
+    /**
+     * The CSS selector of the element in the template containing the vault.
+     * @type {string}
+     */
+    static VAULT_SELECTOR = ".vault"
+
+    /**
+     * The element in the instance representing the vault.
+     * Can be set via {@link recalculateVaultElement}.
+     * @type {HTMLElement}
+     */
+    vaultElement
+
+    /**
+     * Update the value of the {@link vaultElement} by querying the current {@link instance} with {@link VAULT_SELECTOR}.
+     */
+    recalculateVaultElement() {
+        this.vaultElement = this.instance.querySelector(this.constructor.VAULT_SELECTOR)
+    }
+
+
+    /**
+     * The accent color of this vault.
+     * Can be set manually, or updated via {@link refetchAppearance}.
+     * @type {string}
+     */
+    get accentColor() {
+        return this.vaultElement.style.getPropertyValue("--color-accent")
+    }
+    set accentColor(value) {
+        this.vaultElement.style.setProperty("--color-accent", value)
+    }
+
+    /**
+     * Update {@link accentColor} using {@link fetchCooldown} on `.obsidian/appearance.json`.
+     * @return {Promise<void>}
+     */
+    async refetchAppearance() {
+        const response = await this.fetchCooldown(".obsidian/appearance.json")
+        const appearance = await response.json()
+        const accentColor = appearance.accentColor
+        if(accentColor.match(/^#[0-9A-F]{3}$|^#[0-9A-F]{6}$/i)) {
+            this.accentColor = accentColor
+        }
+    }
+
     onConnect() {
         super.onConnect()
-
+        this.recalculateVaultElement()
         // noinspection JSIgnoredPromiseFromCall
         this.#fetchQueueScheduler()
+        // noinspection JSIgnoredPromiseFromCall
+        this.refetchAppearance()
     }
 }

src/utils/file.mjs

@@ -28,7 +28,7 @@ export function fileDetails(file) {
     const nameExtension = path.at(-1)
 
     const split2 = nameExtension.split(".")
-    const name = split2.slice(0, -1)
+    const name = split2.slice(0, -1).join("")
     const extension = split2.at(-1)
 
     return {path, directory, name, extension}

style/base.css

@@ -12,22 +12,36 @@
     --color-purple: #A882FF;
 
     --color-node: var(--color-gray);
-
-    --edge-width: 2px;
     --node-group-border-width: 2px;
     --node-file-border-width: 2px;
+    --edge-width: 2px;
+    --font-text: sans-serif;
+    --font-mono: monospace;
 }
 
 body {
     margin: 0;
-    padding: 128px;
     width: max-content;
+    min-width: 100svw;
     height: max-content;
 
     background-color: var(--color-background);
     color: var(--color-foreground);
 }
 
+body > h1 {
+    text-align: center;
+    font-size: 4em;
+}
+
+* {
+    font-family: var(--font-text);
+}
+
+code {
+    font-family: var(--font-mono);
+}
+
 a {
     color: var(--color-accent);
 }