From d9a011c0462de4c8a116a7cae779cda7fe027d02 Mon Sep 17 00:00:00 2001
From: Patrice Chalin <pchalin@gmail.com>
Date: Thu, 12 Jun 2025 21:15:48 -0400
Subject: [PATCH 1/2] Add support for BS ScrollSpy to show active TOC entry

---
 assets/scss/_sidebar-toc.scss            | 38 ++++++++++++++++++++----
 layouts/_partials/td/scroll-spy-attr.txt |  4 +++
 layouts/_partials/toc.html               |  1 +
 layouts/blog/baseof.html                 |  2 +-
 layouts/docs/baseof.html                 |  2 +-
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 layouts/_partials/td/scroll-spy-attr.txt

diff --git a/assets/scss/_sidebar-toc.scss b/assets/scss/_sidebar-toc.scss
index 1b13966010..5017c3cf8a 100644
--- a/assets/scss/_sidebar-toc.scss
+++ b/assets/scss/_sidebar-toc.scss
@@ -25,6 +25,8 @@
 }
 
 .td-toc {
+  margin-top: 1rem;
+
   a {
     display: block;
     font-weight: $font-weight-light;
@@ -36,23 +38,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: 1rem;
+      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: 1.5rem;
+    }
+    ul ul ul a {
+      padding-left: 2rem;
+    }
+    ul ul ul ul a {
+      padding-left: 2.5rem;
+    }
+    ul ul ul ul ul a {
+      padding-left: 3rem;
+    }
   }
 
   ul {
diff --git a/layouts/_partials/td/scroll-spy-attr.txt b/layouts/_partials/td/scroll-spy-attr.txt
new file mode 100644
index 0000000000..caca4344ba
--- /dev/null
+++ b/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%" {{/**/ -}}
diff --git a/layouts/_partials/toc.html b/layouts/_partials/toc.html
index 36185b799a..1d264f7696 100644
--- a/layouts/_partials/toc.html
+++ b/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 -}}
diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html
index 5920353c87..196664928e 100644
--- a/layouts/blog/baseof.html
+++ b/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" . }}
diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html
index c91b2303de..480f0ced7f 100644
--- a/layouts/docs/baseof.html
+++ b/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" . }}

From a12acc111a95aade566d17d3d24e52aafd0a09dc Mon Sep 17 00:00:00 2001
From: Patrice Chalin <pchalin@gmail.com>
Date: Fri, 13 Jun 2025 05:35:11 -0400
Subject: [PATCH 2/2] Update _sidebar-toc.scss: use SCSS var

---
 assets/scss/_sidebar-toc.scss | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/assets/scss/_sidebar-toc.scss b/assets/scss/_sidebar-toc.scss
index 5017c3cf8a..63c95e32d0 100644
--- a/assets/scss/_sidebar-toc.scss
+++ b/assets/scss/_sidebar-toc.scss
@@ -25,6 +25,9 @@
 }
 
 .td-toc {
+  $toc-padding-base: 1rem;
+  $toc-padding-increment: 0.5rem; // for TOC entry nesting
+
   margin-top: 1rem;
 
   a {
@@ -51,7 +54,7 @@
 
     a {
       margin-left: 0;
-      padding-left: 1rem;
+      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;
@@ -70,16 +73,16 @@
     }
 
     ul ul a {
-      padding-left: 1.5rem;
+      padding-left: $toc-padding-base + $toc-padding-increment;
     }
     ul ul ul a {
-      padding-left: 2rem;
+      padding-left: $toc-padding-base + ($toc-padding-increment * 2);
     }
     ul ul ul ul a {
-      padding-left: 2.5rem;
+      padding-left: $toc-padding-base + ($toc-padding-increment * 3);
     }
     ul ul ul ul ul a {
-      padding-left: 3rem;
+      padding-left: $toc-padding-base + ($toc-padding-increment * 4);
     }
   }