From e232017e8278c858c541ae8478b6fe5840481050 Mon Sep 17 00:00:00 2001
From: webbrain-one <295484252+webbrain-one@users.noreply.github.com>
Date: Sat, 8 Aug 2026 00:19:23 +0300
Subject: [PATCH] feat: auto-generate social images

Add dynamic OG image generation via a new /api/og route.
Update /[slug].tsx to reference the API for social sharing
and add required dependencies.

Fixes #38
---
 package.json           |  2 ++
 pages/api/og.ts        | 38 ++++++++++++++++++++++++++++++++++++++
 pages/words/[slug].tsx |  8 ++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 pages/api/og.ts

diff --git a/package.json b/package.json
index 4ce1c9a..e471acd 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
     "@plaiceholder/next": "^2.2.0",
     "@vercel/analytics": "^1.3.1",
     "animejs": "^3.2.1",
+    "@resvg/resvg-js": "^2.6.0",
+    "satori": "^0.10.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.13.0",
     "eslint-config-next": "^14.2.15",
diff --git a/pages/api/og.ts b/pages/api/og.ts
new file mode 100644
index 0000000..1672148
--- /dev/null
+++ b/pages/api/og.ts
@@ -0,0 +1,38 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { Resvg } from '@resvg/resvg-js'
+import satori from 'satori'
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { title, description } = req.query as { title: string; description: string }
+
+  const svg = await satori(
+    <div
+      style={{
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        background: '#1c1917',
+        padding: '60px',
+        fontFamily: 'sans-serif',
+      }}
+    >
+      <h1 style={{ fontSize: '64px', color: '#f5f5f4', fontWeight: 700, margin: 0 }}>{title}</h1>
+      <p style={{ fontSize: '32px', color: '#d6d3d1', marginTop: '20px' }}>{description}</p>
+    </div>,
+    {
+      width: 1200,
+      height: 630,
+      fonts: [],
+    }
+  )
+
+  const resvg = new Resvg(svg)
+  const pngData = resvg.render()
+  const pngBuffer = pngData.asPng()
+
+  res.setHeader('Content-Type', 'image/png')
+  res.status(200).send(pngBuffer)
+}
diff --git a/pages/words/[slug].tsx b/pages/words/[slug].tsx
index 5187db9..ec3081f 100644
--- a/pages/words/[slug].tsx
+++ b/pages/words/[slug].tsx
@@ -24,6 +24,14 @@ function WordPage({
         openGraph={{
           title,
           description,
+          images: [
+            {
+              url: `/api/og?title=${encodeURIComponent(title)}&description=${encodeURIComponent(description)}`,
+              width: 1200,
+              height: 630,
+              alt: title,
+            },
+          ],
         }}
       />