open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
c762869b83
manifold/og-image/api/_lib/template.ts

133 lines
3.6 KiB
TypeScript
Raw Normal View History

Update SEO for non-binary markets
2022-02-18 00:34:11 +00:00
import { ParsedRequest } from './types'
Show resolution on og card image (#834) * Handle resolved markets * Add in group names as hashtags
2022-09-01 19:55:24 +00:00
import { getTemplateCss } from './template-css'
Set up a custom OpenGraph image generator for social media previews (#20) * Copy in og-image code * Add "yarn start" command in lieu of vercel * Don't require that images be sourced from vercel * Load in Major Mono and Readex fonts * Fix vercel config (?) * Replace default image with Manifold's * Add some brief instructions on getting started * In the UI, use the default image * Fix typescript errors * More typescript fixing
2022-01-07 20:07:38 +00:00
export function getHtml(parsedReq: ParsedRequest) {
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
const {
theme,
fontSize,
question,
probability,
metadata,
creatorName,
creatorUsername,
creatorAvatarUrl,
Show numeric values in card preview
2022-08-05 12:56:10 +00:00
numericValue,
Show resolution on og card image (#834) * Handle resolved markets * Add in group names as hashtags
2022-09-01 19:55:24 +00:00
resolution,
Update SEO for non-binary markets
2022-02-18 00:34:11 +00:00
} = parsedReq
const hideAvatar = creatorAvatarUrl ? '' : 'hidden'
Show resolution on og card image (#834) * Handle resolved markets * Add in group names as hashtags
2022-09-01 19:55:24 +00:00
let resolutionColor = 'text-primary'
Capitalize yes/no resolution outcomes
2022-09-03 13:29:35 +00:00
let resolutionString = 'YES'
Show resolution on og card image (#834) * Handle resolved markets * Add in group names as hashtags
2022-09-01 19:55:24 +00:00
switch (resolution) {
case 'YES':
break
case 'NO':
resolutionColor = 'text-red-500'
Capitalize yes/no resolution outcomes
2022-09-03 13:29:35 +00:00
resolutionString = 'NO'
Show resolution on og card image (#834) * Handle resolved markets * Add in group names as hashtags
2022-09-01 19:55:24 +00:00
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>
`
Set up a custom OpenGraph image generator for social media previews (#20) * Copy in og-image code * Add "yarn start" command in lieu of vercel * Don't require that images be sourced from vercel * Load in Major Mono and Readex fonts * Fix vercel config (?) * Replace default image with Manifold's * Add some brief instructions on getting started * In the UI, use the default image * Fix typescript errors * More typescript fixing
2022-01-07 20:07:38 +00:00
return `<!DOCTYPE html>
<html>
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
<head>
<meta charset="utf-8">
<title>Generated Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
Use line-clamp in sharing card
2022-10-04 15:06:23 +00:00
<script src="https://cdn.tailwindcss.com?plugins=line-clamp"></script>
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
</head>
Set up a custom OpenGraph image generator for social media previews (#20) * Copy in og-image code * Add "yarn start" command in lieu of vercel * Don't require that images be sourced from vercel * Load in Major Mono and Readex fonts * Fix vercel config (?) * Replace default image with Manifold's * Add some brief instructions on getting started * In the UI, use the default image * Fix typescript errors * More typescript fixing
2022-01-07 20:07:38 +00:00
<style>
Show resolution on og card image (#834) * Handle resolved markets * Add in group names as hashtags
2022-09-01 19:55:24 +00:00
${getTemplateCss(theme, fontSize)}
Set up a custom OpenGraph image generator for social media previews (#20) * Copy in og-image code * Add "yarn start" command in lieu of vercel * Don't require that images be sourced from vercel * Load in Major Mono and Readex fonts * Fix vercel config (?) * Replace default image with Manifold's * Add some brief instructions on getting started * In the UI, use the default image * Fix typescript errors * More typescript fixing
2022-01-07 20:07:38 +00:00
</style>
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
<body>
<div class="px-24">
<!-- Profile image -->
<div class="absolute left-24 top-8">
<div class="flex flex-row align-bottom gap-6">
<img
Use the generated OpenGraph card in all markets (#23) * Run OpenGraph server on dev port 3001 * Cut '%' since frontend already passes it * Use the generated card in markets * Rename to ogCardProps * Don't show creator avatar url, for now * Remove bad comment
2022-01-10 07:05:24 +00:00
class="h-24 w-24 rounded-full bg-white flex items-center justify-center ${hideAvatar}"
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
src="${creatorAvatarUrl}"
alt=""
/>
Use the generated OpenGraph card in all markets (#23) * Run OpenGraph server on dev port 3001 * Cut '%' since frontend already passes it * Use the generated card in markets * Rename to ogCardProps * Don't show creator avatar url, for now * Remove bad comment
2022-01-10 07:05:24 +00:00
<div class="flex flex-col gap-2">
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
<p class="text-gray-900 text-3xl">${creatorName}</p>
<p class="text-gray-500 text-3xl">@${creatorUsername}</p>
</div>
Set up a custom OpenGraph image generator for social media previews (#20) * Copy in og-image code * Add "yarn start" command in lieu of vercel * Don't require that images be sourced from vercel * Load in Major Mono and Readex fonts * Fix vercel config (?) * Replace default image with Manifold's * Add some brief instructions on getting started * In the UI, use the default image * Fix typescript errors * More typescript fixing
2022-01-07 20:07:38 +00:00
</div>
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
</div>
Challenge Bets (#679) * Challenge bets * Store avatar url * Fix before and after probs * Check balance before creation * Calculate winning shares * pretty * Change winning value * Set shares to equal each other * Fix share challenge link * pretty * remove lib refs * Probability of bet is set to market * Remove peer pill * Cleanup * Button on contract page * don't show challenge if not binary or if resolved * challenge button (WIP) * fix accept challenge: don't change pool/probability * Opengraph preview [WIP] * elim lib * Edit og card props * Change challenge text * New card gen attempt * Get challenge on server * challenge button styling * Use env domain * Remove other window ref * Use challenge creator as avatar * Remove user name * Remove s from property, replace prob with outcome * challenge form * share text * Add in challenge parts to template and url * Challenge url params optional * Add challenge params to parse request * Parse please * Don't remove prob * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Challenge card styling * Add to readme about how to dev og-image * Add emojis * button: gradient background, 2xl size * beautify accept bet screen * update question button * Add separate challenge template * Accepted challenge sharing card, fix accept bet call * accept challenge button * challenge winner page * create challenge screen * Your outcome/cost=> acceptorOutcome/cost * New create challenge panel * Fix main merge * Add challenge slug to bet and filter by it * Center title * Add helper text * Add FAQ section * Lint * Columnize the user areas in preview link too * Absolutely position * Spacing * Orientation * Restyle challenges list, cache contract name * Make copying easy on mobile * Link spacing * Fix spacing * qr codes! * put your challenges first * eslint * Changes to contract buttons and create challenge modal * Change titles around for current bet * Add back in contract title after winning * Cleanup * Add challenge enabled flag * Spacing of switch button * Put sharing qr code in modal Co-authored-by: mantikoros <sgrugett@gmail.com>
2022-08-04 21:27:02 +00:00
<!-- Manifold logo -->
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
<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:&#x2F;&#x2F;manifold.markets&#x2F;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">
Use line-clamp in sharing card
2022-10-04 15:06:23 +00:00
<div class="text-indigo-700 text-6xl leading-tight line-clamp-4">
${question}
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
</div>
Show resolution on og card image (#834) * Handle resolved markets * Add in group names as hashtags
2022-09-01 19:55:24 +00:00
<div class="flex flex-col">
${
resolution
? resolutionDiv
: numericValue
? numericValueDiv
Remove chance from FR og-images
2022-09-06 15:36:41 +00:00
: probability
? probabilityDiv
: ''
Show resolution on og card image (#834) * Handle resolved markets * Add in group names as hashtags
2022-09-01 19:55:24 +00:00
}
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
</div>
</div>
Set up a custom OpenGraph image generator for social media previews (#20) * Copy in og-image code * Add "yarn start" command in lieu of vercel * Don't require that images be sourced from vercel * Load in Major Mono and Readex fonts * Fix vercel config (?) * Replace default image with Manifold's * Add some brief instructions on getting started * In the UI, use the default image * Fix typescript errors * More typescript fixing
2022-01-07 20:07:38 +00:00
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
<!-- Metadata -->
<div class="absolute bottom-16">
Remove spaces in hashtags & line clamp metadata
2022-10-04 15:14:27 +00:00
<div class="text-gray-500 text-3xl max-w-[80vw] line-clamp-2">
Dynamically generate Opengraph images for each market (#21) * Start customizing opengraph image * Fix cover image size to 1200x630 * Design a text-based, dynamic preview card * Load designed html into template.ts Remove twemoji for now too * Take in params to configure Manifold card * Switch back to hardcoded png for default case
2022-01-10 05:50:31 +00:00
${metadata}
</div>
</div>
</div>
</body>
Update SEO for non-binary markets
2022-02-18 00:34:11 +00:00
</html>`
Set up a custom OpenGraph image generator for social media previews (#20) * Copy in og-image code * Add "yarn start" command in lieu of vercel * Don't require that images be sourced from vercel * Load in Major Mono and Readex fonts * Fix vercel config (?) * Replace default image with Manifold's * Add some brief instructions on getting started * In the UI, use the default image * Fix typescript errors * More typescript fixing
2022-01-07 20:07:38 +00:00
}
Reference in New Issue Copy Permalink