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,93 +1,152 @@
 {{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
 {{- $has_headers := ge (len $headers) 1 -}}
 {{- if $has_headers -}}
-<div class="toc">
+<aside id="toc-container" class="toc-container wide">
-    <details {{if (.Param "TocOpen") }} open{{ end }}>
+    <div class="toc">
-        <summary accesskey="c" title="(Alt + C)">
+        <details {{if (.Param "TocOpen") }} open{{ end }}>
-            <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
+            <summary accesskey="c" title="(Alt + C)">
-        </summary>
+                <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
+            </summary>
 
-        <div class="inner">
+            <div class="inner">
-            {{- $largest := 6 -}}
+                {{- $largest := 6 -}}
-            {{- range $headers -}}
+                {{- range $headers -}}
-            {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
+                {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
-            {{- $headerLevel := len (seq $headerLevel) -}}
+                {{- $headerLevel := len (seq $headerLevel) -}}
-            {{- if lt $headerLevel $largest -}}
+                {{- if lt $headerLevel $largest -}}
-            {{- $largest = $headerLevel -}}
+                {{- $largest = $headerLevel -}}
-            {{- end -}}
+                {{- end -}}
-            {{- end -}}
+                {{- end -}}
 
-            {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
+                {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}}
 
-            {{- $.Scratch.Set "bareul" slice -}}
+                {{- $.Scratch.Set "bareul" slice -}}
-            <ul>
-                {{- range seq (sub $firstHeaderLevel $largest) -}}
                 <ul>
-                    {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
+                    {{- range seq (sub $firstHeaderLevel $largest) -}}
-                    {{- end -}}
-                    {{- range $i, $header := $headers -}}
-                    {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
-                    {{- $headerLevel := len (seq $headerLevel) -}}
-
-                    {{/* get id="xyz" */}}
-                    {{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
-
-                    {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
-                    {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
-                    {{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
-
-                    {{- if ne $i 0 -}}
-                    {{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
-                    {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
-                    {{- if gt $headerLevel $prevHeaderLevel -}}
-                    {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
                     <ul>
-                        {{/* the first should not be recorded */}}
+                        {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
-                        {{- if ne $prevHeaderLevel . -}}
-                        {{- $.Scratch.Add "bareul" . -}}
                         {{- end -}}
+                        {{- range $i, $header := $headers -}}
+                        {{- $headerLevel := index (findRE "[1-6]" . 1) 0 -}}
+                        {{- $headerLevel := len (seq $headerLevel) -}}
+
+                        {{/* get id="xyz" */}}
+                        {{- $id := index (findRE "(id=\"(.*?)\")" $header 9) 0 }}
+
+                        {{- /* strip id="" to leave xyz, no way to get regex capturing groups in hugo */ -}}
+                        {{- $cleanedID := replace (replace $id "id=\"" "") "\"" "" }}
+                        {{- $header := replaceRE "<h[1-6].*?>((.|\n])+?)</h[1-6]>" "$1" $header -}}
+
+                        {{- if ne $i 0 -}}
+                        {{- $prevHeaderLevel := index (findRE "[1-6]" (index $headers (sub $i 1)) 1) 0 -}}
+                        {{- $prevHeaderLevel := len (seq $prevHeaderLevel) -}}
+                        {{- if gt $headerLevel $prevHeaderLevel -}}
+                        {{- range seq $prevHeaderLevel (sub $headerLevel 1) -}}
+                        <ul>
+                            {{/* the first should not be recorded */}}
+                            {{- if ne $prevHeaderLevel . -}}
+                            {{- $.Scratch.Add "bareul" . -}}
+                            {{- end -}}
+                            {{- end -}}
+                            {{- else -}}
+                            </li>
+                            {{- if lt $headerLevel $prevHeaderLevel -}}
+                            {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
+                            {{- if in ($.Scratch.Get "bareul") . -}}
+                        </ul>
+                        {{/* manually do pop item */}}
+                        {{- $tmp := $.Scratch.Get "bareul" -}}
+                        {{- $.Scratch.Delete "bareul" -}}
+                        {{- $.Scratch.Set "bareul" slice}}
+                        {{- range seq (sub (len $tmp) 1) -}}
+                        {{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
                         {{- end -}}
                         {{- else -}}
-                        </li>
-                        {{- if lt $headerLevel $prevHeaderLevel -}}
-                        {{- range seq (sub $prevHeaderLevel 1) -1 $headerLevel -}}
-                        {{- if in ($.Scratch.Get "bareul") . -}}
                     </ul>
-                    {{/* manually do pop item */}}
+                    </li>
-                    {{- $tmp := $.Scratch.Get "bareul" -}}
-                    {{- $.Scratch.Delete "bareul" -}}
-                    {{- $.Scratch.Set "bareul" slice}}
-                    {{- range seq (sub (len $tmp) 1) -}}
-                    {{- $.Scratch.Add "bareul" (index $tmp (sub . 1)) -}}
                     {{- end -}}
-                    {{- else -}}
+                    {{- end -}}
+                    {{- end -}}
+                    {{- end }}
+                    <li>
+                        <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
+                        {{- else }}
+                    <li>
+                        <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
+                        {{- end -}}
+                        {{- end -}}
+                        <!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
+                        {{- $firstHeaderLevel := $largest }}
+                        {{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
+                    </li>
+                    {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
+                    {{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
+                </ul>
+                {{- else }}
                 </ul>
                 </li>
                 {{- end -}}
-                {{- end -}}
-                {{- end -}}
                 {{- end }}
-                <li>
+                </ul>
-                    <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
+            </div>
-                    {{- else }}
+        </details>
-                <li>
+    </div>
-                    <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify -}}">{{- $header | safeHTML -}}</a>
+</aside>
-                    {{- end -}}
+<script>
-                    {{- end -}}
+    let activeElement;
-                    <!-- {{- $firstHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers 0) 1) 0)) -}} -->
+    let elements;
-                    {{- $firstHeaderLevel := $largest }}
+    window.addEventListener('DOMContentLoaded', function (event) {
-                    {{- $lastHeaderLevel := len (seq (index (findRE "[1-6]" (index $headers (sub (len $headers) 1)) 1) 0)) }}
+        checkTocPosition();
-                </li>
+
-                {{- range seq (sub $lastHeaderLevel $firstHeaderLevel) -}}
+        elements = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
-                {{- if in ($.Scratch.Get "bareul") (add . $firstHeaderLevel) }}
+        // Make the first header active
-            </ul>
+        activeElement = elements[0];
-            {{- else }}
+        document.querySelector(`.inner ul li a[href="#${activeElement.getAttribute('id')}"]`).classList.add('active');
-            </ul>
+    }, false);
-            </li>
+
-            {{- end -}}
+    window.addEventListener('resize', function(event) {
-            {{- end }}
+        checkTocPosition();
-            </ul>
+    }, false);
-        </div>
+
-    </details>
+    window.addEventListener('scroll', () => {
-</div>
+        // 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 }}