spsays-training/app/api/og/route.tsx

import { ImageResponse } from "next/og";
import { readFile } from "node:fs/promises";
import { join } from "node:path";

export const runtime = "nodejs";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);

  const title = searchParams.get("title") || "Prabhupāda Says";
  const detail = searchParams.get("detail") || "";
  const quote = searchParams.get("quote") || "";

  // Truncate for readability and to prevent overflow
  const displayTitle = title.length > 60 ? title.slice(0, 57) + "..." : title;
  const displayDetail =
    detail.length > 80 ? detail.slice(0, 77) + "..." : detail;
  const displayQuote = quote.length > 220 ? quote.slice(0, 217) + "..." : quote;

  // Load the Prabhupāda image as base64
  const imgData = await readFile(
    join(process.cwd(), "public/images/og-left-prabhupada-reading.png"),
    "base64",
  );
  const imgSrc = `data:image/png;base64,${imgData}`;

  return new ImageResponse(
    <div
      style={{
        width: "1200",
        height: "630",
        display: "flex",
        flexDirection: "row",
        backgroundColor: "#faf5f0",
        fontFamily: "sans-serif",
        overflow: "hidden",
        position: "relative",
      }}
    >
      {/* Left side — image + branding */}
      <div
        style={{
          width: "460",
          height: "630",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "flex-end",
          position: "relative",
          flexShrink: 0,
        }}
      >
        {/* Decorative quote mark */}
        <div
          style={{
            position: "absolute",
            top: "30",
            left: "30",
            fontSize: "180",
            fontWeight: "900",
            color: "#e8b4b8",
            lineHeight: "1",
            display: "flex",
          }}
        >
          &#x201C;
        </div>

        {/* Prabhupāda image */}
        <img
          src={imgSrc}
          width="420"
          height="500"
          style={{
            objectFit: "contain",
            objectPosition: "bottom",
            marginBottom: "0",
          }}
        />

        {/* Branding at the bottom */}
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            paddingBottom: "24",
            marginTop: "-10",
          }}
        >
          <span
            style={{
              fontSize: "36",
              color: "#d4929a",
              fontStyle: "italic",
              fontWeight: "600",
            }}
          >
            Prabhupāda
          </span>
          <span
            style={{
              fontSize: "20",
              color: "#d4929a",
              fontWeight: "700",
              letterSpacing: "2",
              marginTop: "-2",
            }}
          >
            says
          </span>
        </div>
      </div>

      {/* Right side — content */}
      <div
        style={{
          flex: "1",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          padding: "50 60 50 30",
          gap: "16",
        }}
      >
        {/* Title */}
        <div
          style={{
            fontSize: "44",
            fontWeight: "800",
            color: "#2d2418",
            lineHeight: "1.15",
            display: "flex",
            overflow: "hidden",
            maxHeight: "102",
          }}
        >
          {displayTitle}
        </div>

        {/* Detail (chapter, verse, etc.) */}
        {displayDetail && (
          <div
            style={{
              fontSize: "22",
              fontWeight: "600",
              color: "#5a4a3a",
              lineHeight: "1.3",
              display: "flex",
              overflow: "hidden",
              maxHeight: "30",
            }}
          >
            {displayDetail}
          </div>
        )}

        {/* Quote text */}
        {displayQuote && (
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              marginTop: "16",
              overflow: "hidden",
              maxHeight: "180",
            }}
          >
            <div
              style={{
                fontSize: "24",
                color: "#3d3228",
                lineHeight: "1.5",
                display: "flex",
                overflow: "hidden",
              }}
            >
              {displayQuote}
            </div>
          </div>
        )}

        {/* Read more */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "6",
            marginTop: "16",
          }}
        >
          <span
            style={{
              fontSize: "18",
              fontWeight: "700",
              color: "#5a4a3a",
            }}
          >
            Read more at
          </span>
          <span
            style={{
              fontSize: "18",
              fontWeight: "700",
              color: "#c47a5a",
            }}
          >
            prabhupadasays.org
          </span>
        </div>
      </div>
    </div>,
    {
      width: 1200,
      height: 630,
    },
  );
}