1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
---
title: "Contributors"
date: "2025-01-01"
summary: "List of Typo's contributors"
description: "List of Typo's contributors"
toc: false
readTime: false
autonumber: false
math: false
showTags: false
hidePagination: true
hideBackToTop: false
---
<div id="loading-message">fetching GitHub data, hang tight!</div>
<div id="content" style="display: none;">
Typo is currently on release <a href="https://github.com/tomfran/typo/releases/latest"><span id="release-number">...</span></a>, with <span id="star-count">over 300</span> stars on Github, and <span id="contributors-count">over 20</span> contributors:
<ul id="contributors-list" style="list-style-type: none; padding: 0; margin-top: 2rem"></ul>
</div>
<script>
async function fetchGitHubData() {
const cacheKey = "githubData";
const cacheExpiryKey = "githubDataExpiry";
const cacheExpiryTime = 3600 * 1000; // 1 hour in milliseconds
const cachedData = localStorage.getItem(cacheKey);
const cachedExpiry = localStorage.getItem(cacheExpiryKey);
const now = new Date().getTime();
if (cachedData && cachedExpiry && now < cachedExpiry) {
const { starCount, contributors, latestRelease } = JSON.parse(cachedData);
updateUI(starCount, contributors, latestRelease);
return;
}
try {
const [repoRes, releaseRes, contributorsRes] = await Promise.all([
fetch("https://api.github.com/repos/tomfran/typo"),
fetch("https://api.github.com/repos/tomfran/typo/releases/latest"),
fetch("https://api.github.com/repos/tomfran/typo/contributors")
]);
const [repoData, releaseData, contributors] = await Promise.all([
repoRes.json(),
releaseRes.json(),
contributorsRes.json()
]);
const starCount = repoData.stargazers_count;
const latestRelease = releaseData.name;
localStorage.setItem(cacheKey, JSON.stringify({ starCount, contributors, latestRelease }));
localStorage.setItem(cacheExpiryKey, now + cacheExpiryTime);
console.log(releaseData)
updateUI(starCount, contributors, latestRelease);
} catch (error) {
console.error("Error fetching GitHub data:", error);
document.getElementById("star-count").textContent = "Failed to fetch star count.";
document.getElementById("contributors-count").textContent = "Failed to fetch contributors.";
document.getElementById("release-number").textContent = "Failed to fetch release.";
}
}
function updateUI(starCount, contributors, latestRelease) {
document.getElementById("loading-message").style.display = "none";
document.getElementById("content").style.display = "block";
document.getElementById("release-number").innerHTML = `${latestRelease}`;
document.getElementById("star-count").textContent = `${starCount}`;
document.getElementById("contributors-count").textContent = `${contributors.length}`;
const contributorsList = document.getElementById("contributors-list");
contributorsList.innerHTML = "";
contributors.forEach(contributor => {
const listItem = document.createElement("li");
listItem.style.marginBottom = ".5rem";
listItem.innerHTML = `
<span style="display: flex; align-items: bottom;">
<img src="${contributor.avatar_url}" alt="${contributor.login}" width="30" height="30" style="margin-right: 10px; border-radius: 50%;">
<a href="${contributor.html_url}">${contributor.login}</a> - ${contributor.contributions}
</span>
`;
contributorsList.appendChild(listItem);
});
}
fetchGitHubData();
</script>
|
