Use ⌘ (KeyboardEvent.metaKey) with Pagefind search toggle on macOS (#647)

* Allow `⌘` to be used when searching

* Prevent default actions before search toggle

* Rename button title

* Fix prettier linter stuff

* Add an ID to the search button

* Check for Apple devices

* Swap order of `metaKey`/`ctrlKey` and `K`

Author: agriyakhetarpal

assets/js/search.js

@@ -2,9 +2,13 @@
 
 window.addEventListener("DOMContentLoaded", () => {
   let searchDialog = document.querySelector(".search-dialog");
+  let searchButton = document.getElementById("search-button");
 
   // Do nothing here if search is not enabled.
-  if (!searchDialog) return;
+  if (!searchDialog || !searchButton) return;
+
+  const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+  searchButton.title = `Search (${isMac ? "⌘" : "Ctrl"} + K)`;
 
   new PagefindUI({
     element: ".search-dialog",
@@ -45,7 +49,11 @@ window.addEventListener("DOMContentLoaded", () => {
   });
 
   window.addEventListener("keydown", (evt) => {
-    if (evt.key === "k" && evt.ctrlKey) {
+    if (
+      ((isMac && evt.metaKey) || (!isMac && evt.ctrlKey)) &&
+      evt.key === "k"
+    ) {
+      evt.preventDefault(); // prevents default browser behaviour
       toggleSearch();
     }
   });

layouts/partials/navbar.html

@@ -26,7 +26,7 @@
 
       <div class="navbar-end">
         {{- if .Site.Params.search }}
-        <button class="search-button" title="Search (Ctrl+k)">
+        <button id="search-button" class="search-button" title="Search">
           <i class="fa-solid fa-magnifying-glass fa-lg"></i>
         </button>
         {{- end }}