Add wikilink and hashtag support

.idea/inspectionProfiles/Project_Default.xml

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

index.html

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

src/hashtag.mjs

@@ -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)
+    }
+}

src/index.mjs

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

src/page.mjs

@@ -19,13 +19,13 @@ const marked = new Marked({
                     return {
                         type: "wikilink",
                         raw: match[0],
-                        target: match[1],
+                        wref: match[1],
-                        display: match[2],
+                        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>`
             }
         }
     ]

src/wikilink.mjs

@@ -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)
+    }
+}

style/dark.css

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

style/index.css

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

style/light.css

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