Rework the download all button and related js

- Make it look the same as the other buttons
- Refactor so it is unhidden by the platform/os detection js
  instead of created from scratch.

Author: simonbaird

website/assets/css/custom.css

@@ -189,13 +189,6 @@ h3.button {
   stroke: white;
 }
 
-a.all-downloads {
-  display: block;
-  position: absolute;
-  color: var(--color-gray-30);
-  padding-left: 1rem;
-}
-
 p.big {
     font-size: 115%;
 }
@@ -517,29 +510,33 @@ p.big {
   line-height: var(--doc-line-height);
 }
 
-a.all-downloads{
-  position:relative!important;
-  padding:0;
-  margin: 0;
+.#all-downloads {
+  /* This is hidden to begin with, see 07-download.js */
+  display: none!important;
 }
 
-.hero-links{
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-columns: auto;
+.hero-links {
+  display: flex;
+  flex-direction: row;
   justify-content: center;
+  align-items: center;
+  gap: 1rem;
   text-align: center;
+  padding-bottom: 2.5em;
 }
 
 .hero-links h3.button {
   padding-top: 10px;
-  margin: 0 auto;
-  margin-top: 1em;
-  margin-bottom: 2em;
+  margin: 1em 0.5em;
 }
 
-.hero-links h3.button#download{
-  margin-bottom: 5px;
+.hero-links h3.button a {
+  white-space: nowrap;
+}
+
+.hero-links h3.button:hover {
+  transform: translateY(-1px);
+  background-color: var(--ec-icon-purple);
 }
 
 .hero h2 {

website/assets/js/07-download.js

@@ -1,22 +1,25 @@
 document.addEventListener('DOMContentLoaded', async () => {
     const download = document.querySelector('#download a');
+    const downloadAll = document.querySelector('#all-downloads a');
     if (!download) {
         return
     }
     try {
-        const response = await fetch('https://api.github.com/repos/conforma/cli/releases/tags/snapshot');
+        const response = await fetch('https://api.github.com/repos/conforma/cli/releases/latest');
         const snapshot = await response.json();
         const uap = new UAParser();
         const os = uap.getOS().name.replace('macOS', 'darwin').toLowerCase();
         const arch = uap.getCPU().architecture;
         const file = `ec_${os}_${arch}`;
         const asset = snapshot.assets.find(a => a.name === file);
         if (asset) {
-            download.parentNode.insertAdjacentHTML('afterend', `<a class="all-downloads" href=${download.href}>(All downloads)</a>`)
+            // Update the download button href to the user's specific platform/arch
             download.href = asset.browser_download_url;
             download.title = `${uap.getOS().name} / ${uap.getCPU().architecture}`;
+            // Unhide the download all button
+            downloadAll.style.display = 'inline-flex';
         }
-    } catch(e) {
+    } catch (e) {
         // Unable to fetch the releases leave the download link as is
         return;
     }

website/content/_index.md

@@ -1,7 +1,8 @@
 ---
 kind: home
 ---
+### [{{< icon "arrow-down-circle" >}} Download](https://github.com/conforma/cli/releases/latest){#download .button}
 
-### [{{< icon "arrow-down-circle" >}} Download](https://github.com/conforma/cli/releases/tag/snapshot){#download .button}
+### [{{< icon "arrow-down-circle" >}} All downloads](https://github.com/conforma/cli/releases/latest){#all-downloads .button}
 
 ### [{{< icon "book-open" >}} Getting Started](docs/user-guide/hitchhikers-guide.html){.button}