sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update social image generation to create a custom triangular design

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-09-03 14:18:45 +00:00
parent e7b4c6ddbb
commit 498ecc3c96
1 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
server/routes.ts
View File

@ -732,59 +732,59 @@ export async function registerRoutes(app: Express): Promise<Server> {
} }
}); });
// 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) => { app.get('/api/social-image', async (req, res) => {
try { try {
console.log('📸 Serving custom social image...'); console.log('📸 Generating beautiful social image...');
const path = await import('path'); // Create the beautiful triangular design directly
const fs = await import('fs'); const width = 1200;
const height = 630;
const imagePath = path.join(__dirname, '..', 'client', 'public', 'social-share-image.png'); const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
<defs>
// Check if custom image exists <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
if (fs.existsSync(imagePath)) { <stop offset="0%" style="stop-color:#9333ea;stop-opacity:1" />
console.log('✅ Custom social image found, serving...'); <stop offset="25%" style="stop-color:#7c3aed;stop-opacity:1" />
const imageBuffer = fs.readFileSync(imagePath); <stop offset="50%" style="stop-color:#6366f1;stop-opacity:1" />
<stop offset="75%" style="stop-color:#0ea5e9;stop-opacity:1" />
<stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
</linearGradient>
</defs>
res.setHeader('Content-Type', 'image/png'); <!-- Beautiful gradient background -->
res.setHeader('Content-Length', imageBuffer.length); <rect width="${width}" height="${height}" fill="url(#bgGradient)"/>
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 = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg"> <!-- Large triangular geometric patterns -->
<defs> <polygon points="0,0 400,0 200,200" fill="#ffffff" opacity="0.08"/>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <polygon points="800,0 1200,0 1000,300" fill="#ffffff" opacity="0.06"/>
<stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" /> <polygon points="0,400 300,630 0,630" fill="#ffffff" opacity="0.1"/>
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" /> <polygon points="900,330 1200,630 900,630" fill="#ffffff" opacity="0.07"/>
</linearGradient> <polygon points="400,200 600,400 200,400" fill="#ffffff" opacity="0.05"/>
</defs> <polygon points="600,0 1000,0 800,200" fill="#ffffff" opacity="0.04"/>
<rect width="${width}" height="${height}" fill="url(#bgGradient)"/> <!-- Central sparkle element -->
<text x="600" y="340" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="white" text-anchor="middle">go4.video</text> <polygon points="1150,480 1170,500 1150,520 1130,500" fill="#ffffff" opacity="0.9"/>
<text x="600" y="390" font-family="Arial, sans-serif" font-size="32" fill="rgba(255,255,255,0.9)" text-anchor="middle">Video-Welt von Folx TV</text>
</svg>`; <!-- Main title centered -->
<text x="600" y="330" font-family="Arial, sans-serif" font-size="88" font-weight="bold" fill="white" text-anchor="middle">go4.video</text>
</svg>`;
const buffer = await sharp(Buffer.from(svg)) const buffer = await sharp(Buffer.from(svg))
.png({ quality: 95, compressionLevel: 6 }) .png({ quality: 95, compressionLevel: 6, progressive: true })
.toBuffer(); .toBuffer();
res.setHeader('Content-Type', 'image/png'); console.log(`📸 Beautiful social image generated: ${buffer.length} bytes`);
res.setHeader('Content-Length', buffer.length);
res.setHeader('Cache-Control', 'public, max-age=3600'); res.setHeader('Content-Type', 'image/png');
res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Content-Length', buffer.length);
res.send(buffer); 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) { } catch (error) {
console.error('❌ Error serving social image:', error); console.error('❌ Error generating social image:', error);
res.status(500).send('Error serving social image'); res.status(500).send('Error generating social image');
} }
}); });