Prod ready, heavily optimized images with automatic scripts

scripts/gen-blur-placeholders.mjs

@@ -0,0 +1,43 @@
+import sharp from 'sharp';
+import { readdir, writeFile } from 'fs/promises';
+import { join, extname, basename } from 'path';
+
+const INPUT_DIR = 'public/images';
+const OUTPUT_FILE = 'src/lib/blurPlaceholders.ts';
+const THUMB_WIDTH = 20;
+
+async function processDir(dir, prefix = '') {
+  const entries = await readdir(dir, { withFileTypes: true });
+  const result = {};
+
+  for (const entry of entries) {
+    if (entry.name === 'original') continue;
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      const sub = await processDir(fullPath, prefix + entry.name + '/');
+      Object.assign(result, sub);
+    } else if (['.webp', '.png', '.jpg'].includes(extname(entry.name).toLowerCase())) {
+      const buffer = await sharp(fullPath)
+        .resize(THUMB_WIDTH)
+        .webp({ quality: 30 })
+        .toBuffer();
+      const b64 = `data:image/webp;base64,${buffer.toString('base64')}`;
+      const key = prefix + basename(entry.name, extname(entry.name));
+      result[key] = b64;
+      console.log(`  ${key} → ${b64.length} chars`);
+    }
+  }
+  return result;
+}
+
+console.log('Generating blur placeholders...\n');
+const placeholders = await processDir(INPUT_DIR);
+
+const lines = Object.entries(placeholders)
+  .map(([k, v]) => `  "${k}": "${v}",`)
+  .join('\n');
+
+const output = `// Auto-generated by scripts/gen-blur-placeholders.mjs — do not edit manually\nexport const BLUR_PLACEHOLDERS: Record<string, string> = {\n${lines}\n};\n`;
+
+await writeFile(OUTPUT_FILE, output, 'utf8');
+console.log(`\nWrote ${Object.keys(placeholders).length} placeholders to ${OUTPUT_FILE}`);