blblbl stuf

index.html

@@ -8,43 +8,9 @@
 		<script type="module" src="src/index.mjs"></script>
 		<!-- Global style -->
 		<style>
+			@import "style/base.css";
 			@import "style/light.css";
 			@import "style/dark.css";
-
-			:root {
-				--color-background: #ffffff;
-				--color-foreground: #000000;
-				--color-accent: initial;
-
-				--color-gray: #7E7E7E;
-				--color-red: #FB464C;
-				--color-orange: #E9973F;
-				--color-yellow: #E0DE71;
-				--color-green: #44CF6E;
-				--color-blue: #53DFDD;
-				--color-purple: #A882FF;
-
-				--color-node: var(--color-gray);
-
-				--edge-width: 2px;
-				--node-group-border-width: 2px;
-				--node-file-border-width: 2px;
-			}
-
-			body {
-				margin: 0;
-				padding: 128px;
-				width: max-content;
-				height: max-content;
-
-				background-color: var(--color-background);
-				color: var(--color-foreground);
-			}
-
-			svg line {
-				stroke: var(--color-node);
-				stroke-width: var(--edge-width);
-			}
 		</style>
 		<!-- Templates -->
 		<template id="template-vault">
@@ -69,8 +35,8 @@
 				}
 			</style>
 			<div class="canvas">
-				<slot name="canvas-edges">{Canvas edges}</slot>
 				<slot name="canvas-nodes">{Canvas nodes}</slot>
+				<slot name="canvas-edges">{Canvas edges}</slot>
 			</div>
 		</template>
 		<template id="template-display">

src/elements/browse.mjs

@@ -21,6 +21,17 @@ export class BrowseElement extends HTMLBodyElement {
         this.parameters = {vault, path, highlight}
     }
 
+    urlFor({vault = this.parameters.vault, path = this.parameters.path, highlight = this.parameters.highlight}) {
+        const location = window.location
+        const params = new URLSearchParams(location.search)
+        params.set("vault", vault)
+        params.set("path", path)
+        const url = new URL(location)
+        url.search = params.toString()
+        url.hash = highlight
+        return url
+    }
+
     // TODO: Add a landing page
 
     /**
@@ -47,7 +58,7 @@ export class BrowseElement extends HTMLBodyElement {
 
         this.vaultElement = document.createElement("x-vault")
         this.vaultElement.base = this.parameters.vault
-        this.vaultElement.cooldownMs = 200
+        this.vaultElement.cooldownMs = 0
 
         this.rootDisplayElement = document.createElement("x-display")
         this.rootDisplayElement.path = this.parameters.path

src/elements/canvas/canvas.mjs

@@ -196,7 +196,7 @@ export class CanvasElement extends CustomElement {
 
         this.nodesContainer.style["width"] = `${this.maxX.x + this.maxX.width - this.minX.x}px`
         this.nodesContainer.style["height"] = `${this.maxY.y + this.maxY.height - this.minY.y}px`
-        this.nodesContainer.style["position"] = "relative"
+        this.nodesContainer.style["position"] = "absolute"
 
         this.appendChild(this.nodesContainer)
     }
@@ -220,7 +220,7 @@ export class CanvasElement extends CustomElement {
     static EDGES_SLOT_NAME = "canvas-edges"
 
     /**
-     * Prefix to the name of the element to create for each edge.
+     * Name of the element to create for each edge.
      * @type {string}
      */
     static EDGE_ELEMENT_NAME = "x-edge"
@@ -242,7 +242,6 @@ export class CanvasElement extends CustomElement {
             let {id, fromNode, fromSide, toNode, toSide, color, toEnd: arrows} = edge
 
             const element = document.createElement(this.constructor.EDGE_ELEMENT_NAME)
-            element.setAttribute("id", `edge-${id}`)
             element.setAttribute("node-from", fromNode)
             element.setAttribute("node-from-side", fromSide)
             element.setAttribute("node-to", toNode)
@@ -254,9 +253,10 @@ export class CanvasElement extends CustomElement {
             this.edgesContainer.appendChild(element)
         }
 
-        this.edgesContainer.style["width"] = `${this.maxX.x + this.maxX.width - this.minX.x}px`
+        this.edgesContainer.style.width = `${this.maxX.x + this.maxX.width - this.minX.x}px`
-        this.edgesContainer.style["height"] = `${this.maxY.y + this.maxY.height - this.minY.y}px`
+        this.edgesContainer.style.height = `${this.maxY.y + this.maxY.height - this.minY.y}px`
-        this.edgesContainer.style["position"] = "absolute"
+        this.edgesContainer.style.position = "relative"
+        this.edgesContainer.style.pointerEvents = "none"
 
         this.appendChild(this.edgesContainer)
     }

