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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/index.html
View File

@ -12,12 +12,17 @@
<meta property="og:type" content="website" />
<meta property="og:site_name" content="go4.video" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="/api/og-image" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<!-- Twitter Card meta podatki -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@go4video" />
<meta name="twitter:title" content="go4.video - Professional Video Streaming Platform" />
<meta name="twitter:description" content="go4.video - Stream and manage your videos with professional quality HLS streaming, adaptive bitrates, and advanced controls." />
<meta name="twitter:image" content="/api/og-image" />
<!-- Dodatni meta podatki za mobilne naprave -->
<meta name="application-name" content="go4.video" />

78
server/generate-og-image.js Normal file
View File

@ -0,0 +1,78 @@
const { createCanvas } = require('canvas');
const fs = require('fs');
const path = require('path');
function generateOGImage() {
const canvas = createCanvas(1200, 630);
const ctx = canvas.getContext('2d');
// Background gradient
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, 'hsl(250, 50%, 15%)');
gradient.addColorStop(1, 'hsl(240, 30%, 25%)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add geometric triangles
drawTriangle(ctx, 100, 100, 80, '#6366f1', 0.1);
drawTriangle(ctx, 1000, 200, 120, '#8b5cf6', 0.08);
drawTriangle(ctx, 200, 450, 60, '#6366f1', 0.12);
drawTriangle(ctx, 950, 500, 90, '#8b5cf6', 0.06);
// Main logo area
drawPlayButton(ctx, 300, 250, 60);
// Main title
ctx.fillStyle = 'white';
ctx.font = 'bold 72px Arial, sans-serif';
ctx.textAlign = 'left';
ctx.fillText('go4.video', 400, 330);
// Subtitle
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.font = '32px Arial, sans-serif';
ctx.fillText('Professional Video Streaming Platform', 400, 380);
// Bottom tagline
ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
ctx.font = '24px Arial, sans-serif';
ctx.fillText('Geschichte des Liedes • FOLX STADL • Premium Content', 400, 430);
return canvas.toBuffer('image/png');
}
function drawPlayButton(ctx, x, y, size) {
// Main circle
const gradient = ctx.createLinearGradient(x, y, x + size, y + size);
gradient.addColorStop(0, '#6366f1');
gradient.addColorStop(1, '#8b5cf6');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.roundRect(x, y, size, size, 15);
ctx.fill();
// Play triangle
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.moveTo(x + size * 0.35, y + size * 0.25);
ctx.lineTo(x + size * 0.35, y + size * 0.75);
ctx.lineTo(x + size * 0.7, y + size * 0.5);
ctx.closePath();
ctx.fill();
}
function drawTriangle(ctx, x, y, size, color, opacity) {
ctx.save();
ctx.globalAlpha = opacity;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + size, y + size * 0.8);
ctx.lineTo(x - size * 0.3, y + size);
ctx.closePath();
ctx.fill();
ctx.restore();
}
module.exports = { generateOGImage };

43
server/routes.ts
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;
}