Add keyboard shortcut for focusing on sidebar search

Author: GregBrimble

patches/@astrojs+starlight-docsearch+0.6.0.patch

@@ -0,0 +1,39 @@
+diff --git a/node_modules/@astrojs/starlight-docsearch/DocSearch.astro b/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
+index f50c208..82218df 100644
+--- a/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
++++ b/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
+@@ -110,14 +110,14 @@ const docsearchTranslations: DocSearchTranslationProps = {
+ 			margin-inline-start: auto;
+ 		}
+ 		.DocSearch-Button-Keys::before {
+-			content: '';
+-			width: 1em;
+-			height: 1em;
+-			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
+-			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
+-			-webkit-mask-size: 100%;
+-			mask-size: 100%;
+-			background-color: currentColor;
++			content: var(--docsearch-shortcut);
++			font-size: 0.75em;
++			font-weight: 600;
++			opacity: 0.8;
++			border: 1px solid var(--sl-color-gray-4);
++			border-radius: 0.25rem;
++			padding: 0.125rem 0.375rem;
++			background-color: var(--sl-color-gray-6);
+ 		}
+ 	}
+ </style>
+@@ -128,6 +128,11 @@ const docsearchTranslations: DocSearchTranslationProps = {
+ 	class StarlightDocSearch extends HTMLElement {
+ 		constructor() {
+ 			super();
++			const isApple = /Mac|iPhone|iPod|iPad/.test(navigator.platform);
++			const shortcut = isApple ? '⌘K' : 'Ctrl+K';
++
++			this.style.setProperty('--docsearch-shortcut', `'${shortcut}'`);
++
+ 			window.addEventListener('DOMContentLoaded', async () => {
+ 				const { default: docsearch } = await import('@docsearch/js');
+ 				const options = { ...config, container: 'sl-doc-search' };

src/components/overrides/Sidebar.astro

@@ -255,6 +255,30 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
 				}
 			}
 		});
+
+		document.addEventListener(
+			"keydown",
+			(keyboardEvent) => {
+				const target = keyboardEvent.target;
+
+				const isInput =
+					target instanceof EventTarget &&
+					(("tagName" in target &&
+						(target.tagName === "INPUT" ||
+							target.tagName === "TEXTAREA" ||
+							target.tagName === "SELECT")) ||
+						("isContentEditable" in target && target.isContentEditable));
+
+				if (keyboardEvent.key === "/" && !isInput) {
+					keyboardEvent.preventDefault();
+					keyboardEvent.stopPropagation();
+					searchInput.focus();
+				}
+			},
+			{
+				capture: true,
+			},
+		);
 	}
 
 	// Initialize when DOM is loaded