refine sidebar links

with help from jdsteinbach/eleventy-plugin-toc#35

.eleventy.js

@@ -55,7 +55,11 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginNavigation);
   eleventyConfig.addPlugin(pluginTOC, {
     tags: ['h1', 'h2'],
-    wrapper: 'nav',
+    wrapper(content, label) {
+      return `<nav id="bd-toc-nav" class="page-toc" aria-label="Site navigation">
+    ${content.replaceAll('<ul>', '<ul class="visible nav section-nav flex-column">').replaceAll('<li>', '<li class="toc-h2 nav-item toc-entry">').replaceAll('<a href', '<a class="reference internal nav-link" href')}
+    </nav>`
+    },
     wrapperClass: 'visible nav section-nav flex-column',
     ul: true
   });

package.json

@@ -8,7 +8,8 @@
     "watch": "npx @11ty/eleventy --watch",
     "serve": "npx @11ty/eleventy --serve",
     "start": "npx @11ty/eleventy --serve",
-    "debug": "DEBUG=* npx @11ty/eleventy"
+    "debug": "DEBUG=* npx @11ty/eleventy",
+    "postinstall": "patch-package"
   },
   "repository": {
     "type": "git",
@@ -34,7 +35,8 @@
     "luxon": "^2.3.1",
     "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^8.4.1",
-    "markdown-it-mathjax3": "^4.3.1"
+    "markdown-it-mathjax3": "^4.3.1",
+    "patch-package": "^6.4.7"
   },
   "devDependencies": {
     "@pborenstein/eleventy-md-syntax-highlight": "^1.0.2",

patches/eleventy-plugin-toc+1.1.5.patch

@@ -0,0 +1,35 @@
+diff --git a/node_modules/eleventy-plugin-toc/.eleventy.js b/node_modules/eleventy-plugin-toc/.eleventy.js
+index 6a926b8..f87651d 100644
+--- a/node_modules/eleventy-plugin-toc/.eleventy.js
++++ b/node_modules/eleventy-plugin-toc/.eleventy.js
+@@ -4,7 +4,7 @@ const parseOptions = require('./src/ParseOptions')
+ module.exports = (eleventyConfig, globalOpts) => {
+   globalOpts = globalOpts || {}
+   eleventyConfig.namespace(globalOpts, () => {
+-    eleventyConfig.addFilter('toc', (content, localOpts) => {
++    eleventyConfig.addFilter('toc', function (content, localOpts) {
+       return buildTOC(content, parseOptions(localOpts, globalOpts))
+     })
+   })
+diff --git a/node_modules/eleventy-plugin-toc/src/BuildTOC.js b/node_modules/eleventy-plugin-toc/src/BuildTOC.js
+index 50ced4a..00e3e60 100644
+--- a/node_modules/eleventy-plugin-toc/src/BuildTOC.js
++++ b/node_modules/eleventy-plugin-toc/src/BuildTOC.js
+@@ -29,11 +29,12 @@ const BuildTOC = (text, opts) => {
+
+   const label = wrapperLabel ? `aria-label="${wrapperLabel}"` : ''
+
+-  return wrapper
+-    ? `<${wrapper} class="${wrapperClass}" ${label}>
+-        ${BuildList(headings, ul, flat)}
+-      </${wrapper}>`
+-    : BuildList(headings, ul, flat)
++  const content = BuildList(headings, ul, flat);
++  return (
++      typeof wrapper === 'function' ? wrapper(content, label)
++    : wrapper ? `<${wrapper} class="${wrapperClass}" ${label}>${content}</${wrapper}>`
++    : content
++  );
+ }
+
+ module.exports = BuildTOC

src/css/index.css

@@ -13,6 +13,15 @@ a {
 a:hover {
   color: var(--lime);
 }
+.toc-entry a.nav-link, nav.bd-links li a {
+  color: var(--blue);
+}
+.toc-entry a.nav-link:hover, nav.bd-links li a:hover {
+  color: var(--lime);
+}
+.toc-entry a.nav-link.active, nav.bd-links .active a {
+  color: var(--blue);
+}
 .mynavbar-nav {
   display: flex;
   flex-direction: row;