From 857e35fdfca2af5edb7525c47ccf05a7ccf8e062 Mon Sep 17 00:00:00 2001
From: MoritzWeber0 <kontakt@moritz-weber.net>
Date: Wed, 7 May 2025 23:16:08 +0200
Subject: [PATCH] feat: Make search usable via keyboard (CTRL + K)

---
 i18n/de.yaml                |  3 +--
 i18n/en.yaml                |  3 +--
 layouts/partials/stage.html | 30 +++++++++++++++++++++++++++++-
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/i18n/de.yaml b/i18n/de.yaml
index 883f34bc..9cecb274 100644
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -3,8 +3,7 @@ country:
   one: Land
   many: Länder
   other: Länder
-search-placeholder: Gib ein Land oder Bahnunternehmen ein
-search-button: Suchen
+search-placeholder: Suche
 footer-love:
   text: Made with ♥️ in Frankfurt & Köln
   aria-label: Made with love in Frankfurt & Köln
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 4ad38ba0..b55bd308 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -3,8 +3,7 @@ country:
   one: country
   many: countries
   other: countries
-search-placeholder: Type in a country or train operator
-search-button: Search
+search-placeholder: Search
 footer-love:
   text: Made with ♥️ in Frankfurt & Cologne
   aria-label: Made with love in Frankfurt & Cologne
diff --git a/layouts/partials/stage.html b/layouts/partials/stage.html
index 924dc3e5..10c0f857 100644
--- a/layouts/partials/stage.html
+++ b/layouts/partials/stage.html
@@ -1,6 +1,34 @@
 <script>
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+  let placeholderText = '{{ T "search-placeholder" }}';
+
+  if (!isMobile) {
+    if (isMac) {
+      placeholderText += ' (⌘ + K)';
+    } else {
+      placeholderText += ' (CTRL + K)';
+    }
+  }
+
   window.addEventListener('DOMContentLoaded', (event) => {
-    new PagefindUI({ element: "#search", highlightParam: "highlight", showSubResults: true });
+    new PagefindUI({
+      element: "#search",
+      highlightParam: "highlight",
+      showSubResults: true,
+      translations: {
+        placeholder: placeholderText,
+      }
+    });
+  });
+  document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      const searchElement = document.querySelector('#search input');
+      if (searchElement) {
+        searchElement.focus();
+      }
+    }
   });
 </script>