Deuxfleurs/aerogramme.deuxfleurs.fr
17
0
Fork 0
Code Pull requests Activity

final download ui

Browse source
This commit is contained in:
Quentin 2023-06-01 16:28:46 +02:00
parent d07d58d3c2
commit 024185a564
Signed by: quentin
GPG key ID: E9602264D639FF68
1 changed files with 113 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
templates/download.html
View file

@ -13,7 +13,18 @@ Downloads | {{ config.title }}
</div> </div>
</div> </div>
<div class="mx-auto max-w-7xl px-4"> <div class="mx-auto max-w-7xl px-4">
<div id="releases-container" class="py-20 space-y-20"> <div id="loading-container" class="py-20 space-y-20 ">
<div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm text-center">
<div role="status">
<svg aria-hidden="true" class="inline w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
</svg>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div id="releases-container" class="py-20 space-y-20 hidden">
<div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm"> <div class="mt-8 bg-gray-50 border border-gray-200 p-4 rounded shadow-sm">
<!-- choose version --> <!-- choose version -->
<div class="flex flex-row space-x-6 py-4 border-gray-400 border-b items-center"> <div class="flex flex-row space-x-6 py-4 border-gray-400 border-b items-center">
@ -22,15 +33,15 @@ Downloads | {{ config.title }}
</div> </div>
<div> <div>
<label>Channel: </label> <label>Channel: </label>
<select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer"> <select id="select-channel" onchange="updateVersionList()" class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
<option value="production">Production</option> <option value="production" selected>Production</option>
<option value="testing">Testing</option> <option value="testing">Testing</option>
<option value="nightly">Nightly</option> <option value="nightly">Nightly</option>
</select> </select>
</div> </div>
<div> <div>
<label>Version: </label> <label>Version: </label>
<select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer"> <select id="select-version" onchange="updateVersionBody()" class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
<option value="0.0.1">0.0.1</option> <option value="0.0.1">0.0.1</option>
</select> </select>
</div> </div>
@ -41,23 +52,29 @@ Downloads | {{ config.title }}
<div class="flex flex-row space-x-6"> <div class="flex flex-row space-x-6">
<!-- choose distribution method --> <!-- choose distribution method -->
<div id="install-choice" class="border-r pr-5 border-gray-400"> <div id="install-choice" class="border-r pr-5 border-gray-400 shrink">
<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 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 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 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 id="docker-btn" onclick="dlTab('docker')" 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">Docker</button>
<button id="static-btn" onclick="dlTab('static')" 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">Binary</button>
<button id="distribution-btn" onclick="dlTab('distribution')" 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">Distributions</button>
<button id="sources-btn" onclick="dlTab('sources')" 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> </div>
<div id="install-instructions" class="grow overflow-auto">
<!-- docker page --> <!-- docker page -->
<div id="docker" class="block"> <div id="docker" class="hidden">
<div class="block mt-4"> <div class="block mt-4">
<label>Mirror: </label> <label>Mirror: </label>
<select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer"> <select id="select-registry" onchange="updateRegistry()" class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
<option value="df">registry.deuxfleurs.org</option> <option value="registry.deuxfleurs.org" selected>registry.deuxfleurs.org</option>
<option value="docker">docker.io</option> <option value="docker.io">docker.io</option>
</select> </select>
</div> </div>
<div class="block mt-4 p-5 bg-black text-gray-100"> <div class="block mt-4 p-5 bg-black text-gray-100">
<pre class="block">docker pull registry.deuxfleurs.org/aerogramme:0.0.1</pre> <pre class="block">docker pull <span class="cnt-registry">REG</span>/<span class="cnt-docker-name">DOCK_NAME</span>:<span class="cnt-version">VERSION</span></pre>
</div> </div>
<p class="mt-4">Aerogramme is available as a minimalist docker image (~20MB) that contains only the static binary. It means that you can't run <code>bash</code> or any other shell in the container.</p> <p class="mt-4">Aerogramme is available as a minimalist docker image (~20MB) that contains only the static binary. It means that you can't run <code>bash</code> or any other shell in the container.</p>
<p class="mt-4">Network resources are finite. Please avoid wasting them by re-downloading the image each time you start a container. Keep a local cache or mirror the image on your private registry. In case of abuse, we may put some agressive rate limiting based on IP prefixes.</p> <p class="mt-4">Network resources are finite. Please avoid wasting them by re-downloading the image each time you start a container. Keep a local cache or mirror the image on your private registry. In case of abuse, we may put some agressive rate limiting based on IP prefixes.</p>
@ -71,10 +88,10 @@ Downloads | {{ config.title }}
</div> </div>
<div class="block"> <div class="block">
<label>Architecture: </label> <label>Architecture: </label>
<select class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer"> <select id="select-arch" onchange="updateArch()" class="inline-block rounded font-extrabold p-3 bg-transparent hover:bg-blue-300 transition-all duration-300 cursor-pointer">
<option value="amd64">amd64 (x86_64)</option> <option value="amd64" selected>amd64 (x86_64)</option>
<option value="aarch64">arm64 (aarch64)</option> <option value="arm64">arm64 (aarch64)</option>
<option value="armv6l">arm (armv6l)</option> <option value="arm">arm (armv6l)</option>
</select> </select>
</div> </div>
<div class="block"> <div class="block">
@ -82,8 +99,8 @@ Downloads | {{ config.title }}
</div> </div>
</div> </div>
<div class="block mt-4 p-5 bg-black text-gray-100"> <div class="block mt-4 p-5 bg-black text-gray-100 overflow-auto">
<pre class="block">curl https://download.deuxfleurs.org/df-dist-v1/aerogramme/0.0.1/linux/amd64/aerogramme -o aerogramme <pre class="block">curl https://download.deuxfleurs.org/df-dist-v1/aerogramme/<span class="cnt-version">VERSION</span>/linux/<span class="cnt-arch">ARCH</span>/aerogramme -o aerogramme
chmod +x aerogramme</pre> chmod +x aerogramme</pre>
</div> </div>
<p class="mt-4">Aerogramme is distributed as a statically compiled binary (~20MB).</p> <p class="mt-4">Aerogramme is distributed as a statically compiled binary (~20MB).</p>
@ -100,16 +117,17 @@ chmod +x aerogramme</pre>
<div class="block mt-4 p-5 bg-black text-gray-100"> <div class="block mt-4 p-5 bg-black text-gray-100">
<pre class="block">git clone https://git.deuxfleurs.fr/Deuxfleurs/aerogramme.git <pre class="block">git clone https://git.deuxfleurs.fr/Deuxfleurs/aerogramme.git
cd aerogramme cd aerogramme
git checkout 0.0.1 git checkout <span class="cnt-version">VERSION</span>
cargo build --release cargo build --release
./target/release/aerogramme</pre> ./target/release/aerogramme</pre>
</div> </div>
<div class="mt-4"> <div class="mt-4">
<a class="text-aerogramme-blue underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme">Browse the repository ↗</a> <a class="text-aerogramme-blue underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme">Browse the repository ↗</a>
- -
<a class="text-aerogramme-blue underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/0.0.1-ci.1.zip">Download a .zip archive</a> <a class="text-aerogramme-blue underline href-version" href="#" data-tplhref="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/[[VERSION]].zip">Download a .zip archive</a>
- -
<a class="text-aerogramme-blue underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/0.0.1-ci.1.tar.gz">Download a .tar.gz archive</a> <a class="text-aerogramme-blue underline href-version" href="#" data-tplhref="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme/archive/[[VERSION]].tar.gz">Download a .tar.gz archive</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -117,7 +135,7 @@ cargo build --release
</div> </div>
<noscript> <noscript>
<style type="text/css"> <style type="text/css">
#releases-container{display:none;} #loading-container{display:none;}
</style> </style>
<div id="js-disabled-msg" class="p-12" style="height:70vh"> <div id="js-disabled-msg" class="p-12" style="height:70vh">
Access the Aerogramme releases by clicking on the following link : Access the Aerogramme releases by clicking on the following link :
@ -166,27 +184,87 @@ const categorize = tags => tags.reduce((acc, t) => {
return acc return acc
}, {'production': [], 'testing': [], 'nightly': []}); }, {'production': [], 'testing': [], 'nightly': []});
// Global variables :@
let repo = null;
let activeDlTab = null;
// Manage tabs // Manage tabs
const tabs = ["docker", "static", "distribution", "sources" ]; const selectedStyle = document.getElementById("selected-btn").className.replace("hidden", "");
const active_btn = document.getElementById("selected-btn"); const alternativeStyle = document.getElementById("alternative-btn").className.replace("hidden", "");
const alternative_btn = document.getElementById("alternative-btn"); const dlTab = tid => {
const menu = document.getElementById("install-choice"); if (activeDlTab) {
document.querySelectorAll("#install-choice > button").forEach(e => { document.getElementById(activeDlTab).className = "hidden";
e.onclick = () => { document.getElementById(`${activeDlTab}-btn`).className = alternativeStyle;
selected_tab = e.id
} }
}); document.getElementById(tid).className = "block";
document.getElementById(`${tid}-btn`).className = selectedStyle;
const setActiveTab = selected => { activeDlTab = tid;
tabs.forEach(t => { };
document.getElementById(t).classList.add("hidden")
// Inject data in UI
const updateVersionList = () => {
const channel = document.getElementById("select-channel").value
const tags = repo[channel];
const options = tags.map(t => {
const o = document.createElement("option");
o.value = t;
o.text = t;
return o;
}) })
const selector = document.getElementById("select-version");
selector.replaceChildren(...options);
if (tags.length > 0) {
selector.value = tags[0];
} }
updateVersionBody();
}
const regToName = {
"registry.deuxfleurs.org": "aerogramme",
"docker.io": "dxflrs/aerogramme",
}
const updateVersionBody = () => {
const version = document.getElementById("select-version").value;
document.querySelectorAll(".cnt-version").forEach(span => {
span.textContent = version;
});
document.querySelectorAll(".href-version").forEach(a => {
a.href = a.dataset.tplhref.replace("[[VERSION]]", version);
});
}
const updateRegistry = () => {
const registry = document.getElementById("select-registry").value;
document.querySelectorAll(".cnt-registry").forEach(span => {
span.textContent = registry;
});
document.querySelectorAll(".cnt-docker-name").forEach(span => {
span.textContent = regToName[registry];
});
}
const updateArch = () => {
const arch = document.getElementById("select-arch").value;
document.querySelectorAll(".cnt-arch").forEach(span => {
span.textContent = arch;
});
}
(async () => { (async () => {
const manifest = await albatros_tags() const manifest = await albatros_tags()
console.log(categorize(manifest.tags)) repo = categorize(manifest.tags)
dlTab("docker");
updateVersionList();
updateRegistry();
updateArch();
document.getElementById("loading-container").classList.add("hidden");
document.getElementById("releases-container").classList.remove("hidden");
})() })()
</script> </script>