diff --git a/og-image/api/_lib/template.ts b/og-image/api/_lib/template.ts index 04430162..c59884f8 100644 --- a/og-image/api/_lib/template.ts +++ b/og-image/api/_lib/template.ts @@ -1,9 +1,5 @@ -import marked from "marked"; import { sanitizeHtml } from "./sanitizer"; import { ParsedRequest } from "./types"; -const twemoji = require("twemoji"); -const twOptions = { folder: "svg", ext: ".svg" }; -const emojify = (text: string) => twemoji.parse(text, twOptions); function getCss(theme: string, fontSize: string) { let background = "white"; @@ -24,10 +20,7 @@ function getCss(theme: string, fontSize: string) { background-image: radial-gradient(circle at 25px 25px, ${radial} 2%, transparent 0%), radial-gradient(circle at 75px 75px, ${radial} 2%, transparent 0%); background-size: 100px 100px; height: 100vh; - display: flex; - text-align: center; - align-items: center; - justify-content: center; + font-family: "Readex Pro", sans-serif; } code { @@ -76,11 +69,20 @@ function getCss(theme: string, fontSize: string) { font-style: normal; color: ${foreground}; line-height: 1.8; - }`; + } + + .font-major-mono { + font-family: "Major Mono Display", monospace; + } + + .text-primary { + color: #11b981; + } + `; } export function getHtml(parsedReq: ParsedRequest) { - const { text, theme, md, fontSize, images, widths, heights } = parsedReq; + const { theme, fontSize } = parsedReq; return ` @@ -92,36 +94,58 @@ export function getHtml(parsedReq: ParsedRequest) { - -
-
-
- ${images - .map( - (img, i) => - getPlusSign(i) + getImage(img, widths[i], heights[i]) - ) - .join("")} -
-
${emojify( - md ? marked(text) : sanitizeHtml(text) - )} -
+ +
+ +
+
+ +
+

Austin Chen

+

@AustinChen

+
- +
+ + +
+ + +
+ +
+
+ Will Manifold switch its logo to a manatee by April? +
+
+
30%
+
chance
+
+
+ + +
+
+ Jan 7  •  Closes Mar 31, 9:59pm  •  M$ 448 pool +  •  #ManifoldMarkets #fun +
+
+
+ `; } - -function getImage(src: string, width = "auto", height = "225") { - return ``; -} - -function getPlusSign(i: number) { - return i === 0 ? "" : '
+
'; -}