Add OG image support for WhatsApp/social media link previews

server/index.ts

@@ -3,9 +3,10 @@ import session from 'express-session';
 import cookieParser from 'cookie-parser';
 import cors from 'cors';
 import path from 'path';
+import fs from 'fs';
 import { fileURLToPath } from 'url';
 
-import { initializeDatabase } from './database.js';
+import { initializeDatabase, questionnaireOps } from './database.js';
 import authRoutes from './routes/auth.js';
 import adminRoutes from './routes/admin.js';
 import questionnaireRoutes from './routes/questionnaire.js';
@@ -63,7 +64,47 @@ if (isProduction) {
   const clientPath = path.join(__dirname, '../client');
   app.use(express.static(clientPath));
   
-  // SPA fallback
+  // Dynamic OG meta tags for questionnaire pages
+  app.get('/q/:slug', (req, res) => {
+    const questionnaire = questionnaireOps.findBySlug(req.params.slug);
+    const indexPath = path.join(clientPath, 'index.html');
+    
+    if (!questionnaire) {
+      res.sendFile(indexPath);
+      return;
+    }
+    
+    // Read the index.html template
+    let html = fs.readFileSync(indexPath, 'utf-8');
+    
+    // Build meta tags
+    const baseUrl = `${req.protocol}://${req.get('host')}`;
+    const pageUrl = `${baseUrl}/q/${questionnaire.slug}`;
+    const title = questionnaire.title;
+    const description = questionnaire.description || 'Activiteiten Inventaris - Voeg activiteiten toe en stem!';
+    
+    const ogTags = `
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="${pageUrl}" />
+    <meta property="og:title" content="${title}" />
+    <meta property="og:description" content="${description}" />
+    ${questionnaire.og_image ? `<meta property="og:image" content="${questionnaire.og_image}" />` : ''}
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="${title}" />
+    <meta name="twitter:description" content="${description}" />
+    ${questionnaire.og_image ? `<meta name="twitter:image" content="${questionnaire.og_image}" />` : ''}
+    `;
+    
+    // Insert OG tags before </head>
+    html = html.replace('</head>', `${ogTags}</head>`);
+    
+    // Update title
+    html = html.replace(/<title>.*?<\/title>/, `<title>${title} - Activiteiten Inventaris</title>`);
+    
+    res.send(html);
+  });
+  
+  // SPA fallback for other routes
   app.get('*', (_req, res) => {
     res.sendFile(path.join(clientPath, 'index.html'));
   });