feat(docs): page through the guide with left/right arrow keys

docs/content/javascripts/keyboard-nav.js

@@ -0,0 +1,50 @@
+// left/right arrow keys page through the docs guide
+(() => {
+  // don't hijack arrows while typing in the search box or a form control
+  function isTypingTarget(el) {
+    if (!el) {
+      return false;
+    }
+    if (el.isContentEditable) {
+      return true;
+    }
+    var tag = el.tagName;
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+  }
+
+  // one document-level listener survives "instant" navigation (body swapped, no full reload)
+  // re-query the footer links each keypress so they track the current page
+  document.addEventListener('keydown', (event) => {
+    // leave modifier combos alone - e.g. browser back/forward shortcuts
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    // don't hijack arrows while the search overlay is open: the user is either
+    // typing a query or arrowing through the results, which moves focus onto the
+    // result links (so an activeElement check alone doesn't cover it). `#__search`
+    // is the theme's search toggle checkbox, checked whenever search is open.
+    var searchToggle = document.getElementById('__search');
+    if (searchToggle && searchToggle.checked) {
+      return;
+    }
+    if (isTypingTarget(document.activeElement)) {
+      return;
+    }
+
+    var selector;
+    if (event.key === 'ArrowLeft') {
+      selector = 'a.md-footer__link--prev[href]';
+    } else if (event.key === 'ArrowRight') {
+      selector = 'a.md-footer__link--next[href]';
+    } else {
+      return;
+    }
+
+    var link = document.querySelector(selector);
+    if (link && link.getAttribute('href')) {
+      event.preventDefault();
+      // click() so "instant" navigation can intercept it
+      link.click();
+    }
+  });
+})();

zensical.toml

@@ -127,7 +127,7 @@ nav = [
 # The path provided should be relative to the "docs_dir".
 #
 # Read more: https://zensical.org/docs/customization/#additional-javascript
-#extra_javascript = ["javascripts/extra.js"]
+extra_javascript = ["javascripts/keyboard-nav.js"]
 
 # ----------------------------------------------------------------------------
 # Section for configuring theme options