chore: remove unnecessary canvas dependency (#5069)

mochajs · Jan 8, 2024 · 53a4baf · 53a4baf
1 parent 1ebff45
commit 53a4baf
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 2,127 deletions.
diff --git a/docs/_data/supporters.js b/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);

diff --git a/docs/_includes/supporters.md b/docs/_includes/supporters.md
@@ -8,7 +8,7 @@ Use Mocha at Work? Ask your manager or marketing team if they'd help [support](h
     {%- if supporter.website -%}
     <a href="{{ supporter.website }}" target="_blank" rel="noopener">
     {%- 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 -%}

diff --git a/docs/css/supporters.css b/docs/css/supporters.css
@@ -9,6 +9,9 @@
   -sprite-location: url(/images/sprite-backers.png?pngquant);
   -sprite-image-format: png;
   -sprite-padding: 0 10;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
   width: 32px;
   height: 32px;
 }