fix: add open graph autogen image

2025-12-05 15:25:09 +03:00
parent f9bf48899c
commit 144f4bfad6
10 changed files with 1127 additions and 26 deletions
--- a/src/app/api/og/route.ts
+++ b/src/app/api/og/route.ts
@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from 'next/server';
+import puppeteer from 'puppeteer';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(req: NextRequest) {
+  const title = req.nextUrl.searchParams.get('title') ?? 'Default title';
+  const desc = req.nextUrl.searchParams.get('desc') ?? 'Default description';
+
+  const imageUrl = `${req.nextUrl.origin}/images/ogBg.png`;
+  const logoUrl = `${req.nextUrl.origin}/images/logo-dtr-white.png`;
+
+  const html = `
+    <html lang="ru-RU">
+      <body style="
+        margin: 0;
+        padding: 0;
+        display: flex;
+        width: 600px;
+        height: 315px;
+        background: #111;
+        color: white;
+        font-family: sans-serif;
+        position: relative;
+      ">
+        <img src="${imageUrl}" style="object-fit: cover; width:100%; height:100%; opacity:0.6; position:absolute; left:0; top:0;" />
+        <img src="${logoUrl}" style="width: 288px; height: 89px; position:absolute; left:20px; top:20px;" />
+        <div style="position: absolute; top: 110px; left: 280px; width:100%; height:100%;">
+        <h2 style="color: white; font-family: sans-serif; font-size: 42px">${title}</h2>
+        <p style="color: white; font-family: sans-serif; font-size: 24px">${desc}</p>
+      </div>
+      </body>
+    </html>
+    `;
+
+  // Запуск браузера
+  const browser = await puppeteer.launch({
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
+
+  const page = await browser.newPage();
+  await page.setContent(html, { waitUntil: 'networkidle0' });
+  await page.setViewport({ width: 600, height: 315 });
+  const screenshot = await page.screenshot({ type: 'png' });
+  await browser.close();
+
+  return new NextResponse(screenshot, {
+    headers: {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'max-age=60',
+    },
+  });
+}