aerogramme.deuxfleurs.fr/templates/download.html

{% extends 'base.html' %}

{% block title %}
Downloads | {{ config.title }}
{% endblock %}

{% block content %}
  <section id="download-section" class="section">
    <div class="relative w-full py-8 flex flex-col items-center justify-center bg-gray-50 shadow-sm">
        <h1 class="text-aerogramme-blue font-bold text-2xl text-center">Download Aerogramme</h1>
        <div class="absolute -bottom-8 left-1/2 transform -translate-x-6 w-16 overflow-hidden inline-block">
            <div class="h-8 w-8 bg-gradient-to-bl from-gray-50 via-gray-50 to-gray-100 -rotate-45 transform origin-top-left shadow"></div>
        </div>
    </div>
    <div class="mx-auto max-w-7xl px-4">
        <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">
                    <!-- choose version -->
                    <div class="flex flex-row space-x-6 py-4 border-gray-400 border-b items-center">
                        <div>
                            <img style="height: 48px" src="/logo/aerogramme-blue-sq.svg"/>
                        </div>
                        <div>
                        <label>Channel: </label>
                        <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" selected>Production</option>
                            <option value="testing">Testing</option>
                            <option value="nightly">Nightly</option>
                        </select>
                        </div>
                        <div>
                        <label>Version: </label>
                        <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>
                        </select>
                        </div>
                    </div>

                    <div class="flex flex-row space-x-6">
                        <!-- choose distribution method -->
                        <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="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 id="install-instructions" class="grow overflow-auto">
                        <!-- docker page -->
                        <div id="docker" class="hidden">
                            <div class="block mt-4">
                                <label>Mirror: </label>
                                    <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="registry.deuxfleurs.org" selected>registry.deuxfleurs.org</option>
                                        <option value="docker.io">docker.io</option>
                                    </select>
                            </div>

                            <div class="block mt-4 p-5 bg-black text-gray-100">
				<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>
                            <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>
                        </div>

                        <!-- binaries page -->
                        <div id="static" class="hidden">
                            <div class="mt-4 flex flex-row space-x-6 items-center">
                                <div class="block">
                                    OS: linux
                                </div>
                                <div class="block">
                                    <label>Architecture: </label>
                                        <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" selected>amd64 (x86_64)</option>
                                            <option value="arm64">arm64 (aarch64)</option>
                                            <option value="arm">arm (armv6l)</option>
                                        </select>
                                </div>
                                <div class="block">
                                    Mirror: download.deuxfleurs.org
                                </div>
                            </div>

                            <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/<span class="cnt-version">VERSION</span>/linux/<span class="cnt-arch">ARCH</span>/aerogramme -o aerogramme
chmod +x aerogramme</pre>
                            </div>
                            <p class="mt-4">Aerogramme is distributed as a statically compiled binary (~20MB).</p>
                            <p class="mt-4">Network resources are finite. Please avoid wasting them by re-downloading the binary too often. Keep a local cache or mirror the binary on your infrastructure. In case of abuse, we may put some agressive rate limiting based on IP prefixes.</p>
                        </div>

                        <!-- distribution -->
                        <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" 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
git checkout <span class="cnt-version">VERSION</span>
cargo build --release
./target/release/aerogramme</pre>
                            </div>
                            <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-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-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>
        <noscript>
            <style type="text/css">
                #loading-container{display:none;}
            </style>
            <div id="js-disabled-msg" class="p-12" style="height:70vh">
                Access the Aerogramme releases by clicking on the following link :
                <a class="font-bold text-aerogramme-blue hover:underline" href="https://git.deuxfleurs.fr/Deuxfleurs/aerogramme.git">https://git.deuxfleurs.fr/Deuxfleurs/aerogramme.git</a>
            </div>
        </noscript>
    </div>
  </section>
{% endblock %}

{% 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': []});


// Global variables :@
let repo = null;
let activeDlTab = null;

// Manage tabs
const selectedStyle = document.getElementById("selected-btn").className.replace("hidden", "");
const alternativeStyle = document.getElementById("alternative-btn").className.replace("hidden", "");
const dlTab = tid => {
	if (activeDlTab) {
		document.getElementById(activeDlTab).className = "hidden";
		document.getElementById(`${activeDlTab}-btn`).className = alternativeStyle;
	}
	document.getElementById(tid).className = "block";
	document.getElementById(`${tid}-btn`).className = selectedStyle;
	activeDlTab = tid;
};

// 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 () => {
    const manifest = await albatros_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>
{% endblock %}