From e312b1ee8e1cfc7cf6a5295a964e55099d79af42 Mon Sep 17 00:00:00 2001 From: Tom Robiquet Date: Mon, 18 Mar 2024 11:39:39 +0000 Subject: [PATCH 1/7] Increase bottom padding --- pages/api/og/generate.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/api/og/generate.tsx b/pages/api/og/generate.tsx index 0ad86709d..008a2c3b8 100644 --- a/pages/api/og/generate.tsx +++ b/pages/api/og/generate.tsx @@ -58,7 +58,7 @@ export default async function GenerateOgImage(request: NextRequest) { const image = (
Date: Mon, 18 Mar 2024 13:19:29 +0000 Subject: [PATCH 2/7] add "new" --- pages/api/og/generate.tsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/pages/api/og/generate.tsx b/pages/api/og/generate.tsx index 008a2c3b8..7d76476ef 100644 --- a/pages/api/og/generate.tsx +++ b/pages/api/og/generate.tsx @@ -101,12 +101,23 @@ export default async function GenerateOgImage(request: NextRequest) { {ends}
-
-

Volume:

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

Volume:

+
+ {formatNumberCompact(Number(volume))} {currencyMetadata?.name} +
-
+ ) : ( +
+
New!
+
+ )} +
Date: Tue, 19 Mar 2024 11:41:52 +0000 Subject: [PATCH 3/7] hide volume when it's zero --- pages/api/og/generate.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/pages/api/og/generate.tsx b/pages/api/og/generate.tsx index 7d76476ef..36ba8b406 100644 --- a/pages/api/og/generate.tsx +++ b/pages/api/og/generate.tsx @@ -101,8 +101,7 @@ export default async function GenerateOgImage(request: NextRequest) { {ends}
- - {Number(volume) > 0 ? ( + {Number(volume) > 0 && (

Volume:

- ) : ( -
-
New!
-
)} -
Date: Tue, 19 Mar 2024 15:17:05 +0000 Subject: [PATCH 4/7] add cms image and question overrides --- lib/hooks/useMarketImage.ts | 27 +++++++---- pages/api/og/generate.tsx | 93 +++++++++++++++++++++++++------------ 2 files changed, 80 insertions(+), 40 deletions(-) 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 36ba8b406..0f685a206 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"; @@ -20,8 +20,14 @@ 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, @@ -29,32 +35,48 @@ 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 = `../../../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 = (
-

- {market.question} -

-
+
+ +

+ {question} +

+
+

{market.status === "Reported" || market.status === "Resolved" ? "Winning Outcome:" From 690169452f8dd3f8ed34c72ddd7be2771637f7c1 Mon Sep 17 00:00:00 2001 From: Tom Robiquet Date: Thu, 21 Mar 2024 12:07:47 +0000 Subject: [PATCH 5/7] fix image overrides --- pages/api/og/generate.tsx | 61 +++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 34 deletions(-) diff --git a/pages/api/og/generate.tsx b/pages/api/og/generate.tsx index 0f685a206..4aea209da 100644 --- a/pages/api/og/generate.tsx +++ b/pages/api/og/generate.tsx @@ -18,16 +18,15 @@ export default async function GenerateOgImage(request: NextRequest) { }); } - const marketId = searchParams.get("marketId"); + const urlBase = request.nextUrl.origin; + const marketId = searchParams.get("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 cmsUrl = `${urlBase}/api/cms/market-metadata/batch?marketIds=${JSON.stringify( + [Number(marketId)], + )}`; const { market, @@ -41,7 +40,7 @@ export default async function GenerateOgImage(request: NextRequest) { const cmsImageUrl = cmsRes[0]?.imageUrl; const cmsQuestion = cmsRes[0]?.question; - const fallbackImagePath = `../../../public${getFallbackImage( + const fallbackImagePath = `${urlBase}${getFallbackImage( market.tags, Number(marketId), )}`; @@ -52,32 +51,26 @@ export default async function GenerateOgImage(request: NextRequest) { 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 [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 image = (

From 65b34e2fb00fec43428886e835cf6bc64266bcdc Mon Sep 17 00:00:00 2001 From: Tom Robiquet Date: Thu, 21 Mar 2024 12:09:54 +0000 Subject: [PATCH 6/7] null check --- pages/api/og/generate.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/api/og/generate.tsx b/pages/api/og/generate.tsx index 4aea209da..cdcb9e3bf 100644 --- a/pages/api/og/generate.tsx +++ b/pages/api/og/generate.tsx @@ -37,8 +37,8 @@ export default async function GenerateOgImage(request: NextRequest) { }: 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 cmsImageUrl = cmsRes?.[0]?.imageUrl; + const cmsQuestion = cmsRes?.[0]?.question; const fallbackImagePath = `${urlBase}${getFallbackImage( market.tags, From b88cf32a703ffa0578d4469b0c2ba37152639d59 Mon Sep 17 00:00:00 2001 From: Tom Robiquet Date: Thu, 21 Mar 2024 13:47:11 +0000 Subject: [PATCH 7/7] remove lodash function as it doesn't work in edge functions --- lib/constants/category-images.ts | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) 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), });