Skip to content

Commit 7df2373

Browse files
17cupsofcoffee17cupsofcoffee
authored
Replace Shields.io with locally rendered data/badges (#591)
* Improve accessibility of badges * Replace Shields.io with locally rendered data/badges * Fix missing repo info when repository URL ends in a slash * Fix missing activity info for items without source * Fix missing repo info when repository URL ends in .git * Format star count * Fix GitHub icon displaying even when repo is on a different site * More accessibility tweaks * Add Gitea stats support * Re-order card markup for better accessibility I tried the page with NVDA, and the aria-label approach didn't work (apparently it's not valid for 'li' tags). So instead, I just tweaked the markup to properly present the item's title first. * Add build date to the footer * Hide license badge when GitHub check inconclusive A lot of the cases where 'Other' was showing as the license turned out to be MIT/Apache projects with their files named wrong, which feels misleading.
1 parent 1b47646 commit 7df2373

File tree

6 files changed

+171
-87
lines changed

6 files changed

+171
-87
lines changed

‎sass/_extra.scss

+21
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@
4545
height: 256px;
4646
}
4747

48+
.ui.cards > .card > .content > .header:not(.ui), .ui.card > .content > .header:not(.ui) {
49+
display: inline-block;
50+
margin-bottom: 0;
51+
}
52+
4853
.ui.card > .image > img, .ui.cards > .card > .image > img {
4954
object-fit: cover;
5055
width: 100%;
@@ -57,6 +62,22 @@
5762
margin-right: 0.5em;
5863
}
5964

