ndg-templates: add Ctrl+K search shortcut and keycap hint

CHANGELOG.md

@@ -37,6 +37,10 @@ changes.
 
 ### Added
 
+- `Ctrl+K` now focuses search alongside the existing `/` shortcut, prioritizing
+  the options filter when present. The header search field shows a `Ctrl+K`
+  keycap, and the search page lists both shortcuts in its keyboard hints.
+
 - Document sidebars now support explicit sub-chapters through `parent` in
   `[[sidebar.matches]]`. Parents remain clickable, integer positions order
   siblings, and numbering follows the hierarchy, such as `4.1` and `4.1.1`.

crates/ndg-templates/templates/default.css

@@ -853,6 +853,7 @@ img {
 #search-input {
   padding: var(--space-2) var(--space-3);
   padding-left: 2.5rem;
+  padding-right: 5rem;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
   width: 240px;
@@ -871,6 +872,18 @@ img {
   cursor: text;
 }
 
+.search-shortcut {
+  position: absolute;
+  top: 50%;
+  right: var(--space-3);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.search-container:focus-within .search-shortcut {
+  visibility: hidden;
+}
+
 #search-input::placeholder {
   color: var(--text-muted);
 }
@@ -1137,6 +1150,7 @@ img {
   gap: var(--space-1);
 }
 
+.search-shortcut,
 .search-keyboard-hints kbd {
   display: inline-block;
   padding: 0.125rem 0.375rem;
@@ -1767,6 +1781,10 @@ h6:hover .copy-link {
     margin-top: var(--space-2);
   }
 
+  .search-shortcut {
+    display: none;
+  }
+
   /* Mobile search styles */
   .search-container {
     position: relative;

crates/ndg-templates/templates/default.html

@@ -50,6 +50,7 @@ <h1 class="site-title">
         {% if generate_search %}
         <div class="search-container js-only">
           <input type="text" id="search-input" placeholder="Search..." aria-label="Search" autocomplete="off" />
+          <kbd class="search-shortcut" aria-hidden="true">Ctrl+K</kbd>
           <div id="search-results" class="search-results"></div>
         </div>
         {% endif %}

crates/ndg-templates/templates/lib.html

@@ -54,6 +54,7 @@
         {{ navbar_html|safe }} {% if generate_search %}
         <div class="search-container js-only">
           <input type="text" id="search-input" aria-label="Search" placeholder="Search..." autocomplete="off" />
+          <kbd class="search-shortcut" aria-hidden="true">Ctrl+K</kbd>
           <div id="search-results" class="search-results"></div>
         </div>
         {% endif %}

crates/ndg-templates/templates/main.js

@@ -364,17 +364,25 @@ function isEditableTarget(target) {
   );
 }
 
+function isSearchShortcut(event) {
+  if (
+    event.defaultPrevented ||
+    event.isComposing ||
+    event.metaKey ||
+    event.altKey
+  )
+    return false;
+
+  if (event.ctrlKey) {
+    return event.key.toLowerCase() === "k" && !event.shiftKey;
+  }
+
+  return event.key === "/" && !isEditableTarget(event.target);
+}
+
 function setupGlobalShortcuts() {
   document.addEventListener("keydown", (event) => {
-    if (
-      event.key !== "/" ||
-      event.ctrlKey ||
-      event.metaKey ||
-      event.altKey ||
-      isEditableTarget(event.target)
-    ) {
-      return;
-    }
+    if (!isSearchShortcut(event)) return;
 
     const input =
       document.getElementById("options-filter") ??

crates/ndg-templates/templates/options.html

@@ -48,6 +48,7 @@ <h1 class="site-title">
         {{ navbar_html|safe }} {% if generate_search %}
         <div class="search-container js-only">
           <input type="text" id="search-input" placeholder="Search..." aria-label="Search" autocomplete="off" />
+          <kbd class="search-shortcut" aria-hidden="true">Ctrl+K</kbd>
           <div id="search-results" class="search-results"></div>
         </div>
         {% endif %}

crates/ndg-templates/templates/search.html

@@ -52,6 +52,7 @@ <h1 class="site-title">
             aria-label="Search"
             autocomplete="off"
           />
+          <kbd class="search-shortcut" aria-hidden="true">Ctrl+K</kbd>
           <div
             id="search-results"
             class="search-results"
@@ -150,7 +151,7 @@ <h1>Search</h1>
               />
             </div>
             <div class="search-keyboard-hints js-only" role="note" aria-label="Keyboard shortcuts">
-              <span class="hint-item"><kbd>/</kbd> to focus search</span>
+              <span class="hint-item"><kbd>Ctrl+K</kbd> or <kbd>/</kbd> to focus search</span>
               <span class="hint-item"><kbd>↑</kbd> <kbd>↓</kbd> to navigate</span>
               <span class="hint-item"><kbd>Enter</kbd> to select</span>
               <span class="hint-item"><kbd>Esc</kbd> to leave search</span>