From 97c324cea5c238aa26b7f41c6bd513e1f1bee17a Mon Sep 17 00:00:00 2001
From: Christian Hoffmann <mail@hoffmann-christian.info>
Date: Sun, 17 Apr 2022 00:26:43 +0200
Subject: [PATCH] Home: Dynamically highlight download link for the user's
 platform

---
 _layouts/mainhomepage.html |  3 ++-
 assets/css/home.css        |  7 +++++++
 assets/js/os-style.js      | 14 ++++++++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/os-style.js

diff --git a/_layouts/mainhomepage.html b/_layouts/mainhomepage.html
index e1e16d930..57893df95 100644
--- a/_layouts/mainhomepage.html
+++ b/_layouts/mainhomepage.html
@@ -45,7 +45,7 @@ <h1>Jamulus</h1>
           <a href="wiki/Getting-Started" id="get_started_btn_top">{{ page.mTGetStartedNow }}</a>
         </div>
         <div class="fx-col-100-xs" id="quick_dl_container">
-          {{ page.mTDownloadNow }} <a href="{{ site.download_root_link }}{{ site.download_file_names.windows }}" target="_blank" rel="noreferrer">Windows</a>, <a href="{{ site.download_root_link }}{{ site.download_file_names.mac }}" target="_blank" rel="noreferrer">Mac</a>, <a href="{{ site.download_root_link }}{{ site.download_file_names.deb-gui }}" target="_blank" rel="noreferrer">Debian/Ubuntu</a> &amp; <a href="{{ site.download_overview_link }}" target="_blank" rel="noreferrer">{{ page.mTOtherPlatforms }}</a>.
+          {{ page.mTDownloadNow }} <a href="{{ site.download_root_link }}{{ site.download_file_names.windows }}" target="_blank" rel="noreferrer" class="os-win">Windows</a>, <a href="{{ site.download_root_link }}{{ site.download_file_names.mac }}" target="_blank" rel="noreferrer" class="os-mac">Mac</a>, <a href="{{ site.download_root_link }}{{ site.download_file_names.deb-gui }}" target="_blank" rel="noreferrer" class="os-deb">Debian/Ubuntu</a> &amp; <a href="{{ site.download_overview_link }}" target="_blank" rel="noreferrer" class="os-other">{{ page.mTOtherPlatforms }}</a>.
         </div>
       </div>
     </div>
@@ -61,6 +61,7 @@ <h1>Jamulus</h1>
     </div>
     {% include footer.html %}
   </div>
+  <script src="/assets/js/os-style.js"></script>
 </body>
 
 </html>
diff --git a/assets/css/home.css b/assets/css/home.css
index 98c6ca51d..0170fa864 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -56,6 +56,13 @@ header {
   text-decoration: underline;
 }
 
+body.is-os-deb #quick_dl_container a.os-deb,
+body.is-os-mac #quick_dl_container a.os-mac,
+body.is-os-win #quick_dl_container a.os-win,
+body.is-os-other #quick_dl_container a.os-other {
+  font-weight: bold;
+}
+
 #bannercontainer {
   margin-top: 10px;
 }
diff --git a/assets/js/os-style.js b/assets/js/os-style.js
new file mode 100644
index 000000000..0586ab12d
--- /dev/null
+++ b/assets/js/os-style.js
@@ -0,0 +1,14 @@
+function getOperatingSystem() {
+  if (navigator.userAgent.indexOf('Win') != -1) return 'win';
+  if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) return 'other';
+  if (navigator.userAgent.indexOf('Mac') != -1) return 'mac';
+  // If we detect Linux, but neither Ubuntu nor Debian (the latter usually
+  // doesn't expose itself), we use a generic class to avoid falling
+  // back to "other":
+  if (navigator.userAgent.indexOf('Debian') != -1) return 'deb';
+  if (navigator.userAgent.indexOf('Ubuntu') != -1) return 'deb';
+  if (navigator.userAgent.indexOf('Android') != -1) return 'other';
+  if (navigator.userAgent.indexOf('Linux') != -1) return 'linux-generic';
+  return 'other';
+}
+document.body.className += ' is-os-' + getOperatingSystem();