UI: provide for level indents in right side TOC (#1189)

Thank you for the reviews Andy, Rachel, and Michelle!
redis · Feb 20, 2025 · 7a1a3f8 · 7a1a3f8
1 parent 345a5a3
commit 7a1a3f8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -102,6 +102,11 @@ select {
   @apply relative block text-redis-pen-600 hover:text-redis-pen-300 -my-0.5 py-1 pl-6 transition-colors leading-6;
 }
 
+/* Increase indentation for deeper nested items */
+#TableOfContents ul ul a {
+  @apply pl-10; /* Second level */
+}
+
 #TableOfContents a:before {
   content: '';
   @apply w-1 h-full bg-redis-pencil-250 absolute left-0 top-0 rounded-sm transition;

diff --git a/layouts/partials/docs-toc.html b/layouts/partials/docs-toc.html
@@ -17,13 +17,25 @@
         <h1 class="font-medium my-3">On this page</h1>
         <nav class="text-slate-700">
           <nav id="TableOfContents">
-            <ul>
+            {{ $prevLevel := 1 }}
               {{ range $i, $header := $headers }}
                 {{ $genAnchor := index (split (index (split $header "id=\"") 1) "\"") 0 }}
                 {{ $anchorID := $genAnchor }}
-                <li><a href="#{{ $anchorID }}">{{ $header | plainify | safeHTML }}</a></li>
-              {{end}}
-            </ul>
+                {{ $level := index (findRE "<h([1-6])" $header 1) 0 | replaceRE "<h([1-6])" "$1" | int }}
+                {{ if gt $level $prevLevel }}
+                  <ul>
+                {{ else if lt $level $prevLevel }}
+                  <!-- Close the previous list(s) if this header is shallower -->
+                  {{ range seq (sub $prevLevel $level) }}</ul></li>{{ end }}
+                {{ else if gt $i 0 }}
+                  <!-- Close previous list item -->
+                  </li>
+                {{ end }}
+                <li><a href="#{{ $anchorID }}">{{ $header | plainify | safeHTML }}</a>
+                {{ $prevLevel = $level }}
+              {{ end }}
+              <!-- Close remaining open lists -->
+              {{ range seq (sub $prevLevel 1) }}</ul></li>{{ end }}
           </nav>
         </nav>
       <!-- Use Hugo's .TableOfContents by default -->