Enable "you are here" table of contents highlighting (#716)

* enable bootstrap scrollspy

Signed-off-by: Pete Lumbis <pete@upbound.io>

* enable bootstrap scrollspy

Signed-off-by: Pete Lumbis <pete@upbound.io>

* add TOC editing to enable scrollspy styling

Signed-off-by: Pete Lumbis <pete@upbound.io>

* move TOC generation to a partial and inject bootstrap scrollspy styling

Signed-off-by: Pete Lumbis <pete@upbound.io>

* set scrollspy margin offset

Signed-off-by: Pete Lumbis <pete@upbound.io>

---------

Signed-off-by: Pete Lumbis <pete@upbound.io>

themes/geekboot/assets/scss/_toc.scss

@@ -20,11 +20,14 @@
       padding-left: 0;
       margin-bottom: 0;
       list-style: none;
+      display: inherit;
+
 
       ul {
         padding-left: 1rem;
         margin-top: .25rem;
       }
+
     }
 
     li {
@@ -33,11 +36,29 @@
 
     a {
       color: inherit;
+      display: inherit;
+      padding: inherit;
+
+      &.active {
+        color: var(--content-link-color);
+        font-weight: 600;
+        letter-spacing: .60px;
+
+        &:hover{
+          color: var(--content-link-color);;
+          text-decoration: underline !important;
+        }
+      }
 
       &:not(:hover) {
         text-decoration: none;
       }
 
+      &:hover{
+        color: inherit;
+        text-decoration: underline !important;
+      }
+
       code {
         font: inherit;
       }

themes/geekboot/data/assets.json

@@ -1,8 +1,8 @@
 {
   "main.js": {
-    "src": "js/main-41e2db8f.bundle.min.js"
+    "src": "js/main-727bf178.bundle.min.js"
   },
-  "main-41e2db8f.bundle.min.js.map": {
-    "src": "js/main-41e2db8f.bundle.min.js.map"
+  "main-727bf178.bundle.min.js.map": {
+    "src": "js/main-727bf178.bundle.min.js.map"
   }
 }

themes/geekboot/layouts/partials/single-list.html

@@ -1,4 +1,4 @@
-<div class="bd-layout docs-container">
+<div class="bd-layout docs-container" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-threshold="0,1" data-bs-root-margin="0% 0% -75%">
   <aside class="bd-sidebar">
     <div class="offcanvas-lg offcanvas-start bd-sidebar-container" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
       <div class="offcanvas-header pb-4 border-bottom">
@@ -49,7 +49,7 @@
           <strong class="d-none d-md-block h6 my-2">On this page</strong>
           <hr class="d-none d-md-block my-2">
           <div class="collapse bd-toc-collapse" id="tocContents">
-            {{ .TableOfContents }}
+            {{ partial "toc" .}}
             <nav class="pt-3">
               <div class="pb-2">
                 <svg class="bi" width="1em" height="1em"><use xlink:href="#pencil-square"/></svg>

themes/geekboot/layouts/partials/toc.html

@@ -0,0 +1,28 @@
+
+{{/*
+        The Hugo TOC function can't be changed gracefully.
+        This edits the HTML output from the TOC function to add Bootstrap Nav classes.
+
+        The multiple variable chaining is for readablity.
+    */}}
+
+    {{/*  The H1 element isn't in the TOC. Remove the extra <ul><li> Hugo generates  */}}
+{{ $topNavFix := replaceRE  `(\<nav id="TableOfContents"\>\s*\<ul\>\s*\<li\>)` "<nav id=\"TableOfContents\">" .TableOfContents  }}
+
+
+{{/*  Remove the extra closing <li><ul>  */}}
+{{ $bottomNavFix := replaceRE  `(\<\/li\>s*\<\/ul\>\s*\<\/nav\>)` "</nav>" $topNavFix }}
+
+{{/*  Add class="nav" to each <ul> element  */}}
+{{$ulFix := replace $bottomNavFix "<ul>" "<ul class=\"nav\">" }}
+
+
+{{/*  Add class="nav-item" to each <li> element  */}}
+{{$liFix := replace $ulFix "<li" "<li class=\"nav-item\"" }}
+
+
+{{/*  Add class="nav-link" to each <a> element   */}}
+{{ $linkFix := replace $liFix "<a href" "<a class=\"nav-link\" href" }}
+
+{{/*  Print the new ToC and tell Hugo to render it instead of printing HTML  */}}
+{{ $linkFix | safeHTML }}

utils/webpack/src/js/globalScripts.js

@@ -8,6 +8,7 @@ import './bootstrap/src/button';
 import './bootstrap/src/collapse';
 import './bootstrap/src/dropdown';
 import './bootstrap/src/popover';
+import './bootstrap/src/scrollspy';
 import './bootstrap/src/tab';
 import './bootstrap/src/offcanvas';