add download link

layouts/index.html

@@ -2,14 +2,86 @@
   <main class="landing">
     <section class="hero maxw">
       <div class="hero-copy">
-        <h1>HEY PUT TEXT HERE!</h1>
-        <div class="download-button">
-          <a href="https://github.com/strimertul/strimertul/releases/latest">
-            Download
-          </a>
+        <h1>The streaming companion for power users</h1>
+        <p>
+          strimertül is a free and open source companion to your tech stack for
+          creating powerful overlays and power up the viewer interaction in your
+          Twitch streams!
+        </p>
+        <div id="download">
+          <noscript>
+            <a href="https://github.com/strimertul/strimertul/releases/latest">
+              Check out the latest version on GitHub
+            </a>
+          </noscript>
+          <div class="hidden" id="download-template">
+            <h2>
+              Latest release:
+              <a href="https://github.com/strimertul/strimertul/releases/latest"
+                ><span data-field="name"></span> (<time data-field="date"></time
+                >)</a
+              >
+            </h2>
+            <div class="download-list"><b>Downloads:</b></div>
+          </div>
         </div>
+        <script>
+          const platforms = [
+            {
+              filter: ".exe",
+              name: "Windows 64-bit",
+            },
+            {
+              filter: ".dmg",
+              name: "macOS Universal",
+            },
+            {
+              filter: "linux",
+              name: "Linux AMD64",
+            },
+          ];
+          (async function () {
+            const releaseblock = document.getElementById("download-template");
+            const latest = await (
+              await fetch(
+                "https://api.github.com/repos/strimertul/strimertul/releases/latest"
+              )
+            ).json();
+            // Poor's man angularjs
+            const data = {
+              ...latest,
+              date: new Date(latest.published_at).toLocaleDateString(),
+            };
+            releaseblock.querySelectorAll("*[data-field]").forEach((el) => {
+              const { field } = el.dataset;
+              if (field in data) {
+                el.innerHTML = data[field];
+              }
+            });
+            // Make those links
+            const downloadLinks = releaseblock.querySelector(".download-list");
+            latest.assets
+              .map((asset) => [
+                platforms.findIndex(({ filter }) =>
+                  asset.name.includes(filter)
+                ),
+                asset.browser_download_url,
+              ])
+              .filter(([index]) => index >= 0)
+              .sort(([a], [b]) => a - b)
+              .forEach(([index, url]) => {
+                const link = document.createElement("a");
+                link.classList.add("download-link");
+                link.href = url;
+                link.appendChild(
+                  document.createTextNode(platforms[index].name)
+                );
+                downloadLinks.appendChild(link);
+              });
+            releaseblock.classList.remove("hidden");
+          })();
+        </script>
       </div>
-      <div class="screenshots"></div>
     </section>
     <section class="features">
       <article>

layouts/partials/header.html

@@ -1,8 +1,7 @@
 <header class="site-nav">
-  <div class="appname">
-    <img src="/brand/icon-logo.svg" height="30" />
-    strimertül
-  </div>
+  <a href="/" class="appname">
+    <img src="/brand/icon-logo.svg" height="30" /> strimertül
+  </a>
   <nav>
     <a
       href="{{ relURL "" }}"

themes/strimertul/assets/scss/api.scss

@@ -7,6 +7,9 @@
     & > nav {
       display: none;
     }
+    & > div.doc {
+      padding: 1rem;
+    }
   }
   & > nav,
   & > .doc {
@@ -14,6 +17,7 @@
     padding: 1rem;
   }
   & > nav {
+    background-color: $gray2;
     padding: 0;
     grid-column: 1;
     ul {
@@ -44,6 +48,7 @@
   }
   & > .doc {
     grid-column: 2;
+    padding: 1rem 2rem;
   }
   .monotitle {
     font-family: "Iosevka Web", monospace;

themes/strimertul/assets/scss/landing.scss

@@ -41,4 +41,24 @@
       }
     }
   }
+
+  .download-list {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    a {
+      color: $teal12;
+      background-color: $teal8;
+      text-decoration: none;
+      display: block;
+      padding: 5px 8px;
+      border-radius: 5px;
+      transition: all 100ms;
+      &:hover {
+        color: white;
+        background-color: $teal9;
+      }
+    }
+  }
 }

themes/strimertul/assets/scss/layout.scss

@@ -72,8 +72,10 @@ p {
   }
 }
 
-.appname {
+a.appname {
   padding: 10px;
+  text-decoration: none;
+  color: white;
 }
 
 .container {
@@ -81,3 +83,7 @@ p {
   width: 100%;
   margin: 0 auto;
 }
+
+.hidden {
+  display: none;
+}