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

Add wikilink and hashtag support

Browse source
This commit is contained in:
Steffo 2023-10-19 14:56:08 +02:00
parent 75e54c3432
commit 078e36d30b
9 changed files with 81 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.idea/inspectionProfiles/Project_Default.xml
View file

@ -6,7 +6,7 @@
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="7">
<list size="8">
<item index="0" class="java.lang.String" itemvalue="nobr" />
<item index="1" class="java.lang.String" itemvalue="noembed" />
<item index="2" class="java.lang.String" itemvalue="comment" />
@ -14,6 +14,7 @@
<item index="4" class="java.lang.String" itemvalue="embed" />
<item index="5" class="java.lang.String" itemvalue="script" />
<item index="6" class="java.lang.String" itemvalue="x-card" />
<item index="7" class="java.lang.String" itemvalue="x-hashtag" />
</list>
</value>
</option>

29
index.html
View file

@ -4,7 +4,15 @@
<meta charset="utf-8" />
<title>WIP: Obsiview</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style/index.css">
<style>
@import "style/light.css";
@import "style/dark.css";
body {
background-color: var(--color-background);
color: var(--color-foreground);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script type="module" src="src/index.mjs"></script>
</head>
@ -27,8 +35,25 @@
</div>
</div>
</template>
<template id="template-wikilink">
<style>
.wikilink {
text-decoration: underline 1px solid var(--color-accent);
}
</style>
<abbr class="wikilink"><slot name="wikilink-text">Wikilink text</slot></abbr>
</template>
<template id="template-hashtag">
<style>
.hashtag {
background-color: rgba(var(--color-accent), 0.2);
color: rgb(var(--color-accent))
}
</style>
<span class="hashtag"><slot name="hashtag-text">#Hashtag</slot></span>
</template>
<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/convezione%20di%20Rayleigh-B%C3%A9nard.md"></x-card>
<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8 - Sistemi complessi/1 - Sistemi dinamici/condizione iniziale.md"></x-card>
<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/condizione%20iniziale.md"></x-card>
<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/metastabilit%C3%A0.md"></x-card>
</body>
</html>

9
src/hashtag.mjs Normal file
View file

@ -0,0 +1,9 @@
export class HashtagElement extends HTMLElement {
connectedCallback() {
const templateElement = document.getElementById("template-hashtag")
const instanceElement = templateElement.content.cloneNode(true)
const shadow = this.attachShadow({ mode: "open" })
shadow.appendChild(instanceElement)
}
}

4
src/index.mjs
View file

@ -1,3 +1,7 @@
import {CardElement} from "./card.mjs"
import {WikilinkElement} from "./wikilink.mjs";
import {HashtagElement} from "./hashtag.mjs";
customElements.define("x-card", CardElement)
customElements.define("x-wikilink", WikilinkElement)
customElements.define("x-hashtag", HashtagElement)

8
src/page.mjs
View file

@ -19,13 +19,13 @@ const marked = new Marked({
return {
type: "wikilink",
raw: match[0],
target: match[1],
display: match[2],
wref: match[1],
text: match[2],
}
}
},
renderer(token) {
return `<abbr title="${token.target}">${token.display ?? token.target}</abbr>`
return `<x-wikilink wref="${token.wref}"><span slot="wikilink-text">${token.text ?? token.wref}</span></x-wikilink>`
},
},
{
@ -45,7 +45,7 @@ const marked = new Marked({
}
},
renderer(token) {
return `<abbr title="#${token.tag}">#${token.tag}</abbr>`
return `<x-hashtag><span slot="hashtag-text">#${token.tag}</span></x-hashtag>`
}
}
]

29
src/wikilink.mjs Normal file
View file

@ -0,0 +1,29 @@
export class WikilinkElement extends HTMLElement {
/**
* Get the card this Wikilink points to via the `wref` attribute.
*
* @returns {String} The card target.
*/
getWikilinkWref() {
return this.getAttribute("wref")
}
/**
* The clickable anchor resolving the Wikilink.
*/
anchorElement
connectedCallback() {
const templateElement = document.getElementById("template-wikilink")
const instanceElement = templateElement.content.cloneNode(true)
this.anchorElement = this.querySelector(".wikilink")
this.title = this.getWikilinkWref()
const shadow = this.attachShadow({ mode: "open" })
shadow.appendChild(instanceElement)
}
}

5
style/dark.css
View file

@ -1,6 +1,7 @@
@media (prefers-color-scheme: dark) {
:root {
--color-background: #1E1E1E;
--color-foreground: #FFFFFF;
--color-background: #1e1e1e;
--color-foreground: #ffffff;
--color-accent: #ff7f00;
}
}

6
style/index.css
View file

@ -1,7 +1 @@
@import "./light.css";
@import "./dark.css";
body {
background-color: var(--color-background);
color: var(--color-foreground);
}

5
style/light.css
View file

@ -1,6 +1,7 @@
@media (prefers-color-scheme: light) {
:root {
--color-background: #FFFFFF;
--color-foreground: #1E1E1E;
--color-background: #ffffff;
--color-foreground: #1e1e1e;
--color-accent: #ff7f00;
}
}