Add support for BS ScrollSpy to show active TOC entry (#2287)

Author: chalin

assets/scss/_sidebar-toc.scss

@@ -25,6 +25,11 @@
 }
 
 .td-toc {
+  $toc-padding-base: 1rem;
+  $toc-padding-increment: 0.5rem; // for TOC entry nesting
+
+  margin-top: 1rem;
+
   a {
     display: block;
     font-weight: $font-weight-light;
@@ -36,23 +41,49 @@
     display: block;
   }
 
-  li li {
-    margin-left: 0.5rem;
+  > .toc-title {
+    font-weight: $font-weight-bold;
+    color: var(--bs-secondary-color);
+    border-bottom: 1px solid var(--bs-tertiary-color);
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 
   #TableOfContents {
-    // Hugo's ToC is a mouthful, this can be used to style the top level h2 entries.
-    > ul > li > ul > li > a {
-    }
+    margin-left: -0.75rem;
 
     a {
+      margin-left: 0;
+      padding-left: $toc-padding-base;
+      text-decoration: none;
+      border-left: .125rem solid transparent;
+      transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
       color: var(--bs-secondary-color);
 
+      &.active {
+        color: var(--bs-primary);
+        border-left-color: var(--bs-primary);
+        font-weight: $font-weight-medium;
+      }
+
       &:focus,
       &:hover {
         color: initial;
       }
     }
+
+    ul ul a {
+      padding-left: $toc-padding-base + $toc-padding-increment;
+    }
+    ul ul ul a {
+      padding-left: $toc-padding-base + ($toc-padding-increment * 2);
+    }
+    ul ul ul ul a {
+      padding-left: $toc-padding-base + ($toc-padding-increment * 3);
+    }
+    ul ul ul ul ul a {
+      padding-left: $toc-padding-base + ($toc-padding-increment * 4);
+    }
   }
 
   ul {

layouts/_partials/td/scroll-spy-attr.txt

@@ -0,0 +1,4 @@
+data-bs-spy="scroll" {{/**/ -}}
+data-bs-target="#TableOfContents" {{/**/ -}}
+data-bs-smooth-scroll="true" {{/**/ -}}
+data-bs-root-margin="0px 0px -40%" {{/**/ -}}

layouts/_partials/toc.html

@@ -2,6 +2,7 @@
   {{ with .TableOfContents -}}
     {{ if ne . `<nav id="TableOfContents"></nav>` -}}
       <div class="td-toc">
+        <div class="toc-title">On this page</div>
         {{ . }}
       </div>
     {{ end -}}

layouts/blog/baseof.html

@@ -11,7 +11,7 @@
       {{ partial "navbar.html" . }}
     </header>
     <div class="container-fluid td-outer">
-      <div class="td-main">
+      <div class="td-main" {{ partialCached "td/scroll-spy-attr.txt" . | safeHTMLAttr }}>
         <div class="row flex-xl-nowrap">
           <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
             {{ partial "sidebar.html" . }}

layouts/docs/baseof.html

@@ -11,7 +11,7 @@
       {{ partial "navbar.html" . }}
     </header>
     <div class="container-fluid td-outer">
-      <div class="td-main">
+      <div class="td-main" {{ partialCached "td/scroll-spy-attr.txt" . | safeHTMLAttr }}>
         <div class="row flex-xl-nowrap">
           <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
             {{ partial "sidebar.html" . }}