From c3b255086e72f0b670de94b14ce1c8135a0659a0 Mon Sep 17 00:00:00 2001
From: Rengga Prakoso Nugroho <rengganugroho@teknologipendidikan.or.id>
Date: Tue, 31 Dec 2024 01:02:02 +0700
Subject: [PATCH] build: add tooling for convert images to webp format using
 sharp

---
 package.json             |  3 +-
 tools/convert-to-webp.js | 83 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 tools/convert-to-webp.js

diff --git a/package.json b/package.json
index b5b26f7..f6c264f 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "start": "next start",
     "lint": "next lint",
     "type-check": "tsc --noEmit",
-    "type-check:watch": "tsc --noEmit --watch"
+    "type-check:watch": "tsc --noEmit --watch",
+    "image:to:webp": "node ./scripts/image-to-webp.js"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
diff --git a/tools/convert-to-webp.js b/tools/convert-to-webp.js
new file mode 100644
index 0000000..0dede87
--- /dev/null
+++ b/tools/convert-to-webp.js
@@ -0,0 +1,83 @@
+const fs = require("fs");
+const path = require("path");
+const sharp = require("sharp");
+
+/**
+ * Directory containing the images to be converted.
+ * Adjust this path to point to your input directory.
+ */
+const inputDir = path.resolve(__dirname, "../assets");
+
+/**
+ * Directory where the converted WebP images will be saved.
+ * Adjust this path to point to your desired output directory.
+ */
+const outputDir = path.resolve(__dirname, "../assets");
+
+/**
+ * Supported image formats for conversion.
+ * Only files with these extensions will be processed.
+ */
+const supportedFormats = [
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".tiff",
+  ".gif",
+  ".svg",
+  ".avif",
+  ".heif",
+];
+
+/**
+ * Create the output directory if it doesn't exist.
+ */
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir);
+}
+
+/**
+ * Function to convert an image to WebP format.
+ * @param {string} inputPath - The path to the input image file.
+ * @param {string} outputPath - The path to save the converted WebP file.
+ */
+const convertToWebP = async (inputPath, outputPath) => {
+  try {
+    await sharp(inputPath).webp({ quality: 80 }).toFile(outputPath);
+    console.log(`Converted: ${inputPath} -> ${outputPath}`);
+  } catch (error) {
+    console.error(`Error converting ${inputPath}:`, error);
+  }
+};
+
+/**
+ * Read all files in the input directory and process each supported image file.
+ */
+fs.readdir(inputDir, (err, files) => {
+  if (err) {
+    console.error("Error reading input directory:", err);
+    return;
+  }
+
+  files.forEach((file) => {
+    const ext = path.extname(file).toLowerCase();
+    if (supportedFormats.includes(ext)) {
+      const inputPath = path.join(inputDir, file);
+      const outputPath = path.join(outputDir, `${path.parse(file).name}.webp`);
+
+      // Convert each image to WebP
+      convertToWebP(inputPath, outputPath);
+    } else {
+      console.log(`Skipping unsupported file: ${file}`);
+    }
+  });
+});
+
+/**
+ * How to run this script:
+ * 1. Ensure you have Node.js installed on your machine.
+ * 2. Install the required dependencies by running: npm install sharp
+ * 3. Adjust the inputDir and outputDir variables to point to your directories.
+ * 4. Save this script to a file, e.g., convert-to-webp.js.
+ * 5. Run the script using the command: node convert-to-webp.js
+ */