Improve table of contents

- Convert the `.toc` class to a `<details>` element
- Update styles for improved accessibility and interaction

assets/css/common/post-single.css

@@ -45,40 +45,60 @@
     -webkit-box-decoration-break: clone;
 }
 
-.toc {
+details.toc {
     margin-bottom: var(--content-gap);
-    border: 1px solid var(--border);
     background: var(--code-bg);
     border-radius: var(--radius);
-    padding: 0.4em;
+    border: 1px solid var(--border);
 }
 
-[data-theme="dark"] .toc {
+[data-theme="dark"] details.toc {
     background: var(--entry);
 }
 
-.toc details summary {
+details.toc summary {
-    cursor: zoom-in;
+    padding: 0.5rem 1.2rem;
-    margin-inline-start: 10px;
+    border-radius: var(--radius);
+}
+
+details summary {
+    cursor: pointer;
+    display: list-item;
+    width: 100%;
+    margin-inline-start: 0;
     user-select: none;
 }
 
-.toc details[open] summary {
+details .title {
-    cursor: zoom-out;
-}
-
-.toc .details {
     display: inline;
     font-weight: 500;
+    margin-inline-start: 0.2rem;
 }
 
-.toc .inner {
+details {
-    margin: 5px 20px;
+    interpolate-size: allow-keywords;
-    padding: 0 10px;
-    opacity: 0.9;
 }
 
-.toc li ul {
+details::details-content {
+    height: 0;
+    opacity: 0;
+    overflow: clip;
+    transition: height 150ms ease,
+        opacity 150ms ease,
+        content-visibility 150ms allow-discrete;
+}
+
+details[open]::details-content {
+    height: auto;
+    opacity: 1;
+}
+
+details .inner {
+    margin: 0 2.4rem;
+    padding-bottom: 0.6rem;
+}
+
+details li ul {
     margin-inline-start: var(--gap);
 }
 

layouts/partials/toc.html

@@ -1,97 +1,95 @@
 {{- $headers := findRE "<h[1-6].*?>(.|\n])+?</h[1-6]>" .Content -}}
 {{- $has_headers := ge (len $headers) 1 -}}
 {{- if $has_headers -}}
-<div class="toc">
+<details class="toc" {{if (.Param "TocOpen") }} open{{ end }}>
-    <details {{if (.Param "TocOpen") }} open{{ end }}>
+    <summary accesskey="c" title="(Alt + C)">
-        <summary accesskey="c" title="(Alt + C)">
+        <span class="title">{{- i18n "toc" | default "Table of Contents" }}</span>
-            <span class="details">{{- i18n "toc" | default "Table of Contents" }}</span>
+    </summary>
-        </summary>
 
-        <div class="inner">
+    <div class="inner">
-            {{- if (.Param "UseHugoToc") }}
+        {{- if (.Param "UseHugoToc") }}
-            {{- .TableOfContents -}}
+        {{- .TableOfContents -}}
-            {{- else }}
+        {{- else }}
-            {{- $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>
-                {{- range seq (sub $firstHeaderLevel $largest) -}}
+                {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
+                {{- 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>
-                    {{- $.Scratch.Add "bareul" (sub (add $largest .) 1) -}}
+                    {{/* the first should not be recorded */}}
+                    {{- 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>
-                </li>
+                {{/* 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 -}}
-                {{- end -}}
+                {{- else -}}
-                {{- end -}}
-                {{- end }}
-                <li>
-                    <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
-                    {{- else }}
-                <li>
-                    <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | 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 }}
-            </ul>
+            <li>
-            {{- end }}
+                <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | safeHTML -}}</a>
-        </div>
+                {{- else }}
-    </details>
+            <li>
-</div>
+                <a href="#{{- $cleanedID -}}" aria-label="{{- $header | plainify | safeHTML -}}">{{- $header | plainify | 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 }}
+        </ul>
+        {{- end }}
+    </div>
+</details>
 {{- end }}