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

Image preview: truncate to 100 chars, show avatar url (#111)

Browse Source 
* Truncate image preview to 120 chars

* Try 100 chars instead

* Pass along creatorAvatarUrl

Hoping nothing breaks if the avatarUrl is empty

* Thread through avatarUrl all the way

* Fix typescript
This commit is contained in:
Austin Chen 2022-04-29 19:38:31 -04:00 committed by GitHub
parent 73fc67955d
commit 78e8927de4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,7 +85,6 @@ export function getHtml(parsedReq: ParsedRequest) {
const { const {
theme, theme,
fontSize, fontSize,
question, question,
probability, probability,
metadata, metadata,
@ -93,6 +92,10 @@ export function getHtml(parsedReq: ParsedRequest) {
creatorUsername, creatorUsername,
creatorAvatarUrl, creatorAvatarUrl,
} = parsedReq } = parsedReq
const MAX_QUESTION_CHARS = 100
const truncatedQuestion = question.length > MAX_QUESTION_CHARS
? question.slice(0, MAX_QUESTION_CHARS) + '...'
: question
const hideAvatar = creatorAvatarUrl ? '' : 'hidden' const hideAvatar = creatorAvatarUrl ? '' : 'hidden'
return `<!DOCTYPE html> return `<!DOCTYPE html>
<html> <html>
@ -141,7 +144,7 @@ export function getHtml(parsedReq: ParsedRequest) {
<div class="flex flex-row justify-between gap-12 pt-36"> <div class="flex flex-row justify-between gap-12 pt-36">
<div class="text-indigo-700 text-6xl leading-tight"> <div class="text-indigo-700 text-6xl leading-tight">
${question} ${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">${probability}</div>

8
web/components/SEO.tsx
View File

@ -6,8 +6,7 @@ export type OgCardProps = {
metadata: string metadata: string
creatorName: string creatorName: string
creatorUsername: string creatorUsername: string
// TODO: Store creator avatar url in each contract, then enable this creatorAvatarUrl?: string
// creatorAvatarUrl: string
} }
function buildCardUrl(props: OgCardProps) { function buildCardUrl(props: OgCardProps) {
@ -15,6 +14,10 @@ function buildCardUrl(props: OgCardProps) {
props.probability === undefined props.probability === undefined
? '' ? ''
: `&probability=${encodeURIComponent(props.probability ?? '')}` : `&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 // URL encode each of the props, then add them as query params
return ( return (
@ -23,6 +26,7 @@ function buildCardUrl(props: OgCardProps) {
probabilityParam + probabilityParam +
`&metadata=${encodeURIComponent(props.metadata)}` + `&metadata=${encodeURIComponent(props.metadata)}` +
`&creatorName=${encodeURIComponent(props.creatorName)}` + `&creatorName=${encodeURIComponent(props.creatorName)}` +
creatorAvatarUrlParam +
`&creatorUsername=${encodeURIComponent(props.creatorUsername)}` `&creatorUsername=${encodeURIComponent(props.creatorUsername)}`
) )
} }

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

@ -324,8 +324,14 @@ function ContractTopTrades(props: {
} }
const getOpenGraphProps = (contract: Contract) => { const getOpenGraphProps = (contract: Contract) => {
const { resolution, question, creatorName, creatorUsername, outcomeType } = const {
contract resolution,
question,
creatorName,
creatorUsername,
outcomeType,
creatorAvatarUrl,
} = contract
const probPercent = const probPercent =
outcomeType === 'BINARY' ? getBinaryProbPercent(contract) : undefined outcomeType === 'BINARY' ? getBinaryProbPercent(contract) : undefined
@ -339,8 +345,9 @@ const getOpenGraphProps = (contract: Contract) => {
question, question,
probability: probPercent, probability: probPercent,
metadata: contractTextDetails(contract), metadata: contractTextDetails(contract),
creatorName: creatorName, creatorName,
creatorUsername: creatorUsername, creatorUsername,
creatorAvatarUrl,
description, description,
} }
} }