recipes: replace placeholder images with OKLAB dominant color backgrounds

Instead of generating/serving 20px placeholder images with blur CSS, extract
a perceptually accurate dominant color (Gaussian-weighted OKLAB average) and
use it as a solid background-color while the full image loads. Removes
placeholder image generation, blur CSS/JS, and placeholder directory references
across upload flows, API routes, service worker, and all card/hero components.
Adds admin bulk tool to backfill colors for existing recipes.
This commit is contained in:
2026-02-17 18:12:36 +01:00
parent 0ea09e424e
commit 53da9ad26d
21 changed files with 592 additions and 108 deletions

View File

@@ -26,7 +26,7 @@ export const POST: RequestHandler = async ({request, locals}) => {
if (oldShortName !== newShortName) {
// Rename image files in all three directories
const imageDirectories = ['full', 'thumb', 'placeholder'];
const imageDirectories = ['full', 'thumb'];
const staticPath = join(process.cwd(), 'static', 'rezepte');
for (const dir of imageDirectories) {