chore: more fully remove assetgraph-builder and canvas (#5175)

* chore: more fully remove assetgraph-builder and canvas

* fixed up images too

* Remove last postbuild bit

* fix: netlify build.publish trailing slash

Author: JoshuaKGoldberg

.gitignore

@@ -1,6 +1,5 @@
 # Mocha-specific
 docs/_site
-docs/_dist
 docs/images/supporters
 docs/api
 mocha.js

.mocharc.yml

@@ -7,7 +7,6 @@ global:
 timeout: 1000
 watch-ignore:
   - '.*'
-  - 'docs/_dist/**'
   - 'docs/_site/**'
   - 'node_modules'
   - 'coverage'

docs/README.md

@@ -18,22 +18,7 @@ _So you wanna build the site?_
 
 - The content lives in `docs/index.md`; everything else is markup, scripts, assets, etc.
 - This file (`docs/README.md`) should _not_ be included in the build.
-- `docs/_dist` is where the deployed site lives. `docs/_site` is essentially a build step. These directories are _not_ under version control.
-- If you get the error message below when running `npm start docs`, follow [this guide](https://www.npmjs.com/package/gm) to install GraphicsMagick or ImageMagick.
-
-```console
-⚠ WARN: docs/_site/images/matomo-logo.png: Error executing Stream: The gm stream ended without emitting any data
-(node:45255) UnhandledPromiseRejectionWarning: Error: docs/_site/images/matomo-logo.png: Error executing Stream: The gm stream ended without emitting any data
-    at Socket.stdout.on.once (/Users/username/mocha/node_modules/express-processimage/lib/getFilterInfosAndTargetContentTypeFromQueryString.js:821:31)
-    at Object.onceWrapper (events.js:286:20)
-    at Socket.emit (events.js:203:15)
-    at endReadableNT (_stream_readable.js:1145:12)
-    at process._tickCallback (internal/process/next_tick.js:63:19)
-(node:45255) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
-(node:45255) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
-cp: docs/_dist/_headers: No such file or directory
-```
-
+- `docs/_site_` is where the deployed site lives. This directories are _not_ under version control.
 - See `package-scripts.js` for details on what the builds are actually doing.
 
 ## License

docs/_data/supporters.js

@@ -17,7 +17,6 @@
 
 'use strict';
 
-const {loadImage} = require('canvas');
 const {writeFile, mkdir, rm} = require('fs').promises;
 const {resolve} = require('path');
 const debug = require('debug')('mocha:docs:data:supporters');
@@ -115,13 +114,6 @@ const fetchImage = process.env.MOCHA_DOCS_SKIP_IMAGE_DOWNLOAD
           );
         }
         debug('fetched %s', url);
-        const canvasImage = await loadImage(imageBuf);
-        debug('ok %s', url);
-        supporter.dimensions = {
-          width: canvasImage.width,
-          height: canvasImage.height
-        };
-        // debug('dimensions %s %dw %dh', url, canvasImage.width, canvasImage.height);
         const filePath = resolve(SUPPORTER_IMAGE_PATH, supporter.id + '.png');
         await writeFile(filePath, imageBuf);
         debug('wrote %s', filePath);

docs/_includes/supporters.md

@@ -2,13 +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).
 
-<ul class="image-list" id="sponsors">
+<ul class="image-list image-list-wide" id="sponsors">
 {%- for supporter in supporters.sponsors -%}
   <li>
     {%- if supporter.website -%}
     <a href="{{ supporter.website }}" target="_blank" rel="noopener sponsored">
     {%- endif -%}
-      <div class="sponsor" title="{{ supporter.name }}" style="width: {{ supporter.dimensions.width }}px; background-image: url(/images/supporters/{{ supporter.id }}.png?sprite=sponsors)"></div>
+      <div class="sponsor" title="{{ supporter.name }}" style="background-image: url(/images/supporters/{{ supporter.id }}.png?sprite=sponsors)"></div>
     {%- if supporter.website -%}
     </a>
     {%- endif -%}

docs/css/supporters.css

@@ -1,14 +1,21 @@
+.image-list-wide a,
+.image-list-wide li {
+  width: 100%;
+}
+
+.backer,
+.sponsor {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
 .sponsor {
-  -sprite-selector-for-group: sponsors;
-  -sprite-location: url(/images/sprite-sponsors.png?pngquant);
-  -sprite-image-format: png;
   height: 64px;
+  width: 100%;
 }
+
 .backer {
-  -sprite-selector-for-group: backers;
-  -sprite-location: url(/images/sprite-backers.png?pngquant);
-  -sprite-image-format: png;
-  -sprite-padding: 0 10;
   width: 32px;
   height: 32px;
 }