add basic toc

docs/plugin/sidebar.js

@@ -0,0 +1,66 @@
+// Un-active everything when you click it
+Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) {
+    el.addEventHandler("click", function() {
+        Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) {
+            el.classList.remove("active");
+        });
+        el.classList.add("active");
+    });
+});
+
+var updateFunction = function() {
+
+    var id;
+    var elements = document.getElementsByClassName("header");
+    Array.prototype.forEach.call(elements, function(el, i) {
+        if (window.pageYOffset >= el.offsetTop) {
+            id = el;
+        }
+    });
+
+    Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) {
+        el.classList.remove("active");
+    });
+
+    Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el, i) {
+        if (id.href.localeCompare(el.href) == 0) {
+            el.classList.add("active");
+        }
+    });
+};
+
+// Populate sidebar on load
+window.addEventListener('load', function() {
+    var pagetoc = document.getElementsByClassName("pagetoc")[0];
+    var elements = document.getElementsByClassName("header");
+    Array.prototype.forEach.call(elements, function(el, i) {
+        var link = document.createElement("a");
+
+        // Indent shows hierarchy
+        var indent = "";
+        switch (el.parentElement.tagName) {
+            case "H2":
+                indent = "20px";
+                break;
+            case "H3":
+                indent = "40px";
+                break;
+            case "H4":
+                indent = "60px";
+                break;
+            default:
+                break;
+        }
+
+        link.appendChild(document.createTextNode(el.text));
+        link.style.paddingLeft = indent;
+        link.href = el.href;
+        pagetoc.appendChild(link);
+    });
+    updateFunction.call();
+});
+
+
+
+// Handle active elements on scroll
+window.addEventListener("scroll", updateFunction);

docs/plugin/style.css

@@ -0,0 +1,40 @@
+@media only screen and (max-width:1439px) {
+    .sidetoc {
+        display: none;
+    }
+}
+
+@media only screen and (min-width:1440px) {
+    main {
+        position: relative;
+    }
+    .sidetoc {
+        margin-left: auto;
+        margin-right: auto;
+        left: calc(100% + (var(--content-max-width))/4 - 140px);
+        position: absolute;
+    }
+    .pagetoc {
+        position: fixed;
+        width: 200px;
+    }
+    .pagetoc a {
+        border-left: 1px solid var(--sidebar-bg);
+        color: var(--fg) !important;
+        display: block;
+        padding-bottom: 5px;
+        padding-top: 5px;
+        padding-left: 10px;
+        text-align: left;
+        text-decoration: none;
+    }
+    .pagetoc a:hover,
+    .pagetoc a.active {
+        background: var(--sidebar-bg);
+        color: var(--sidebar-fg) !important;
+    }
+    .pagetoc .active {
+        background: var(--sidebar-bg);
+        color: var(--sidebar-fg);
+    }
+}