The Photo Gallery Nobody Asked For (But Everyone Needs)

#!/usr/bin/env node

import { exec } from 'child_process';
import { promisify } from 'util';
import fs from 'fs/promises';
import path from 'path';

const execAsync = promisify(exec);

const PHOTOS_DIR = './public/photos';
const OPTIMIZED_DIR = './public/photos/_optimized';

// All supported formats
const SUPPORTED_FORMATS = [
  '.arw', '.cr2', '.nef', '.dng',  // Camera RAW
  '.jpeg', '.jpg', '.png', '.heic', // Standard
];

// Responsive sizes
const SIZES = [
  { name: '400w', width: 400, quality: 88 },
  { name: '800w', width: 800, quality: 90 },
  { name: '1200w', width: 1200, quality: 92 },
  { name: 'full', width: 2400, quality: 95 },
];

async function getPhotoFiles() {
  const files = await fs.readdir(PHOTOS_DIR);

  const photos = files
    .filter(file => {
      const ext = path.extname(file).toLowerCase();
      return SUPPORTED_FORMATS.includes(ext);
    })
    .map(file => ({
      path: path.join(PHOTOS_DIR, file),
      name: path.basename(file, path.extname(file)),
      ext: path.extname(file).toLowerCase(),
      number: parseInt(file.match(/\d+/)?.[0] || '0'),
    }));

  // Prefer JPEG over RAW (more on this later!)
  const photoMap = new Map();
  const preferredFormats = ['.jpeg', '.jpg', '.png'];

  for (const photo of photos) {
    const existing = photoMap.get(photo.number);

    if (!existing) {
      photoMap.set(photo.number, photo);
    } else {
      const newIsPreferred = preferredFormats.includes(photo.ext);
      const existingIsPreferred = preferredFormats.includes(existing.ext);

      if (newIsPreferred && !existingIsPreferred) {
        photoMap.set(photo.number, photo);
      }
    }
  }

  return Array.from(photoMap.values());
}

async function optimizePhoto(photo) {
  console.log(`Processing: ${path.basename(photo.path)}`);

  await fs.mkdir(OPTIMIZED_DIR, { recursive: true });

  for (const size of SIZES) {
    const outputPath = path.join(
      OPTIMIZED_DIR,
      `${photo.number}-${size.name}.webp`
    );

    // ImageMagick command
    const command = [
      'magick',
      `"${photo.path}[0]"`,  // [0] = first frame (for RAW/animated formats)
      '-auto-orient',         // Respect EXIF rotation
      `-resize ${size.width}x`, // Maintain aspect ratio
      '-define webp:method=6', // Highest quality encoding
      '-define webp:alpha-quality=100',
      `-quality ${size.quality}`,
      `"${outputPath}"`
    ].join(' ');

    await execAsync(command);

    const stats = await fs.stat(outputPath);
    const sizeKB = (stats.size / 1024).toFixed(1);
    console.log(`  ✓ ${size.name}: ${sizeKB} KB`);
  }
}

async function main() {
  const photos = await getPhotoFiles();
  console.log(`Found ${photos.length} photos\n`);

  for (const photo of photos) {
    await optimizePhoto(photo);
  }

  console.log('\n✓ Optimization complete!');
}

main().catch(console.error);

{
  "scripts": {
    "photos:optimize": "node scripts/optimize-photos.js"
  }
}

---
// Load photo metadata
const metadataResponse = await fetch('/photos/photos-metadata.json');
const metadata = await metadataResponse.json();

// Get all photos
const photoFiles = Array.from({ length: 31 }, (_, i) => `${i + 1}.jpeg`);

const photos = photoFiles.map((filename, index) => {
  const baseNum = index + 1;
  const meta = metadata[filename] || {};

  return {
    number: baseNum,
    alt: meta.alt || `Photo ${baseNum}`,
    location: meta.location || null,
    date: meta.date || null,
    sizes: {
      small: `/photos/_optimized/${baseNum}-400w.webp`,
      medium: `/photos/_optimized/${baseNum}-800w.webp`,
      large: `/photos/_optimized/${baseNum}-1200w.webp`,
      full: `/photos/_optimized/${baseNum}-full.webp`,
    }
  };
}).reverse(); // Newest first
---

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
  {photos.map((photo) => (
    <div class="aspect-square cursor-pointer">
      <picture>
        <source
          srcset={`${photo.sizes.small} 400w, ${photo.sizes.medium} 800w, ${photo.sizes.large} 1200w, ${photo.sizes.full} 1600w`}
          sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
          type="image/webp"
        />
        <img
          src={photo.sizes.medium}
          alt={photo.alt}
          loading="lazy"
          class="w-full h-full object-cover"
        />
      </picture>
    </div>
  ))}
</div>

{
  "1.jpeg": {
    "alt": "Golden hour over the Pacific",
    "location": "Malibu, California",
    "date": "2025-01-10"
  },
  "18.jpeg": {
    "alt": "Night street photography",
    "location": "Tokyo, Japan",
    "date": "2024-12-15"
  }
}

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Install ImageMagick
        run: sudo apt-get install -y imagemagick

      - name: Optimize photos
        run: npm run photos:optimize

      - name: Build site
        run: npm run build

      - name: Deploy
        run: npm run deploy