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