Poprawa rozmiaru obrazków

README.md

@@ -126,6 +126,13 @@ coverImage: 'CKSource-logo-2.jpg'
 If you are working in VS Code in the browser, you can drag-and-drop images from
 your file explorer into the browser window.
 
+**NOTE:** Images cannot be wider than 740px. If you want to resize all your
+images to meet this requirement, run:
+
+```
+yarn resize-images
+```
+
 12. Image attribution.
 
 - As much as possible, rely on graphics and illustrations you create and have

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
-    "build": "docusaurus build",
+    "build": "yarn test-image-size && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
@@ -15,6 +15,8 @@
     "typecheck": "tsc",
     "prettier": "prettier . --write",
     "remove-unused-cover-images": "node src/scripts/remove-unused-cover-images.mjs",
+    "resize-images": "node src/scripts/resize-images.mjs",
+    "test-image-size": "RESIZE_IMAGES_DRY_RUN=true yarn resize-images",
     "delete-old-events": "node src/scripts/delete-old-events.mjs && yarn remove-unused-cover-images"
   },
   "dependencies": {
@@ -45,6 +47,7 @@
     "fast-xml-parser": "^5.0.9",
     "gm": "^1.25.0",
     "prettier": "3.0.2",
+    "sharp": "^0.35.5",
     "typescript": "6",
     "yaml-loader": "^0.8.0"
   },
@@ -64,4 +67,4 @@
     "node": ">=16.14"
   },
   "packageManager": "yarn@4.18.0"
-}
+}

src/scripts/resize-images.mjs

@@ -1,48 +1,49 @@
-import { __dirname, blogPath, getAllFilesRecursively } from './helpers.mjs';
-import gm from 'gm';
+import { readFile, writeFile } from 'fs/promises';
 import { resolve } from 'path';
+import sharp from 'sharp';
+import { __dirname, blogPath, getAllFilesRecursively } from './helpers.mjs';
 
+const isDryRun = process.env.RESIZE_IMAGES_DRY_RUN === 'true';
 const targetWidth = 740;
-const im = gm.subClass({ imageMagick: '7+' });
+const coverPath = resolve(__dirname, '../../static/img/cover');
 
 const allImagesInBlog = [];
+for (const dir of [blogPath, coverPath]) {
+  getAllFilesRecursively(dir, allImagesInBlog, '.png');
+  getAllFilesRecursively(dir, allImagesInBlog, '.jpg');
+}
 
-getAllFilesRecursively(blogPath, allImagesInBlog, '.png');
-getAllFilesRecursively(blogPath, allImagesInBlog, '.jpg');
-getAllFilesRecursively(
-  resolve(__dirname, '../../static/img/cover'),
-  allImagesInBlog,
-  '.png'
-);
-getAllFilesRecursively(
-  resolve(__dirname, '../../static/img/cover'),
-  allImagesInBlog,
-  '.jpg'
+console.log(
+  `Found ${allImagesInBlog.length} images in blog, checking their size...`
 );
 
-console.log({ allImagesInBlog }, `Found ${allImagesInBlog.length}`);
-
 let count = 0;
 for (const imagePath of allImagesInBlog) {
-  im(imagePath).size(function (err, size) {
-    if (err) {
-      throw err;
-    }
-    const width = size.width;
-    console.log(width, imagePath);
+  try {
+    // Read into a buffer so we can safely overwrite the same file
+    const input = await readFile(imagePath);
+    const { width } = await sharp(input, { failOn: 'none' }).metadata();
+
     if (width > targetWidth) {
-      im(imagePath)
-        .resize(targetWidth)
-        .write(imagePath, function (err) {
-          if (!err) {
-            count++;
-            console.log(
-              `Resized ${imagePath} from ${width}px to ${targetWidth}px`
-            );
-          }
-        });
+      if (isDryRun) {
+        console.error(
+          `At least one image is larger than ${targetWidth}.
+${imagePath} is ${width}px wide.
+Please run "yarn resize-images" to resize them before building."`
+        );
+        process.exit(1);
+      }
+
+      const output = await sharp(input, { failOn: 'none' })
+        .resize({ width: targetWidth })
+        .toBuffer();
+      await writeFile(imagePath, output);
+      count++;
+      console.log(`Resized ${imagePath} from ${width}px to ${targetWidth}px`);
     }
-  });
+  } catch (err) {
+    console.error(`Failed on ${imagePath}:`, err.message);
+  }
 }
 
 console.log(`Resized ${count} images`);