site: add direct links to unstable builds

Links to build types and architectures are now included in the unstable
download section.

css/base.css

@@ -451,6 +451,11 @@ p.top {
     white-space: nowrap;
 }
 
+.dropdown-display.above {
+    top: auto;
+    bottom: 115%;
+}
+
 pre {
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */

site/base.css

@@ -11,3 +11,7 @@ body {
     background: #AA5CC3;
     background: linear-gradient(90deg, #AA5CC3 0%, #00A4DC 100%) !important;
 }
+
+.text-center {
+    text-align: center;
+}

site/index.html

@@ -94,7 +94,7 @@ sudo apt-get install jfa-go-tray
                 </div>
                 <p class="row col flex center supra">downloads</p>
                 <p class="row col flex center support">instructions can be found&nbsp<a target="_blank" href="https://github.com/hrfee/jfa-go#install">here</a></p>
-                <p class="row col flex center support">note: tray icon builds on linux require extra dependencies, see the github README for more info.</p>
+                <p class="row col flex center text-center support">note: tray icon builds should only be used on systems with a Desktop Interface, and require extra dependencies on linux, see the github README for more info.</p>
                 <div class="row col flex center">
                     <span class="button ~neutral !high mr-1 mt-1" id="download-stable">Stable</span>
                     <span class="button ~neutral mt-1 mr-1" id="download-unstable">Unstable</span>
@@ -112,7 +112,6 @@ sudo apt-get install jfa-go-tray
                 <div class="mt-1 unfocused" id="sect-unstable">
                     <p class="row center">These are built on every commit, so may include incomplete/broken features. Take care.</p>
                     <div class="row col flex center">
-                        <a class="button ~info mr-half mb-half lang-link" target="_blank" href="https://dl.jfa-go.com/view/hrfee/jfa-go">windows/mac/linux</a>
                         <a class="button ~info mr-half mb-half lang-link" id="download-docker-unstable">docker</a>
                         <a class="button ~info mr-half mb-half lang-link" id="download-deb-unstable">debian/ubuntu</a>
                         <a class="button ~info mr-half mb-half lang-link" target="_blank" href="https://aur.archlinux.org/packages/jfa-go-git">arch (aur git)</a>

site/ts/main.ts

@@ -1,5 +1,6 @@
 import { Modal } from "../../ts/modules/modal.js";
 import { whichAnimationEvent } from "../../ts/modules/common.js";
+import { loadBuilds } from "./repo.js";
 
 interface window extends Window {
     animationEvent: string;
@@ -18,7 +19,7 @@ const debUnstableButton = document.getElementById("download-deb-unstable") as HT
 debUnstableButton.onclick = debModal.toggle;
 
 const stableSect = document.getElementById("sect-stable");
-const unstableSect = document.getElementById("sect-unstable");
+export const unstableSect = document.getElementById("sect-unstable");
 
 const stableButton = document.getElementById("download-stable") as HTMLSpanElement;
 const unstableButton = document.getElementById("download-unstable") as HTMLSpanElement;
@@ -51,4 +52,4 @@ const dockerUnstableButton = document.getElementById("download-docker-unstable")
 dockerButton.onclick = dockerModal.toggle;
 dockerUnstableButton.onclick = dockerModal.toggle;
 
-
+loadBuilds();

site/ts/repo.ts

@@ -0,0 +1,57 @@
+import { _get, _post, _delete } from "../../ts/modules/common.js";
+import { unstableSect } from "./main.js";
+
+const urlBase = "https://builds.hrfee.pw/repo/hrfee/jfa-go/latest/file/";
+const categories = {
+    "Windows (Tray)": {
+        "x64": "Windows"
+    },
+    "Linux (Tray)": {
+        "x64": "TrayIcon_Linux_x86_64.zip"
+    },
+    "Linux": {
+        "x64": "Linux_x86_64.zip",
+        "ARM (32-bit)": "Linux_arm.zip",
+        "ARM (64-bit)": "Linux_arm64.zip"
+    },
+    "macOS": {
+        "x64": "macOS_x86_64",
+        "ARM": "macOS_arm64"
+    }
+};
+
+export const loadBuilds = () => {
+    for (let buildName in categories) {
+        if (Object.keys(categories[buildName]).length == 1) {
+            const button = document.createElement("a") as HTMLAnchorElement;
+            button.classList.add("button", "~info", "mr-half", "mb-half", "lang-link");
+            button.target = "_blank";
+            button.textContent = buildName.toLowerCase();
+            button.href = urlBase + categories[buildName][Object.keys(categories[buildName])[0]];
+            unstableSect.querySelector(".row.col.flex.center").appendChild(button);
+        } else {
+            const dropdown = document.createElement("span") as HTMLSpanElement;
+            dropdown.tabIndex = 0;
+            dropdown.classList.add("dropdown");
+            let innerHTML = `
+            <span class="button ~info mr-half mb-half lang-link">
+                ${buildName.toLowerCase()}
+                <span class="ml-half chev"></span>
+            </span>
+            <div class="dropdown-display above">
+                <div class="card ~info !low">
+            `;
+            for (let arch in categories[buildName]) {
+                innerHTML += `
+                <a href="${urlBase + categories[buildName][arch]}" target="_blank" class="button input ~neutral field mb-half lang-link">${arch}</a>
+                `;
+            }
+            innerHTML += `
+                </div>
+            </div>
+            `;
+            dropdown.innerHTML = innerHTML;
+            unstableSect.querySelector(".row.col.flex.center").appendChild(dropdown);
+        }
+    }
+};