open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add in challenge parts to template and url

Browse Source
This commit is contained in:
Ian Philips 2022-08-01 09:49:57 -06:00
parent c0a5b6fd1c
commit ff6fa9db2b
7 changed files with 56 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
og-image/api/_lib/template.ts
View File

@ -91,6 +91,8 @@ export function getHtml(parsedReq: ParsedRequest) {
creatorName, creatorName,
creatorUsername, creatorUsername,
creatorAvatarUrl, creatorAvatarUrl,
challengeAmount,
challengeOutcome,
} = parsedReq } = parsedReq
const MAX_QUESTION_CHARS = 100 const MAX_QUESTION_CHARS = 100
const truncatedQuestion = const truncatedQuestion =
@ -148,7 +150,12 @@ export function getHtml(parsedReq: ParsedRequest) {
${truncatedQuestion} ${truncatedQuestion}
</div> </div>
<div class="flex flex-col text-primary"> <div class="flex flex-col text-primary">
<div class="text-8xl">${probability}</div> <div class="text-8xl">${
challengeAmount ? challengeAmount : probability
}</div>
<div class="text-5xl">${
challengeOutcome ? 'on' + challengeOutcome : ''
}</div>
<div class="text-4xl">${probability !== '' ? 'chance' : ''}</div> <div class="text-4xl">${probability !== '' ? 'chance' : ''}</div>
</div> </div>
</div> </div>

34
og-image/api/_lib/types.ts
View File

@ -1,21 +1,23 @@
export type FileType = "png" | "jpeg"; export type FileType = 'png' | 'jpeg'
export type Theme = "light" | "dark"; export type Theme = 'light' | 'dark'
export interface ParsedRequest { export interface ParsedRequest {
fileType: FileType; fileType: FileType
text: string; text: string
theme: Theme; theme: Theme
md: boolean; md: boolean
fontSize: string; fontSize: string
images: string[]; images: string[]
widths: string[]; widths: string[]
heights: string[]; heights: string[]
// Attributes for Manifold card: // Attributes for Manifold card:
question: string; question: string
probability: string; probability: string
metadata: string; metadata: string
creatorName: string; creatorName: string
creatorUsername: string; creatorUsername: string
creatorAvatarUrl: string; creatorAvatarUrl: string
challengeAmount: string
challengeOutcome: string
} }

21
web/components/SEO.tsx
View File

@ -10,7 +10,7 @@ export type OgCardProps = {
creatorAvatarUrl?: string creatorAvatarUrl?: string
} }
function buildCardUrl(props: OgCardProps) { function buildCardUrl(props: OgCardProps, challengeProps?: ChallengeCardProps) {
const probabilityParam = const probabilityParam =
props.probability === undefined props.probability === undefined
? '' ? ''
@ -20,6 +20,10 @@ function buildCardUrl(props: OgCardProps) {
? '' ? ''
: `&creatorAvatarUrl=${encodeURIComponent(props.creatorAvatarUrl ?? '')}` : `&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 // URL encode each of the props, then add them as query params
return ( return (
`https://manifold-og-image.vercel.app/m.png` + `https://manifold-og-image.vercel.app/m.png` +
@ -28,9 +32,14 @@ function buildCardUrl(props: OgCardProps) {
`&metadata=${encodeURIComponent(props.metadata)}` + `&metadata=${encodeURIComponent(props.metadata)}` +
`&creatorName=${encodeURIComponent(props.creatorName)}` + `&creatorName=${encodeURIComponent(props.creatorName)}` +
creatorAvatarUrlParam + creatorAvatarUrlParam +
`&creatorUsername=${encodeURIComponent(props.creatorUsername)}` `&creatorUsername=${encodeURIComponent(props.creatorUsername)}` +
challengeUrlParams
) )
} }
type ChallengeCardProps = {
challengeAmount: string
challengeOutcome: string
}
export function SEO(props: { export function SEO(props: {
title: string title: string
@ -38,8 +47,10 @@ export function SEO(props: {
url?: string url?: string
children?: ReactNode children?: ReactNode
ogCardProps?: OgCardProps ogCardProps?: OgCardProps
challengeCardProps?: ChallengeCardProps
}) { }) {
const { title, description, url, children, ogCardProps } = props const { title, description, url, children, ogCardProps, challengeCardProps } =
props
return ( return (
<Head> <Head>
@ -71,13 +82,13 @@ export function SEO(props: {
<> <>
<meta <meta
property="og:image" property="og:image"
content={buildCardUrl(ogCardProps)} content={buildCardUrl(ogCardProps, challengeCardProps)}
key="image1" key="image1"
/> />
<meta name="twitter:card" content="summary_large_image" key="card" /> <meta name="twitter:card" content="summary_large_image" key="card" />
<meta <meta
name="twitter:image" name="twitter:image"
content={buildCardUrl(ogCardProps)} content={buildCardUrl(ogCardProps, challengeCardProps)}
key="image2" key="image2"
/> />
</> </>

4
web/hooks/use-save-referral.ts
View File

@ -6,7 +6,7 @@ import { User, writeReferralInfo } from 'web/lib/firebase/users'
export const useSaveReferral = ( export const useSaveReferral = (
user?: User | null, user?: User | null,
options?: { options?: {
defaultReferrer?: string defaultReferrerUsername?: string
contractId?: string contractId?: string
groupId?: string groupId?: string
} }
@ -18,7 +18,7 @@ export const useSaveReferral = (
referrer?: string referrer?: string
} }
const actualReferrer = referrer || options?.defaultReferrer const actualReferrer = referrer || options?.defaultReferrerUsername
if (!user && router.isReady && actualReferrer) { if (!user && router.isReady && actualReferrer) {
writeReferralInfo(actualReferrer, options?.contractId, options?.groupId) writeReferralInfo(actualReferrer, options?.contractId, options?.groupId)

2
web/pages/[username]/[contractSlug].tsx
View File

@ -155,7 +155,7 @@ export function ContractPageContent(
const ogCardProps = getOpenGraphProps(contract) const ogCardProps = getOpenGraphProps(contract)
useSaveReferral(user, { useSaveReferral(user, {
defaultReferrer: contract.creatorUsername, defaultReferrerUsername: contract.creatorUsername,
contractId: contract.id, contractId: contract.id,
}) })

13
web/pages/challenges/[username]/[contractSlug]/[challengeSlug].tsx
View File

@ -40,6 +40,7 @@ import { ContractProbGraph } from 'web/components/contract/contract-prob-graph'
import { SEO } from 'web/components/SEO' import { SEO } from 'web/components/SEO'
import { getOpenGraphProps } from 'web/components/contract/contract-card-preview' import { getOpenGraphProps } from 'web/components/contract/contract-card-preview'
import Custom404 from 'web/pages/404' import Custom404 from 'web/pages/404'
import { useSaveReferral } from 'web/hooks/use-save-referral'
export const getStaticProps = fromPropz(getStaticPropz) export const getStaticProps = fromPropz(getStaticPropz)
export async function getStaticPropz(props: { export async function getStaticPropz(props: {
@ -92,15 +93,17 @@ export default function ChallengePage(props: {
useChallenge(props.challengeSlug, contract?.id) ?? props.challenge useChallenge(props.challengeSlug, contract?.id) ?? props.challenge
const { user, bets } = props const { user, bets } = props
const currentUser = useUser() const currentUser = useUser()
useSaveReferral(currentUser, {
defaultReferrerUsername: challenge?.creatorUsername,
})
if (!contract || !challenge) return <Custom404 /> if (!contract || !challenge) return <Custom404 />
const ogCardProps = getOpenGraphProps(contract) const ogCardProps = getOpenGraphProps(contract)
ogCardProps.creatorUsername = challenge.creatorUsername ogCardProps.creatorUsername = challenge.creatorUsername
ogCardProps.creatorAvatarUrl = challenge.creatorAvatarUrl ogCardProps.creatorAvatarUrl = challenge.creatorAvatarUrl
ogCardProps.question = 'I challenge you to a bet: ' + contract.question ogCardProps.question = 'CHALLENGED:' + contract.question
ogCardProps.probability = ogCardProps.probability = ''
formatMoney(challenge.creatorAmount) + ' on ' + challenge.creatorOutcome
return ( return (
<Page> <Page>
@ -109,6 +112,10 @@ export default function ChallengePage(props: {
description={ogCardProps.description} description={ogCardProps.description}
url={getChallengeUrl(challenge).replace('https://', '')} url={getChallengeUrl(challenge).replace('https://', '')}
ogCardProps={ogCardProps} ogCardProps={ogCardProps}
challengeCardProps={{
challengeOutcome: challenge.creatorOutcome,
challengeAmount: challenge.creatorAmount + '',
}}
/> />
{challenge.acceptances.length >= challenge.maxUses ? ( {challenge.acceptances.length >= challenge.maxUses ? (
<ClosedChallengeContent <ClosedChallengeContent

2
web/pages/group/[...slugs]/index.tsx
View File

@ -153,7 +153,7 @@ export default function GroupPage(props: {
const user = useUser() const user = useUser()
useSaveReferral(user, { useSaveReferral(user, {
defaultReferrer: creator.username, defaultReferrerUsername: creator.username,
groupId: group?.id, groupId: group?.id,
}) })