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 {
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 `<!DOCTYPE html>
<html>
@ -141,7 +144,7 @@ export function getHtml(parsedReq: ParsedRequest) {
<div class="flex flex-row justify-between gap-12 pt-36">
<div class="text-indigo-700 text-6xl leading-tight">
${question}
${truncatedQuestion}
</div>
<div class="flex flex-col text-primary">
<div class="text-8xl">${probability}</div>

8
web/components/SEO.tsx
View File

@ -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)}`
)
}

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

@ -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,
}
}