diff --git a/og-image/api/_lib/template.ts b/og-image/api/_lib/template.ts index a6b0336c..0be8b70c 100644 --- a/og-image/api/_lib/template.ts +++ b/og-image/api/_lib/template.ts @@ -91,6 +91,8 @@ export function getHtml(parsedReq: ParsedRequest) { creatorName, creatorUsername, creatorAvatarUrl, + challengeAmount, + challengeOutcome, } = parsedReq const MAX_QUESTION_CHARS = 100 const truncatedQuestion = @@ -148,7 +150,12 @@ export function getHtml(parsedReq: ParsedRequest) { ${truncatedQuestion}
-
${probability}
+
${ + challengeAmount ? challengeAmount : probability + }
+
${ + challengeOutcome ? 'on' + challengeOutcome : '' + }
${probability !== '' ? 'chance' : ''}
diff --git a/og-image/api/_lib/types.ts b/og-image/api/_lib/types.ts index c0126a3b..eb8b412d 100644 --- a/og-image/api/_lib/types.ts +++ b/og-image/api/_lib/types.ts @@ -1,21 +1,23 @@ -export type FileType = "png" | "jpeg"; -export type Theme = "light" | "dark"; +export type FileType = 'png' | 'jpeg' +export type Theme = 'light' | 'dark' export interface ParsedRequest { - fileType: FileType; - text: string; - theme: Theme; - md: boolean; - fontSize: string; - images: string[]; - widths: string[]; - heights: string[]; + fileType: FileType + text: string + theme: Theme + md: boolean + fontSize: string + images: string[] + widths: string[] + heights: string[] // Attributes for Manifold card: - question: string; - probability: string; - metadata: string; - creatorName: string; - creatorUsername: string; - creatorAvatarUrl: string; + question: string + probability: string + metadata: string + creatorName: string + creatorUsername: string + creatorAvatarUrl: string + challengeAmount: string + challengeOutcome: string } diff --git a/web/components/SEO.tsx b/web/components/SEO.tsx index 11e24c99..85eceae4 100644 --- a/web/components/SEO.tsx +++ b/web/components/SEO.tsx @@ -10,7 +10,7 @@ export type OgCardProps = { creatorAvatarUrl?: string } -function buildCardUrl(props: OgCardProps) { +function buildCardUrl(props: OgCardProps, challengeProps?: ChallengeCardProps) { const probabilityParam = props.probability === undefined ? '' @@ -20,6 +20,10 @@ function buildCardUrl(props: OgCardProps) { ? '' : `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}` + const challengeUrlParams = challengeProps + ? `&challengeAmount=${challengeProps.challengeAmount}&challengeOutcome=${challengeProps.challengeOutcome}` + : '' + // URL encode each of the props, then add them as query params return ( `https://manifold-og-image.vercel.app/m.png` + @@ -28,9 +32,14 @@ function buildCardUrl(props: OgCardProps) { `&metadata=${encodeURIComponent(props.metadata)}` + `&creatorName=${encodeURIComponent(props.creatorName)}` + creatorAvatarUrlParam + - `&creatorUsername=${encodeURIComponent(props.creatorUsername)}` + `&creatorUsername=${encodeURIComponent(props.creatorUsername)}` + + challengeUrlParams ) } +type ChallengeCardProps = { + challengeAmount: string + challengeOutcome: string +} export function SEO(props: { title: string @@ -38,8 +47,10 @@ export function SEO(props: { url?: string children?: ReactNode ogCardProps?: OgCardProps + challengeCardProps?: ChallengeCardProps }) { - const { title, description, url, children, ogCardProps } = props + const { title, description, url, children, ogCardProps, challengeCardProps } = + props return ( @@ -71,13 +82,13 @@ export function SEO(props: { <> diff --git a/web/hooks/use-save-referral.ts b/web/hooks/use-save-referral.ts index 788268b0..52e6ae73 100644 --- a/web/hooks/use-save-referral.ts +++ b/web/hooks/use-save-referral.ts @@ -6,7 +6,7 @@ import { User, writeReferralInfo } from 'web/lib/firebase/users' export const useSaveReferral = ( user?: User | null, options?: { - defaultReferrer?: string + defaultReferrerUsername?: string contractId?: string groupId?: string } @@ -18,7 +18,7 @@ export const useSaveReferral = ( referrer?: string } - const actualReferrer = referrer || options?.defaultReferrer + const actualReferrer = referrer || options?.defaultReferrerUsername if (!user && router.isReady && actualReferrer) { writeReferralInfo(actualReferrer, options?.contractId, options?.groupId) diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index 38877819..52865c0b 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -155,7 +155,7 @@ export function ContractPageContent( const ogCardProps = getOpenGraphProps(contract) useSaveReferral(user, { - defaultReferrer: contract.creatorUsername, + defaultReferrerUsername: contract.creatorUsername, contractId: contract.id, }) diff --git a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx index b48252b4..a09cc511 100644 --- a/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx +++ b/web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx @@ -40,6 +40,7 @@ import { ContractProbGraph } from 'web/components/contract/contract-prob-graph' import { SEO } from 'web/components/SEO' import { getOpenGraphProps } from 'web/components/contract/contract-card-preview' import Custom404 from 'web/pages/404' +import { useSaveReferral } from 'web/hooks/use-save-referral' export const getStaticProps = fromPropz(getStaticPropz) export async function getStaticPropz(props: { @@ -92,15 +93,17 @@ export default function ChallengePage(props: { useChallenge(props.challengeSlug, contract?.id) ?? props.challenge const { user, bets } = props const currentUser = useUser() + useSaveReferral(currentUser, { + defaultReferrerUsername: challenge?.creatorUsername, + }) if (!contract || !challenge) return const ogCardProps = getOpenGraphProps(contract) ogCardProps.creatorUsername = challenge.creatorUsername ogCardProps.creatorAvatarUrl = challenge.creatorAvatarUrl - ogCardProps.question = 'I challenge you to a bet: ' + contract.question - ogCardProps.probability = - formatMoney(challenge.creatorAmount) + ' on ' + challenge.creatorOutcome + ogCardProps.question = 'CHALLENGED:' + contract.question + ogCardProps.probability = '' return ( @@ -109,6 +112,10 @@ export default function ChallengePage(props: { description={ogCardProps.description} url={getChallengeUrl(challenge).replace('https://', '')} ogCardProps={ogCardProps} + challengeCardProps={{ + challengeOutcome: challenge.creatorOutcome, + challengeAmount: challenge.creatorAmount + '', + }} /> {challenge.acceptances.length >= challenge.maxUses ? (