From 498ecc3c966c48b6c6594103322d8d93ccef76cd Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Wed, 3 Sep 2025 14:18:45 +0000 Subject: [PATCH] Update social image generation to create a custom triangular design Replaces static image serving with dynamic SVG generation for social sharing previews, incorporating a gradient background and geometric patterns. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/gjpMN2A --- server/routes.ts | 86 ++++++++++++++++++++++++------------------------ 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/server/routes.ts b/server/routes.ts index cba49c5..a6ceddc 100644 --- a/server/routes.ts +++ b/server/routes.ts @@ -732,59 +732,59 @@ export async function registerRoutes(app: Express): Promise { } }); - // Custom social image endpoint - serves your beautiful uploaded image + // Custom social image endpoint - directly serve the beautiful triangular image app.get('/api/social-image', async (req, res) => { try { - console.log('📸 Serving custom social image...'); + console.log('📸 Generating beautiful social image...'); - const path = await import('path'); - const fs = await import('fs'); + // Create the beautiful triangular design directly + const width = 1200; + const height = 630; - const imagePath = path.join(__dirname, '..', 'client', 'public', 'social-share-image.png'); - - // Check if custom image exists - if (fs.existsSync(imagePath)) { - console.log('✅ Custom social image found, serving...'); - const imageBuffer = fs.readFileSync(imagePath); + const svg = ` + + + + + + + + + - res.setHeader('Content-Type', 'image/png'); - res.setHeader('Content-Length', imageBuffer.length); - res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache for 1 hour - res.setHeader('Access-Control-Allow-Origin', '*'); // Allow cross-origin for social media - res.send(imageBuffer); - } else { - console.log('⚠️ Custom image not found, generating fallback...'); - // Fallback to generated image if custom not found - const width = 1200; - const height = 630; + + - const svg = ` - - - - - - - - - go4.video - Video-Welt von Folx TV - `; + + + + + + + + + + + + + go4.video + `; - const buffer = await sharp(Buffer.from(svg)) - .png({ quality: 95, compressionLevel: 6 }) - .toBuffer(); + const buffer = await sharp(Buffer.from(svg)) + .png({ quality: 95, compressionLevel: 6, progressive: true }) + .toBuffer(); - res.setHeader('Content-Type', 'image/png'); - res.setHeader('Content-Length', buffer.length); - res.setHeader('Cache-Control', 'public, max-age=3600'); - res.setHeader('Access-Control-Allow-Origin', '*'); - res.send(buffer); - } + console.log(`📸 Beautiful social image generated: ${buffer.length} bytes`); + + res.setHeader('Content-Type', 'image/png'); + res.setHeader('Content-Length', buffer.length); + res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache for 1 hour + res.setHeader('Access-Control-Allow-Origin', '*'); // Allow cross-origin for social media + res.send(buffer); } catch (error) { - console.error('❌ Error serving social image:', error); - res.status(500).send('Error serving social image'); + console.error('❌ Error generating social image:', error); + res.status(500).send('Error generating social image'); } });