ENHANCEMENT Add a bookmarking banner with keyboard shortcut

[therohitdas]

Find a unique way to ask people to bookmark the site.

CTRL+D: Windows + Linux
CMD+D: MacOS
Star Icon: All other devices

Example Code using Tailwind and DaisyUI

        <div class="rounded-btn glass px-2 py-2 block text-xs mb-4 max-w-fit min-h-4 mx-auto">
          <span class="macos hidden">
            <kbd class="kbd">cmd</kbd>+<kbd class="kbd">d</kbd>
          </span>
          <span class="window hidden">
            <kbd class="kbd">ctrl</kbd>+<kbd class="kbd">d</kbd>
          </span>
          <span class="default hidden"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline fill-current"
              viewBox="0 0 256 256">
              <path
                d="M184.13,147.7a8.08,8.08,0,0,0-2.54,7.89l13.52,58.54a8,8,0,0,1-11.89,8.69l-51.1-31a7.93,7.93,0,0,0-8.24,0l-51.1,31a8,8,0,0,1-11.89-8.69l13.52-58.54a8.08,8.08,0,0,0-2.54-7.89L26.76,108.35A8,8,0,0,1,31.3,94.28l59.46-5.14a8,8,0,0,0,6.67-4.88L120.66,28.9a8,8,0,0,1,14.68,0l23.23,55.36a8,8,0,0,0,6.67,4.88l59.46,5.14a8,8,0,0,1,4.54,14.07Z"
                opacity="0.2"></path>
              <path
                d="M239.2,97.29a16,16,0,0,0-13.81-11L166,81.17,142.72,25.81h0a15.95,15.95,0,0,0-29.44,0L90.07,81.17,30.61,86.32a16,16,0,0,0-9.11,28.06L66.61,153.8,53.09,212.34a16,16,0,0,0,23.84,17.34l51-31,51.11,31a16,16,0,0,0,23.84-17.34l-13.51-58.6,45.1-39.36A16,16,0,0,0,239.2,97.29Zm-15.22,5-45.1,39.36a16,16,0,0,0-5.08,15.71L187.35,216v0l-51.07-31a15.9,15.9,0,0,0-16.54,0l-51,31h0L82.2,157.4a16,16,0,0,0-5.08-15.71L32,102.35a.37.37,0,0,1,0-.09l59.44-5.14a16,16,0,0,0,13.35-9.75L128,32.08l23.2,55.29a16,16,0,0,0,13.35,9.75L224,102.26S224,102.32,224,102.33Z">
              </path>
            </svg></span>&nbsp;Bookmark us!
        </div>

Use JS to display appropriate shortcut based on browser.

  // Set Bookmark Button
  try {
    var osName = "Unknown";
    if (window.navigator.userAgent.indexOf("Windows NT 10.0") != -1) osName = "Windows";
    if (window.navigator.userAgent.indexOf("Mac") != -1) osName = "MacOS";
    if (window.navigator.userAgent.indexOf("Linux") != -1) osName = "Linux";

    var macosSpans = document.querySelectorAll('.macos');
    var windowsSpans = document.querySelectorAll('.window');
    var defaultSpans = document.querySelectorAll('.default');

    if (osName === 'MacOS') {
      macosSpans.forEach(span => {
        span.classList.remove('hidden');
        span.classList.add('inline');
      });
    } else if (osName === 'Windows') {
      windowsSpans.forEach(span => {
        span.classList.remove('hidden');
        span.classList.add('inline');
      });
    } else {
      defaultSpans.forEach(span => {
        span.classList.remove('hidden');
        span.classList.add('inline');
      });
    }
  } catch (error) {
    console.error('An error occurred:', error);
    try {
      var defaultSpans = document.querySelectorAll('.default');
      if (defaultSpans) {
        defaultSpans.forEach(span => {
          span.classList.remove('hidden');
          span.classList.add('inline');
        });
      }
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }