Fix the rendering of shortcuts with branch bundles, and improve shortcut header performance (#668)

Author: agriyakhetarpal

assets/js/shortcuts.js

@@ -33,9 +33,12 @@ function scrollHeaders() {
   const headers = Array.from(
     document.querySelectorAll(":is(h1, h2, h3, h4, h5, h6)[id]"),
   );
-  const allShortcuts = Array.from(
-    document.querySelectorAll("#shortcuts > div"),
-  );
+  const shortcuts = document.getElementById("shortcuts");
+
+  // Exit early if shortcuts container doesn't exist
+  if (!shortcuts) return;
+
+  const allShortcuts = Array.from(shortcuts.querySelectorAll("div"));
 
   headers.map((currentSection) => {
     // get the position of the section
@@ -81,22 +84,38 @@ function remToPx(rem) {
 }
 
 function setupShortcuts(shortcutDepth = 2) {
+  // Find the shortcut target container in the sidebar
+  const shortcutsTarget = document.getElementById("shortcuts");
+
+  /*
+   * Exit early if shortcuts container doesn't exist
+   * This is important to avoid errors when the theme
+   * is used on pages that don't have the shortcuts sidebar
+   */
+  if (!shortcutsTarget) {
+    return;
+  }
+
   shortcutDepth += 1; // to account for the page title
 
-  // Build a class selector for each header type, and concatenate with commas
+  // Build a class selector for each header level
   let classes = "";
   for (let i = 2; i <= shortcutDepth; i++) {
     if (i != 2) {
       classes += ",";
     }
-    classes += " .content-container :not([role='tabpanel']) > h" + i;
+    classes += `.content-container > h${i}`;
   }
 
-  // Content Page Shortcuts
-  const shortcutsTarget = document.getElementById("shortcuts");
-  if (shortcutsTarget) {
-    const classElements = Array.from(document.querySelectorAll(classes));
+  const classElements = Array.from(document.querySelectorAll(classes));
+
+  // Only proceed if we found headers (to avoid creating an empty shortcuts section)
+  if (classElements.length > 0) {
     classElements.map((el) => {
+      if (!el.id) {
+        return;
+      }
+
       const title = el.innerHTML;
       const elId = el.id;
       // Gets the element type (e.g. h2, h3)
@@ -139,10 +158,13 @@ function setupShortcuts(shortcutDepth = 2) {
   const shortcuts = Array.from(
     document.querySelectorAll("#shortcuts div:not(#shortcuts-header)"),
   );
-  if (shortcuts.length == 0) {
-    const shortcutsContainer = document.getElementById("shortcuts-container");
-    if (shortcutsContainer) {
+  const shortcutsContainer = document.getElementById("shortcuts-container");
+
+  if (shortcutsContainer) {
+    if (shortcuts.length == 0) {
       shortcutsContainer.style.display = "none";
+    } else {
+      shortcutsContainer.style.display = ""; // make shortcuts display visible, if hidden
     }
   }
 

layouts/_default/single.html

@@ -6,9 +6,7 @@ <h1>{{ .Title }}</h1>
     {{ if .Params.Subtitle }}
     <h5 class="subtitle">{{ .Params.Subtitle }}</h5>
     {{ end }}
-    <div>
-      {{ .Content }}
-    </div>
+    {{ .Content }}
   </div>
   {{ partial "shortcuts.html" . }}
 </section>