From b0b51a818a0d070342cbe2214781506f4191d9ec Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Tue, 21 Nov 2023 10:16:21 -0800
Subject: [PATCH] docs: "/" or "CMD+K" should focus search bar (#1852)

---
 docs/src/pages/_layout.svelte | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 5273c072..2ac02cf2 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -1,3 +1,8 @@
+<script context="module">
+  // Pressing these keys will focus the search bar.
+  const FOCUS_KEYS = new Set(["/", "Metak"]);
+</script>
+
 <script>
   import {
     isActive,
@@ -42,6 +47,7 @@
   const deprecated = [];
   const new_components = [];
 
+  let keys = "";
   let value = "";
   let active = false;
   $: results = miniSearch.search(value).slice(0, 10);
@@ -64,6 +70,29 @@
 <!-- routify:options bundle=true -->
 <svelte:window bind:innerWidth />
 
+<svelte:body
+  on:keydown="{(e) => {
+    keys += e.key;
+  }}"
+  on:keyup="{(e) => {
+    if (active) return;
+
+    if (FOCUS_KEYS.has(keys)) {
+      if (
+        document.activeElement instanceof HTMLInputElement ||
+        document.activeElement instanceof HTMLTextAreaElement
+      ) {
+        // Exit early if an inputtable element is already focused.
+        return;
+      }
+
+      e.preventDefault();
+      active = true;
+    }
+
+    keys = '';
+  }}" />
+
 <Theme persist bind:theme="{$theme}">
   <Header
     aria-label="Navigation"