From afc56cc9877d08506e83c6568fe6ae8f2867d508 Mon Sep 17 00:00:00 2001
From: Andrew Leonard <16251412+ajyey@users.noreply.github.com>
Date: Fri, 31 May 2024 17:23:46 -0400
Subject: [PATCH] Feature: Dynamically sets the search shortcut key based on
 the user's platform (#2461)

This addresses issue #2437 by:
- Adding a new script that dynamically sets the search keyboard shortcut
by checking what platform the user is currently using
- Loading this script in `default.liquid`

<img width="1150" alt="SCR-20240529-cdfe"
src="https://github.com/alshedivat/al-folio/assets/16251412/7c4125fc-5028-422f-97d5-0df729e30fa7">
---
 _layouts/default.liquid   |  1 +
 assets/js/shortcut-key.js | 11 +++++++++++
 2 files changed, 12 insertions(+)
 create mode 100644 assets/js/shortcut-key.js

diff --git a/_layouts/default.liquid b/_layouts/default.liquid
index 3f4af10e524a..e519ec2d93ef 100644
--- a/_layouts/default.liquid
+++ b/_layouts/default.liquid
@@ -73,5 +73,6 @@
     {% include scripts/jekyll_tabs.liquid %}
     {% include scripts/back_to_top.liquid %}
     {% include scripts/search.liquid %}
+    <script src="{{ '/assets/js/shortcut-key.js' | relative_url }}"></script>
   </body>
 </html>
diff --git a/assets/js/shortcut-key.js b/assets/js/shortcut-key.js
new file mode 100644
index 000000000000..f8de525aac8e
--- /dev/null
+++ b/assets/js/shortcut-key.js
@@ -0,0 +1,11 @@
+// Check if the user is on a Mac and update the shortcut key for search accordingly
+document.onreadystatechange = () => {
+  if (document.readyState === "interactive") {
+    let isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+    let shortcutKeyElement = document.querySelector("#search-toggle .nav-link");
+    if (shortcutKeyElement && isMac) {
+      // use the unicode for command key
+      shortcutKeyElement.innerHTML = '&#x2318; k <i class="ti ti-search"></i>';
+    }
+  }
+};