feat: add navlinks keyboard shortcuts

Author: gcharest

layouts/_default/baseof.html

@@ -43,6 +43,7 @@
   </main>
 
   {{ partial "docs/inject/body" . }}
+  <script src="{{ .Site.BaseURL }}js/navlinks.js"></script>
 </body>
 </html>
 

layouts/partials/docs/navigation-links.html

@@ -22,13 +22,13 @@
   <li>
   {{ if ne $currentPageIndex $prevLinkIndex }}
     {{$prevPage := index $sitePages $prevLinkIndex}}
-      <a href="{{ $prevPage.Link }}">{{ i18n "prev" }}</a>
+      <a href="{{ $prevPage.Link }}" id="prev-page">{{ i18n "prev" }}</a>
       {{ end }}
     </li>
     <li>
   {{ if ne $currentPageIndex $nextLinkIndex }}
     {{$nextPage := index $sitePages $nextLinkIndex}}
-      <a href="{{ $nextPage.Link }}">{{ i18n "next"}}</a>
+      <a href="{{ $nextPage.Link }}" id="next-page">{{ i18n "next"}}</a>
       {{ end }}
     </li>
 </ul>

static/js/navlinks.js

@@ -0,0 +1,22 @@
+/**
+ * Script to handle the navigation links events.
+ * When the user presses arrow left or arrow right, the page will be redirected to the previous/next page if corresponding link exists.
+ */
+
+// Get the previous (id="prev-page") and next (id="next-page") links
+const prevPageLink = document.getElementById("prev-page");
+const nextPageLink = document.getElementById("next-page");
+
+// Add event listener to the document
+document.addEventListener("keydown", (event) => {
+  if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
+    return;
+  } else {
+    if (event.key === "ArrowLeft" && prevPageLink) {
+      prevPageLink.click();
+    }
+    if (event.key === "ArrowRight" && nextPageLink) {
+      nextPageLink.click();
+    }
+  }
+});