releases: Generate Information at Build Time

Instead of requiring JavaScript to dynamically fetch release metadata,
generate at build time of the website, and only use JavaScript to change
the data if it does not match what is served by files.radicle.dev.
This allows users to obtain information about releases and download URLs
without having JavaScript enabled.
This commit is contained in:
Lorenz Leutgeb
2026-05-02 19:02:16 +02:00
parent 503de601c4
commit 774a5b48cd
10 changed files with 100 additions and 164 deletions
+10 -32
View File
@@ -6,61 +6,39 @@
width: 100%;
overflow: hidden;
}
.loading .release-info {
display: none;
}
.loading .release-loader {
display: inline-block;
}
.release-loader {
display: none;
border: 2px solid var(--color-border-hint);
border-top: 2px solid var(--color-border-default);
border-right: 2px solid var(--color-border-default);
border-radius: 50%;
height: 1rem;
width: 1rem;
animation: spin 1s linear infinite;
}
#release-timestamp, #release-commit {
color: var(--color-fg-dim);
}
.hidden {
display: none !important;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<blockquote id="release" class="hidden loading">
<blockquote id="release">
💾
<span class="release-loader"></span>
<span>
<a href="https://files.radicle.dev/releases/latest" id="release-info"></a>
<a href="https://files.radicle.dev/releases/latest" id="release-info">Radicle {{ site.data.releases.radicle.version }}</a>
<span class="desktop dim">&middot; </span>
<span id="release-commit" class="desktop"></span>
<span id="release-timestamp" class="desktop"></span>
<span id="release-commit" class="desktop">{{ site.data.releases.radicle.commit }}</span>
<span id="release-timestamp" class="desktop">{{ site.data.releases.radicle.timestamp | date_to_xmlschema }}</span>
</span>
</blockquote>
<script>
const release = document.getElementById('release');
release.classList.remove("hidden");
fetch("https://files.radicle.dev/releases/latest/radicle.json")
.then(res => res.json())
.then(data => {
if (data.timestamp === "{{ site.data.releases.radicle.timestamp }}") {
console.info("Release data is up to date.")
return;
}
const version = data.version;
const commit = data.commit;
const release = document.getElementById("release");
const releaseInfo = document.getElementById("release-info");
release.classList.remove("loading");
releaseInfo.innerText = `Radicle ${version}`;
document.getElementById("release-commit").innerText = commit;
document.getElementById("release-timestamp").innerText = `(${new Date(data.timestamp * 1000).toUTCString()})`;
document.getElementById("release-timestamp").innerText = `(${new Date(data.timestamp * 1000).toISOString()})`;
});
</script>