diff --git a/lib/constants/category-images.ts b/lib/constants/category-images.ts index 53f47e97f..d1bbd7dbe 100644 --- 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 index e9daf9f85..b2f7a2ac3 100644 --- a/lib/hooks/useMarketImage.ts +++ b/lib/hooks/useMarketImage.ts @@ -8,8 +8,21 @@ 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" @@ -17,12 +30,6 @@ export const useMarketImage = ( 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 index 0ad86709d..cdcb9e3bf 100644 --- 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,10 +18,15 @@ 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, @@ -29,11 +34,22 @@ export default async function GenerateOgImage(request: NextRequest) { 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 = (
-

- {market.question} -

-
+
+ +

+ {question} +

+
+

{market.status === "Reported" || market.status === "Resolved" ? "Winning Outcome:" @@ -101,12 +127,17 @@ export default async function GenerateOgImage(request: NextRequest) { {ends}

-
-

Volume:

-
- {formatNumberCompact(Number(volume))} {currencyMetadata?.name} + {Number(volume) > 0 && ( +
+

Volume:

+
+ {formatNumberCompact(Number(volume))} {currencyMetadata?.name} +
-
+ )}