From bbcb932147b46891d72685590051b80e42fa40b4 Mon Sep 17 00:00:00 2001 From: Knight Date: Sat, 28 Dec 2024 11:22:02 -0500 Subject: [PATCH] Refactor image loading and processing in generateSite.js. Updated CSS for improved thumbnail and full image handling, enhancing loading transitions and aspect ratio management. Modified image serving logic to include progressive JPEG support and caching headers, ensuring better performance and user experience. --- generateSite.js | 45 ++++++++++++++++++++++++--------------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/generateSite.js b/generateSite.js index 04fb430..e9d3fcc 100644 --- a/generateSite.js +++ b/generateSite.js @@ -56,52 +56,45 @@ async function generateSite() { position: relative; width: 100%; height: 100%; - background: #000; /* Dark background while loading */ aspect-ratio: 1; } .progressive-image { position: absolute; top: 0; left: 0; - right: 0; - bottom: 0; - max-width: 100%; - max-height: 100%; - margin: auto; + width: 100%; + height: 100%; object-fit: contain; + transition: opacity 0.5s ease-in-out; } .thumbnail { filter: blur(10px); - transform: scale(1.02); /* Reduced scale to prevent edges showing */ + transform: scale(1.1); opacity: 1; - z-index: 1; /* Place thumbnail above full image while loading */ } .full-image { opacity: 0; - z-index: 2; /* Place full image on top when loaded */ } .full-image.loaded { opacity: 1; } - .full-image.loaded + .thumbnail { - opacity: 0; /* Hide thumbnail when full image is loaded */ - }
${image?.localPath ? `
+ ${image.metadata.description || ''} ${image.metadata.description || ''} - ${image.metadata.description || ''}
` : '

Image not available

'} @@ -161,11 +154,21 @@ async function serveStaticSite(port = 3000) { try { const Sharp = (await import('sharp')).default; const image = await Sharp(filePath) - .resize(parseInt(width)) - .jpeg({ quality: parseInt(quality) }) + .resize({ + width: parseInt(width), + height: parseInt(width), + fit: 'inside' + }) + .jpeg({ + quality: parseInt(quality), + progressive: true + }) .toBuffer(); - res.writeHead(200, { 'Content-Type': 'image/jpeg' }); + res.writeHead(200, { + 'Content-Type': 'image/jpeg', + 'Cache-Control': 'public, max-age=31536000' + }); res.end(image); return; } catch (error) {