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

Improve social media sharing by updating image generation

Browse Source 
Updates social media image generation to use a new, dynamically generated image with a cache-busting parameter, ensuring up-to-date previews on platforms like WhatsApp and Viber. This includes enhancements to the SVG generation process using Sharp for optimized PNG output.

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/OdlP8Wj
This commit is contained in:
sebastjanartic
2025-09-03 10:47:45 +00:00
parent 3e2c11cf3a
commit 967aa3025c
3 changed files with 60 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/routes.ts
+44 -20
View File
@@ -701,32 +701,56 @@ export async function registerRoutes(app: Express): Promise<Server> {
// Optimized social image endpoint
app.get('/api/social-image', async (req, res) => {
try {
const fs = await import('fs');
const path = await import('path');
// Generate a modern social image with Sharp
const width = 1200;
const height = 630;
// Read the original social share image
const imagePath = path.join(process.cwd(), 'client/public/go4-video-social-share.png');
if (!fs.existsSync(imagePath)) {
return res.status(404).send('Social image not found');
}
const originalImage = fs.readFileSync(imagePath);
// Optimize with Sharp for WhatsApp/social media (under 300KB)
const optimizedBuffer = await sharp(originalImage)
.resize(1200, 630, { fit: 'cover' })
// Create a gradient background with text overlay
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:#2D1B69;stop-opacity:1" />
<stop offset="50%" style="stop-color:#6366f1;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
</linearGradient>
<linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.8" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="${width}" height="${height}" fill="url(#bgGradient)"/>
<!-- Decorative elements -->
<polygon points="100,100 200,200 50,200" fill="#ffffff" opacity="0.1"/>
<polygon points="1000,150 1100,250 900,250" fill="#ffffff" opacity="0.08"/>
<polygon points="200,400 300,500 100,500" fill="#ffffff" opacity="0.12"/>
<polygon points="950,450 1050,550 850,550" fill="#ffffff" opacity="0.06"/>
<!-- Main logo -->
<rect x="150" y="250" width="120" height="120" rx="30" fill="url(#logoGradient)"/>
<polygon points="185,285 185,335 235,310" fill="#6366f1"/>
<!-- Main text -->
<text x="320" y="290" font-family="Arial, sans-serif" font-size="64" font-weight="bold" fill="white">go4.video</text>
<text x="320" y="340" font-family="Arial, sans-serif" font-size="28" fill="rgba(255,255,255,0.9)">Professional Video Streaming Platform</text>
<text x="320" y="380" font-family="Arial, sans-serif" font-size="24" fill="rgba(255,255,255,0.7)">FOLX STADL • Geschichte des Liedes • Premium Content</text>
</svg>`;
// Convert SVG to optimized PNG
const buffer = await sharp(Buffer.from(svg))
.png({
quality: 80,
compressionLevel: 9,
progressive: true
quality: 85,
compressionLevel: 8,
progressive: true
})
.toBuffer();
res.setHeader('Content-Type', 'image/png');
res.setHeader('Cache-Control', 'public, max-age=86400'); // Cache for 24 hours
res.setHeader('Content-Length', optimizedBuffer.length);
res.send(optimizedBuffer);
res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache 1 hour for easier updates
res.setHeader('Content-Length', buffer.length);
res.send(buffer);
} catch (error) {
console.error('Error generating optimized social image:', error);