Skip to content

Commit

Permalink
Switch opencollective images to self-hosted spritesheet (#4318)
Browse files Browse the repository at this point in the history
* Generate sprite sheets from opencollective avatars to serve them quicker

* Update assetgraph-builder to 8.0.1

* Filter out anonymous donors

* Remove sprite padding

* Move all supporter names to a title attribute that always exists

* Root relative CSS hrefs

* Update package-lock.json

* Get rid of avatars.js since the sprites don't work that way

* Always https protocol on opencollective badges

* Add local netlify folder to gitignore

* Avoid supporter spritesheet ending up as external stylesheet in body. Caused render flush that resulted in confusing layout shift on reload

* Add missing newline in .gitignore
  • Loading branch information
Munter authored Jun 10, 2020
1 parent 612fa31 commit fc618a1
Show file tree
Hide file tree
Showing 9 changed files with 273 additions and 159 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Mocha-specific
docs/_site
docs/_dist
docs/images/supporters
mocha.js
.karma/
!lib/mocha.js
Expand Down Expand Up @@ -141,3 +142,6 @@ Temporary Items

# SauceConnect
*.sock

# Local Netlify folder
.netlify
36 changes: 28 additions & 8 deletions docs/_data/supporters.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
#!/usr/bin/env node
'use strict';

const {mkdirSync} = require('fs');
const {writeFile} = require('fs').promises;
const {resolve} = require('path');
const debug = require('debug')('mocha:docs:data:supporters');
const needle = require('needle');
const imageSize = require('image-size');
Expand All @@ -16,6 +19,7 @@ const query = `query account($limit: Int, $offset: Int, $slug: String) {
totalCount
nodes {
fromAccount {
id
name
slug
website
Expand All @@ -35,6 +39,7 @@ const query = `query account($limit: Int, $offset: Int, $slug: String) {
const graphqlPageSize = 1000;

const nodeToSupporter = node => ({
id: node.fromAccount.id,
name: node.fromAccount.name,
slug: node.fromAccount.slug,
website: node.fromAccount.website,
Expand Down Expand Up @@ -101,10 +106,12 @@ module.exports = async () => {
.reduce(
(supporters, supporter) => {
if (supporter.type === 'INDIVIDUAL') {
supporters.backers.push({
...supporter,
avatar: supporter.imgUrlSmall
});
if (supporter.name !== 'anonymous') {
supporters.backers.push({
...supporter,
avatar: supporter.imgUrlSmall
});
}
} else {
supporters.sponsors.push({...supporter, avatar: supporter.imgUrlMed});
}
Expand All @@ -113,13 +120,26 @@ module.exports = async () => {
{sponsors: [], backers: []}
);

const supporterImagePath = resolve(__dirname, '../images/supporters');

mkdirSync(supporterImagePath, {recursive: true});

// Fetch images for sponsors and save their image dimensions
await Promise.all(
supporters.sponsors.map(async sponsor => {
for await (const chunk of needle.get(sponsor.avatar)) {
sponsor.dimensions = imageSize(chunk);
break;
}
const filePath = resolve(supporterImagePath, sponsor.id + '.png');
const {body} = await needle('get', sponsor.avatar);
sponsor.dimensions = imageSize(body);
await writeFile(filePath, body);
})
);

// Fetch images for backers and save their image dimensions
await Promise.all(
supporters.backers.map(async backer => {
const filePath = resolve(supporterImagePath, backer.id + '.png');
const {body} = await needle('get', backer.avatar);
await writeFile(filePath, body);
})
);

Expand Down
7 changes: 4 additions & 3 deletions docs/_includes/default.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>{{ title }}</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/prism.css" />
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/supporters.css" />
<link rel="stylesheet" href="/css/prism.css" />
<link rel="icon" href="favicon.ico" />

<!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->
Expand Down
10 changes: 4 additions & 6 deletions docs/_includes/supporters.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ Use Mocha at Work? Ask your manager or marketing team if they'd help [support](h
{%- for supporter in supporters.sponsors -%}
<li>
{%- if supporter.website -%}
<a href="{{ supporter.website }}" target="_blank" rel="noopener" title="{{ supporter.name }}">
<a href="{{ supporter.website }}" target="_blank" rel="noopener">
{%- endif -%}
<img src="{{ supporter.avatar }}" width="{{ supporter.dimensions.width }}" height="{{ supporter.dimensions.height }}" alt="{{ supporter.name }}" />
<div class="sponsor" title="{{ supporter.name }}" style="width: {{ supporter.dimensions.width }}px; background-image: url(/images/supporters/{{ supporter.id }}.png?sprite=sponsors)"></div>
{%- if supporter.website -%}
</a>
{%- endif -%}
Expand All @@ -24,14 +24,12 @@ Find Mocha helpful? Become a [backer](https://opencollective.com/mochajs#support
{%- for supporter in supporters.backers -%}
<li>
{%- if supporter.website -%}
<a href="{{ supporter.website }}" target="_blank" rel="noopener" title="{{ supporter.name }}">
<a href="{{ supporter.website }}" target="_blank" rel="noopener">
{%- endif -%}
<img src="{{ supporter.avatar }}" alt="{{ supporter.name }}" />
<div class="backer backer-{{ forloop.index }}" title="{{ supporter.name }}" style="background-image: url(/images/supporters/{{ supporter.id }}.png?sprite=backers)"></div>
{%- if supporter.website -%}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>

<script src="/js/avatars.js"></script>
13 changes: 13 additions & 0 deletions docs/css/supporters.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.sponsor {
-sprite-selector-for-group: sponsors;
-sprite-location: url(/images/sprite-sponsors.png?pngquant);
-sprite-image-format: png;
height: 64px;
}
.backer {
-sprite-selector-for-group: backers;
-sprite-location: url(/images/sprite-backers.png?pngquant);
-sprite-image-format: png;
width: 32px;
height: 32px;
}
4 changes: 2 additions & 2 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ Mocha is a feature-rich JavaScript test framework running on [Node.js][] and in

<nav class="badges">
<a href="https://gitter.im/mochajs/mocha"><img src="/images/join-chat.svg" height="18" alt="Gitter"></a>
<a href="#sponsors"><img src="//opencollective.com/mochajs/sponsors/badge.svg" height="18" alt="OpenCollective sponsors"></a>
<a href="#backers"><img src="//opencollective.com/mochajs/backers/badge.svg" height="18" alt="OpenCollective backers"></a>
<a href="#sponsors"><img src="https://opencollective.com/mochajs/sponsors/badge.svg" height="18" alt="OpenCollective sponsors"></a>
<a href="#backers"><img src="https://opencollective.com/mochajs/backers/badge.svg" height="18" alt="OpenCollective backers"></a>
</nav>

{% include supporters.md %}
Expand Down
30 changes: 0 additions & 30 deletions docs/js/avatars.js

This file was deleted.

Loading

0 comments on commit fc618a1

Please sign in to comment.