steffo/glassflame
steffo/glassflame
1
Fork 0
mirror of https://github.com/glassflame/glassflame.github.io.git synced 2024-10-16 14:37:33 +00:00
Code Activity

not sure what i did but it kinda works

Browse source
This commit is contained in:
Steffo 2023-10-22 03:40:49 +02:00
parent 9a7f5a4bd8
commit ea61aef3d6
Signed by: steffo
GPG key ID: 2A24051445686895
11 changed files with 117 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
index.html
View file

@ -11,7 +11,7 @@
:root { :root {
--color-background: #ffffff; --color-background: #ffffff;
--color-foreground: #000000; --color-foreground: #000000;
--color-accent: #ff7f00; --color-accent: initial;
--color-gray: #7E7E7E; --color-gray: #7E7E7E;
--color-red: #FB464C; --color-red: #FB464C;
@ -37,7 +37,6 @@
color: var(--color-foreground); color: var(--color-foreground);
} }
</style> </style>
<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>
<template id="template-display"> <template id="template-display">
<slot name="display-container"></slot> <slot name="display-container"></slot>
@ -97,9 +96,15 @@
overflow-x: clip; overflow-x: clip;
overflow-y: scroll; overflow-y: scroll;
} }
.node-file-title {
font-size: 2em;
margin-block-start: .67em;
margin-block-end: .67em;
}
</style> </style>
<article class="node-file"> <article class="node-file">
<h1> <h1 class="node-file-title">
<slot name="node-title">{Node title}</slot> <slot name="node-title">{Node title}</slot>
</h1> </h1>
<slot name="node-contents">{Node contents}</slot> <slot name="node-contents">{Node contents}</slot>
@ -131,6 +136,14 @@
<template id="template-markdown"> <template id="template-markdown">
<slot name="markdown-contents">{Markdown text}</slot> <slot name="markdown-contents">{Markdown text}</slot>
</template> </template>
<template id="template-frontmatter">
<style>
.frontmatter {
opacity: 50%;
}
</style>
<pre class="frontmatter"><slot name="frontmatter-contents">{Markdown text}</slot></pre>
</template>
<template id="template-canvas"> <template id="template-canvas">
<style> <style>
.canvas { .canvas {
@ -141,10 +154,23 @@
width: max-content; width: max-content;
height: max-content; height: max-content;
} }
.canvas * {
left: 0;
top: 0;
}
.canvas *:first-child {
position: relative;
}
.canvas *:not(:first-child) {
position: absolute;
}
</style> </style>
<div class="canvas"> <div class="canvas">
<slot name="canvas-nodes">{Canvas nodes}</slot>
<slot name="canvas-edges">{Canvas edges}</slot> <slot name="canvas-edges">{Canvas edges}</slot>
<slot name="canvas-nodes">{Canvas nodes}</slot>
</div> </div>
</template> </template>
<template id="template-wikilink"> <template id="template-wikilink">
@ -168,6 +194,5 @@
</template> </template>
</head> </head>
<body> <body>
<x-display root vref="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/" wref="8 - Crittografia applicata/1 - Concetti/3 - Casualità ed entropia/★ mappa concettuale.canvas"/>
</body> </body>
</html> </html>

17
src/config.mjs
View file

@ -1,22 +1,11 @@
/**
* Get configuration from the given location.
*
* @param location {Location} The location to use to determine the configuration.
* @returns {{file: string, vault: string}}
*/
export function configFromURL(location) { export function configFromURL(location) {
const queryString = new URLSearchParams(location.search) const queryString = new URLSearchParams(location.search)
const vault = queryString.get("vault") const vref = queryString.get("vref")
const file = queryString.get("file") const wref = queryString.get("wref")
return {vault, file} return {vref, wref}
} }
/**
* Get configuration from the current {@link window.location}.
*
* @returns {{file: string, vault: string}}
*/
export function configFromWindow() { export function configFromWindow() {
return configFromURL(window.location) return configFromURL(window.location)
} }

