feat: compress stuff in s3 bucket

bin/compress_s3.ts

@@ -0,0 +1,58 @@
+import { Client } from "npm:minio";
+import Jimp from 'npm:jimp';
+import { config } from "https://deno.land/x/dotenv/mod.ts";
+config({ export: true });
+
+interface MinioObject {
+  name: string;
+}
+
+// Retrieve MinIO details from environment variables
+const minioEndpoint = Deno.env.get("S3_ENDPOINT_URL") || "your-minio-endpoint";
+const minioAccessKey = Deno.env.get("S3_ACCESS_KEY") || "your-access-key";
+const minioSecretKey = Deno.env.get("S3_SECRET_ACCESS_KEY") || "your-secret-key";
+const minioBucketName = "silvester23";
+
+const minioClient = new Client({
+  endPoint: minioEndpoint,
+  accessKey: minioAccessKey,
+  secretKey: minioSecretKey,
+});
+
+
+const objects: MinioObject[] = [];
+
+const objectStream = minioClient.listObjects(minioBucketName);
+
+for await (const obj of objectStream) {
+  objects.push({
+    name: obj.name,
+  });
+}
+
+// Process and upload images
+for (const obj of objects) {
+  const pngFilePath = obj.name;
+  const jpgFilePath = `${pngFilePath.slice(0, -4)}.jpg`;
+
+  // Check if the PNG file exists and there is no corresponding JPG file
+  if (!objects.some((o) => o.name === jpgFilePath)) {
+    // Download the PNG file from MinIO
+    const pngBuffer = await minioClient.getObject(minioBucketName, pngFilePath);
+    console.log(`Downloaded ${pngFilePath} from MinIO`);
+
+    // Use Jimp to compress and convert the PNG to JPG
+    const image = await Jimp.read(`http://s3-api.app.max-richter.dev/silvester23/${pngFilePath}`);
+    // const image = await sharp(pngBuffer)
+    //   .jpeg({ mozjpeg: true })
+    //   .toBuffer()
+     const jpgBuffer = await image.quality(80).getBufferAsync(Jimp.MIME_JPEG);
+
+    // Upload the JPG buffer back to the same MinIO bucket
+    await minioClient.putObject(minioBucketName, jpgFilePath, jpgBuffer, {
+      'Content-Type': 'image/jpeg',
+    });
+
+    console.log(`Uploaded ${jpgFilePath} to MinIO`);
+  }
+}

package.json

@@ -9,7 +9,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
+    "format": "prettier --plugin-search-dir . --write .",
+    "compress-s3": "bun ./bin/compress_s3.ts"
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.3.1",

src/lib/components/ImageFrame.svelte

@@ -8,7 +8,10 @@
 
 <div class="frame" style="--frame: url(/frames/frame_0{int}.png)">
 	<img src="/hang.png" class="hang" />
-	<img {src} {alt} />
+	<picture>
+		<source srcset={src.replace('.png', '.jpg')} type="image/jpeg" />
+		<img {src} alt={src} />
+	</picture>
 </div>
 
 <style>

src/routes/gallery/+page.svelte

@@ -55,6 +55,7 @@
 		margin-left: 50px;
 		text-align: center;
 	}
+
 	p {
 		color: white;
 		font-family: Parisienne, cursive;