Responsive image generation with an astro hook

ImageCompressorIntegration.ts

import type { AstroIntegration } from "astro";
import sharp from 'sharp';
import path from 'path';
import fs from 'fs';

type imageSize = { width: number, height: number };

export default function createPlugin(): AstroIntegration {
  return {
    name: "ImageCompressorIntegration",
    hooks: {
      "astro:build:generated": async (options: { dir: URL }) => {
        const distPath = options.dir.pathname;
        const allFiles = readDirectoryRecursive(path.join(distPath, "thumbnail"));
        for (const [i, imgPath] of allFiles.entries()) {
          await ImageGenerator.processImage(imgPath, ImageGenerator.thumbnailMetaSizes, true, true);
          console.log(`${path.basename(imgPath)} image sizes generated (${i+1}/${allFiles.length})`);
        }
      }
    }
  };
}

function readDirectoryRecursive(dir: string, filelist: string[] = []) {
  const files = fs.readdirSync(dir);
  files.forEach((file) => {
    const filePath = path.join(dir, file);
    if (fs.statSync(filePath).isDirectory()) {
      filelist = readDirectoryRecursive(filePath, filelist);
    } else {
      filelist.push(filePath);
    }
  });
  return filelist;
}

export class ImageGenerator {
  public static readonly thumbnailMetaSizes = [
    { width: 1200, height: 630 },
    { width: 600, height: 315 },
    { width: 360, height: 189 },
    { width: 736, height: 414 },
  ];

  static generateName(filePath: string, size: imageSize, isWebp: boolean = false) {
    const extension = (isWebp ? ".webp" : path.extname(filePath));
    const justName = path.join(path.dirname(filePath), path.basename(filePath, path.extname(filePath)));
    return [justName, String(size.width), String(size.height)].join("-") + extension;
  }

  static async processImage(filepath: string, sizes: imageSize[], needWebp: boolean = false, removeOriginal: boolean = false) {
    const image = sharp(filepath);
    for (const size of sizes) {
      const resizedImage = image.clone().resize(size.width, size.height, { fit: 'cover', withoutEnlargement: true });
      for (const isWebp of (needWebp ? [true, false] : [false])) {
        const outPath = ImageGenerator.generateName(filepath, size, isWebp);
        await resizedImage.toFormat((isWebp ? "webp" : path.extname(filepath).slice(1) as any), { quality: 100, progressive: true }).withMetadata().toFile(outPath);
      }
    }
    if (removeOriginal) {
      fs.rm(filepath, () => { });
    }
  }
}