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

@@ -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>

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>';
+    }
+  }
+};