WIP download

templates/download.html

@@ -41,15 +41,13 @@ Downloads | {{ config.title }}
 
                     <div class="flex flex-row space-x-6">
                         <!-- choose distribution method -->
-                        <div class="border-r pr-5 border-gray-400">
+                        <div id="install-choice" class="border-r pr-5 border-gray-400">
-                            <button class="block bg-gradient-to-tl from-aerogramme-blue via-blue-500 to-blue-300 bg-size-200 bg-pos-0 hover:bg-pos-100 rounded p-4 mt-4 text-sm mb-1 uppercase text-white w-full text-left transition-all duration-200">Docker</button>
+                            <button id="selected-btn" class="block bg-gradient-to-tl from-aerogramme-blue via-blue-500 to-blue-300 bg-size-200 bg-pos-0 hover:bg-pos-100 rounded p-4 mt-4 text-sm mb-1 uppercase text-white w-full text-left transition-all duration-200 hidden">Selected</button>
-                            <button class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Binaries</button>
+                            <button id="alternative-btn" class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200 hidden">Alternative</button>
-                            <button class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Distribution</button>
-                            <button class="block p-4 mt-4 text-sm mb-1 uppercase text-gray-600 w-full text-left hover:bg-pos-100 rounded hover:text-white hover:bg-gradient-to-tl from-aerogramme-blue to-blue-500 transition-all duration-200">Sources</button>
                         </div>
 
                         <!-- docker page -->
-                        <div id="docker" style="display: none">
+                        <div id="docker" class="block">
                             <div class="block mt-4">
                                 <label>Mirror: </label>
                                     <select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
@@ -66,7 +64,7 @@ Downloads | {{ config.title }}
                         </div>
 
                         <!-- binaries page -->
-                        <div id="static" style="display: none">
+                        <div id="static" class="hidden">
                             <div class="mt-4 flex flex-row space-x-6 items-center">
                                 <div class="block">
                                     OS: linux
@@ -93,12 +91,12 @@ chmod +x aerogramme</pre>
                         </div>
 
                         <!-- distribution -->
-                        <div id="distribution" style="display:none">
+                        <div id="distribution" class="hidden">
                             <p class="mt-4 italic">There is no known third party packaging for Aerogramme. If you made one, please notify us.</p>
                         </div>
 
                         <!-- sources -->
-                        <div id="sources">
+                        <div id="sources" class="hidden">
                             <div class="block mt-4 p-5 bg-black text-gray-100">
                                 <pre class="block">git clone https://git.deuxfleurs.fr/Deuxfleurs/aerogramme.git
 cd aerogramme
@@ -132,5 +130,64 @@ cargo build --release
 
 {% block custom_js %}
 <script>
+const reader = blob => {
+  const tmp = new FileReader();
+  return new Promise((resolve, reject) => {
+    tmp.onerror = () => {
+      tmp.abort()
+      reject(new DOMException("Problem parsing blob"))
+    }
+    tmp.onload = () => {
+      resolve(tmp.result)
+    }
+    tmp.readAsText(blob)
+  })
+}
+
+const albatros_tags = async () => {
+  const res = await fetch('https://registry.deuxfleurs.org/v2/aerogramme/tags/list')
+  const blob = await res.blob()
+  const txt = await reader(blob)
+  const tags = JSON.parse(txt)
+  return tags
+}
+
+const prod_semver = /^v?[0-9]+\.[0-9]+\.[0-9]+$/;
+const testing_semver = /^v?[0-9]+\.[0-9]+\.[0-9]+-.*$/;
+
+const find_cat = t => {
+  if (t.match(prod_semver)) return 'production';
+  if (t.match(testing_semver)) return 'testing';
+  return 'nightly'
+};
+
+const categorize = tags => tags.reduce((acc, t) => {
+  acc[find_cat(t)].push(t)
+  return acc
+}, {'production': [], 'testing': [], 'nightly': []});
+
+// Manage tabs
+const tabs = ["docker", "static", "distribution", "sources" ];
+const active_btn = document.getElementById("selected-btn");
+const alternative_btn = document.getElementById("alternative-btn");
+const menu = document.getElementById("install-choice");
+document.querySelectorAll("#install-choice > button").forEach(e => {
+    e.onclick = () => {
+        selected_tab = e.id
+    }
+});
+
+const setActiveTab = selected => {
+    tabs.forEach(t => {
+        document.getElementById(t).classList.add("hidden")
+
+    })
+}
+
+(async () => {
+    const manifest = await albatros_tags()
+    console.log(categorize(manifest.tags))
+})()
+
 </script>
 {% endblock %}