Merge pull request #2367 from zeitgeistpm/tr-preview-card-twitter

OG image adjustments
zeitgeistpm · Apr 5, 2024 · 99c4ebd · 99c4ebd
2 parents 0b7e85a + b88cf32
commit 99c4ebd
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 39 deletions.
diff --git a/lib/constants/category-images.ts b/lib/constants/category-images.ts
@@ -1,19 +1,23 @@
-import { range } from "lodash-es";
 import { union } from "lib/types/union";
 import { prodTags } from "./markets";
 
 const tags = [...prodTags, "untagged"] as const;
 
+const generateImagePaths = (basePath: string, imageCount: number) => {
+  return Array(imageCount)
+    .fill(0)
+    .map((_, index) => `${basePath}/${index + 1}.png`);
+};
 export const CATEGORY_IMAGES = union<(typeof tags)[number]>().exhaustAsRecord({
-  Sports: range(1, 6).map((i) => `/categories/sports/${i}.png`),
-  Politics: range(1, 5).map((i) => `/categories/politics/${i}.png`),
-  Technology: range(1, 5).map((i) => `/categories/tech/${i}.png`),
-  Crypto: range(1, 5).map((i) => `/categories/crypto/${i}.png`),
-  Science: range(1, 5).map((i) => `/categories/science/${i}.png`),
-  News: range(1, 6).map((i) => `/categories/news/${i}.png`),
-  Dotsama: range(1, 2).map((i) => `/categories/dotsama/${i}.png`),
-  Zeitgeist: range(1, 2).map((i) => `/categories/zeitgeist/${i}.png`),
-  Finance: range(1, 5).map((i) => `/categories/finance/${i}.png`),
-  Entertainment: range(1, 5).map((i) => `/categories/entertainment/${i}.png`),
-  untagged: range(1, 2).map((i) => `/categories/zeitgeist/${i}.png`),
+  Sports: generateImagePaths("/categories/sports", 5),
+  Politics: generateImagePaths("/categories/politics", 4),
+  Technology: generateImagePaths("/categories/tech", 4),
+  Crypto: generateImagePaths("/categories/crypto", 4),
+  Science: generateImagePaths("/categories/science", 4),
+  News: generateImagePaths("/categories/news", 5),
+  Dotsama: generateImagePaths("/categories/dotsama", 1),
+  Zeitgeist: generateImagePaths("/categories/zeitgeist", 1),
+  Finance: generateImagePaths("/categories/finance", 4),
+  Entertainment: generateImagePaths("/categories/entertainment", 4),
+  untagged: generateImagePaths("/categories/zeitgeist", 1),
 });
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";
@@ -18,22 +18,38 @@ export default async function GenerateOgImage(request: NextRequest) {
     });
   }
 
+  const urlBase = request.nextUrl.origin;
+
   const marketId = searchParams.get("marketId");
+  const marketUrl = request.nextUrl.clone();
+  marketUrl.pathname = `/api/og/${marketId}`;
 
-  const url = request.nextUrl.clone();
-  url.pathname = `/api/og/${marketId}`;
+  const cmsUrl = `${urlBase}/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 = `${urlBase}${getFallbackImage(
+    market.tags,
+    Number(marketId),
+  )}`;
+
+  const question = cmsQuestion ?? market?.question;
 
-  if (!market?.question) return;
+  if (!question) return;
 
-  const questionClass = market.question.length > 90 ? "text-4xl" : "text-5xl";
+  const questionClass = question.length > 90 ? "text-4xl" : "text-5xl";
 
   const [boldFont, regularFont, bg, zeitgeistBadge] = await Promise.all([
     fetch(
@@ -55,10 +71,9 @@ export default async function GenerateOgImage(request: NextRequest) {
       new URL("../../../public/og/zeitgeist_badge.png", import.meta.url),
     ).then((res) => res.arrayBuffer()),
   ]);
-
   const image = (
     <div
-      tw="p-16 text-white"
+      tw="px-16 pt-16 pb-24 text-white"
       style={{
         width: "100%",
         height: "100%",
@@ -75,10 +90,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 ?? fallbackImagePath}
+            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:"
@@ -101,12 +127,17 @@ export default async function GenerateOgImage(request: NextRequest) {
               {ends}
             </div>
           </div>
-          <div tw="flex flex-col">
-            <h2 tw={`font-bold ${"text-3xl"} font-sans`}>Volume:</h2>
-            <div tw={`flex ${"text-4xl"}  -mt-1`} style={{ color: "#ABC1F9" }}>
-              {formatNumberCompact(Number(volume))} {currencyMetadata?.name}
+          {Number(volume) > 0 && (
+            <div tw="flex flex-col">
+              <h2 tw={`font-bold ${"text-3xl"} font-sans`}>Volume:</h2>
+              <div
+                tw={`flex ${"text-4xl"}  -mt-1`}
+                style={{ color: "#ABC1F9" }}
+              >
+                {formatNumberCompact(Number(volume))} {currencyMetadata?.name}
+              </div>
             </div>
-          </div>
+          )}
           <div tw="flex ml-auto mt-4">
             <img
               style={{