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) => {
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 = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#9333ea;stop-opacity:1" />
<stop offset="25%" style="stop-color:#7c3aed;stop-opacity:1" />
<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');
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;
<!-- Beautiful gradient background -->
<rect width="${width}" height="${height}" fill="url(#bgGradient)"/>
const svg = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="${width}" height="${height}" fill="url(#bgGradient)"/>
<text x="600" y="340" font-family="Arial, sans-serif" font-size="80" font-weight="bold" fill="white" text-anchor="middle">go4.video</text>
<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>`;
<!-- Large triangular geometric patterns -->
<polygon points="0,0 400,0 200,200" fill="#ffffff" opacity="0.08"/>
<polygon points="800,0 1200,0 1000,300" fill="#ffffff" opacity="0.06"/>
<polygon points="0,400 300,630 0,630" fill="#ffffff" opacity="0.1"/>
<polygon points="900,330 1200,630 900,630" fill="#ffffff" opacity="0.07"/>
<polygon points="400,200 600,400 200,400" fill="#ffffff" opacity="0.05"/>
<polygon points="600,0 1000,0 800,200" fill="#ffffff" opacity="0.04"/>
<!-- Central sparkle element -->
<polygon points="1150,480 1170,500 1150,520 1130,500" fill="#ffffff" opacity="0.9"/>
<!-- 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))
.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');
}
});