12
src/elements/canvas.mjs
View file

@ -60,7 +60,7 @@ export class CanvasElement extends HTMLElement {
for(const node of this.parsedJSON["nodes"]) { for(const node of this.parsedJSON["nodes"]) {
const element = document.createElement(`x-node-${node["type"]}`) const element = document.createElement(`x-node-${node["type"]}`)
element.setAttribute("id", node["id"]) element.setAttribute("id", `node-${node["id"]}`)
element.setAttribute("x", node["x"] - minX["x"]) element.setAttribute("x", node["x"] - minX["x"])
element.setAttribute("y", node["y"] - minY["y"]) element.setAttribute("y", node["y"] - minY["y"])
element.setAttribute("width", node["width"]) element.setAttribute("width", node["width"])
@ -74,7 +74,7 @@ export class CanvasElement extends HTMLElement {
case "file": case "file":
element.setAttribute("file", node["file"]) element.setAttribute("file", node["file"])
element.setAttribute("fileName", fileDetails(node["file"])[0]) element.setAttribute("file-name", fileDetails(node["file"]).name)
break break
case "group": case "group":
@ -92,7 +92,7 @@ export class CanvasElement extends HTMLElement {
for(const edge of this.parsedJSON["edges"]) { for(const edge of this.parsedJSON["edges"]) {
const element = document.createElement("x-edge") const element = document.createElement("x-edge")
element.setAttribute("id", edge["id"]) element.setAttribute("id", `edge-${edge["id"]}`)
element.setAttribute("node-from", edge["fromNode"]) element.setAttribute("node-from", edge["fromNode"])
element.setAttribute("node-from-side", edge["fromSide"]) element.setAttribute("node-from-side", edge["fromSide"])
element.setAttribute("node-to", edge["toNode"]) element.setAttribute("node-to", edge["toNode"])
@ -104,15 +104,9 @@ export class CanvasElement extends HTMLElement {
this.edgesSlotted.appendChild(element) this.edgesSlotted.appendChild(element)
} }
this.nodesSlotted.style["position"] = "relative"
this.nodesSlotted.style["left"] = "0"
this.nodesSlotted.style["top"] = "0"
this.nodesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px` this.nodesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
this.nodesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px` this.nodesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`
this.edgesSlotted.style["position"] = "absolute"
this.edgesSlotted.style["left"] = "0"
this.edgesSlotted.style["top"] = "0"
this.edgesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px` this.edgesSlotted.style["width"] = `${maxX["x"] + maxX["width"] - minX["x"]}px`
this.edgesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px` this.edgesSlotted.style["height"] = `${maxY["y"] + maxY["height"] - minY["y"]}px`

6
src/elements/display.mjs
View file

@ -69,12 +69,12 @@ export class DisplayElement extends HTMLElement {
this.containerSlotted.remove() this.containerSlotted.remove()
this.containerSlotted = null this.containerSlotted = null
const [, fileExtension] = fileDetails(this.getAttribute("wref")) const fileExtension = fileDetails(this.getAttribute("wref")).extension
this.containerSlotted = document.createElement({ this.containerSlotted = document.createElement({
"md": customElements.getName(MarkdownElement), "md": customElements.getName(MarkdownElement),
"canvas": this.getAttribute("root") !== undefined ? customElements.getName(CanvasElement) : "div", "canvas": customElements.getName(CanvasElement),
}[fileExtension] ?? "div") }[fileExtension])
this.containerSlotted.slot = "display-container" this.containerSlotted.slot = "display-container"
this.containerSlotted.setAttribute("contents", this.data) this.containerSlotted.setAttribute("contents", this.data)
this.appendChild(this.containerSlotted) this.appendChild(this.containerSlotted)

2
src/elements/index.mjs
View file

@ -1,5 +1,5 @@
export {NodeFileElement, NodeGroupElement, NodeTextElement} from "./node.mjs" export {NodeFileElement, NodeGroupElement, NodeTextElement} from "./node.mjs"
export {MarkdownElement, HashtagElement, WikilinkElement} from "./markdown.mjs" export {MarkdownElement, HashtagElement, WikilinkElement, FrontMatterElement} from "./markdown.mjs"
export {CanvasElement} from "./canvas.mjs" export {CanvasElement} from "./canvas.mjs"
export {DisplayElement} from "./display.mjs" export {DisplayElement} from "./display.mjs"
export {EdgeElement} from "./edge.mjs" export {EdgeElement} from "./edge.mjs"

47
src/elements/markdown.mjs
View file

@ -1,4 +1,6 @@
import { Marked } from "https://unpkg.com/marked@9.1.2/lib/marked.esm.js"; import { Marked } from "https://unpkg.com/marked@9.1.2/lib/marked.esm.js";
import { fileDetails } from "../utils/file.mjs";
import { DisplayElement } from "./display.mjs";
/** /**
@ -11,21 +13,21 @@ export class MarkdownElement extends HTMLElement {
name: "frontmatter", name: "frontmatter",
level: "block", level: "block",
start(src) { start(src) {
return src.match(/^---/)?.index return src.match(/^(-{3,})/)?.index
}, },
tokenizer(src, tokens) { tokenizer(src, tokens) {
const match = src.match(/^---(.+)?\n(.+)\n---\n/) const match = src.match(/^(-{3,})(.+)?\n((?:.+\n)*)\1\n/)
if(match) { if(match) {
return { return {
type: "frontmatter", type: "frontmatter",
raw: match[0], raw: match[0],
lang: match[1], lang: match[2],
data: match[2], data: match[3],
} }
} }
}, },
renderer(token) { renderer(token) {
return `<pre><code lang="${token.lang}">${token.data}</code></pre>`; return `<x-frontmatter><code slot="frontmatter-contents" lang="${token.lang}">${token.data}</code></x-frontmatter>`;
} }
}, },
{ {
@ -95,6 +97,23 @@ export class MarkdownElement extends HTMLElement {
} }
} }
/**
* Element rendering Obsidian front matter.
*/
export class FrontMatterElement extends HTMLElement {
static getTemplate() {
return document.getElementById("template-frontmatter")
}
// noinspection JSUnusedGlobalSymbols
connectedCallback() {
const instanceDocument = FrontMatterElement.getTemplate().content.cloneNode(true)
const shadow = this.attachShadow({ mode: "open" })
shadow.appendChild(instanceDocument)
}
}
/** /**
* Element rendering an Obsidian Hashtag. * Element rendering an Obsidian Hashtag.
*/ */
@ -120,25 +139,17 @@ export class WikilinkElement extends HTMLElement {
return document.getElementById("template-wikilink") 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 // noinspection JSUnusedGlobalSymbols
connectedCallback() { connectedCallback() {
const instanceDocument = WikilinkElement.getTemplate().content.cloneNode(true) const instanceDocument = WikilinkElement.getTemplate().content.cloneNode(true)
const shadow = this.attachShadow({ mode: "open" }) const shadow = this.attachShadow({ mode: "open" })
const wref = this.getWikilinkWref() const instanceElement = instanceDocument.querySelector(".wikilink")
this.addEventListener("click", function() { const destinationURL = new URL(window.location)
console.warn("Would move to", wref, ", but navigation is not yet implemented.") destinationURL.hash = this.getAttribute("wref")
})
instanceElement.href = destinationURL
shadow.appendChild(instanceDocument) shadow.appendChild(instanceDocument)
} }

9
src/elements/node.mjs
View file

@ -99,9 +99,13 @@ export class NodeFileElement extends NodeElement {
this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`) this.instanceElement.style.setProperty("height", `${this.getAttribute("height")}px`)
this.instanceElement.style.setProperty("--color-node", this.colorToHex()) this.instanceElement.style.setProperty("--color-node", this.colorToHex())
this.nameSlotted = document.createElement("span") this.nameSlotted = document.createElement("x-wikilink")
this.nameSlotted.slot = "node-title" this.nameSlotted.slot = "node-title"
this.nameSlotted.innerText = this.getAttribute("fileName") this.nameSlotted.setAttribute("wref", this.getAttribute("file"))
const nameSlottedText = document.createElement("span")
nameSlottedText.slot = "wikilink-text"
nameSlottedText.innerText = this.getAttribute("file-name")
this.nameSlotted.appendChild(nameSlottedText)
this.appendChild(this.nameSlotted) this.appendChild(this.nameSlotted)
this.contentsSlotted = document.createElement(customElements.getName(DisplayElement)) this.contentsSlotted = document.createElement(customElements.getName(DisplayElement))
@ -140,6 +144,7 @@ export class NodeTextElement extends NodeElement {
this.contentsSlotted = document.createElement("x-markdown") this.contentsSlotted = document.createElement("x-markdown")
this.contentsSlotted.slot = "node-contents" this.contentsSlotted.slot = "node-contents"
this.contentsSlotted.setAttribute("contents", this.getAttribute("text")) this.contentsSlotted.setAttribute("contents", this.getAttribute("text"))
this.appendChild(this.contentsSlotted)
shadow.appendChild(instanceDocument) shadow.appendChild(instanceDocument)
} }

11
src/index.mjs
View file

@ -1,11 +1,20 @@
import { CanvasElement, HashtagElement, MarkdownElement, NodeFileElement, WikilinkElement, DisplayElement, EdgeElement, NodeGroupElement, NodeTextElement } from "./elements/index.mjs"; import { CanvasElement, HashtagElement, MarkdownElement, NodeFileElement, WikilinkElement, DisplayElement, EdgeElement, NodeGroupElement, NodeTextElement, FrontMatterElement } from "./elements/index.mjs";
import { configFromWindow } from "./config.mjs";
customElements.define("x-node-file", NodeFileElement) customElements.define("x-node-file", NodeFileElement)
customElements.define("x-node-text", NodeTextElement) customElements.define("x-node-text", NodeTextElement)
customElements.define("x-node-group", NodeGroupElement) customElements.define("x-node-group", NodeGroupElement)
customElements.define("x-markdown", MarkdownElement) customElements.define("x-markdown", MarkdownElement)
customElements.define("x-frontmatter", FrontMatterElement)
customElements.define("x-wikilink", WikilinkElement) customElements.define("x-wikilink", WikilinkElement)
customElements.define("x-hashtag", HashtagElement) customElements.define("x-hashtag", HashtagElement)
customElements.define("x-canvas", CanvasElement) customElements.define("x-canvas", CanvasElement)
customElements.define("x-display", DisplayElement) customElements.define("x-display", DisplayElement)
customElements.define("x-edge", EdgeElement) customElements.define("x-edge", EdgeElement)
const config = configFromWindow()
const displayElement = document.createElement("x-display")
displayElement.setAttribute("vref", config.vref)
displayElement.setAttribute("wref", config.wref)
displayElement.setAttribute("root", "")
document.body.appendChild(displayElement)

40
src/utils/file.mjs
View file

@ -1,12 +1,30 @@
/** export function filePath(file) {
* Parse a file path to get the file name and extension. const stack = []
*
* @param file The file path to parse. for(const part of file.split("/")) {
* @returns {[String, String]} The file's name and extension without the dot respectively. if(part === ".") {
*/ // noinspection UnnecessaryContinueJS
export function fileDetails(file) { continue
const split = file.split("/").at(-1).split(".") }
const name = split.slice(0, -1) else if(part === "..") {
const extension = split.at(-1) stack.pop()
return [name, extension] }
else {
stack.push(part)
}
}
return stack
}
export function fileDetails(file) {
const path = filePath(file)
const directory = path.slice(0, -1).join("/")
const nameExtension = path.at(-1)
const split2 = nameExtension.split(".")
const name = split2.slice(0, -1)
const extension = split2.at(-1)
return {path, directory, name, extension}
} }

2
style/dark.css
View file

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

2
style/light.css
View file

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