Skip to content

Commit 7a3c1c7

Browse files
McoreDMcoreD
committed
Refine XerahS downloads page to match main site style
1 parent 6a3e89f commit 7a3c1c7

2 files changed

Lines changed: 152 additions & 12 deletions

File tree

‎xerahs/downloads.html‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,36 @@ <h1>
1212
</div>
1313
</div>
1414

15-
<div class="container">
16-
<div class="row">
17-
<div class="col-lg-12">
18-
<h2>Latest Release</h2>
19-
<p>Download the latest version of XerahS from GitHub.</p>
20-
<div class="mt-4">
21-
<a class="btn xerahs-download btn-lg" role="button" href="https://github.com/ShareX/XerahS/releases/latest">
22-
Download XerahS<i class="fa-solid fa-download"></i>
23-
</a>
15+
<div class="container-downloads">
16+
<div class="container">
17+
<div class="downloads-repo-container input-group">
18+
<div class="input-group-prepend">
19+
<span class="input-group-text">Repo</span>
2420
</div>
25-
<div class="mt-3">
26-
<a href="https://github.com/ShareX/XerahS/releases">View all releases and changelogs on GitHub</a>
21+
<div class="feedback-icon">
22+
<i class="fa-solid fa-gear fa-spin"></i>
2723
</div>
24+
<input id="downloads-repo" type="text" class="form-control" />
25+
</div>
26+
<div class="total-downloads">
27+
<div class="total-downloads-label">Total downloads</div>
28+
<span class="downloads-badge"><i class="fa-solid fa-arrow-down"></i><span class="total-downloads-value"></span></span>
2829
</div>
30+
<table class="table table-downloads">
31+
<thead>
32+
<tr>
33+
<th class="downloads-release-name">Release name</th>
34+
<th>Release date</th>
35+
<th>Active days</th>
36+
<th>Download count</th>
37+
</tr>
38+
</thead>
39+
<tbody>
40+
</tbody>
41+
</table>
2942
</div>
3043
</div>
3144

3245
{% include common-js.html %}
33-
<script src="/xerahs/js/xerahs.main.js"></script>
46+
<script src="/js/sharex.common.js"></script>
47+
<script src="/xerahs/js/xerahs.downloads.js"></script>

‎xerahs/js/xerahs.downloads.js‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
$(document).ready(function() {
2+
let repo = GetParameterByName("repo");
3+
4+
if (!repo) {
5+
repo = "ShareX/XerahS";
6+
}
7+
8+
let repoInput = $("#downloads-repo");
9+
repoInput.val(repo);
10+
repoInput.keyup(function(e) {
11+
if (e.keyCode == 13) {
12+
repo = repoInput.val();
13+
GetReleases(repo);
14+
if (repo) {
15+
SetParameter("repo", repo);
16+
}
17+
else {
18+
ClearParameters();
19+
}
20+
}
21+
});
22+
23+
GetReleases(repo);
24+
});
25+
26+
async function GetReleases(repo) {
27+
if (!repo) {
28+
repo = "ShareX/XerahS";
29+
}
30+
31+
$(".table-downloads tbody tr").remove();
32+
$(".total-downloads").hide();
33+
$(".total-downloads-value").text("");
34+
$(".table-downloads").hide();
35+
$(".fa-spin").show();
36+
37+
let perPage = 100;
38+
let page = 1;
39+
let totalDownloadCount = 0;
40+
let previousPublishedAt = new Date();
41+
let latest = true;
42+
43+
while (true) {
44+
let response = await fetch(`https://api.github.com/repos/${repo}/releases?per_page=${perPage}&page=${page}`);
45+
if (!response.ok) break;
46+
47+
let releases = await response.json();
48+
if (!Array.isArray(releases)) break;
49+
50+
if (releases.length > 0) {
51+
releases = releases.sort((a, b) => new Date(b.published_at) - new Date(a.published_at));
52+
53+
for (let i = 0; i < releases.length; i++) {
54+
let release = releases[i];
55+
if (release.assets.length === 0) {
56+
continue;
57+
}
58+
let assets = release.assets.sort((a, b) => b.download_count - a.download_count || a.name.localeCompare(b.name));
59+
let downloadCount = 0;
60+
let releaseInfo = `
61+
<div class="downloads-asset-info">
62+
<a href="${release.html_url}">
63+
<div>
64+
${EscapeHtml(release.name)}
65+
<span class="downloads-badge"><i class="fa-solid fa-tag"></i>${EscapeHtml(release.tag_name)}</span>
66+
</div>
67+
</a>
68+
</div>
69+
`;
70+
for (let i2 = 0; i2 < assets.length; i2++) {
71+
let asset = assets[i2];
72+
downloadCount += asset.download_count;
73+
releaseInfo += `
74+
<div class="downloads-asset-info">
75+
<a href="${asset.browser_download_url}">
76+
<div>
77+
${EscapeHtml(asset.name)}
78+
<span class="downloads-badge"><i class="fa-solid fa-file"></i>${FormatBytes(asset.size, 2)}</span>
79+
<span class="downloads-badge"><i class="fa-solid fa-arrow-down"></i>${asset.download_count.toLocaleString()}</span>
80+
</div>
81+
</a>
82+
</div>
83+
`;
84+
}
85+
totalDownloadCount += downloadCount;
86+
let publishedAt = new Date(release.published_at);
87+
let activeDays = (previousPublishedAt - publishedAt) / (1000 * 60 * 60 * 24);
88+
previousPublishedAt = publishedAt;
89+
90+
$(".table-downloads tbody").append(`
91+
<tr class="downloads-release-info collapsed" data-toggle="collapse" data-target="#collapse${release.id}">
92+
<td>
93+
<i class="fa fa-fw"></i>${EscapeHtml(release.name)}
94+
${latest ? '<span class="badge badge-success">Latest</span>' : ""}
95+
${release.prerelease ? '<span class="badge badge-warning">Pre-release</span>' : ""}
96+
</td>
97+
<td>${publishedAt.toLocaleDateString("en-CA")}</td>
98+
<td>${activeDays.toFixed(1)}</td>
99+
<td>${downloadCount.toLocaleString()}</td>
100+
</tr>
101+
<tr class="downloads-assets">
102+
<td colspan="100%">
103+
<div class="collapse" id="collapse${release.id}" data-parent=".table-downloads">
104+
<div class="downloads-assets-container">
105+
${releaseInfo}
106+
</div>
107+
</div>
108+
</td>
109+
</tr>
110+
`);
111+
112+
latest = false;
113+
}
114+
}
115+
116+
$(".total-downloads-value").text(totalDownloadCount.toLocaleString());
117+
$(".total-downloads").fadeIn();
118+
$(".table-downloads").fadeIn();
119+
120+
if (releases.length < perPage) break;
121+
122+
page++;
123+
}
124+
125+
$(".fa-spin").hide();
126+
}

0 commit comments

Comments
 (0)