Added toc to the side

assets/css/common/post-single.css

@@ -260,18 +260,34 @@
 .toc {
     margin: 0 2px 40px 2px;
     border: 1px solid var(--border);
-    background: var(--code-bg);
+    background: var(--entry);
     border-radius: var(--radius);
     padding: 0.4em;
 }
 
-.dark .toc {
+.toc-container.wide {
-    background: var(--entry);
+    position: absolute;
+    height: 100%;
+    border-right: 1px solid var(--border);
+    left: calc((var(--toc-width) + var(--gap)) * -1);
+    top: calc(var(--gap) * 2);
+    width: var(--toc-width);
+}
+
+.wide .toc {
+    position: sticky;
+    top: var(--gap);
+    border: unset;
+    background: unset;
+    border-radius: unset;
+    width: 100%;
+    margin: 0 2px 40px 2px;
 }
 
 .toc details summary {
     cursor: zoom-in;
     margin-inline-start: 20px;
+    padding: 12px 0;
 }
 
 .toc details[open] summary {
@@ -283,13 +299,27 @@
     font-weight: 500;
 }
 
+.toc-container.wide .toc .inner {
+    margin: 0;
+}
+
+.active {
+    font-weight: 500;
+}
+
+.toc ul {
+    list-style-type: circle;
+}
+
 .toc .inner {
-    margin: 0 20px;
+    margin: 0 0 0 20px;
-    padding: 10px 20px;
+    padding: 0px 15px 15px 20px;
+    font-size: 16px;
 }
 
 .toc li ul {
-    margin-inline-start: var(--gap);
+    margin-inline-start: calc(var(--gap) * 0.5);
+    list-style-type: none;
 }
 
 .toc summary:focus {
@@ -311,7 +341,6 @@
 .paginav {
     border-radius: var(--radius);
     background: var(--code-bg);
-    border: 1px solid var(--border);
 }
 
 .post-tags a {
@@ -321,11 +350,10 @@
     color: var(--secondary);
     font-size: 14px;
     line-height: 34px;
-    background: var(--code-bg);
+    background: var(--tertiary);
 }
 
-.post-tags a:hover,
+.post-tags a:hover {
-.paginav a:hover {
     background: var(--border);
 }
 

assets/css/core/theme-vars.css

@@ -3,6 +3,7 @@
     --content-gap: 20px;
     --nav-width: 1024px;
     --main-width: 720px;
+    --toc-width: 300px;
     --header-height: 60px;
     --footer-height: 60px;
     --radius: 8px;

layouts/partials/toc.html

@@ -1,6 +1,7 @@
 {{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
 {{- $has_headers := ge (len $headers) 1 -}}
 {{- if $has_headers -}}
+<aside id="toc-container" class="toc-container wide">
     <div class="toc">
         <details {{if (.Param "TocOpen") }} open{{ end }}>
             <summary accesskey="c" title="(Alt + C)">
@@ -90,4 +91,62 @@
             </div>
         </details>
     </div>
+</aside>
+<script>
+    let activeElement;
+    let elements;
+    window.addEventListener('DOMContentLoaded', function (event) {
+        checkTocPosition();
+
+        elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
+        // Make the first header active
+        activeElement = elements[0];
+        document.querySelector(`.inner ul li a[href="#${activeElement.getAttribute('id')}"]`).classList.add('active');
+    }, false);
+
+    window.addEventListener('resize', function(event) {
+        checkTocPosition();
+    }, false);
+
+    window.addEventListener('scroll', () => {
+        // Check if there is an object in the top half of the screen or keep the last item active
+        activeElement = Array.from(elements).find((element) => {
+            if ((getOffsetTop(element) - window.pageYOffset) > 0 && 
+                (getOffsetTop(element) - window.pageYOffset) < window.innerHeight/2) {
+                return element;
+            }
+        }) || activeElement
+
+        elements.forEach(element => {
+            if (element === activeElement ){
+                document.querySelector(`.inner ul li a[href="#${element.getAttribute('id')}"]`).classList.add('active');
+            } else {
+                document.querySelector(`.inner ul li a[href="#${element.getAttribute('id')}"]`).classList.remove('active');
+            }
+        })
+    }, false);
+
+    const main = parseInt(getComputedStyle(document.body).getPropertyValue('--main-width'), 10);
+    const toc = parseInt(getComputedStyle(document.body).getPropertyValue('--toc-width'), 10);
+    const gap = parseInt(getComputedStyle(document.body).getPropertyValue('--gap'), 10);
+
+    function checkTocPosition() {
+        const width = document.body.scrollWidth;
+
+        if (width - main - (toc * 2) - (gap * 4) > 0) {
+            document.getElementById("toc-container").classList.add("wide");
+        } else {
+            document.getElementById("toc-container").classList.remove("wide");
+        }
+    }
+
+    function getOffsetTop(element) {
+        if (!element.getClientRects().length) {
+            return 0;
+        }
+        let rect = element.getBoundingClientRect();
+        let win = element.ownerDocument.defaultView;
+        return rect.top + win.pageYOffset;   
+    }
+</script>
 {{- end }}