src/elements/markdown/frontmatter.mjs

@@ -16,6 +16,9 @@ export class FrontMatterElement extends CustomElement {
     get language() {
         return this.getAttribute("lang")
     }
+    set language(value) {
+        this.setAttribute("lang", value)
+    }
 
     /**
      * The text contained in this front matter, obtained from the `data` attribute.
@@ -23,6 +26,9 @@ export class FrontMatterElement extends CustomElement {
     get data() {
         return this.getAttribute("data")
     }
+    set data(value) {
+        this.setAttribute("data", value)
+    }
 
     /**
      * The element marking the front matter as preformatted text.

src/elements/markdown/renderer.mjs

@@ -35,7 +35,7 @@ export class MarkdownElement extends CustomElement {
                 },
                 renderer(token) {
                     // TODO: Doesn't this break if token.data contains quotes?
-                    return `<x-frontmatter lang="${token.lang}" data="${token.data}"></x-frontmatter>`;
+                    return `<x-frontmatter lang="${token.lang}" data="${token.data.replaceAll('"', '&quot;')}"></x-frontmatter>`;
                 }
             },
             {

src/elements/markdown/wikilink.mjs

@@ -1,4 +1,6 @@
 import { CustomElement } from "../base.mjs";
+import {findFirstAncestor} from "../../utils/trasversal.mjs";
+import {BrowseElement} from "../browse.mjs";
 
 
 /**
@@ -9,6 +11,20 @@ export class WikilinkElement extends CustomElement {
         return document.getElementById("template-wikilink")
     }
 
+    /**
+     * Element handling the page navigation.
+     * @type {BrowseElement}
+     */
+    browseElement
+
+    /**
+     * Recalculate the value of {@link browseElement} using this element's current position in the DOM.
+     * @returns {void}
+     */
+    recalculateBrowseElement() {
+        this.browseElement = findFirstAncestor(this, BrowseElement)
+    }
+
     /**
      * Get the path or name of the file this node points to.
      * @returns {string} The value in question.
@@ -53,12 +69,13 @@ export class WikilinkElement extends CustomElement {
     }
 
     resetAnchorElementProperties() {
-        this.anchorElement.href = this.target
+        this.anchorElement.href = this.browseElement.urlFor({path: this.target})
         this.anchorElement.innerText = this.text
     }
 
     onConnect() {
         super.onConnect()
+        this.recalculateBrowseElement()
         this.recalculateAnchorElement()
         this.resetAnchorElementProperties()
     }

style/base.css

@@ -0,0 +1,38 @@
+:root {
+    --color-background: #ffffff;
+    --color-foreground: #000000;
+    --color-accent: initial;
+
+    --color-gray: #7E7E7E;
+    --color-red: #FB464C;
+    --color-orange: #E9973F;
+    --color-yellow: #E0DE71;
+    --color-green: #44CF6E;
+    --color-blue: #53DFDD;
+    --color-purple: #A882FF;
+
+    --color-node: var(--color-gray);
+
+    --edge-width: 2px;
+    --node-group-border-width: 2px;
+    --node-file-border-width: 2px;
+}
+
+body {
+    margin: 0;
+    padding: 128px;
+    width: max-content;
+    height: max-content;
+
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+}
+
+a {
+    color: var(--color-accent);
+}
+
+svg line {
+    stroke: var(--color-node);
+    stroke-width: var(--edge-width);
+}

style/dark.css

@@ -2,7 +2,7 @@
     :root:root {
         --color-background: #1e1e1e;
         --color-foreground: #ffffff;
-        --color-accent: initial;
+        --color-accent: #218cff;
 
         --color-gray: #7E7E7E;
         --color-red: #FB464C;

style/light.css

@@ -2,7 +2,7 @@
     :root:root {
         --color-background: #ffffff;
         --color-foreground: #1e1e1e;
-        --color-accent: initial;
+        --color-accent: #218cff;
 
         --color-gray: #7E7E7E;
         --color-red: #FB464C;