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

Add custom images for sharing links on social media

Browse Source 
Adds an API endpoint `/api/og-image` to generate dynamic Open Graph and Twitter Card images using SVG, and updates `index.html` to include these meta tags.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 051a65da-1176-4478-a61c-c662f2a15536
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/051a65da-1176-4478-a61c-c662f2a15536/9NQBiz8
This commit is contained in:
sebastjanartic
2025-08-30 22:09:11 +00:00
parent 25562ab317
commit 5306fde0be
3 changed files with 126 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/routes.ts
+43
View File
@@ -646,6 +646,49 @@ export async function registerRoutes(app: Express): Promise<Server> {
res.sendFile(path.join(__dirname, "../client/public/ads.txt"));
});
// Open Graph image generation endpoint
app.get('/api/og-image', (req, res) => {
try {
// Generate SVG-based image for Open Graph
const svg = `<svg width="1200" height="630" 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:hsl(250, 50%, 15%);stop-opacity:1" />
<stop offset="100%" style="stop-color:hsl(240, 30%, 25%);stop-opacity:1" />
</linearGradient>
<linearGradient id="logoGradient" 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="1200" height="630" fill="url(#bgGradient)"/>
<polygon points="100,100 180,180 70,180" fill="#6366f1" opacity="0.1"/>
<polygon points="1000,200 1120,280 880,280" fill="#8b5cf6" opacity="0.08"/>
<polygon points="200,450 260,510 140,510" fill="#6366f1" opacity="0.12"/>
<polygon points="950,500 1040,590 860,590" fill="#8b5cf6" opacity="0.06"/>
<rect x="300" y="250" width="60" height="60" rx="15" fill="url(#logoGradient)"/>
<polygon points="321,265 321,295 342,280" fill="white"/>
<text x="400" y="330" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="white">go4.video</text>
<text x="400" y="380" font-family="Arial, sans-serif" font-size="32" fill="rgba(255,255,255,0.8)">Professional Video Streaming Platform</text>
<text x="400" y="430" font-family="Arial, sans-serif" font-size="24" fill="rgba(255,255,255,0.6)">Geschichte des Liedes • FOLX STADL • Premium Content</text>
</svg>`;
res.setHeader('Content-Type', 'image/svg+xml');
res.setHeader('Cache-Control', 'public, max-age=86400'); // Cache for 24 hours
res.send(svg);
} catch (error) {
console.error('Error generating OG image:', error);
res.status(500).send('Error generating image');
}
});
const httpServer = createServer(app);
return httpServer;
}