feat(og): capa do projeto como fundo da imagem de compartilhamento dos cases

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

lib/og-card.tsx

@@ -1,5 +1,6 @@
-import { readFileSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";
+import { getOgImagePath, PROJECT_VIDEO_IDS } from "./project-showcase";
 
 const brandMark = `data:image/png;base64,${readFileSync(
   join(process.cwd(), "public/brand/mark-dark.png"),
@@ -8,14 +9,25 @@ const brandMark = `data:image/png;base64,${readFileSync(
 export const OG_SIZE = { width: 1200, height: 630 } as const;
 export const OG_CONTENT_TYPE = "image/png";
 
+/** Capa 1200x630 gravada da página do projeto (public/videos/<id>/og.jpg), como data URI; `undefined` se não existir. */
+export function readProjectOgBackground(id: string): string | undefined {
+  if (!PROJECT_VIDEO_IDS.includes(id)) return undefined;
+  const path = join(process.cwd(), "public", getOgImagePath(id));
+  if (!existsSync(path)) return undefined;
+  return `data:image/jpeg;base64,${readFileSync(path).toString("base64")}`;
+}
+
 export function OgCard({
   eyebrow,
   title,
   description,
+  backgroundImage,
 }: {
   eyebrow: string;
   title: string;
   description: string;
+  /** Imagem de fundo (data URI), escurecida da esquerda para a direita para o texto continuar legível. */
+  backgroundImage?: string;
 }) {
   return (
     <div
@@ -32,6 +44,30 @@ export function OgCard({
         fontFamily: "Arial, sans-serif",
       }}
     >
+      {backgroundImage && (
+        <>
+          {/* biome-ignore lint/performance/noImgElement: o ImageResponse (satori) só desenha <img> */}
+          <img
+            src={backgroundImage}
+            alt=""
+            width={OG_SIZE.width}
+            height={OG_SIZE.height}
+            style={{ position: "absolute", top: 0, left: 0 }}
+          />
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: OG_SIZE.width,
+              height: OG_SIZE.height,
+              display: "flex",
+              background:
+                "linear-gradient(90deg, rgba(5,5,5,0.97) 0%, rgba(5,5,5,0.9) 48%, rgba(5,5,5,0.58) 100%)",
+            }}
+          />
+        </>
+      )}
       <img
         src={brandMark}
         alt="Evandro.dev.br"