Add workflow for Pagine v2.2.0. Set min-height to 100vh for `main…

…` element in `doc.html`

css/doc.css

@@ -1,6 +1,8 @@
 .content {
     margin: 0 40px;
 
+    min-height: 100vh;
+
     font-size: 16px;
 
     a {

script/src/doc.ts

@@ -1,6 +1,32 @@
 function initDoc() {
     generateSidenav()
     generateBlockquotes()
+
+    window.addEventListener("scroll", scrollEvent)
+}
+
+function scrollEvent() {
+    let elements = document.getElementsByTagName("main")[0].querySelectorAll("h1,h2,h3")
+
+    elements.forEach(element => {
+        element.classList.remove("current")
+        document.getElementById(`sidenav-${element.id}`).classList.remove("current")
+    })
+
+    for (let i = 0; i < elements.length; i++) {
+        let element = elements[i]
+
+        if (element.getBoundingClientRect().top < 0) continue
+
+        element.classList.add("current")
+        document.getElementById(`sidenav-${element.id}`).classList.add("current")
+
+        break
+    }
+}
+
+function generateIdFromElement(element: Element) {
+    return element.innerHTML.toLowerCase().replace(/[^a-zA-Z\s-]/g, "").replaceAll(" ", "-")
 }
 
 function generateSidenav() {
@@ -9,38 +35,39 @@ function generateSidenav() {
     let h1id = ""
     let h2id = ""
 
-    document.querySelector(".content").querySelectorAll("h1,h2,h3").forEach((element)=> {
-        let h1 = root[root.length-1]
+    document.querySelector(".content").querySelectorAll("h1,h2,h3").forEach((element) => {
+        let h1 = root[root.length - 1]
 
         switch (element.tagName) {
             case "H1":
-                element.id = element.innerHTML.toLowerCase().replaceAll(" ", "-")
+                element.id = generateIdFromElement(element)
                 h1id = element.id
 
                 root.push({id: element.id, text: element.innerHTML, h2: []})
+
                 break
             case "H2":
-                element.id = `${h1id}-${element.innerHTML.toLowerCase().replaceAll(" ", "-")}`
+                element.id = `${h1id}-${generateIdFromElement(element)}`
                 h2id = element.id
 
                 h1.h2.push({id: element.id, text: element.innerHTML, h3: []})
                 break
             case "H3":
-                element.id = `${h2id}-${element.innerHTML.toLowerCase().replaceAll(" ", "-")}`
+                element.id = `${h2id}-${generateIdFromElement(element)}`
 
-                h1.h2[h1.h2.length-1].h3.push({id: element.id, text: element.innerHTML})
+                h1.h2[h1.h2.length - 1].h3.push({id: element.id, text: element.innerHTML})
                 break
         }
     })
 
     let sidenav = document.getElementById("sidenav")
     sidenav.innerHTML += "<ul>"
     for (let h1 of root) {
-        sidenav.innerHTML += `<li><a href="#${h1.id}"></a></li><ul>`
+        sidenav.innerHTML += `<li><a id="sidenav-${h1.id}" href="#${h1.id}"></a></li><ul>`
         for (let h2 of h1.h2) {
-            sidenav.innerHTML += `<li style="padding-left: 20px"><a href="#${h2.id}">${h2.text}</a></li><ul>`
+            sidenav.innerHTML += `<li id="sidenav-${h2.id}" style="padding-left: 20px"><a href="#${h2.id}">${h2.text}</a></li><ul>`
             for (let h3 of h2.h3) {
-                sidenav.innerHTML += `<li style="padding-left: 40px"><a href="#${h3.id}">${h3.text}</a></li>`
+                sidenav.innerHTML += `<li id="sidenav-${h3.id}" style="padding-left: 40px"><a href="#${h3.id}">${h3.text}</a></li>`
             }
             sidenav.innerHTML += "</ul>"
         }

templates/head.html

@@ -1,16 +1,16 @@
-<link rel="icon" type="image/png" href="{{ .icon }}"/>
+<link rel="icon" type="image/png" href="{{ This.icon }}"/>
 <link rel="stylesheet" href="{{ api.Attr.templateBase }}/css/base.css"/>
 <link rel="stylesheet" href="{{ api.Attr.templateBase }}/css/vs2015.min.css">
 <script type="text/javascript" src="{{ api.Attr.templateBase }}/script/doc.js"></script>
 <script type="text/javascript" src="{{ api.Attr.templateBase }}/script/highlight.min.js"></script>
 
-{{ if .features.mathjax }}
+{{ if This.features.mathjax }}
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 {{ end }}
 
 {{ api.Apply "com.github.webpagine.darkmode" "head" This }}
 
-{{ range .link }}<link rel="{{ .rel }}" href="{{ .href }}"/>{{ end }}
+{{ range This.link }}<link rel="{{ .rel }}" href="{{ .href }}"/>{{ end }}
 {{ template "debug.html" }}
 
 <script type="text/javascript">

workflow.yaml

@@ -1,4 +1,5 @@
 stage:
-  - spec: "tsc/v1"
-    title: Build TypeScript
-    path: /script/
+  - job:
+      - type: "tsc/v1"
+        title: "Build TypeScript"
+        path: "/script/"