Switch opencollective images to self-hosted spritesheet (#4318)

* 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

Author: Munter

.gitignore

@@ -1,6 +1,7 @@
 # Mocha-specific
 docs/_site
 docs/_dist
+docs/images/supporters
 mocha.js
 .karma/
 !lib/mocha.js
@@ -141,3 +142,6 @@ Temporary Items
 
 # SauceConnect
 *.sock
+
+# Local Netlify folder
+.netlify

docs/_data/supporters.js

@@ -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');
@@ -16,6 +19,7 @@ const query = `query account($limit: Int, $offset: Int, $slug: String) {
       totalCount
       nodes {
         fromAccount {
+          id
           name
           slug
           website
@@ -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,
@@ -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});
         }
@@ -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);
     })
   );
 

docs/_includes/default.liquid

@@ -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]-->

docs/_includes/supporters.md

@@ -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 -%}
@@ -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>

docs/css/supporters.css

@@ -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;
+}

docs/index.md

@@ -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 %}