Dynamic Card Previews

Copyexport const runtime = "edge";
 
export async function GET(
  req: NextRequest,
  props: { params: Promise<{ seed?: string[] }> },
) {
  const params = await props.params;
  const origin = req.headers.get("origin");
  // Validate the origin header and set CORS headers accordingly
  const corsHeaders = {
    "Access-Control-Allow-Methods": "GET",
    "Access-Control-Allow-Headers": "Content-Type",
  };
 
  if (origin && origin.endsWith(".dub.co")) {
    corsHeaders["Access-Control-Allow-Origin"] = origin;
  }
 
  const { searchParams } = new URL(req.url);
  const seed = params.seed?.[0] ?? searchParams.get("seed");
  const theme = getAvatarTheme(seed);

Copyreturn new ImageResponse(
  (
    <div
      tw="flex items-center justify-center w-full h-full relative"
      style={{
        background: theme.bg,
        display: "flex",
        margin: 0,
        padding: 0,
      }}
    >
      {/* Head */}
      <div
        tw="absolute w-[51px] h-[51px] rounded-full"
        style={{
          background: theme.fg,
          display: "flex",
          top: "28px",
          backgroundImage:
            "linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.2) 100%)",
          boxShadow:
            "inset 6px -5px 11px rgba(0,0,0,0.13), inset -18px -12px 19px rgba(255,255,255,0.4)",
        }}
      />

Copy{/* Shoulders */}
<div
  tw="absolute w-[102px] h-[102px] rounded-full"
  style={{
    background: theme.fg,
    display: "flex",
    top: "90px",
    clipPath: "inset(0 0 50% 0)",
    backgroundImage:
      "linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.2) 100%)",
    boxShadow:
      "inset 10px -12px 19px rgba(0,0,0,0.4), inset -18px -12px 19px rgba(255,255,255,0.4), inset 2px -1px 11px rgba(0,0,0,0.1)",
  }}
/>

Copy    </div>
  ),
  {
    width: 128,
    height: 128,
    headers: {
      ...corsHeaders,
      "Vercel-CDN-Cache-Control": "s-maxage=31536000",
      "Cache-Control": "public, max-age=31536000, immutable",
    },
  },
);

Copyexport const isStored = (url: string) => {
  return url.startsWith(R2_URL) || url.startsWith(OG_AVATAR_URL);
};

Copyexport const GET = withPartnerProfile(async ({ partner, searchParams }) => {
  const { step: stepRaw } = z
    .object({
      step: z.enum(
        REWIND_STEPS.map((step) => step.id) as [string, ...string[]],
      ),
    })
    .parse(searchParams);
 
  const step = REWIND_STEPS.find((step) => step.id === stepRaw)!;
 
  const [interBold, rewind] = await Promise.all([
    loadGoogleFont("Inter:wght@700"),
    getPartnerRewind({ partnerId: partner.id }),
  ]);
 
  if (!rewind) {
    throw new DubApiError({
      code: "not_found",
      message: "Partner rewind not found",
    });
  }

Copyconst percentileLabel = REWIND_PERCENTILES.find(
  ({ minPercentile }) => rewind[step.percentileId] >= minPercentile,
)?.label;
 
const value =
  step.valueType === "currency"
    ? Math.floor(rewind[step.id] / 100)
    : Math.floor(rewind[step.id]);

Copyreturn new ImageResponse(
  (
    <div
      tw="flex flex-col bg-neutral-50 w-full h-full items-center justify-between"
      style={{ fontFamily: "Inter" }}
    >
      {/* @ts-ignore */}
      <svg tw="absolute inset-0 text-black/10" width={WIDTH} height={HEIGHT}>
        <defs>
          <pattern
            id="grid"
            width={84}
            height={84}
            x={-46}
            y={-4}
            patternUnits="userSpaceOnUse"
          >
            <path
              d={`M 84 0 L 0 0 0 84`}
              fill="transparent"
              stroke="currentColor"
              strokeWidth={1}
            />
          </pattern>
          <radialGradient id="gradient1" cx="1.1" cy="0.1" r="0.5">
            <stop offset="0%" stopColor="#855AFC" stopOpacity={0.1} />
            <stop offset="100%" stopColor="#855AFC" stopOpacity={0} />
          </radialGradient>
          <radialGradient id="gradient2" cx="-0.1" cy="0.7" r="0.5">
            <stop offset="0%" stopColor="#FD3A4E" stopOpacity={0.05} />
            <stop offset="100%" stopColor="#FD3A4E" stopOpacity={0} />
          </radialGradient>
        </defs>
        <rect fill="url(#grid)" width={WIDTH} height={HEIGHT} />
        <rect fill="url(#gradient1)" width={WIDTH} height={HEIGHT} />
        <rect fill="url(#gradient2)" width={WIDTH} height={HEIGHT} />
      </svg>
 
      <div
        tw="relative bg-white border-neutral-200 flex w-full max-w-screen-sm flex-col rounded-2xl border p-10 shadow-sm mt-16"
        style={{ transform: "scale(1.5)", transformOrigin: "top center" }}
      >
        <div tw="flex grow flex-col">
          <span tw="text-neutral-900 text-lg font-semibold">
            {step.label}
          </span>
 
          <div tw="flex pt-2">
            <span tw="text-neutral-900 text-8xl font-bold">
              {step.valueType === "currency" && "$"}
              {nFormatter(value, { full: value <= 9999999 })}
            </span>
          </div>
 
          <div
            tw={cn("mt-5 flex items-center", !percentileLabel && "opacity-0")}
          >
            <img
              src="https://assets.dub.co/misc/partner-rewind-2025/top-medallion.jpg"
              tw="w-6 h-6 mr-2.5"
            />
            <span tw="text-neutral-900 text-base font-semibold">
              {percentileLabel} of all partners
            </span>
          </div>
        </div>
 
        <div tw="flex items-end justify-between">
          <span
            tw="text-neutral-900 max-w-[180px] text-3xl leading-8 font-bold"
            style={{ fontFamily: "Inter" }}
          >
            Dub Partner Rewind &rsquo;25
          </span>
 
          <img
            tw="-mb-4 -mr-1 -mt-8 flex h-[280px]"
            src={`${REWIND_ASSETS_PATH}/${step.image}`}
          />
        </div>

Copyexport default async function PartnerRewind2025Page() {
  const { user } = await getSession();
 
  if (!user.defaultPartnerId) redirect("/");
 
  const partnerUser = await prisma.partnerUser.findUnique({
    select: { partnerId: true },
    where: {
      userId_partnerId: {
        userId: user.id,
        partnerId: user.defaultPartnerId,
      },
    },
  });
 
  if (!partnerUser) redirect("/");
 
  const partnerRewind = await getPartnerRewind({
    partnerId: partnerUser.partnerId,
  });
 
  if (!partnerRewind) redirect("/");
 
  preload(`${REWIND_ASSETS_PATH}/top-medallion.png`, { as: "image" });
  REWIND_STEPS.forEach((step) => {
    preload(`${REWIND_ASSETS_PATH}/${step.video}`, { as: "video" });
  });

Copy  return (
    <PageContent
      title="Partner rewind"
      className="flex h-full flex-col"
      contentWrapperClassName="grow pt-0 lg:pt-0"
    >
      <div className="bg-bg-muted relative size-full">
        <div className="animate-fade-in absolute inset-0 overflow-hidden [mask-image:radial-gradient(transparent,black)]">
          <Grid
            cellSize={56}
            patternOffset={[-4, -28]}
            className="text-border-default/80"
          />
          <Gradient className="absolute bottom-0 left-0 h-[720px] w-96 -translate-x-1/2 translate-y-1/2 -rotate-[55deg] opacity-30" />
          <Gradient className="absolute right-0 top-0 h-[720px] w-96 -translate-y-1/2 translate-x-1/2 -rotate-[55deg] opacity-20" />
        </div>
 
        <div className="scrollbar-hide flex size-full items-center justify-center overflow-y-auto p-6">
          <PartnerRewind2025PageClient partnerRewind={partnerRewind} />
        </div>
      </div>
    </PageContent>
  );
}
 
function Gradient({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "[background-image:radial-gradient(140%_146%_at_93%_14%,#72FE7D,rgba(114,254,125,0)_50%),radial-gradient(126%_82%_at_56%_100%,#FD3A4E,rgba(253,58,78,0)_50%),radial-gradient(131%_124%_at_11%_35%,#855AFC,rgba(133,90,252,0)_50%),radial-gradient(117%_77%_at_100%_100%,#E4C795,rgba(228,199,149,0)_50%),radial-gradient(86%_74%_at_40%_59%,#3A8BFD,rgba(58,139,253,0)_50%),radial-gradient(115%_96%_at_42%_69%,#EEA5BA,rgba(238,165,186,0)_50%)]",
        "blur-[60px]",
        className,
      )}
    />
  );
}

Copyexport const GET = withPartnerProfile(async ({ partner, searchParams }) => {
  const { programId, background, ...filters } =
    getPartnerEarningsTimeseriesSchema
      .extend({
        programId: z.string(),
        background: z.enum(["light", "dark"]).optional().default("light"),
      })
      .parse(searchParams);

Copyconst [interSemibold, timeseries] = await Promise.all([
  loadGoogleFont("Inter:wght@600"),
  getPartnerEarningsTimeseries({
    partnerId: partner.id,
    programId,
    filters,
  }),
]);

Copyconst total = timeseries.reduce((acc, { earnings }) => acc + earnings, 0);
 
const startLabel =
  timeseries.length > 0
    ? formatDate(new Date(timeseries[0].start), {
        month: "short",
        year: "numeric",
      })
    : "";
const endLabel =
  timeseries.length > 0
    ? formatDate(new Date(timeseries[timeseries.length - 1].start), {
        month: "short",
        year: "numeric",
      })
    : "";

Copyconst WIDTH = 1368;
const HEIGHT = 994;
 
const BACKGROUND_IMAGES = {
  light: "https://assets.dub.co/misc/partner-earnings-share-light.jpg",
  dark: "https://assets.dub.co/misc/partner-earnings-share-dark.jpg",
};
…
const logoColor = background === "dark" ? "#ffffff" : "#000000";
 
return new ImageResponse(
  (
    <div
      tw="flex flex-col w-full h-full items-center justify-center"
      style={{ fontFamily: "Inter Semibold" }}
    >
      <img
        src={BACKGROUND_IMAGES[background]}
        tw="absolute inset-0"
        style={{ width: WIDTH, height: HEIGHT, objectFit: "cover" }}
      />
 
      <div
        tw={`flex flex-col rounded-3xl shadow-2xl overflow-hidden ${
          background === "dark" ? "bg-neutral-900" : "bg-white"
        }`}
        style={{
          width: 1210,
          marginTop: -10,
        }}

Copyfunction Chart({
  data,
  background,
}: {
  data: { start: string; earnings: number }[];
  background: "light" | "dark";
}) {
  if (!data || data.length === 0) {
    return null;
  }
 
  const circleRadius = 10;
  const strokeWidth = 6;
  const strokeHalfWidth = strokeWidth / 2;
  const edgePadding = circleRadius + strokeHalfWidth;
 
  const width = 1400;
  const height = 600;
  const padding = {

Copyexport async function GET(req: NextRequest) {
  // Load Inter Medium font (weight 500)
  const interMedium = await loadGoogleFont("Inter:wght@500");
 
  const linkId = req.nextUrl.searchParams.get("linkId");
  const folderId = req.nextUrl.searchParams.get("folderId");
 
  if (!linkId && !folderId) {
    return new Response("Missing linkId or folderId", {
      status: 400,
    });
  }

Copyif (linkId) {
  const data = await prismaEdge.link.findUnique({
    where: {
      id: linkId,
    },
    include: {
      dashboard: true,
    },
  });
 
  if (!data) {
    return new Response("Link not found", {
      status: 404,
    });
  }
 
  if (!data.dashboard) {
    return new Response("Link does not have a public analytics dashboard", {
      status: 403,
    });
  }
  workspaceId = data.projectId;
  link = {
    domain: data.domain,
    key: data.key,
    url: data.url,
  };
} else if (folderId) {
  const data = await prismaEdge.folder.findUnique({
    where: {
      id: folderId,
    },
    include: {
      dashboard: true,
    },
  });
 
  if (!data) {
    return new Response("Folder not found", {
      status: 404,
    });
  }
 
  if (!data.dashboard) {
    return new Response("Folder does not have a public analytics dashboard", {
      status: 403,
    });
  }
  workspaceId = data.projectId;
  folder = {
    id: data.id,
    name: data.name,
  };
}

Copyimport { formatUTCDateTimeClickhouse } from "@/lib/analytics/utils/format-utc-datetime-clickhouse";
import { getStartEndDates } from "@/lib/analytics/utils/get-start-end-dates";
import { prismaEdge } from "@/lib/prisma/edge";
import {
  GOOGLE_FAVICON_URL,
  getApexDomain,
  linkConstructor,
  nFormatter,
} from "@dub/utils";
import { Folder, Link } from "@prisma/client";
import { ImageResponse } from "next/og";
import { NextRequest } from "next/server";
import { loadGoogleFont } from "../load-google-font";
…
const { startDate, endDate, granularity } = getStartEndDates({
  interval: "30d",
});
 
const timeseriesData = await fetch(
  `https://api.us-east.tinybird.co/v0/pipes/v3_timeseries.json?${new URLSearchParams(
    {
      event: "clicks",
      ...(workspaceId ? { workspaceId } : {}),
      ...(folderId ? { folderId } : {}),
      ...(linkId ? { linkId } : {}),
      start: formatUTCDateTimeClickhouse(startDate),
      end: formatUTCDateTimeClickhouse(endDate),
      granularity,
    },
  )}`,
  {
    headers: {
      Authorization: `Bearer ${process.env.TINYBIRD_API_KEY}`,
    },
    next: {
      revalidate: 60, // revalidate every minute
    },
  },
)
  .then((res) => res.json())
  .then((res) => res.data)
  .catch(() => []);

Copyconst timeseriesData = await fetch(
  `https://api.us-east.tinybird.co/v0/pipes/v3_timeseries.json?${new URLSearchParams(
    {
      event: "clicks",
      ...(workspaceId ? { workspaceId } : {}),
      ...(folderId ? { folderId } : {}),
      ...(linkId ? { linkId } : {}),
      start: formatUTCDateTimeClickhouse(startDate),
      end: formatUTCDateTimeClickhouse(endDate),
      granularity,
    },
  )}`,

Copy  {
    headers: {
      Authorization: `Bearer ${process.env.TINYBIRD_API_KEY}`,
    },
    next: {
      revalidate: 60, // revalidate every minute
    },
  },
)
  .then((res) => res.json())
  .then((res) => res.data)
  .catch(() => []);

Copyconst Chart = ({ data }) => {
  // Define SVG size
  const width = 1100;
  const height = 370;
 
  // Find the max clicks value for Y-axis scaling
  const maxClicks = Math.max(...data.map((d) => d.clicks));
 
  // Function to convert date to X coordinate
  const scaleX = (index) => (width / (data.length - 1)) * index;
 
  // Function to convert clicks to Y coordinate
  const scaleY = (clicks) => height - (clicks / maxClicks) * height;

Copy// Extend the points to the bottom to create a closed shape for the fill
let points = data
  .map((d, index) => `${scaleX(index)},${scaleY(d.clicks)}`)
  .join(" ");
// Close the shape by drawing a line to the bottom right corner and bottom left corner
points += ` ${width},${height} 0,${height}`;
 
…
<defs>
  <linearGradient id="customGradient" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="currentColor" stop-opacity="0.2" />
    <stop offset="100%" stop-color="currentColor" stop-opacity="0.01" />
  </linearGradient>
</defs>

Copy// GET /api/og/program?slug=program&groupSlug=group
export async function GET(req: NextRequest) {
  const slug = req.nextUrl.searchParams.get("slug");
  const groupSlug = req.nextUrl.searchParams.get("groupSlug");
 
  if (!slug) {
    return new Response("Missing 'slug' parameter", {
      status: 400,
    });
  }
  const [interSemibold, program] = await Promise.all([
    loadGoogleFont("Inter:wght@600"),
    prisma.program.findUnique({
      where: {
        slug,
      },
      include: {
        groups: {
          where: {
            slug: groupSlug ?? DEFAULT_PARTNER_GROUP.slug,
          },
          include: {
            clickReward: true,
            saleReward: true,
            leadReward: true,
            referralReward: true,
          },
        },
      },
    }),
  ]);
 
  if (!program) {
    return new Response("Program not found", {
      status: 404,
    });
  }
 
  const group = program.groups[0];
 
  if (!group) {
    return new Response("Group not found", {
      status: 404,
    });
  }
 
  const logo = group.wordmark || group.logo;
  const brandColor = group.brandColor || "#000000";
 
  const rewards = [group.clickReward, group.leadReward, group.saleReward]
    .filter((r): r is Reward => r !== null)
    .map(serializeReward);
  const reward = rewards[0];

Copyconst slug = req.nextUrl.searchParams.get("slug");
const groupSlug = req.nextUrl.searchParams.get("groupSlug");
…
const group = program.groups[0];
 
if (!group) {
  return new Response("Group not found", {
    status: 404,
  });
}
 
const logo = group.wordmark || group.logo;
const brandColor = group.brandColor || "#000000";
 
const rewards = [group.clickReward, group.leadReward, group.saleReward]
  .filter((r): r is Reward => r !== null)
  .map(serializeReward);
const reward = rewards[0];

Copyif (!program) {
  return new Response("Program not found", {
    status: 404,
  });
}
 
const group = program.groups[0];
 
if (!group) {
  return new Response("Group not found", {
    status: 404,
  });
}

Copy// GET /api/og/program/categories?categorySlug=ai
export async function GET(req: NextRequest) {
  const categorySlug = req.nextUrl.searchParams.get("categorySlug");
 
  if (!categorySlug) {
    return new Response("Missing 'categorySlug' parameter", {
      status: 400,
    });
  }
 
  const category = PROGRAM_CATEGORIES.find(
    ({ id }) => id.toLowerCase() === categorySlug.toLowerCase(),
  );
 
  if (!category) {
    return new Response("Category not found", {
      status: 404,
    });
  }

Copyconst categorySlug = req.nextUrl.searchParams.get("categorySlug");
 
if (!categorySlug) {
  return new Response("Missing 'categorySlug' parameter", {
    status: 400,
  });
}
 
const category = PROGRAM_CATEGORIES.find(
  ({ id }) => id.toLowerCase() === categorySlug.toLowerCase(),
);
 
if (!category) {
  return new Response("Category not found", {
    status: 404,
  });
}
 
const interSemibold = await loadGoogleFont("Inter:wght@600");

Copyconst DARK_CELLS = [
  [2, 3],
  [5, 3],
  [56, 7],
  [53, 1],
];
…
<svg tw="absolute inset-0 text-black/10" width="1200" height="630">
  <defs>
    <pattern
      id="grid"
      width={20}
      height={20}
      patternUnits="userSpaceOnUse"
    >
      <path
        d={`M 20 0 L 0 0 0 20`}
        fill="transparent"
        stroke="currentColor"
        strokeWidth={1}
      />
    </pattern>
    <pattern
      id="grid-large"
      width={160}
      height={160}
      patternUnits="userSpaceOnUse"
    >
      <path
        d={`M 160 0 L 0 0 0 160`}
        fill="transparent"
        stroke="currentColor"
        strokeOpacity={0.5}
        strokeWidth={1}
      />
    </pattern>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stopColor="#fff" stopOpacity={0} />
      <stop offset="100%" stopColor="#fff" stopOpacity={1} />
    </linearGradient>
  </defs>
  {DARK_CELLS.map(([x, y]) => (
    <rect
      key={`${x}-${y}`}
      x={x * 20 + 1}
      y={y * 20 + 1}
      width={19}
      height={19}
      fill="black"
      fillOpacity={0.02}
    />
  ))}
  <rect fill="url(#grid)" width="1200" height="630" />
  <rect fill="url(#grid-large)" width="1200" height="630" />
  <rect fill="url(#gradient)" width="1200" height="630" />
</svg>

Copyconst tabs = ["default", "x", "linkedin", "facebook"] as const;
type Tab = (typeof tabs)[number];
 
const tabTitles: Record<Tab, string> = {
  default: "Default",
  facebook: "Facebook",
  linkedin: "LinkedIn",
  x: "X/Twitter",
};
 
const tabIcons: Record<Tab, Icon> = {
  default: GlobePointer,
  x: Twitter,
  linkedin: LinkedIn,
  facebook: Facebook,
};
 
type OGPreviewProps = PropsWithChildren<{
  title: string | null;
  description: string | null;
  hostname: string | null;
  password: string | null;
}>;
 
const tabComponents: Record<Tab, ComponentType<OGPreviewProps>> = {
  default: DefaultOGPreview,
  x: XOGPreview,
  linkedin: LinkedInOGPreview,

Copyconst tabTitles: Record<Tab, string> = {
  default: "Default",
  facebook: "Facebook",
  linkedin: "LinkedIn",
  x: "X/Twitter",
};
 
const tabIcons: Record<Tab, Icon> = {
  default: GlobePointer,
  x: Twitter,
  linkedin: LinkedIn,
  facebook: Facebook,
};
 
type OGPreviewProps = PropsWithChildren<{
  title: string | null;
  description: string | null;
  hostname: string | null;
  password: string | null;
}>;
 
const tabComponents: Record<Tab, ComponentType<OGPreviewProps>> = {
  default: DefaultOGPreview,
  x: XOGPreview,
  linkedin: LinkedInOGPreview,

Copyif (plan && plan !== "free") {
  setValue("proxy", true, { shouldDirty: true });
}
…
if (plan && plan !== "free") {
  setValue("proxy", true, { shouldDirty: true });
}
…
if (plan && plan !== "free") {
  setValue("proxy", true, { shouldDirty: true });
}
…
if (plan && plan !== "free") {
  setValue("proxy", true, { shouldDirty: true });
}