mirror of
https://github.com/glassflame/glassflame.github.io.git
synced 2024-11-22 08:04:27 +00:00
not sure what i did but it kinda works
This commit is contained in:
parent
9a7f5a4bd8
commit
ea61aef3d6
11 changed files with 117 additions and 66 deletions
35
index.html
35
index.html
|
@ -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>
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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`
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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"
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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,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,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;
|
||||||
|
|
Loading…
Reference in a new issue