65+
ul.ui.horizontal.list {
66+
margin: 0;
67+
}
68+
69+
ul.ui.list li::before {
70+
content: none;
71+
}
72+
73+
.ui.label > .icon {
74+
margin-right: 0.25em;
75+
}
76+
77+
.ui.label > .detail {
78+
margin-left: 0.5em;
79+
}
80+
6081
@media only screen and (max-width: 991px) {
6182
.masthead .ui.menu a.item {
6283
display: none;

‎sass/_semantic.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@import 'semantic/icon';
99
@import 'semantic/image';
1010
// @import 'semantic/input';
11-
// @import 'semantic/label';
11+
@import 'semantic/label';
1212
@import 'semantic/list';
1313
//@import 'semantic/loader';
1414
//@import 'semantic/placeholder';

‎sass/semantic/_label.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ a.ui.label {
351351
}
352352
.ui.card .image > .ui.ribbon.label,
353353
.ui.image > .ui.ribbon.label {
354-
left: calc(--0.05rem - 1.2em);
354+
left: calc(-0.05rem - 1.2em);
355355
}
356356
.ui.card .image > .ui[class*="right ribbon"].label,
357357
.ui.image > .ui[class*="right ribbon"].label {

‎templates/categories/macros.html

+136-79
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,39 @@
11
{% macro info(item, section, archived=false) %}
22

3+
{% set github_token = get_env(name="GITHUB_TOKEN") %}
4+
35
{% if item.name %}
46
{% set name = item.name %}
57
{% endif %}
68

7-
{% if item.source %}
8-
{% if item.source == 'crates' %}
9-
{% set data = load_data(url = "https://crates.io/api/v1/crates/" ~ item.name ~ "?include=", format="json", headers=["User-Agent=arewegameyet ([email protected])"]) %}
10-
{# human readable name #}
11-
{% set name = data.crate.name %}
12-
{# Github/Gitlab/Etc. repository #}
13-
{% set repository_url = data.crate.repository %}
14-
{% set crate_url = 'https://crates.io/crates/' ~ name %}
15-
{% set description = data.crate.description %}
16-
{% if data.crate.homepage %}
17-
{% set homepage_url = data.crate.homepage %}
18-
{% endif %}
19-
{% elif item.source == 'github' %}
20-
{% set data = load_data(url="https://api.github.com/repos/" ~ item.name, format="json") %}
21-
{% set name = data.name %}
22-
{% set repository_url = data.html_url %}
23-
{# Org or User name #}
24-
{% set owner = data.owner.login %}
25-
{% if data.homepage != "" %}
26-
{% set homepage_url = data.homepage %}
27-
{% endif %}
28-
{% set description = data.description %}
9+
{% if item.source and item.source == 'crates' %}
10+
{% set data = load_data(url = "https://crates.io/api/v1/crates/" ~ item.name ~ "?include=downloads,default_version", format="json", headers=["User-Agent=arewegameyet ([email protected])"]) %}
11+
12+
{% set name = data.crate.name %}
13+
{% set description = data.crate.description %}
14+
{% set repository_url = data.crate.repository %}
15+
{% set crate_url = 'https://crates.io/crates/' ~ name %}
16+
{% set latest_version = data.crate.default_version %}
17+
{% set downloads = data.crate.downloads %}
18+
{% set recent_downloads = data.crate.recent_downloads %}
19+
{% set license = data.versions | first | get(key="license") %}
20+
21+
{% if data.crate.homepage %}
22+
{% set homepage_url = data.crate.homepage %}
23+
{% endif %}
24+
{% elif item.source and item.source == 'github' %}
25+
{% set data = load_data(url="https://api.github.com/repos/" ~ item.name, headers=["Authorization=Bearer " ~ github_token], format="json") %}
26+
27+
{% set name = data.name %}
28+
{% set description = data.description %}
29+
{% set repository_url = data.html_url %}
30+
31+
{% if data.license and data.license.key != "other" %}
32+
{% set license = data.license.name %}
33+
{% endif %}
34+
35+
{% if data.homepage %}
36+
{% set homepage_url = data.homepage %}
2937
{% endif %}
3038
{% endif %}
3139

@@ -45,6 +53,35 @@
4553
{% set primary_url = repository_url %}
4654
{% endif %}
4755

56+
{# Fetch repository stats #}
57+
{% if repository_url and repository_url is containing("github.com/") %}
58+
{% set repo_icon = "github" %}
59+
{% set repo_id = repository_url | split(pat="github.com/") | last | trim_end_matches(pat="/") | trim_end_matches(pat=".git") %}
60+
61+
{% set data = load_data(url="https://api.github.com/repos/" ~ repo_id, headers=["Authorization=Bearer " ~ github_token], format="json", required=false) %}
62+
{% if data %}
63+
{% set stars = data.stargazers_count %}
64+
{% set last_activity = data.pushed_at %}
65+
{% endif %}
66+
{% elif repository_url and repository_url is containing("gitlab.com/") %}
67+
{% set repo_icon = "gitlab" %}
68+
{% set repo_id = repository_url | split(pat="gitlab.com/") | last | trim_end_matches(pat="/") | trim_end_matches(pat=".git") | urlencode_strict %}
69+
70+
{% set data = load_data(url="https://gitlab.com/api/v4/projects/" ~ repo_id, format="json", required=false) %}
71+
{% if data %}
72+
{% set stars = data.star_count %}
73+
{% set last_activity = data.last_activity_at %}
74+
{% endif %}
75+
{% elif repository_url and repository_url is containing("gitea.com/") %}
76+
{% set repo_id = repository_url | split(pat="gitea.com/") | last | trim_end_matches(pat="/") | trim_end_matches(pat=".git") %}
77+
78+
{% set data = load_data(url="https://gitea.com/api/v1/repos/" ~ repo_id, format="json", required=false) %}
79+
{% if data %}
80+
{% set stars = data.stars_count %}
81+
{% set last_activity = data.updated_at %}
82+
{% endif %}
83+
{% endif %}
84+
4885
<li class="ui card{% if archived %} archived{% endif %}">
4986
{% if item.image %}
5087
{% if primary_url %}
@@ -61,35 +98,35 @@
6198
{% endif %}
6299

63100
<div class="content">
64-
<a href="#{{ name | slugify }}" id="{{ name | slugify }}" aria-label="Permanent link for {{ name }}">
65-
<i class="right floated hashtag icon"></i>
101+
<h3 class="header">
102+
{% if primary_url %}
103+
<a href="{{ primary_url }}">{{ name }}</a>
104+
{% else %}
105+
{{ name }}
106+
{% endif %}
107+
</h3>
108+
109+
<a class="right floated" href="#{{ name | slugify }}" id="{{ name | slugify }}" aria-label="Permanent link for {{ name }}">
110+
<i class="hashtag icon" aria-hidden="true"></i>
66111
</a>
67112

68113
{% if repository_url %}
69-
<a href="{{ repository_url }}" aria-label="Github link for {{ name }}">
70-
<i class="right floated github icon"></i>
114+
<a class="right floated" href="{{ repository_url }}" aria-label="Repository link for {{ name }}">
115+
<i class="{{ repo_icon | default(value="code") }} icon" aria-hidden="true"></i>
71116
</a>
72117
{% endif %}
73118

74119
{% if crate_url %}
75-
<a href="{{ crate_url }}" aria-label="Crates.io link for {{ name }}">
76-
<i class="right floated cube icon"></i>
120+
<a class="right floated" href="{{ crate_url }}" aria-label="Crates.io link for {{ name }}">
121+
<i class="cube icon" aria-hidden="true"></i>
77122
</a>
78123
{% endif %}
79124

80125
{% if homepage_url %}
81-
<a href="{{ homepage_url }}" aria-label="Website link for {{ name }}">
82-
<i class="right floated home icon"></i>
126+
<a class="right floated" href="{{ homepage_url }}" aria-label="Website link for {{ name }}">
127+
<i class="home icon" aria-hidden="true"></i>
83128
</a>
84129
{% endif %}
85-
86-
<div class="header">
87-
{% if primary_url %}
88-
<a href="{{ primary_url }}">{{ name }}</a>
89-
{% else %}
90-
{{ name }}
91-
{% endif %}
92-
</div>
93130

94131
<div class="meta">
95132
{% for category in item.categories %}
@@ -105,66 +142,86 @@
105142
</div>
106143
</div>
107144

108-
{% if item.source or gitter_url %}
145+
{% if item.source or repository_url or gitter_url %}
109146
<div class="extra content">
110-
111-
<div class="ui horizontal list">
112-
{% if item.source and item.source == 'crates' %}
113-
<div class="item">
147+
<ul class="ui horizontal list">
148+
{% if gitter_url %}
149+
<li class="item">
114150
<div class="content">
115-
<a href="https://crates.io/crates/{{name}}">
116-
<img src="https://img.shields.io/crates/v/{{name}}.svg?maxAge=2592000" alt="Crates.io link for {{ name }}">
151+
<a class="ui blue label" href="{{ gitter_url }}" target="_blank">
152+
<i class="chat icon" aria-hidden="true"></i>
153+
Chat on Gitter
117154
</a>
118155
</div>
119-
</div>
120-
<div class="item" aria-hidden="true">
156+
</li>
157+
{% endif %}
158+
{% if latest_version %}
159+
<li class="item">
121160
<div class="content">
122-
<a href="https://crates.io/crates/{{name}}">
123-
<img src="https://img.shields.io/crates/d/{{name}}.svg?maxAge=2592000" alt="Download count for {{ name }}">
124-
</a>
161+
<div class="ui basic label">
162+
<i class="code icon" aria-hidden="true"></i>
163+
Latest version:
164+
<div class="detail">{{ latest_version }}</div>
165+
</div>
125166
</div>
126-
</div>
127-
<div class="item" aria-hidden="true">
167+
</li>
168+
{% endif %}
169+
{% if downloads %}
170+
<li class="item">
128171
<div class="content">
129-
<a href="https://crates.io/crates/{{name}}">
130-
<img src="https://img.shields.io/crates/dr/{{name}}.svg?maxAge=2592000" alt="Recent download count for {{ name }}">
131-
</a>
172+
<div class="ui basic label">
173+
<i class="download icon" aria-hidden="true"></i>
174+
Downloads:
175+
<div class="detail">{{ downloads | num_format }}</div>
176+
</div>
132177
</div>
133-
</div>
134-
<div class="item" aria-hidden="true">
178+
</li>
179+
{% endif %}
180+
{% if recent_downloads %}
181+
<li class="item">
135182
<div class="content">
136-
<a href="https://crates.io/crates/{{name}}">
137-
<img src="https://img.shields.io/crates/l/{{name}}.svg?maxAge=2592000" alt="License for {{ name }}">
138-
</a>
183+
<div class="ui basic label">
184+
<i class="clock icon" aria-hidden="true"></i>
185+
Recent downloads:
186+
<div class="detail">{{ recent_downloads | num_format }}</div>
187+
</div>
139188
</div>
140-
</div>
189+
</li>
141190
{% endif %}
142-
{% if item.source and item.source == 'github' %}
143-
<div class="item" aria-hidden="true">
191+
{% if license %}
192+
<li class="item">
144193
<div class="content">
145-
<a href="https://github.com/{{owner}}/{{name}}">
146-
<img src="https://img.shields.io/github/stars/{{owner}}/{{name}}?style=flat" alt="Github Stars for {{ name }}">
147-
</a>
194+
<div class="ui basic label">
195+
<i class="balance scale icon" aria-hidden="true"></i>
196+
License:
197+
<div class="detail">{{ license }}</div>
198+
</div>
148199
</div>
149-
</div>
150-
<div class="item" aria-hidden="true">
200+
</li>
201+
{% endif %}
202+
{% if stars %}
203+
<li class="item">
151204
<div class="content">
152-
<a href="https://github.com/{{owner}}/{{name}}">
153-
<img src="https://img.shields.io/github/last-commit/{{owner}}/{{name}}" alt="Last commit date for {{ name }}">
154-
</a>
205+
<div class="ui basic label">
206+
<i class="star icon" aria-hidden="true"></i>
207+
Stars:
208+
<div class="detail">{{ stars | num_format }}</div>
209+
</div>
155210
</div>
156-
</div>
211+
</li>
157212
{% endif %}
158-
{% if gitter_url %}
159-
<div class="item">
213+
{% if last_activity %}
214+
<li class="item">
160215
<div class="content">
161-
<a href="{{ gitter_url }}" target="_blank">
162-
<img src="/assets/badges/chat.svg"/>
163-
</a>
216+
<div class="ui basic label">
217+
<i class="calendar icon" aria-hidden="true"></i>
218+
Last activity:
219+
<div class="detail">{{ last_activity | date }}</div>
220+
</div>
164221
</div>
165-
</div>
222+
</li>
166223
{% endif %}
167-
</div>
224+
</ul>
168225
</div>
169226
{% endif %}
170227
</li>

‎templates/categories/page.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
{# Heading #}
2424
<section class="ui vertical stripe">
2525
<h1 class="ui center aligned icon header">
26-
<i class="circular icon {{ section.extra.icon }}"></i>
26+
<i class="circular icon {{ section.extra.icon }}" aria-hidden="true"></i>
2727
{{ page.title }}
2828
</h1>
2929
<div class="ui text container">
@@ -51,7 +51,7 @@ <h1 class="ui center aligned icon header">
5151
<section>
5252
<h2 class="ui horizontal divider small header">
5353
<a href="#{{ section.extra.plural | slugify }}" id="{{ section.extra.plural | slugify }}">
54-
<i class="list icon big"></i>
54+
<i class="list icon big" aria-hidden="true"></i>
5555
{{ section.extra.plural | title }}
5656
</a>
5757
</h2>
@@ -71,15 +71,15 @@ <h2 class="ui horizontal divider small header">
7171
<section>
7272
<h2 class="ui horizontal divider small header">
7373
<a href="#{{ section.extra.plural | slugify }}" id="{{ section.extra.plural | slugify }}">
74-
<i class="bed icon big"></i>
74+
<i class="bed icon big" aria-hidden="true"></i>
7575
Archived
7676
</a>
7777
</h2>
7878

7979
<div class="ui vertical stripe">
8080
<div class="ui container">
8181
<div class="ui message">
82-
<i class="info circle icon"></i>
82+
<i class="info circle icon" aria-hidden="true"></i>
8383
These {{ section.extra.plural }} are no longer maintained, but may still be of interest.
8484
</div>
8585

@@ -96,7 +96,7 @@ <h2 class="ui horizontal divider small header">
9696
<section>
9797
<h2 class="ui horizontal divider small header">
9898
<a href="#contribute" id="contribute">
99-
<i class="chat icon big"></i>
99+
<i class="chat icon big" aria-hidden="true"></i>
100100
Contribute
101101
</a>
102102
</h2>

‎templates/master.html

+7-1
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,13 @@ <h4 class="ui inverted header">About</h4>
106106
</div>
107107
<div class="ten wide column">
108108
<h4 class="ui inverted header">Arewegameyet?</h4>
109-
<p><a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.</p>
109+
<p>
110+
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>
111+
<br />
112+
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
113+
<br />
114+
Page generated at {{ now() | date(format="%Y-%m-%d %H:%M") }}.
115+
</p>
110116
</div>
111117
<div class="three wide column">
112118
<h4 class="ui inverted header">Get involved</h4>

0 commit comments

Comments
 (0)