From 9d992e4557cb6808c5dc6acc7f72f33706ac7893 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Sun, 22 Dec 2024 23:21:35 -0500
Subject: [PATCH] Add Shortcut "/" for search, don't auto focus

---
 src/components/Search.astro | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/Search.astro b/src/components/Search.astro
index 3475e89..54232ae 100644
--- a/src/components/Search.astro
+++ b/src/components/Search.astro
@@ -1,4 +1,6 @@
 ---
+import KeyboardControls from 'astro-keyboard-controls';
+
 export interface Props {
   readonly id?: string;
   readonly className?: string;
@@ -9,6 +11,8 @@ export interface Props {
 const { id, className, query, uiOptions = {} } = Astro.props;
 const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 ---
+<KeyboardControls selector=".pagefind-ui__search-input" key="/" />
+
 
 <button class="mobile-s" onclick="MobileCloseSearch()" id="search-close">Close</button>
 
@@ -32,6 +36,24 @@ function MobileCloseSearch() {
   data-ui-options={JSON.stringify(uiOptions)}
 >
 </div>
+<span id="key">/</span>
+<style lang="scss">
+#key {
+  display: block;
+  background: #222;
+  aspect-ratio: 1;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  margin-left: -42px;
+  pointer-events: none;
+  opacity: 0.5;
+}
+@media screen and (max-width: 775px) {
+ #key {display: none}
+}
+</style>
+
 <script>
   // @ts-ignore
   import { PagefindUI } from "@pagefind/default-ui";
@@ -65,8 +87,6 @@ function MobileCloseSearch() {
 
       const input = el.querySelector<HTMLInputElement>(`input[type="text"]`);
 
-      input?.focus();
-
       if (input) {
         input.value = query;
         input.dispatchEvent(new Event("input", { bubbles: true }));