From e8fa97a0c8364b5aa6feb8a733c95aef9bf1b6d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Thu, 21 May 2020 00:49:39 +0200 Subject: [PATCH 01/12] Generate sprite sheets from opencollective avatars to serve them quicker --- .gitignore | 1 + docs/_data/supporters.js | 26 ++++++++++++++++++++++---- docs/_includes/supporters.md | 34 ++++++++++++++++++++++++++++++++-- 3 files changed, 55 insertions(+), 6 deletions(-) diff --git a/.gitignore b/.gitignore index 02634697bf..03be53d964 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ # Mocha-specific docs/_site docs/_dist +docs/images/supporters mocha.js .karma/ !lib/mocha.js diff --git a/docs/_data/supporters.js b/docs/_data/supporters.js index 6ae78a33d7..0895519627 100644 --- a/docs/_data/supporters.js +++ b/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, @@ -113,13 +118,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); }) ); diff --git a/docs/_includes/supporters.md b/docs/_includes/supporters.md index 061cff0a5d..95d740ae6b 100644 --- a/docs/_includes/supporters.md +++ b/docs/_includes/supporters.md @@ -2,13 +2,38 @@ Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors). + + - - diff --git a/docs/js/avatars.js b/docs/js/avatars.js deleted file mode 100644 index a03b2858a7..0000000000 --- a/docs/js/avatars.js +++ /dev/null @@ -1,30 +0,0 @@ -(function() { - 'use strict'; - - var imageLists = document.querySelectorAll('.image-list'); - - function getListItem(img) { - var parent = img.parentNode; - while (parent && parent.nodeName !== 'LI') { - parent = parent.parentNode; - } - - return parent; - } - - function onloadHandler() { - getListItem(this).classList.add('is-loaded'); - } - - Array.prototype.forEach.call(imageLists, function(imageList) { - var images = imageList.querySelectorAll('img'); - - for (var i = 0; i < images.length; i += 1) { - if (!images[i].complete) { - getListItem(images[i]).classList.add('faded-image'); - images[i].onload = onloadHandler; - images[i].onerror = onloadHandler; - } - } - }); -})(); From 10fcf792076d05986500e05d6709e9ec84dc0e9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 8 Jun 2020 09:34:19 +0200 Subject: [PATCH 09/12] Always https protocol on opencollective badges --- docs/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/index.md b/docs/index.md index 29c02b4061..b2d0d62b70 100644 --- a/docs/index.md +++ b/docs/index.md @@ -8,8 +8,8 @@ Mocha is a feature-rich JavaScript test framework running on [Node.js][] and in {% include supporters.md %} From 9aaed853ef2ae2f9379cc9d9500ae8fd7a607944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Mon, 8 Jun 2020 09:34:45 +0200 Subject: [PATCH 10/12] Add local netlify folder to gitignore --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 03be53d964..7c90a8253b 100644 --- a/.gitignore +++ b/.gitignore @@ -142,3 +142,6 @@ Temporary Items # SauceConnect *.sock + +# Local Netlify folder +.netlify \ No newline at end of file From be128cbc7a7d4f505d15faea9ee47f72f6f567ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Peter=20M=C3=BCller?= Date: Wed, 10 Jun 2020 17:58:25 +0200 Subject: [PATCH 11/12] Avoid supporter spritesheet ending up as external stylesheet in body. Caused render flush that resulted in confusing layout shift on reload --- docs/_includes/default.liquid | 1 + docs/_includes/supporters.md | 32 ++------------------------------ docs/css/supporters.css | 13 +++++++++++++ 3 files changed, 16 insertions(+), 30 deletions(-) create mode 100644 docs/css/supporters.css diff --git a/docs/_includes/default.liquid b/docs/_includes/default.liquid index 8ae2d7ff8a..1b146cd001 100644 --- a/docs/_includes/default.liquid +++ b/docs/_includes/default.liquid @@ -6,6 +6,7 @@ {{ title }} + diff --git a/docs/_includes/supporters.md b/docs/_includes/supporters.md index b78a131b55..9ee2b520fe 100644 --- a/docs/_includes/supporters.md +++ b/docs/_includes/supporters.md @@ -2,36 +2,13 @@ Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors). - -