Setup up build-time image generation pipeline with eleventy-img; Orga…

…nised public folder

generate-images.js

@@ -0,0 +1,26 @@
+const Image = require("@11ty/eleventy-img");
+const fs = require("fs");
+const path = require("path");
+
+(async () => {
+  console.log(`Generating images...`);
+
+  let inputDir = "./images";
+  let outputDir = "./public/images";
+
+  fs.readdir(inputDir, (_, files) => {
+    files.forEach((file) => {
+      Image(`${inputDir}/${file}`, {
+        widths: [300],
+        formats: ["avif", "webp", "jpeg"],
+        outputDir,
+        filenameFormat: (_, src, width, format) => {
+          const extension = path.extname(src);
+          const name = path.basename(src, extension);
+          console.log(`Generated ${name}-${width}w.${format}`);
+          return `${name}-${width}w.${format}`;
+        },
+      });
+    });
+  });
+})();

package.json

@@ -3,12 +3,14 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev",
+    "generate-images": "node generate-images.js",
+    "dev": "pnpm generate-images && astro dev",
     "start": "astro dev",
-    "build": "astro build",
+    "build": "pnpm generate-images && astro build",
     "preview": "astro preview"
   },
   "devDependencies": {
+    "@11ty/eleventy-img": "^2.0.1",
     "@astrojs/react": "^1.1.4",
     "@astrojs/tailwind": "^1.0.0",
     "@types/three": "^0.144.0",