enhancement: pre-commit image compression

.husky/pre-commit

@@ -1 +1,2 @@
 npm run lint
+npm run pre-commit-image

README.md

@@ -28,28 +28,27 @@ npm install
 npm run dev
 ```
 
-### Public images and image compression
+### Image compression
 
-Place public images in `public_images` folder.
+There are 2 ways to compress image images
 
-For compressing image,
+- Double click on `image-compression.bat` or `image-compression.sh` to run image compression app. You can drag and drop files to convert images.
+  You can also run image compression app with: `npm run image`
+- Commiting will compress image and delete origin source on pre-commit with husky. But this won't be converted until you commit. And it creates extra commit.
 
-```
-npm run compress-image
-```
+## Publishing Articles
 
-⚠️ Most of time you wouldn't need to run this. This is going to remove old images and create new compressed images.
+1. There are 2 ways to add an image and the added image will turn into a `.avif` file (used for SEO). Optimal dimensions are 1280x720.
 
-## Publishing Articles
+- Double click on image-compression.bat or image-compression.sh to run image compression app. You can drag and drop files to convert images. You can also run image compression app with: `npm run image`
+- Add an image inside the `public/img/news` folder. Commiting will compress image and delete origin source on pre-commit with husky. But this won't be converted until you commit. And it creates extra commit.
 
-1. Add an image inside the `public_images/news` folder. Optimal dimensions are 1280x720.
-2. Run `npm run compress-image`. This will compress your png image into a `.avif` file (used for SEO).
-3. Create a new markdown file inside `content/news` folder. The file name must follow the guidelines for optimal SEO results:
+2. Create a new markdown file inside `content/news` folder. The file name must follow the guidelines for optimal SEO results:
    - File name must be kebab case.
    - File name must all be lowercase
-4. Paste the article template (see below) inside the file
-5. Write your content
-6. Create a pull request and get it merged
+3. Paste the article template (see below) inside the file
+4. Write your content
+5. Create a pull request and get it merged
 
 ```shell
 ---
@@ -72,7 +71,7 @@ Your content here...
 
 ### Adding author images
 
-Follow steps 1 - 2 in the instructions above but place your avatar inside the `public_images/authors` folder.
+Follow steps 1 in the instructions above but place your avatar inside the `public_images/authors` folder.
 
 ### Mirrorlist Automation
 

package.json

@@ -12,6 +12,7 @@
     "format-check": "eslint \"./**/*.{js,vue}\"",
     "typecheck": "tsc --noEmit -p tsconfig.json --composite false",
     "image": "node image-compression.js",
+    "pre-commit-image": "node pre-commit-image-compression.js",
     "prepare": "husky"
   },
   "dependencies": {

pre-commit-image-compression.js

@@ -9,13 +9,24 @@ function getGitChanges()
 {
     return new Promise((resolve, reject) =>
     {
-        exec("git diff --name-only --diff-filter=AM", (err, stdout, stderr) =>
+        exec("git status --porcelain", (err, stdout, stderr) =>
         {
             if (err)
             {
-                return reject(`Error getting git changes: ${ stderr }`);
+                return reject(`Error getting git status: ${ stderr }`);
             }
-            const files = stdout.split("\n").filter(file => file.trim() !== "");
+
+            const files = stdout.split("\n")
+                .filter(line =>
+                {
+                    const fileStatus = line.trim().split(" ")[0];
+                    const filePath = line.slice(3).trim().replace(/['"]/g, "");
+                    const ext = path.extname(filePath).toLowerCase();
+
+                    return (fileStatus === "M" || fileStatus === "A" || fileStatus === "??") && supportedFormats.includes(ext);
+                })
+                .map(line => line.slice(3).trim().replace(/['"]/g, ""));
+
             resolve(files);
         });
     });
@@ -51,7 +62,7 @@ async function processGitChanges()
     try
     {
         const changes = await getGitChanges();
-        console.log("Changed files:", changes);
+        console.log("Image to process:", changes);
 
         for (const file of changes)
         {