Start page: Automatically detect OS for Download button

content/en/_index.md

@@ -4,7 +4,7 @@ subtitle: Gajim, a fully-featured XMPP chat client
 comments: false
 ---
 
-{{< start_block label="Download" >}}
+{{< start_block label_win="Download for Windows" label_mac="Install on MacOS" label_linux="Install on Linux" label_other="Other platforms" >}}
 
 {{< row >}}
 {{< feature_item icon="fa-project-diagram" header="Decentralized Messaging" text="Connect to your contacts using a server of your choice. Gajim works well with other [chat clients](https://xmpp.org/software/clients.html) and supports multiple accounts.">}}

themes/beautifulhugo/layouts/shortcodes/start_block.html

@@ -4,14 +4,24 @@
         <img src="/img/gajim-logo.png"/>
       </td>
       <td>
-        <div class="dropdown show">
-          <a class="btn btn-success dropdown-toggle" href="#" role="button" id="downloadDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ .Get "label" }}</a>
-          <div class="dropdown-menu" aria-labelledby="downloadDropdown">
-            <a class="dropdown-item" href="{{ .Site.LanguagePrefix }}/download#windows">Windows</a>
-            <a class="dropdown-item" href="{{ .Site.LanguagePrefix }}/download#macos">MacOS</a>
-            <a class="dropdown-item" href="{{ .Site.LanguagePrefix }}/download#linux">Linux</a>
-          </div>
+        <div>
+          <a id="download_btn" href="{{ .Site.Data.Gajim.WinSetup64 }}" class="btn btn-success" role="button"><i class="fas fa-download"></i>&nbsp;&nbsp;&nbsp;{{ .Get "label_win" }}</a>
         </div>
+          <p class="download-other">
+            <span>Gajim {{ .Site.Data.Gajim.StableVersion }} · </span>
+            <a href="{{ .Site.LanguagePrefix }}/download">{{ .Get "label_other" }}</a>
+          </p>
       </td>
     </tr>
 </table>
+<script>
+  var btn = document.getElementById("download_btn")
+  if (navigator.appVersion.indexOf("Mac") != -1) {
+      btn.href = "{{ .Site.LanguagePrefix }}/download#macos"
+      btn.innerHTML = '{{ .Get "label_mac" }}'
+  }
+  if (navigator.appVersion.indexOf("Linux") != -1) {
+      btn.href = "{{ .Site.LanguagePrefix }}/download#linux"
+      btn.innerHTML = '{{ .Get "label_linux" }}'
+  }
+</script>

themes/beautifulhugo/static/css/main.css

@@ -884,6 +884,10 @@ input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gs
 .startpage-download tr td img {
   float: right;
 }
+.download-other {
+  margin-top: 0.4rem;
+  font-size: 14px !important;
+}
 .d-flex {
   display: -webkit-box!important;
   display: flex!important;