-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
130 lines (109 loc) · 5.52 KB
/
index.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en-CA">
<head>
<title>Canadian Municipal GitHub Rankings</title>
<meta name="description" content="Ranking Canadian cities releasing open source code on GitHub by their repository stars." />
<meta name="keywords" content="open source, open government, canada, city, cities, town, region, county, counties, municipality, municipalities, github" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cityssm/bulma-a11y@0.4.0/bulma-a11y.min.css" integrity="sha256-YrqCMmMEmKYmLuLlI1phSUZA4V4V104f2CiZB1B1cvc=" crossorigin="anonymous" />
</head>
<body>
<main class="container mt-4" style="max-width:650px;margin:0 auto;">
<h1 class="title has-text-centered">Canadian Municipal GitHub Rankings</h1>
<div class="message is-info">
<p class="message-body">
To motivate us to continuously improve our GitHub presence,
the table below shows how <a href="https://saultstemarie.ca/" target="_blank">The City of Sault Ste. Marie</a>
compares to other Canadian cities, towns, regions, and counties that are releasing their open source code on GitHub.
</p>
</div>
<div class="my-4" id="table-container">
<p class="has-text-centered">Loading...</p>
</div>
<h2 class="title is-5">What do the numbers mean?</h2>
<div class="content">
<ul>
<li>
Having a high number of <strong>stars</strong>
indicates that the open source code being released by the municipality is of interest to a large number of people.
</li>
<li>
Having a high number of <strong>public repos</strong> (or repositories)
shows that the municipality prioritizes releasing code in the open.
</li>
<li>
Having a high <strong>ratio</strong> of stars to public repos
shows that the open source code being released is of a high quality.
</li>
</ul>
</div>
</main>
<footer class="footer mt-4">
<p class="has-text-centered">
A friendly project by The City of Sault Ste. Marie.<br />
<a href="https://github.com/cityssm/municipal-github-rankings">View on GitHub</a>
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js" integrity="sha256-iSkNRnKsHORmMCNgQIxzyW0QzHrWeko/lyVjyI78G2c=" crossorigin="anonymous"></script>
<script>
axios.get("./data.json")
.then((response) => {
return response.data;
})
.then((data) => {
let maxStars = 0;
let maxRepos = 0;
let maxRatio = 0;
for (const organization of data.organizations) {
maxStars = Math.max(maxStars, organization.stars);
maxRepos = Math.max(maxRepos, organization.repositories);
if (organization.repositories !== 0) {
maxRatio = Math.max(maxRatio, (organization.stars / organization.repositories));
}
}
const tableElement = document.createElement("table");
tableElement.className = "table is-fullwidth is-striped";
tableElement.innerHTML = "<thead><tr>" +
"<th class=\"has-text-centered\">Icon</th>" +
"<th>Municipality</th>" +
"<th class=\"has-text-right\" style=\"width:6em\">Stars</th>" +
"<th class=\"has-text-right\" style=\"width:6em\">Public Repos</th>" +
"<th class=\"has-text-right\" style=\"width:6em\">Quality Ratio</th>" +
"</tr></thead>" +
"<tbody></tbody>";
for (const organization of data.organizations) {
const trElement = document.createElement("tr");
if (organization.handle === "cityssm") {
trElement.className = "has-text-weight-bold";
}
trElement.innerHTML = "<td class=\"has-text-centered\">" +
"<img src=\"https://github.com/" + organization.handle + ".png?size=40\" alt=\"" + organization.handle + "\" width=\"40\" height=\"40\" loading=\"lazy\" />" +
"</td>" +
"<td>" +
"<a href=\"https://github.com/" + organization.handle + "\" rel=\"noopener\" target=\"_blank\">" + organization.handle + "</a><br />" +
organization.municipality + ", " + organization.province +
"</td>" +
"<td class=\"has-text-right" + (organization.stars === maxStars ? " has-background-success-light" : "") + "\">" +
organization.stars +
"</td>" +
"<td class=\"has-text-right" + (organization.repositories === maxRepos ? " has-background-success-light" : "") + "\">" +
organization.repositories +
"</td>" +
"<td class=\"has-text-right" + (organization.repositories !== 0 && (organization.stars / organization.repositories) >= maxRatio ? " has-background-success-light" : "") + "\">" +
(organization.repositories === 0
? ""
: (organization.stars / organization.repositories).toPrecision(2)) +
"</td>";
tableElement.querySelector("tbody").append(trElement);
}
const containerElement = document.querySelector("#table-container");
containerElement.innerHTML = "";
containerElement.append(tableElement);
const refreshElement = document.createElement("p");
refreshElement.className = "has-text-centered";
refreshElement.innerHTML = "Updated Twice Daily<br />Last Updated<br />" + new Date(data.refreshMillis).toLocaleString();
containerElement.append(refreshElement);
});
</script>
</body>
</html>