diff --git a/layouts/guide/single.html b/layouts/guide/single.html
index 5578462..ecb2cc0 100644
--- a/layouts/guide/single.html
+++ b/layouts/guide/single.html
@@ -5,5 +5,10 @@
+
+
+ {{ .TableOfContents }}
+
+
{{ end }}
diff --git a/static/script/toc.js b/static/script/toc.js
new file mode 100644
index 0000000..826cff9
--- /dev/null
+++ b/static/script/toc.js
@@ -0,0 +1,34 @@
+const toc = document.getElementById("TableOfContents");
+
+const getId = (el) => {
+ do {
+ const id = el.getAttribute("id");
+ if (id) {
+ return id;
+ }
+ el = el.previousElementSibling;
+ } while (el);
+};
+if (toc) {
+ if (toc.children.length < 1) {
+ toc.parentElement.remove();
+ } else {
+ const observer = new IntersectionObserver((entries) => {
+ const filtered = entries.filter((i) => getId(i.target));
+ filtered.forEach((entry) => {
+ const id = getId(entry.target);
+ if (id && entry.intersectionRatio > 0) {
+ toc.querySelector(`li.active`)?.classList.remove("active");
+ toc
+ .querySelector(`li a[href="#${id}"]`)
+ .parentElement.classList.add("active");
+ }
+ });
+ });
+
+ // Track all sections that have an `id` applied
+ document.querySelectorAll(".copy *").forEach((section) => {
+ observer.observe(section);
+ });
+ }
+}
diff --git a/themes/strimertul/assets/scss/guide.scss b/themes/strimertul/assets/scss/guide.scss
index 0f408ec..c79128d 100644
--- a/themes/strimertul/assets/scss/guide.scss
+++ b/themes/strimertul/assets/scss/guide.scss
@@ -175,3 +175,53 @@
}
}
}
+
+.toc {
+ @media only screen and (max-width: 1400px) {
+ display: none;
+ }
+ padding: 0;
+ position: fixed;
+ right: 0;
+ top: 60px;
+ header {
+ font-weight: bold;
+ padding: 0.6rem 0.9rem;
+ margin-top: 0.5rem;
+ }
+ ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ li {
+ display: flex;
+ align-items: stretch;
+ justify-content: stretch;
+ transition: all 100ms;
+ font-size: 14px;
+ border-left: 5px solid $gray3;
+ &.active {
+ pointer-events: none;
+ border-left-color: $teal8;
+ a {
+ color: $teal11;
+ }
+ }
+ &:hover {
+ background-color: rgba(255, 255, 255, 0.05);
+ }
+ a {
+ flex: 1;
+ padding: 0.6rem 1rem;
+ color: $teal12;
+ text-decoration: none;
+ &:first-of-type {
+ padding-top: 0.8rem;
+ }
+ }
+ a:hover {
+ color: $teal11;
+ }
+ }
+ }
+}