From 45c3afd7d4cf33163125cf2ebff2be0288802f86 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 20 Oct 2023 03:44:56 +0200
Subject: [PATCH] Quick iteration with no commits!

---
 .gitignore                                   |   1 +
 .idea/inspectionProfiles/Project_Default.xml |   6 +-
 index.html                                   |  64 +++++---
 src/card.mjs                                 | 101 ------------
 src/elements/canvas.mjs                      |  67 ++++++++
 src/elements/hashtag.mjs                     |   9 --
 src/elements/index.mjs                       |   3 +
 src/elements/markdown.mjs                    | 145 +++++++++++++++++
 src/elements/node.mjs                        | 161 +++++++++++++++++++
 src/elements/wikilink.mjs                    |  30 ----
 src/fetch.mjs                                | 110 -------------
 src/index.mjs                                |   8 +-
 src/page.mjs                                 |  62 -------
 style/index.css                              |   1 -
 14 files changed, 430 insertions(+), 338 deletions(-)
 delete mode 100644 src/card.mjs
 create mode 100644 src/elements/canvas.mjs
 delete mode 100644 src/elements/hashtag.mjs
 create mode 100644 src/elements/index.mjs
 create mode 100644 src/elements/markdown.mjs
 create mode 100644 src/elements/node.mjs
 delete mode 100644 src/elements/wikilink.mjs
 delete mode 100644 src/fetch.mjs
 delete mode 100644 src/page.mjs
 delete mode 100644 style/index.css

diff --git a/.gitignore b/.gitignore
index e69de29..46b411b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+/examples
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index caa08e3..80917d9 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -2,11 +2,12 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="CheckEmptyScriptTag" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="CssUnusedSymbol" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
     <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
-          <list size="8">
+          <list size="9">
             <item index="0" class="java.lang.String" itemvalue="nobr" />
             <item index="1" class="java.lang.String" itemvalue="noembed" />
             <item index="2" class="java.lang.String" itemvalue="comment" />
@@ -15,6 +16,7 @@
             <item index="5" class="java.lang.String" itemvalue="script" />
             <item index="6" class="java.lang.String" itemvalue="x-card" />
             <item index="7" class="java.lang.String" itemvalue="x-hashtag" />
+            <item index="8" class="java.lang.String" itemvalue="x-node-file" />
           </list>
         </value>
       </option>
@@ -26,7 +28,7 @@
       <option name="processLiterals" value="true" />
       <option name="processComments" value="true" />
     </inspection_tool>
-    <inspection_tool class="UnnecessaryLocalVariableJS" enabled="true" level="WEAK WARNING" enabled_by_default="true" editorAttributes="INFO_ATTRIBUTES">
+    <inspection_tool class="UnnecessaryLocalVariableJS" enabled="false" level="WEAK WARNING" enabled_by_default="false" editorAttributes="INFO_ATTRIBUTES">
       <option name="m_ignoreImmediatelyReturnedVariables" value="false" />
       <option name="m_ignoreAnnotatedVariables" value="false" />
     </inspection_tool>
diff --git a/index.html b/index.html
index 62b0470..a214450 100644
--- a/index.html
+++ b/index.html
@@ -9,51 +9,77 @@
 			@import "style/dark.css";
 
 			body {
+				margin: 0;
+
 				background-color: var(--color-background);
 				color: var(--color-foreground);
 			}
 		</style>
 		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 		<script type="module" src="src/index.mjs"></script>
-	</head>
-	<body>
-		<template id="template-card">
+		<template id="template-node-file">
 			<style>
