diff --git a/src/card.mjs b/src/card.mjs
index 16efc51..b60982c 100644
--- a/src/card.mjs
+++ b/src/card.mjs
@@ -1,27 +1,25 @@
import {nameFromFileURL, getVaultFile} from "./fetch.mjs";
+import {parsePageContents} from "./page.mjs";
export class CardElement extends HTMLElement {
/**
- * A reference to the element itself.
- *
- * @type {HTMLElement}
+ * The element containing the card's name.
*/
- self
+ nameElement
- constructor() {
- // noinspection UnnecessaryLocalVariableJS
- const self = super()
- this.self = self
- }
+ /**
+ * The element containing the card's contents.
+ */
+ contentsElement
/**
* Get the {@link URL} this card is available at via the `href` attribute.
*
* @returns {URL} The URL in question.
*/
- href() {
- return new URL(this.self.getAttribute("href"))
+ getCardHref() {
+ return new URL(this.getAttribute("href"))
}
/**
@@ -29,16 +27,8 @@ export class CardElement extends HTMLElement {
*
* @returns {string} The name in question.
*/
- name() {
- return nameFromFileURL(this.href())
- }
-
- /**
- * Get the card's {@link VaultFile} via the `href` attribute.
- */
- async file() {
- // noinspection ES6RedundantAwait
- return await getVaultFile(this.href())
+ getCardName() {
+ return nameFromFileURL(this.getCardHref())
}
// noinspection JSUnusedGlobalSymbols
@@ -46,13 +36,58 @@ export class CardElement extends HTMLElement {
const templateElement = document.getElementById("template-card")
const instanceElement = templateElement.content.cloneNode(true)
- const nameElement = document.createElement("span")
- nameElement.setAttribute("slot", "card-name")
- nameElement.innerText = this.name()
+ this.nameElement = document.createElement("span")
+ this.nameElement.setAttribute("slot", "card-name")
+ this.nameElement.innerText = this.getCardName()
- this.self.appendChild(nameElement)
+ this.contentsElement = document.createElement("div")
+ this.contentsElement.setAttribute("slot", "card-contents")
+
+ this.appendChild(this.nameElement)
+ this.appendChild(this.contentsElement)
const shadow = this.attachShadow({ mode: "open" })
shadow.appendChild(instanceElement)
+
+ this.loadContents()
+ }
+
+ /**
+ * Get the card's {@link VaultFile} via the `href` attribute.
+ *
+ * @returns {Promise
} The VaultFile.
+ */
+ async getCardVaultFile() {
+ // noinspection ES6RedundantAwait
+ return await getVaultFile(this.getCardHref())
+ }
+
+ /**
+ * Get the card's contents rendered in HTML.
+ *
+ * @returns {Promise} The unsanitized HTML.
+ */
+ async getCardContents() {
+ const file = await this.getCardVaultFile()
+ switch(file.kind) {
+ case "page":
+ const parsed = parsePageContents(file.contents)
+ return parsed
+ case "canvas":
+ // TODO
+ return "TODO"
+ default:
+ return ""
+ }
+ }
+
+ /**
+ * Load the card's contents.
+ *
+ * @returns {Promise} Nothing.
+ */
+ async loadContents() {
+ const contents = await this.getCardContents()
+ this.contentsElement.innerHTML = contents
}
}
diff --git a/src/fetch.mjs b/src/fetch.mjs
index 51d9e7a..2791514 100644
--- a/src/fetch.mjs
+++ b/src/fetch.mjs
@@ -75,6 +75,7 @@ export function nameFromFileURL(fileURL) {
* @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")
diff --git a/src/index.mjs b/src/index.mjs
index 7f21024..e6d3f42 100644
--- a/src/index.mjs
+++ b/src/index.mjs
@@ -1,5 +1,3 @@
-import {} from "./config.mjs"
-import {} from "./fetch.mjs"
import {CardElement} from "./card.mjs"
customElements.define("x-card", CardElement)
diff --git a/src/page.mjs b/src/page.mjs
new file mode 100644
index 0000000..9312473
--- /dev/null
+++ b/src/page.mjs
@@ -0,0 +1,43 @@
+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(/^\[\[([^|\]]+)(?:\|([^\]]+))?]]/)
+ console.debug("Is this a wikilink?", src, tokens, match)
+ if(match) {
+ return {
+ type: "wikilink",
+ raw: match[0],
+ target: match[1],
+ display: match[2],
+ }
+ }
+ },
+ renderer(token) {
+ return `${token.display ?? token.target}`
+ },
+ }
+ ]
+})
+
+/**
+ * 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)
+}