feat: Make search usable via keyboard (CTRL + K)

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

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

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>