steffo/glassflame
steffo/glassflame
1
Fork 0
mirror of https://github.com/glassflame/glassflame.github.io.git synced 2024-11-21 23:54:26 +00:00
Code Activity

Initial rendering of card contents

Browse source
This commit is contained in:
Steffo 2023-10-19 01:58:51 +02:00
parent 8978927d60
commit 6bd681d47e
Signed by: steffo
GPG key ID: 2A24051445686895
6 changed files with 114 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.idea/jsLibraryMappings.xml Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{marked}" />
</component>
</project>

5
index.html
View file

@ -1,8 +1,10 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<title>WIP: Obsiview</title>
<link rel="stylesheet" href="style/index.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="module" src="src/index.mjs"></script>
</head>
<body>
@ -11,7 +13,8 @@
.card {
border-style: solid;
border-width: 2px;
border-radius: 4px;
border-radius: 8px;
padding: 12px;
}
</style>
<div class="card">

85
src/card.mjs
View file

@ -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<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":
const parsed = parsePageContents(file.contents)
return parsed
case "canvas":
// TODO
return "TODO"
default:
return ""
}
}
/**
* Load the card's contents.
*
* @returns {Promise<void>} Nothing.
*/
async loadContents() {
const contents = await this.getCardContents()
this.contentsElement.innerHTML = contents
}
}

1
src/fetch.mjs
View file

@ -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")

2
src/index.mjs
View file

@ -1,5 +1,3 @@
import {} from "./config.mjs"
import {} from "./fetch.mjs"
import {CardElement} from "./card.mjs"
customElements.define("x-card", CardElement)

43
src/page.mjs Normal file
View file

@ -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 `<abbr title="${token.target}">${token.display ?? token.target}</abbr>`
},
}
]
})
/**
* 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)
}