-				.card {
-					border-style: solid;
-					border-width: 2px;
+				.node {
+					position: absolute;
+					box-sizing: border-box;
+				}
+
+				.node-file {
+					outline-width: 2px;
 					border-radius: 8px;
 					padding: 12px;
+
+					overflow-x: clip;
+					overflow-y: scroll;
+				}
+
+				.node-empty {
+					outline-style: dashed;
+				}
+
+				.node-full {
+					outline-style: solid;
 				}
 			</style>
-			<div class="card">
+			<article class="node node-file">
 				<h1>
-					<slot name="card-name">Card name</slot>
+					<slot name="node-title">Node title</slot>
 				</h1>
-				<div>
-					<slot name="card-contents">Card contents</slot>
-				</div>
-			</div>
+				<slot name="node-contents">Node contents</slot>
+			</article>
+		</template>
+		<template id="template-markdown">
+			<slot name="markdown-contents"></slot>
+		</template>
+		<template id="template-canvas">
+			<style>
+				.canvas {
+
+				}
+			</style>
+			<div class="canvas"></div>
 		</template>
 		<template id="template-wikilink">
 			<style>
 				.wikilink {
-					text-decoration: underline 1px solid var(--color-accent);
+					color: var(--color-accent);
+					text-decoration: underline 1px solid currentColor;
+					cursor: pointer;
 				}
 			</style>
-			<abbr class="wikilink"><slot name="wikilink-text">Wikilink text</slot></abbr>
+			<a class="wikilink"><slot name="wikilink-text">Wikilink text</slot></a>
 		</template>
 		<template id="template-hashtag">
 			<style>
 				.hashtag {
-					background-color: rgba(var(--color-accent), 0.2);
-					color: rgb(var(--color-accent))
+					background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
+					color: var(--color-accent);
 				}
 			</style>
 			<span class="hashtag"><slot name="hashtag-text">#Hashtag</slot></span>
 		</template>
-		<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/convezione%20di%20Rayleigh-B%C3%A9nard.md"></x-card>
-		<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/condizione%20iniziale.md"></x-card>
-		<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/metastabilit%C3%A0.md"></x-card>
+	</head>
+	<body>
+		<x-canvas contents=""/>
 	</body>
 </html>
\ No newline at end of file
diff --git a/src/card.mjs b/src/card.mjs
deleted file mode 100644
index a9c58ab..0000000
--- a/src/card.mjs
+++ /dev/null
@@ -1,101 +0,0 @@
-import {nameFromFileURL, getVaultFile} from "./fetch.mjs";
-
-
-export class CardElement extends HTMLElement {
-    /**
-     * The element containing the card's name.
-     */
-    nameElement
-
-    /**
-     * The element containing the card's contents.
-     */
-    contentsElement
-
-    /**
-     * The element consisting of a button which requests the load of the card.
-     */
-    loadElement
-
-    /**
-     * Get the {@link URL} this card is available at via the `href` attribute.
-     *
-     * @returns {URL} The URL in question.
-     */
-    getCardHref() {
-        return new URL(this.getAttribute("href"))
-    }
-
-    /**
-     * Get the human-readable name of this card via the `href` attribute.
-     *
-     * @returns {string} The name in question.
-     */
-    getCardName() {
-        return nameFromFileURL(this.getCardHref())
-    }
-
-    // noinspection JSUnusedGlobalSymbols
-    connectedCallback() {
-        const templateElement = document.getElementById("template-card")
-        const instanceElement = templateElement.content.cloneNode(true)
-
-        this.nameElement = document.createElement("span")
-        this.nameElement.setAttribute("slot", "card-name")
-        this.nameElement.innerText = this.getCardName()
-
-        this.contentsElement = document.createElement("div")
-        this.contentsElement.setAttribute("slot", "card-contents")
-
-        this.loadElement = document.createElement("button")
-        this.loadElement.innerText = "Load"
-        this.loadElement.addEventListener("click", () => this.loadContents())
-
-        this.contentsElement.appendChild(this.loadElement)
-        this.appendChild(this.nameElement)
-        this.appendChild(this.contentsElement)
-
-        const shadow = this.attachShadow({ mode: "open" })
-        shadow.appendChild(instanceElement)
-    }
-
-    /**
-     * Get the card's {@link VaultFile} via the `href` attribute.
-     *
-     * @returns {Promise<VaultFile>} The VaultFile.
-     */
-    async getCardVaultFile() {
-        // noinspection ES6RedundantAwait
-        return await getVaultFile(this.getCardHref())
-    }
-
-    /**
-     * Get the card's contents rendered in HTML.
-     *
-     * @returns {Promise<String>} The unsanitized HTML.
-     */
-    async getCardContents() {
-        const file = await this.getCardVaultFile()
-        switch(file.kind) {
-            case "page":
-                return `<x-page markdown="${file.contents}"></x-page>`
-            case "canvas":
-                return `<x-canvas json="${file.contents}"></x-canvas>"`
-            default:
-                return ""
-        }
-    }
-
-    /**
-     * Load the card's contents.
-     *
-     * @returns {Promise<void>} Nothing.
-     */
-    async loadContents() {
-        this.loadElement.disable()
-        const contents = await this.getCardContents()
-
-        this.loadElement.removeEventListener("click")
-        this.contentsElement.innerHTML = contents
-    }
-}
diff --git a/src/elements/canvas.mjs b/src/elements/canvas.mjs
new file mode 100644
index 0000000..7f0fee6
--- /dev/null
+++ b/src/elements/canvas.mjs
@@ -0,0 +1,67 @@
+export class CanvasElement extends HTMLElement {
+    static getTemplate() {
+        return document.getElementById("template-canvas")
+    }
+
+    parsedJSON
+
+    canvasElement
+    nodeElements = []
+    edgeElements = []
+
+    constructor() {
+        super()
+        this.parsedJSON = JSON.parse(this.getAttribute("contents"))
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        const instanceDocument = CanvasElement.getTemplate().content.cloneNode(true)
+        const shadow = this.attachShadow({ mode: "open" })
+
+        this.canvasElement = instanceDocument.querySelector(".canvas")
+
+        let minX = { x: Infinity, width: 0 }
+        let minY = { y: Infinity, height: 0 }
+        let maxX = { x: -Infinity, width: 0 }
+        let maxY = { y: -Infinity, height: 0 }
+
+        for(const node of this.parsedJSON["nodes"]) {
+            if(node["type"] === "file") {
+                if(node["x"] < minX["x"]) minX = node
+                if(node["y"] < minY["y"]) minY = node
+                if(node["x"] + node["width"] > maxX["x"] + node["width"]) maxX = node
+                if(node["y"] + node["height"] > maxY["y"] + node["height"]) maxY = node
+            }
+            else {
+                console.warn("Encountered node of unimplemented type: ", node["type"])
+            }
+        }
+
+        console.debug("minX:", minX, "| minY:", minY, "| maxX:", maxX, "| maxY:", maxY)
+
+        for(const node of this.parsedJSON["nodes"]) {
+            if(node["type"] === "file") {
+                const element = document.createElement("x-node-file")
+                element.setAttribute("file", node["file"])
+                element.setAttribute("id", node["id"])
+                element.setAttribute("x", node["x"] - minX["x"])
+                element.setAttribute("y", node["y"] - minY["y"])
+                element.setAttribute("width", node["width"])
+                element.setAttribute("height", node["height"])
+                element.setAttribute("color", node["color"])
+
+                this.nodeElements.push(element)
+                this.canvasElement.appendChild(element)
+            }
+            else {
+                console.warn("Encountered node of unimplemented type: ", node["type"])
+            }
+        }
+
+        this.canvasElement.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
+        this.canvasElement.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
+
+        shadow.appendChild(instanceDocument)
+    }
+}
\ No newline at end of file
diff --git a/src/elements/hashtag.mjs b/src/elements/hashtag.mjs
deleted file mode 100644
index 8deb453..0000000
--- a/src/elements/hashtag.mjs
+++ /dev/null
@@ -1,9 +0,0 @@
-export class HashtagElement extends HTMLElement {
-    connectedCallback() {
-        const templateElement = document.getElementById("template-hashtag")
-        const instanceElement = templateElement.content.cloneNode(true)
-
-        const shadow = this.attachShadow({ mode: "open" })
-        shadow.appendChild(instanceElement)
-    }
-}
diff --git a/src/elements/index.mjs b/src/elements/index.mjs
new file mode 100644
index 0000000..68501b9
--- /dev/null
+++ b/src/elements/index.mjs
@@ -0,0 +1,3 @@
+export {NodeFileElement} from "./node.mjs"
+export {MarkdownElement, HashtagElement, WikilinkElement} from "./markdown.mjs"
+export {CanvasElement} from "./canvas.mjs"
diff --git a/src/elements/markdown.mjs b/src/elements/markdown.mjs
new file mode 100644
index 0000000..eaf5b3a
--- /dev/null
+++ b/src/elements/markdown.mjs
@@ -0,0 +1,145 @@
+import { Marked } from "https://unpkg.com/marked@9.1.2/lib/marked.esm.js";
+
+
+/**
+ * Element rendering the Markdown contents of an Obsidian page.
+ */
+export class MarkdownElement extends HTMLElement {
+    static marked = new Marked({
+        extensions: [
+            {
+                name: "frontmatter",
+                level: "block",
+                start(src) {
+                    return src.match(/^---/)?.index
+                },
+                tokenizer(src, tokens) {
+                    const match = src.match(/^---(.+)?\n(.+)\n---\n/)
+                    if(match) {
+                        return {
+                            type: "frontmatter",
+                            raw: match[0],
+                            lang: match[1],
+                            data: match[2],
+                        }
+                    }
+                },
+                renderer(token) {
+                    return `<pre><code lang="${token.lang}">${token.data}</code></pre>`;
+                }
+            },
+            {
+                name: "wikilink",
+                level: "inline",
+                start(src) {
+                    return src.match(/^\[\[/)?.index
+                },
+                tokenizer(src, tokens) {
+                    const match = src.match(/^\[\[([^|\]]+)(?:\|([^\]]+))?]]/)
+                    if(match) {
+                        return {
+                            type: "wikilink",
+                            raw: match[0],
+                            wref: match[1],
+                            text: match[2],
+                        }
+                    }
+                },
+                renderer(token) {
+                    return `<x-wikilink wref="${token.wref}"><span slot="wikilink-text">${token.text ?? token.wref}</span></x-wikilink>`
+                },
+            },
+            {
+                name: "hashtag",
+                level: "inline",
+                start(src) {
+                    return src.match(/^#/)?.index
+                },
+                tokenizer(src, tokens) {
+                    const match = src.match(/^#([A-Za-z0-9]+)/)
+                    if(match) {
+                        return {
+                            type: "hashtag",
+                            raw: match[0],
+                            tag: match[1],
+                        }
+                    }
+                },
+                renderer(token) {
+                    return `<x-hashtag><span slot="hashtag-text">#${token.tag}</span></x-hashtag>`
+                }
+            }
+        ]
+    })
+
+    contentsElement
+
+    static getTemplate() {
+        return document.getElementById("template-markdown")
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        const instanceDocument = MarkdownElement.getTemplate().content.cloneNode(true)
+        const shadow = this.attachShadow({ mode: "open" })
+
+        const markdown = this.getAttribute("contents")
+
+        this.contentsElement = document.createElement("div")
+        this.contentsElement.setAttribute("slot", "markdown-contents")
+        this.contentsElement.innerHTML = MarkdownElement.marked.parse(markdown)
+
+        this.appendChild(this.contentsElement)
+
+        shadow.appendChild(instanceDocument)
+    }
+}
+
+/**
+ * Element rendering an Obsidian Hashtag.
+ */
+export class HashtagElement extends HTMLElement {
+    static getTemplate() {
+        return document.getElementById("template-hashtag")
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        const instanceDocument = HashtagElement.getTemplate().content.cloneNode(true)
+        const shadow = this.attachShadow({ mode: "open" })
+
+        shadow.appendChild(instanceDocument)
+    }
+}
+
+/**
+ * Element rendering an Obsidian Wikilink.
+ */
+export class WikilinkElement extends HTMLElement {
+    static getTemplate() {
+        return document.getElementById("template-wikilink")
+    }
+
+    /**
+     * Get the card this Wikilink points to via the `wref` attribute.
+     *
+     * @returns {String} The card target.
+     */
+    getWikilinkWref() {
+        return this.getAttribute("wref")
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        const instanceDocument = WikilinkElement.getTemplate().content.cloneNode(true)
+        const shadow = this.attachShadow({ mode: "open" })
+
+        const wref = this.getWikilinkWref()
+
+        this.addEventListener("click", function() {
+            console.warn("Would move to", wref, ", but navigation is not yet implemented.")
+        })
+
+        shadow.appendChild(instanceDocument)
+    }
+}
diff --git a/src/elements/node.mjs b/src/elements/node.mjs
new file mode 100644
index 0000000..913803f
--- /dev/null
+++ b/src/elements/node.mjs
@@ -0,0 +1,161 @@
+import { configFromWindow } from "../config.mjs";
+
+
+/**
+ * Element representing the generic skeleton of an Obsidian Canvas node.
+ */
+export class NodeElement extends HTMLElement {
+    x
+    y
+    width
+    height
+    color
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        this.id = this.getAttribute("id")
+        this.x = this.getAttribute("x")
+        this.y = this.getAttribute("y")
+        this.width = this.getAttribute("width")
+        this.height = this.getAttribute("height")
+        this.color = this.getAttribute("color")
+    }
+
+    colorToHex() {
+        if(this?.color?.startsWith("#")) {
+            // This is an hex color
+            return this.color
+        }
+        else {
+            // TODO: Check which colors correspond to what
+            return {}[this.color]
+        }
+    }
+}
+
+/**
+ * Error in the fetching of a file.
+ */
+export class FetchError extends Error {
+    /**
+     * The {@link Response} object of the failed request.
+     */
+    response
+
+    constructor(response, message) {
+        super(message)
+        this.response = response
+    }
+}
+
+/**
+ * Element representing the skeleton of an Obsidian Canvas node pointing to a file.
+ *
+ * Requires the following attributes:
+ * - `file`: wref to the target file
+ * - `id`: id unique to the node
+ * - `x`: horizontal translation
+ * - `y`: vertical translation
+ * - `width`: width of the card in px
+ * - `height`: height of the card in px
+ * - (optional) `color`: custom Obsidian color of the card
+ */
+export class NodeFileElement extends NodeElement {
+    static type = "file"
+
+    file
+    fileName
+    fileExtension
+
+    fileLeaf() {
+        return this.file.split("/").at(-1)
+    }
+
+    fileDetails() {
+        const split = this.fileLeaf().split(".")
+        const name = split.slice(0, -1)
+        const extension = split.at(-1)
+        return [name, extension]
+    }
+
+    static getTemplate() {
+        return document.getElementById("template-node-file")
+    }
+
+    instanceElement
+    nameSlotted
+    placeholderSlotted
+    contentsSlotted
+    loadButton
+
+    // noinspection JSUnusedGlobalSymbols
+    connectedCallback() {
+        super.connectedCallback()
+        this.file = this.getAttribute("file")
+        const [fileName, fileExtension] = this.fileDetails()
+        this.fileName = fileName
+        this.fileExtension = fileExtension
+
+        const instanceDocument = NodeFileElement.getTemplate().content.cloneNode(true)
+        const shadow = this.attachShadow({ mode: "open" })
+
+        this.instanceElement = instanceDocument.querySelector(".node.node-file")
+
+        this.instanceElement.style["left"] = `${this.x}px`
+        this.instanceElement.style["top"] = `${this.y}px`
+        this.instanceElement.style["width"] = `${this.width}px`
+        this.instanceElement.style["height"] = `${this.height}px`
+        this.instanceElement.style["--node-color"] = this.colorToHex()
+
+        this.instanceElement.classList.add("node-empty")
+        this.instanceElement.classList.remove("node-full")
+
+        this.nameSlotted = document.createElement("span")
+        this.nameSlotted.slot = "node-title"
+        this.nameSlotted.innerText = this.fileName
+        this.appendChild(this.nameSlotted)
+
+        this.placeholderSlotted = document.createElement("div")
+        this.placeholderSlotted.slot = "node-contents"
+        this.loadButton = document.createElement("button")
+        this.loadButton.innerText = "Load"
+        this.loadButton.addEventListener("click", this.fillNode.bind(this))
+        this.placeholderSlotted.appendChild(this.loadButton)
+        this.appendChild(this.placeholderSlotted)
+
+        shadow.appendChild(instanceDocument)
+    }
+
+    contents
+
+    async fetchContents() {
+        console.info("Fetching:", this.file)
+
+        const url = new URL(this.file, configFromWindow()["vault"])
+        const response = await fetch(url, {})
+
+        if(!response.ok) throw new FetchError(response, "Fetch response is not ok")
+
+        this.contents = await response.text()
+    }
+
+    async fillNode() {
+        this.loadButton.disabled = true
+
+        this.placeholderSlotted.remove()
+        this.placeholderSlotted = null
+
+        await this.fetchContents()
+
+        this.instanceElement.classList.remove("node-empty")
+        this.instanceElement.classList.add("node-full")
+
+        this.contentsSlotted = document.createElement({
+            "md": "x-markdown",
+            "canvas": "x-canvas",
+        }[this.fileExtension] ?? "div")
+        this.contentsSlotted.slot = "node-contents"
+        this.contentsSlotted.setAttribute("contents", this.contents)
+        this.appendChild(this.contentsSlotted)
+    }
+}
diff --git a/src/elements/wikilink.mjs b/src/elements/wikilink.mjs
deleted file mode 100644
index c13bafa..0000000
--- a/src/elements/wikilink.mjs
+++ /dev/null
@@ -1,30 +0,0 @@
-export class WikilinkElement extends HTMLElement {
-    /**
-     * Get the card this Wikilink points to via the `wref` attribute.
-     *
-     * @returns {String} The card target.
-     */
-    getWikilinkWref() {
-        return this.getAttribute("wref")
-    }
-
-    /**
-     * The clickable anchor resolving the Wikilink.
-     */
-    anchorElement
-
-    connectedCallback() {
-        const templateElement = document.getElementById("template-wikilink")
-        const instanceElement = templateElement.content.cloneNode(true)
-
-        const wref = this.getWikilinkWref()
-
-        this.anchorElement = this.querySelector('[slot="wikilink-text"]')
-        this.anchorElement.addEventListener("click", function() {
-            console.warn("Would move to", wref, "but navigation is not yet implemented.")
-        })
-
-        const shadow = this.attachShadow({ mode: "open" })
-        shadow.appendChild(instanceElement)
-    }
-}
\ No newline at end of file
diff --git a/src/fetch.mjs b/src/fetch.mjs
deleted file mode 100644
index 2791514..0000000
--- a/src/fetch.mjs
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * No valid kind was determined during the execution of {@link kindFromExtension}.
- */
-export class UnknownFileKindError extends Error {}
-
-
-/**
- * Try to determine the {@link VaultFile.kind} from a file's extension.
- *
- * @param extension {string} The file's extension, with no leading colon.
- * @returns {"page"|"canvas"} The successfully determined file type.
- */
-function kindFromExtension(extension) {
-    if(extension === "md") return "page"
-    else if(extension === ".canvas") return "canvas"
-    throw UnknownFileKindError("No file type matched the given file extension.")
-}
-
-/**
- * A file contained in an Obsidian Vault.
- */
-export class VaultFile {
-    /**
-     * The type of file.
-     *
-     * @type {"page"|"canvas"}
-     */
-    kind
-
-    /**
-     * The contents of the file.
-     *
-     * To be interpreted differently depending on the {@link kind} of the object.
-     *
-     * @type {any}
-     */
-    contents
-
-    constructor({ kind, contents }) {
-        this.kind = kind
-        this.contents = contents
-    }
-}
-
-
-/**
- * An error which occoured during a {@link fetch} request.
- */
-export class VaultFetchError extends Error {
-    /**
-     * The {@link Response} object of the failed request.
-     */
-    response
-
-    constructor(response, message) {
-        super(message);
-    }
-}
-
-
-/**
- * Get the name of a file from its {@link URL}.
- *
- * @param fileURL {URL} The URL to read.
- * @returns {string} The name of the file.
- */
-export function nameFromFileURL(fileURL) {
-    return decodeURIComponent(fileURL.pathname.split("/").at(-1).split(".").slice(0, -1).join("."))
-}
-
-/**
- * Fetch a {@link VaultFile} from the given {@link URL}.
- *
- * @param fileURL {URL} The URL where the file is accessible at.
- * @returns {VaultFile} The fetched {@link VaultFile}.
- */
-async function fetchVaultFile(fileURL) {
-    console.info("Fetching", fileURL.href, "...")
-    const response = await fetch(fileURL, {})
-
-    if(!response.ok) throw new VaultFetchError(response, "Fetch response is not ok")
-
-    const contents = await response.text()
-    const kind = kindFromExtension(fileURL.pathname.split(".").at(-1))
-
-    return new VaultFile({kind, contents})
-}
-
-/**
- * A cache mapping file URLs to {@link VaultFile}s.
- *
- * @type {{[fileURL: URL]: VaultFile}}
- */
-const VAULT_CACHE = {}
-
-/**
- * Try to get a {@link VaultFile} from the {@link VAULT_CACHE}, then, if it isn't available, {@link fetchVaultFile} it.
- *
- * @param fileURL {URL} The URL where the file should be accessible at.
- * @returns {VaultFile} The fetched {@link VaultFile}
- */
-export async function getVaultFile(fileURL) {
-    const cached = VAULT_CACHE[fileURL]
-
-    if(cached !== undefined) return cached
-
-    const vaultFile = await fetchVaultFile(fileURL)
-    VAULT_CACHE[fileURL] = vaultFile
-    return vaultFile
-}
diff --git a/src/index.mjs b/src/index.mjs
index 8181926..ff14bb0 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -1,7 +1,7 @@
-import {CardElement} from "./card.mjs"
-import {WikilinkElement} from "./elements/wikilink.mjs";
-import {HashtagElement} from "./elements/hashtag.mjs";
+import { CanvasElement, HashtagElement, MarkdownElement, NodeFileElement, WikilinkElement } from "./elements/index.mjs";
 
-customElements.define("x-card", CardElement)
+customElements.define("x-node-file", NodeFileElement)
+customElements.define("x-markdown", MarkdownElement)
 customElements.define("x-wikilink", WikilinkElement)
 customElements.define("x-hashtag", HashtagElement)
+customElements.define("x-canvas", CanvasElement)
diff --git a/src/page.mjs b/src/page.mjs
deleted file mode 100644
index 7f95b7b..0000000
--- a/src/page.mjs
+++ /dev/null
@@ -1,62 +0,0 @@
-import {Marked} from "https://unpkg.com/marked@9.1.2/lib/marked.esm.js"
-
-/**
- * The {@link Marked} instance to use for parsing page contents.
- *
- * @type {Marked}
- */
-const marked = new Marked({
-    extensions: [
-        {
-            name: "wikilink",
-            level: "inline",
-            start(src) {
-                return src.match(/^\[\[/)?.index
-            },
-            tokenizer(src, tokens) {
-                const match = src.match(/^\[\[([^|\]]+)(?:\|([^\]]+))?]]/)
-                if(match) {
-                    return {
-                        type: "wikilink",
-                        raw: match[0],
-                        wref: match[1],
-                        text: match[2],
-                    }
-                }
-            },
-            renderer(token) {
-                return `<x-wikilink wref="${token.wref}"><span slot="wikilink-text">${token.text ?? token.wref}</span></x-wikilink>`
-            },
-        },
-        {
-            name: "hashtag",
-            level: "inline",
-            start(src) {
-                return src.match(/^#/)?.index
-            },
-            tokenizer(src, tokens) {
-                const match = src.match(/^#([A-Za-z0-9]+)/)
-                if(match) {
-                    return {
-                        type: "hashtag",
-                        raw: match[0],
-                        tag: match[1],
-                    }
-                }
-            },
-            renderer(token) {
-                return `<x-hashtag><span slot="hashtag-text">#${token.tag}</span></x-hashtag>`
-            }
-        }
-    ]
-})
-
-/**
- * Parse the given text string as Markdown using {@link marked}, emitting HTML.
- *
- * @param contents The text string to parsed.
- * @returns {String} The resulting HTML.
- */
-export function parsePageContents(contents) {
-    return marked.parse(contents)
-}
diff --git a/style/index.css b/style/index.css
deleted file mode 100644
index 8b13789..0000000
--- a/style/index.css
+++ /dev/null
@@ -1 +0,0 @@
-