diff --git a/og-image/api/_lib/template.ts b/og-image/api/_lib/template.ts index 73105f6b..00d47394 100644 --- a/og-image/api/_lib/template.ts +++ b/og-image/api/_lib/template.ts @@ -85,7 +85,6 @@ export function getHtml(parsedReq: ParsedRequest) { const { theme, fontSize, - question, probability, metadata, @@ -93,6 +92,10 @@ export function getHtml(parsedReq: ParsedRequest) { creatorUsername, creatorAvatarUrl, } = parsedReq + const MAX_QUESTION_CHARS = 100 + const truncatedQuestion = question.length > MAX_QUESTION_CHARS + ? question.slice(0, MAX_QUESTION_CHARS) + '...' + : question const hideAvatar = creatorAvatarUrl ? '' : 'hidden' return ` @@ -141,7 +144,7 @@ export function getHtml(parsedReq: ParsedRequest) {
- ${question} + ${truncatedQuestion}
${probability}
diff --git a/web/components/SEO.tsx b/web/components/SEO.tsx index 84ba850c..8987d671 100644 --- a/web/components/SEO.tsx +++ b/web/components/SEO.tsx @@ -6,8 +6,7 @@ export type OgCardProps = { metadata: string creatorName: string creatorUsername: string - // TODO: Store creator avatar url in each contract, then enable this - // creatorAvatarUrl: string + creatorAvatarUrl?: string } function buildCardUrl(props: OgCardProps) { @@ -15,6 +14,10 @@ function buildCardUrl(props: OgCardProps) { props.probability === undefined ? '' : `&probability=${encodeURIComponent(props.probability ?? '')}` + const creatorAvatarUrlParam = + props.creatorAvatarUrl === undefined + ? '' + : `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}` // URL encode each of the props, then add them as query params return ( @@ -23,6 +26,7 @@ function buildCardUrl(props: OgCardProps) { probabilityParam + `&metadata=${encodeURIComponent(props.metadata)}` + `&creatorName=${encodeURIComponent(props.creatorName)}` + + creatorAvatarUrlParam + `&creatorUsername=${encodeURIComponent(props.creatorUsername)}` ) } diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index 29786703..6fa84a7f 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -324,8 +324,14 @@ function ContractTopTrades(props: { } const getOpenGraphProps = (contract: Contract) => { - const { resolution, question, creatorName, creatorUsername, outcomeType } = - contract + const { + resolution, + question, + creatorName, + creatorUsername, + outcomeType, + creatorAvatarUrl, + } = contract const probPercent = outcomeType === 'BINARY' ? getBinaryProbPercent(contract) : undefined @@ -339,8 +345,9 @@ const getOpenGraphProps = (contract: Contract) => { question, probability: probPercent, metadata: contractTextDetails(contract), - creatorName: creatorName, - creatorUsername: creatorUsername, + creatorName, + creatorUsername, + creatorAvatarUrl, description, } }