138 lines
3.8 KiB
TypeScript
138 lines
3.8 KiB
TypeScript
import { ParsedRequest } from './types'
|
|
import { getTemplateCss } from './template-css'
|
|
|
|
export function getHtml(parsedReq: ParsedRequest) {
|
|
const {
|
|
theme,
|
|
fontSize,
|
|
question,
|
|
probability,
|
|
metadata,
|
|
creatorName,
|
|
creatorUsername,
|
|
creatorAvatarUrl,
|
|
numericValue,
|
|
resolution,
|
|
} = parsedReq
|
|
const MAX_QUESTION_CHARS = 100
|
|
const truncatedQuestion =
|
|
question.length > MAX_QUESTION_CHARS
|
|
? question.slice(0, MAX_QUESTION_CHARS) + '...'
|
|
: question
|
|
const hideAvatar = creatorAvatarUrl ? '' : 'hidden'
|
|
|
|
let resolutionColor = 'text-primary'
|
|
let resolutionString = 'YES'
|
|
switch (resolution) {
|
|
case 'YES':
|
|
break
|
|
case 'NO':
|
|
resolutionColor = 'text-red-500'
|
|
resolutionString = 'NO'
|
|
break
|
|
case 'CANCEL':
|
|
resolutionColor = 'text-yellow-500'
|
|
resolutionString = 'N/A'
|
|
break
|
|
case 'MKT':
|
|
resolutionColor = 'text-blue-500'
|
|
resolutionString = numericValue ? numericValue : probability
|
|
break
|
|
}
|
|
|
|
const resolutionDiv = `
|
|
<span class='text-center ${resolutionColor}'>
|
|
<div class="text-8xl">
|
|
${resolutionString}
|
|
</div>
|
|
<div class="text-4xl">${
|
|
resolution === 'CANCEL' ? '' : 'resolved'
|
|
}</div>
|
|
</span>`
|
|
|
|
const probabilityDiv = `
|
|
<span class='text-primary text-center'>
|
|
<div class="text-8xl">${probability}</div>
|
|
<div class="text-4xl">chance</div>
|
|
</span>`
|
|
|
|
const numericValueDiv = `
|
|
<span class='text-blue-500 text-center'>
|
|
<div class="text-8xl ">${numericValue}</div>
|
|
<div class="text-4xl">expected</div>
|
|
</span>
|
|
`
|
|
|
|
return `<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Generated Image</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<style>
|
|
${getTemplateCss(theme, fontSize)}
|
|
</style>
|
|
<body>
|
|
<div class="px-24">
|
|
<!-- Profile image -->
|
|
<div class="absolute left-24 top-8">
|
|
<div class="flex flex-row align-bottom gap-6">
|
|
<img
|
|
class="h-24 w-24 rounded-full bg-white flex items-center justify-center ${hideAvatar}"
|
|
src="${creatorAvatarUrl}"
|
|
alt=""
|
|
/>
|
|
<div class="flex flex-col gap-2">
|
|
<p class="text-gray-900 text-3xl">${creatorName}</p>
|
|
<p class="text-gray-500 text-3xl">@${creatorUsername}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manifold logo -->
|
|
<div class="absolute right-24 top-8">
|
|
<a class="flex flex-row gap-3" href="/"
|
|
><img
|
|
class="sm:h-12 sm:w-12"
|
|
src="https://manifold.markets/logo.png"
|
|
width="40"
|
|
height="40"
|
|
/>
|
|
<div
|
|
class="hidden sm:flex font-major-mono lowercase mt-1 sm:text-3xl md:whitespace-nowrap"
|
|
>
|
|
Manifold Markets
|
|
</div></a
|
|
>
|
|
</div>
|
|
|
|
<div class="flex flex-row justify-between gap-12 pt-36">
|
|
<div class="text-indigo-700 text-6xl leading-tight">
|
|
${truncatedQuestion}
|
|
</div>
|
|
<div class="flex flex-col">
|
|
${
|
|
resolution
|
|
? resolutionDiv
|
|
: numericValue
|
|
? numericValueDiv
|
|
: probability
|
|
? probabilityDiv
|
|
: ''
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata -->
|
|
<div class="absolute bottom-16">
|
|
<div class="text-gray-500 text-3xl max-w-[80vw]">
|
|
${metadata}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>`
|
|
}
|