add cms image and question overrides

zeitgeistpm · Mar 19, 2024 · 4d20194 · 4d20194
1 parent 7426bee
commit 4d20194
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 40 deletions.
diff --git a/lib/hooks/useMarketImage.ts b/lib/hooks/useMarketImage.ts
@@ -8,21 +8,28 @@ export const useMarketImage = (
     fallback?: string;
   },
 ) => {
-  const tagIndex = market.tags ? market.marketId % market.tags.length : 0;
-  const pickedTag = market.tags?.[tagIndex];
+  const cmsQuery = useMarketCmsMetadata(market.marketId);
+  const fallback = getFallbackImage(market.tags, market.marketId);
+
+  return {
+    ...cmsQuery,
+    data: cmsQuery.data?.imageUrl ?? opts?.fallback ?? fallback,
+  };
+};
+
+export const getFallbackImage = (
+  marketTags: FullMarketFragment["tags"],
+  marketId: number,
+) => {
+  const tagIndex = marketTags ? marketId % marketTags.length : 0;
+  const pickedTag = marketTags?.[tagIndex];
 
   const tag = (
     pickedTag && pickedTag in CATEGORY_IMAGES ? pickedTag : "untagged"
   ) as keyof typeof CATEGORY_IMAGES;
 
   const category = CATEGORY_IMAGES[tag];
 
-  const fallback = category[market.marketId % category.length];
-
-  const cmsQuery = useMarketCmsMetadata(market.marketId);
-
-  return {
-    ...cmsQuery,
-    data: cmsQuery.data?.imageUrl ?? opts?.fallback ?? fallback,
-  };
+  const fallback = category[marketId % category.length];
+  return fallback;
 };
diff --git a/pages/api/og/generate.tsx b/pages/api/og/generate.tsx
@@ -1,5 +1,5 @@
 import { ImageResponse } from "@vercel/og";
-import { isMarketImageBase64Encoded } from "lib/types/create-market";
+import { getFallbackImage } from "lib/hooks/useMarketImage";
 import { formatNumberCompact } from "lib/util/format-compact";
 import type { PageConfig } from "next";
 import { NextRequest } from "next/server";
@@ -20,41 +20,63 @@ export default async function GenerateOgImage(request: NextRequest) {
 
   const marketId = searchParams.get("marketId");
 
-  const url = request.nextUrl.clone();
-  url.pathname = `/api/og/${marketId}`;
+  const marketUrl = request.nextUrl.clone();
+  marketUrl.pathname = `/api/og/${marketId}`;
+
+  const cmsUrl = `${
+    marketUrl.origin
+  }/api/cms/market-metadata/batch?marketIds=${JSON.stringify([
+    Number(marketId),
+  ])}`;
 
   const {
     market,
     volume,
     prediction,
     ends,
     currencyMetadata,
-  }: MarketImageData = await fetch(url.href).then((r) => r.json());
+  }: MarketImageData = await fetch(marketUrl.href).then((r) => r.json());
+
+  const cmsRes = await fetch(cmsUrl).then((r) => r.json());
+  const cmsImageUrl = cmsRes[0]?.imageUrl;
+  const cmsQuestion = cmsRes[0]?.question;
+
+  const fallbackImagePath = `../../../public${getFallbackImage(
+    market.tags,
+    Number(marketId),
+  )}`;
 
-  if (!market?.question) return;
+  const question = cmsQuestion ?? market?.question;
 
-  const questionClass = market.question.length > 90 ? "text-4xl" : "text-5xl";
+  if (!question) return;
 
-  const [boldFont, regularFont, bg, zeitgeistBadge] = await Promise.all([
-    fetch(
-      new URL(
-        "../../../public/fonts/inter/static/Inter-Bold.ttf",
-        import.meta.url,
-      ).href,
-    ).then((res) => res.arrayBuffer()),
-    fetch(
-      new URL(
-        "../../../public/fonts/inter/static/Inter-Regular.ttf",
-        import.meta.url,
-      ).href,
-    ).then((res) => res.arrayBuffer()),
-    fetch(new URL("../../../public/og/bg1.png", import.meta.url)).then((res) =>
-      res.arrayBuffer(),
-    ),
-    fetch(
-      new URL("../../../public/og/zeitgeist_badge.png", import.meta.url),
-    ).then((res) => res.arrayBuffer()),
-  ]);
+  const questionClass = question.length > 90 ? "text-4xl" : "text-5xl";
+
+  const [boldFont, regularFont, bg, zeitgeistBadge, fallbackImage] =
+    await Promise.all([
+      fetch(
+        new URL(
+          "../../../public/fonts/inter/static/Inter-Bold.ttf",
+          import.meta.url,
+        ).href,
+      ).then((res) => res.arrayBuffer()),
+      fetch(
+        new URL(
+          "../../../public/fonts/inter/static/Inter-Regular.ttf",
+          import.meta.url,
+        ).href,
+      ).then((res) => res.arrayBuffer()),
+      fetch(new URL("../../../public/og/bg1.png", import.meta.url)).then(
+        (res) => res.arrayBuffer(),
+      ),
+      fetch(
+        new URL("../../../public/og/zeitgeist_badge.png", import.meta.url),
+      ).then((res) => res.arrayBuffer()),
+      fetch(
+        new URL("../../../public/categories/sports/4.png", import.meta.url),
+        // new URL(fallbackImagePath, import.meta.url),
+      ).then((res) => res.arrayBuffer()),
+    ]);
 
   const image = (
     <div
@@ -75,10 +97,21 @@ export default async function GenerateOgImage(request: NextRequest) {
         }}
       />
       <div tw="flex flex-col h-full w-full">
-        <h1 tw={`${questionClass}`} style={{ lineHeight: "1.3em" }}>
-          {market.question}
-        </h1>
-        <div tw="flex flex-col mt-20">
+        <div tw="flex">
+          <img
+            style={{
+              width: 150,
+              height: 150,
+              objectFit: "cover",
+            }}
+            src={cmsImageUrl ?? fallbackImage}
+            tw="rounded-[5px]"
+          />
+          <h1 tw={`${questionClass} ml-6`} style={{ lineHeight: "1.3em" }}>
+            {question}
+          </h1>
+        </div>
+        <div tw="flex flex-col mt-10">
           <h2 tw={`font-bold text-4xl font-sans`}>
             {market.status === "Reported" || market.status === "Resolved"
               ? "Winning Outcome:"