feat: add new features and improve image processing

- Introduced `fast-average-color` for enhanced color extraction.
- Added `react-router-dom` for improved routing capabilities.
- Enhanced error handling in image/folder APIs with more descriptive messages.
- Refactored image processing with `sharp` for better performance and flexibility.
- Implemented caching for image responses to optimize loading times.
- Added `ColorContext` for managing color states across components.
- Replaced deprecated `ParticleBackground` with `AuraBackground` for dynamic visuals.

These changes enhance UX, improve performance, and streamline image handling.

Author: minipuft

package-lock.json

@@ -48,6 +48,7 @@
     "classnames": "^2.5.1",
     "dotenv": "^16.4.7",
     "express": "^4.19.2",
+    "fast-average-color": "^9.5.0",
     "formidable": "^3.5.1",
     "framer-motion": "^11.5.4",
     "gl-matrix": "^3.4.3",

package.json

@@ -1,4 +1,3 @@
-import React from 'react';
 import Home from './pages/Home.js';
 import './styles/views.css';
 

src/App.tsx

@@ -1,15 +1,16 @@
 import express from 'express';
-import fs from 'fs';
+import { promises as fs } from 'fs';
 import path from 'path';
 
 const router = express.Router();
 
-router.get('/folders', (req, res) => {
+router.get('/folders', async (req, res) => {
   const mainDir = process.env.MAIN_DIRECTORY || path.join(process.cwd(), 'public', 'images');
 
   try {
-    const folders = fs
-      .readdirSync(mainDir, { withFileTypes: true })
+    const dirents = await fs.readdir(mainDir, { withFileTypes: true });
+
+    const folders = dirents
       .filter(dirent => dirent.isDirectory())
       .map(dirent => ({
         name: dirent.name,
@@ -19,7 +20,14 @@ router.get('/folders', (req, res) => {
     res.json(folders);
   } catch (error) {
     console.error('Error reading folders:', error);
-    res.status(500).json({ error: 'Failed to read folders' });
+    let errorMessage = 'Failed to read folders';
+    if (error instanceof Error && 'code' in error && error.code === 'ENOENT') {
+      errorMessage = `Directory not found: ${mainDir}`;
+      console.error(errorMessage);
+      res.status(404).json({ error: errorMessage });
+    } else {
+      res.status(500).json({ error: errorMessage });
+    }
   }
 });
 

src/api/folders.ts

@@ -1,30 +1,100 @@
 import express from 'express';
 import fs from 'fs';
 import path from 'path';
+import sharp from 'sharp';
 
 const router = express.Router();
 
-router.get('/image', (req, res) => {
-  const { folder, file } = req.query;
+// Basic Cache (Replace with a more robust solution if needed)
+const imageCache = new Map<string, Buffer>();
+const CACHE_MAX_SIZE = 100; // Example limit
+
+router.get('/image', async (req, res) => {
+  const { folder, file, w, h } = req.query;
   const mainDir = process.env.MAIN_DIRECTORY;
 
   if (!mainDir) {
-    return res.status(500).json({ error: 'MAIN_DIRECTORY is not set in environment variables' });
+    return res.status(500).json({ error: 'MAIN_DIRECTORY is not set' });
   }
 
   if (typeof folder !== 'string' || typeof file !== 'string') {
-    return res.status(400).json({ error: 'Invalid folder or file parameter' });
+    return res.status(400).json({ error: 'Invalid folder or file' });
   }
 
   const filePath = path.join(mainDir, folder, file);
 
-  if (fs.existsSync(filePath)) {
-    const imageBuffer = fs.readFileSync(filePath);
-    const contentType = getContentType(path.extname(file));
-    res.setHeader('Content-Type', contentType);
-    res.send(imageBuffer);
-  } else {
-    res.status(404).json({ error: 'Image not found' });
+  // --- Dimension Parsing ---
+  let targetWidth: number | undefined = parseInt(w as string, 10);
+  let targetHeight: number | undefined = parseInt(h as string, 10);
+  if (isNaN(targetWidth)) targetWidth = undefined;
+  if (isNaN(targetHeight)) targetHeight = undefined;
+
+  // Basic validation (adjust limits as needed)
+  if (targetWidth !== undefined && (targetWidth <= 0 || targetWidth > 4000)) {
+    return res.status(400).json({ error: 'Invalid width parameter' });
+  }
+  if (targetHeight !== undefined && (targetHeight <= 0 || targetHeight > 4000)) {
+    return res.status(400).json({ error: 'Invalid height parameter' });
+  }
+
+  try {
+    // Check if file exists before proceeding
+    if (!fs.existsSync(filePath)) {
+      return res.status(404).json({ error: 'Image not found' });
+    }
+
+    // --- Serve Original if no dimensions requested ---
+    if (targetWidth === undefined && targetHeight === undefined) {
+      const contentType = getContentType(path.extname(file));
+      res.setHeader('Content-Type', contentType);
+      // Use stream for potentially large originals
+      fs.createReadStream(filePath).pipe(res);
+      return; // Important: stop execution here
+    }
+
+    // --- Handle Resizing ---
+    const format = req.accepts('image/webp') ? 'webp' : 'jpeg'; // Prefer WebP
+    const cacheKey = `${filePath}_w${targetWidth || 'auto'}_h${targetHeight || 'auto'}_${format}`;
+
+    // Check cache
+    if (imageCache.has(cacheKey)) {
+      console.log(`Serving from cache: ${cacheKey}`);
+      res.setHeader('Content-Type', format === 'webp' ? 'image/webp' : 'image/jpeg');
+      return res.send(imageCache.get(cacheKey));
+    }
+
+    console.log(`Resizing: ${cacheKey}`);
+    const transformer = sharp(filePath).resize({
+      width: targetWidth,
+      height: targetHeight,
+      fit: 'inside', // Maintain aspect ratio within bounds
+      withoutEnlargement: true, // Don't upscale
+    });
+
+    // Set output format
+    if (format === 'webp') {
+      transformer.webp({ quality: 80 });
+    } else {
+      transformer.jpeg({ quality: 85, progressive: true }); // Progressive JPEG
+    }
+
+    // Get buffer, send, and cache
+    const outputBuffer = await transformer.toBuffer();
+
+    // Add to cache (simple eviction)
+    if (imageCache.size >= CACHE_MAX_SIZE) {
+      const firstKey = imageCache.keys().next().value;
+      if (firstKey) {
+        imageCache.delete(firstKey);
+      }
+    }
+    imageCache.set(cacheKey, outputBuffer);
+
+    res.setHeader('Content-Type', format === 'webp' ? 'image/webp' : 'image/jpeg');
+    res.send(outputBuffer);
+  } catch (error) {
+    console.error(`Error processing image ${filePath}:`, error);
+    res.status(500).json({ error: 'Error processing image' });
   }
 });
 

src/api/image.ts

@@ -1,8 +1,8 @@
 import express from 'express';
-import fs from 'fs';
+import { promises as fs } from 'fs';
 import path from 'path';
 import { ImageInfo } from '../types.js';
-import { isImageFile, getImageDimensions } from '../utils/imageUtils.js';
+import { getImageDimensions, isImageFile } from '../utils/imageUtils.js';
 
 const router = express.Router();
 
@@ -26,10 +26,15 @@ router.get('/images', async (req, res) => {
     res.status(200).json(images);
   } catch (error: any) {
     console.error('Error in getImages:', error);
-    if (error.message.includes('Folder not found')) {
+    if (error instanceof Error && 'code' in error && error.code === 'ENOENT') {
       res.status(404).json({ error: `Folder not found: ${folder}` });
+    } else if (error instanceof Error && error.message.includes('Access denied')) {
+      res.status(403).json({ error: error.message });
     } else {
-      res.status(500).json({ error: 'Failed to fetch images', details: error.message });
+      res.status(500).json({
+        error: 'Failed to fetch images',
+        details: error instanceof Error ? error.message : String(error),
+      });
     }
   }
 });
@@ -44,13 +49,18 @@ async function getImages(folder: string): Promise<ImageInfo[]> {
     throw new Error('Invalid folder path: Access denied');
   }
 
-  if (!fs.existsSync(imagesDirectory)) {
-    throw new Error(`Folder not found: ${folder}`);
+  let fileNames: string[];
+  try {
+    fileNames = await fs.readdir(imagesDirectory);
+  } catch (error) {
+    if (error instanceof Error && 'code' in error && error.code === 'ENOENT') {
+      throw new Error(`Folder not found: ${folder}`);
+    } else {
+      console.error(`Error reading directory ${imagesDirectory}:`, error);
+      throw new Error('Failed to read image directory');
+    }
   }
 
-  const fileNames = fs.readdirSync(imagesDirectory);
-
-  // First collect the promises with proper typing
   const imagePromises = fileNames.filter(isImageFile).map(async fileName => {
     try {
       const id = fileName.replace(/\.[^/.]+$/, '');
@@ -71,7 +81,6 @@ async function getImages(folder: string): Promise<ImageInfo[]> {
     }
   });
 
-  // Then resolve promises and filter out nulls with type guard
   const results = await Promise.all(imagePromises);
   const images: ImageInfo[] = results.filter((image): image is ImageInfo => image !== null);