Implement progress bar

Author: limzykenneth

package-lock.json

@@ -77,6 +77,7 @@
     "html-minifier-terser": "^7.2.0",
     "is-absolute-url": "^4.0.1",
     "jsdom": "^24.0.0",
+    "log-update": "^6.1.0",
     "marked": "^4.0.10",
     "msw": "^2.2.9",
     "path": "^0.12.7",

package.json

@@ -4,6 +4,7 @@ import sharp from "sharp";
 import { writeFile, readFile } from 'node:fs/promises';
 import { minify } from 'html-minifier-terser';
 import { optimize } from 'svgo';
+import logUpdate from 'log-update';
 
 export default () => {
 	return {
@@ -12,47 +13,85 @@ export default () => {
 			"astro:build:done": async ({dir}: any) => {
 				const dirPath = dir.pathname;
 				const files = await fg(join(dirPath, "**/*.(webp|gif|jpg|jpeg|png|html|svg)"));
+				let processing = 0;
+				let writing = 0;
+				let total = 0;
+
+
+				function logMessage(){
+					const processingProgress = 1 - (processing/total);
+					const writingProgress = 1 - (writing/total);
+					const processingBar = `[${'='.repeat(Math.round(processingProgress * 20))}${' '.repeat(20 - Math.round(processingProgress * 20))}]`;
+					const writingBar = `[${'='.repeat(Math.round(writingProgress * 20))}${' '.repeat(20 - Math.round(writingProgress * 20))}]`;
+
+					logUpdate(
+`
+Processing ${processingBar} ${Math.floor(processingProgress * 100)}% (${total - processing}/${total})
+Writing    ${writingBar} ${Math.floor(writingProgress * 100)}% (${total - writing}/${total})
+`
+					);
+				}
 
 				const promises = files.map(async (file) => {
 					if(extname(file) === ".webp"){
 						const data = await sharp(file, {animated: true})
 							.webp({
 								effort: 6
 							})
-							.toBuffer()
-						console.log(`Processed: ${file}`);
+							.toBuffer();
+
+						processing--;
+						logMessage();
+						// console.log(`Processed: ${file}`);
 						await writeFile(file, data);
-						console.log(`Written: ${file}`);
+						// console.log(`Written: ${file}`);
+						writing--;
+						logMessage();
 
 					} else if(extname(file) === ".gif") {
 						const data = await sharp(file, {animated: true})
 							.gif({
 								effort: 10
 							})
-							.toBuffer()
-						console.log(`Processed: ${file}`);
+							.toBuffer();
+
+						processing--;
+						logMessage();
+						// console.log(`Processed: ${file}`);
 						await writeFile(file, data);
-						console.log(`Written: ${file}`);
+						// console.log(`Written: ${file}`);
+						writing--;
+						logMessage();
 
 					} else if(extname(file) === ".jpg" || extname(file) === ".jpeg") {
 						const data = await sharp(file)
 							.jpeg({
 							})
-							.toBuffer()
-						console.log(`Processed: ${file}`);
+							.toBuffer();
+
+						processing--;
+						logMessage();
+						// console.log(`Processed: ${file}`);
 						await writeFile(file, data);
-						console.log(`Written: ${file}`);
+						// console.log(`Written: ${file}`);
+						writing--;
+						logMessage();
 
 					} else if(extname(file) === ".png") {
 						const data = await sharp(file)
 							.png({
 								compressionLevel: 9,
 								effort: 10
 							})
-							.toBuffer()
-						console.log(`Processed: ${file}`);
+							.toBuffer();
+
+						processing--;
+						logMessage();
+						// console.log(`Processed: ${file}`);
 						await writeFile(file, data);
-						console.log(`Written: ${file}`);
+						// console.log(`Written: ${file}`);
+						writing--;
+						logMessage();
 
 					} else if(extname(file) === ".html") {
 						const text = await readFile(file, {encoding: "utf8"});
@@ -142,9 +181,14 @@ export default () => {
 								useShortDoctype: false,
 							});
 
-							console.log(`Processed: ${file}`);
+							processing--;
+							logMessage();
+							// console.log(`Processed: ${file}`);
 							await writeFile(file, data);
-							console.log(`Written: ${file}`);
+							// console.log(`Written: ${file}`);
+							writing--;
+							logMessage();
+
 						}catch(err){
 							console.warn(err);
 						}
@@ -161,13 +205,24 @@ export default () => {
 							},
 							plugins: ["preset-default"],
 						})
+						processing--;
+						logMessage();
 
-						console.log(`Processed: ${file}`);
+						// console.log(`Processed: ${file}`);
 						await writeFile(file, data);
-						console.log(`Written: ${file}`);
+						// console.log(`Written: ${file}`);
+
+						writing--;
+						logMessage();
 					}
 				});
 
+				processing = promises.length;
+				writing = promises.length;
+				total = promises.length;
+
+				logMessage();
+
 				await Promise.all(promises);
 			}
 		}