tipilan/scripts/gen-blur-placeholders.mjs

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}`);