feat: add toc of page (#41)
diff --git a/docs/book.toml b/docs/book.toml
index ab4182d..346cfd3 100644
--- a/docs/book.toml
+++ b/docs/book.toml
@@ -23,7 +23,8 @@
cname = "docs.ceresdb.io"
git-repository-url = "https://github.com/CeresDB/ceresdb"
edit-url-template = "https://github.com/CeresDB/docs/edit/main/docs/{path}"
+additional-css = ["style.css"]
+additional-js = ["sidebar.js"]
[output.html.fold]
enable = true
-
diff --git a/docs/sidebar.js b/docs/sidebar.js
new file mode 100644
index 0000000..7a8f9d3
--- /dev/null
+++ b/docs/sidebar.js
@@ -0,0 +1,66 @@
+// Un-active everything when you click it
+Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+ el.addEventHandler("click", function() {
+ Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+ 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) {
+ if (window.pageYOffset >= el.offsetTop) {
+ id = el;
+ }
+ });
+
+ Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+ el.classList.remove("active");
+ });
+
+ Array.prototype.forEach.call(document.getElementsByClassName("pagetoc")[0].children, function(el) {
+ 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) {
+ 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);
diff --git a/docs/style.css b/docs/style.css
new file mode 100644
index 0000000..5cb20e5
--- /dev/null
+++ b/docs/style.css
@@ -0,0 +1,48 @@
+@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;
+ height: calc(100vh - var(--menu-bar-height) - 0.67em * 4);
+ overflow: auto;
+ }
+ .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);
+ }
+}
+
+@media print {
+ .sidetoc {
+ display: none;
+ }
+}
diff --git a/docs/theme/index.hbs b/docs/theme/index.hbs
index 6b85ed3..b3453ce 100644
--- a/docs/theme/index.hbs
+++ b/docs/theme/index.hbs
@@ -202,6 +202,9 @@
<div id="content" class="content">
<main>
+ <!-- Page table of contents -->
+ <div class="sidetoc"><nav class="pagetoc"></nav></div>
+
{{{ content }}}
</main>
