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

Improve social image generation with a new modern design and gradient

Browse Source 
Update the /api/social-image endpoint to use a new SVG design with improved gradients, decorative elements, and text styling for social media previews.

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/HCAS0JG
This commit is contained in:
sebastjanartic 2025-09-03 10:54:54 +00:00
parent 78ff5e47f8
commit cdb43e1ff2
1 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
server/routes.ts
View File

@ -701,59 +701,69 @@ export async function registerRoutes(app: Express): Promise<Server> {
// Optimized social image endpoint
app.get('/api/social-image', async (req, res) => {
try {
// Generate a modern social image with Sharp
console.log('📸 Generating social image...');
// Generate a large, high-quality social image with Sharp
const width = 1200;
const height = 630;
// Create a gradient background with text overlay
// Create a more prominent social media image
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="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
<stop offset="30%" style="stop-color:#16213e;stop-opacity:1" />
<stop offset="70%" 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" />
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.9" />
</linearGradient>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<dropShadow dx="2" dy="4" stdDeviation="3" flood-color="#000000" flood-opacity="0.3"/>
</filter>
</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"/>
<!-- Large decorative triangles -->
<polygon points="0,0 300,0 150,150" fill="#ffffff" opacity="0.05"/>
<polygon points="900,0 1200,0 1200,300" fill="#ffffff" opacity="0.04"/>
<polygon points="0,330 200,630 0,630" fill="#ffffff" opacity="0.06"/>
<polygon points="1000,430 1200,630 1000,630" fill="#ffffff" opacity="0.05"/>
<!-- 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"/>
<!-- Large central logo -->
<rect x="100" y="215" width="200" height="200" rx="50" fill="url(#logoGradient)" filter="url(#shadow)"/>
<polygon points="150,265 150,365 250,315" 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>
<!-- Large prominent text -->
<text x="350" y="280" font-family="Arial, sans-serif" font-size="84" font-weight="bold" fill="white" filter="url(#shadow)">go4.video</text>
<text x="350" y="330" font-family="Arial, sans-serif" font-size="32" fill="rgba(255,255,255,0.95)" filter="url(#shadow)">Professional Video Streaming</text>
<text x="350" y="370" font-family="Arial, sans-serif" font-size="28" fill="rgba(255,255,255,0.8)">FOLX STADL • Geschichte des Liedes</text>
<text x="350" y="410" font-family="Arial, sans-serif" font-size="24" fill="rgba(255,255,255,0.7)">Premium Video Content Platform</text>
</svg>`;
// Convert SVG to optimized PNG
// Convert SVG to high-quality PNG with better compression
const buffer = await sharp(Buffer.from(svg))
.png({
quality: 85,
compressionLevel: 8,
quality: 90,
compressionLevel: 6,
progressive: true
})
.toBuffer();
console.log(`📸 Social image generated: ${buffer.length} bytes`);
res.setHeader('Content-Type', 'image/png');
res.setHeader('Cache-Control', 'public, max-age=3600'); // Cache 1 hour for easier updates
res.setHeader('Cache-Control', 'public, max-age=1800'); // Cache 30 minutes
res.setHeader('Content-Length', buffer.length);
res.setHeader('Access-Control-Allow-Origin', '*'); // Allow cross-origin for social media
res.send(buffer);
} catch (error) {
console.error('Error generating optimized social image:', error);
console.error('❌ Error generating social image:', error);
res.status(500).send('Error generating social image');
}
});