From d575fd58e253d24029414a1f7352aa8d2661dc46 Mon Sep 17 00:00:00 2001 From: Knight Date: Sat, 28 Dec 2024 10:58:05 -0500 Subject: [PATCH] Implement progressive image loading in generateSite.js and enhance image serving with quality and width parameters. Added sharp dependency for image processing. Updated image display logic to improve user experience. --- generateSite.js | 70 ++++++++++++++++++++++++++++++++++++++++++++----- package.json | 3 ++- 2 files changed, 66 insertions(+), 7 deletions(-) diff --git a/generateSite.js b/generateSite.js index 8016862..4eb8929 100644 --- a/generateSite.js +++ b/generateSite.js @@ -47,13 +47,48 @@ async function generateSite() { ${image.description || `Image ${i + 1}`} +
- ${image?.localPath || 'No image URL available' - ? `${image.metadata.description || ''}` - : '

Image not available

' - } + ${image?.localPath ? ` +
+ ${image.metadata.description || ''} + ${image.metadata.description || ''} +
+ ` : '

Image not available

'} ${image.description ? `

${image.description}

` : ''}
← @@ -86,11 +121,34 @@ async function generateSite() { async function serveStaticSite(port = 3000) { const server = http.createServer(async (req, res) => { try { + // Parse URL and query parameters + const url = new URL(req.url, `http://localhost:${port}`); + const quality = url.searchParams.get('quality'); + const width = url.searchParams.get('width'); + // Convert URL to filesystem path let filePath; - if (req.url.startsWith('/images/')) { + if (url.pathname.startsWith('/images/')) { // Serve directly from images folder - filePath = req.url.slice(1); // Remove leading slash + filePath = url.pathname.slice(1); // Remove leading slash + + // If quality parameter is present, serve a resized version + if (quality && width && (filePath.endsWith('.jpg') || filePath.endsWith('.jpeg') || filePath.endsWith('.png'))) { + try { + const Sharp = (await import('sharp')).default; + const image = await Sharp(filePath) + .resize(parseInt(width)) + .jpeg({ quality: parseInt(quality) }) + .toBuffer(); + + res.writeHead(200, { 'Content-Type': 'image/jpeg' }); + res.end(image); + return; + } catch (error) { + console.error('Error processing image:', error); + // Fall through to serve original image + } + } } else { // Serve from public folder filePath = path.join('public', req.url === '/' ? 'index.html' : req.url); diff --git a/package.json b/package.json index 4ead12a..35504ad 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "axios": "^1.7.9", - "node-fetch": "^3.3.2" + "node-fetch": "^3.3.2", + "sharp": "^0.32.0" } }