feat(docs): highlight active page section in right sidebar TOC

Fix #1099

assets/js/academic.js

@@ -357,6 +357,13 @@
    * --------------------------------------------------------------------------- */
 
   $(document).ready(function() {
+    // Fix Hugo's auto-generated Table of Contents.
+    //   Must be performed prior to initializing ScrollSpy.
+    $('#TableOfContents > ul > li > ul').unwrap().unwrap();
+    $('#TableOfContents').addClass('nav flex-column');
+    $('#TableOfContents li').addClass('nav-item');
+    $('#TableOfContents li a').addClass('nav-link');
+
     // Set dark mode if user chose it.
     let default_mode = 0;
     if ($('body').hasClass('dark')) {
@@ -513,9 +520,6 @@
     // Initialise Google Maps if necessary.
     initMap();
 
-    // Fix Hugo's inbuilt Table of Contents.
-    $('#TableOfContents > ul > li > ul').unwrap().unwrap();
-
     // Print latest Academic version if necessary.
     if ($('#academic-release').length > 0)
       printLatestRelease('#academic-release', $('#academic-release').data('repo'));

assets/sass/academic/_docs.scss

@@ -240,6 +240,12 @@ ul.toc-top {
   text-decoration: none;
 }
 
+/* ScrollSpy active link style. */
+#TableOfContents li a.active {
+  color: $sta-primary;
+  font-weight: 700;
+}
+
 /* Docs achnorjs links. */
 
 .anchorjs-link {

layouts/partials/custom_head.html

@@ -1,4 +1,4 @@
-{{/* No changes should be made to this file. */}}
-{{/* Instead, create or modify your sites layout/partials/custom_head.html. */}}
+{{/* Do not directly modify this file! */}}
+{{/* Instead, create a `layout/partials/custom_head.html` file in your site and add your code to it. */}}
 
-{{/* This partial is included in themes/academic/layout/partials/site_head.html. */}}
+{{/* This partial is included in `themes/academic/layout/partials/site_head.html`. */}}

layouts/partials/custom_js.html

@@ -1,4 +1,4 @@
-{{/* No changes should be made to this file. */}}
-{{/* Instead, create or modify your sites layout/partials/custom_js.html. */}}
+{{/* Do not directly modify this file! */}}
+{{/* Instead, create a `layout/partials/custom_js.html` file in your site and add your code to it. */}}
 
-{{/* This partial is included in themes/academic/layout/partials/site_js.html. */}}
+{{/* This partial is included in `themes/academic/layout/partials/site_js.html`. */}}