Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch opencollective images to self-hosted spritesheet #4318

Merged
merged 12 commits into from
Jun 10, 2020
Merged
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
Munter marked this conversation as resolved.
Show resolved Hide resolved
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