steffo/glassflame
steffo/glassflame
1
Fork 0
mirror of https://github.com/glassflame/glassflame.github.io.git synced 2024-11-22 08:04:27 +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=""> <html lang="">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>WIP: Obsiview</title> <title>WIP: Obsiview</title>
<link rel="stylesheet" href="style/index.css"> <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> <script type="module" src="src/index.mjs"></script>
</head> </head>
<body> <body>
@ -11,7 +13,8 @@
.card { .card {
border-style: solid; border-style: solid;
border-width: 2px; border-width: 2px;
border-radius: 4px; border-radius: 8px;
padding: 12px;
} }
</style> </style>
<div class="card"> <div class="card">

85
src/card.mjs
View file

@ -1,27 +1,25 @@
import {nameFromFileURL, getVaultFile} from "./fetch.mjs"; import {nameFromFileURL, getVaultFile} from "./fetch.mjs";
import {parsePageContents} from "./page.mjs";
export class CardElement extends HTMLElement { export class CardElement extends HTMLElement {
/** /**
* A reference to the element itself. * The element containing the card's name.
*
* @type {HTMLElement}
*/ */
self nameElement
constructor() { /**
// noinspection UnnecessaryLocalVariableJS * The element containing the card's contents.
const self = super() */
this.self = self contentsElement
}
/** /**
* Get the {@link URL} this card is available at via the `href` attribute. * Get the {@link URL} this card is available at via the `href` attribute.
* *
* @returns {URL} The URL in question. * @returns {URL} The URL in question.
*/ */
href() { getCardHref() {
return new URL(this.self.getAttribute("href")) return new URL(this.getAttribute("href"))
} }
/** /**
@ -29,16 +27,8 @@ export class CardElement extends HTMLElement {
* *
* @returns {string} The name in question. * @returns {string} The name in question.
*/ */
name() { getCardName() {
return nameFromFileURL(this.href()) return nameFromFileURL(this.getCardHref())
}
/**
* Get the card's {@link VaultFile} via the `href` attribute.
*/
async file() {
// noinspection ES6RedundantAwait
return await getVaultFile(this.href())
} }
// noinspection JSUnusedGlobalSymbols // noinspection JSUnusedGlobalSymbols
@ -46,13 +36,58 @@ export class CardElement extends HTMLElement {
const templateElement = document.getElementById("template-card") const templateElement = document.getElementById("template-card")
const instanceElement = templateElement.content.cloneNode(true) const instanceElement = templateElement.content.cloneNode(true)
const nameElement = document.createElement("span") this.nameElement = document.createElement("span")
nameElement.setAttribute("slot", "card-name") this.nameElement.setAttribute("slot", "card-name")
nameElement.innerText = this.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" }) const shadow = this.attachShadow({ mode: "open" })
shadow.appendChild(instanceElement) 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}. * @returns {VaultFile} The fetched {@link VaultFile}.
*/ */
async function fetchVaultFile(fileURL) { async function fetchVaultFile(fileURL) {
console.info("Fetching", fileURL.href, "...")
const response = await fetch(fileURL, {}) const response = await fetch(fileURL, {})
if(!response.ok) throw new VaultFetchError(response, "Fetch response is not ok") 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" import {CardElement} from "./card.mjs"
customElements.define("x-card", CardElement) 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)
}