diff --git a/og-image/api/_lib/chromium.ts b/og-image/api/_lib/chromium.ts index dc8ff57c..e6d01816 100644 --- a/og-image/api/_lib/chromium.ts +++ b/og-image/api/_lib/chromium.ts @@ -19,7 +19,7 @@ export async function getScreenshot( isDev: boolean ) { const page = await getPage(isDev); - await page.setViewport({ width: 2048, height: 1170 }); + await page.setViewport({ width: 1200, height: 630 }); await page.setContent(html); const file = await page.screenshot({ type }); return file; diff --git a/og-image/api/_lib/parser.ts b/og-image/api/_lib/parser.ts index bc4dfe4d..f65fcf27 100644 --- a/og-image/api/_lib/parser.ts +++ b/og-image/api/_lib/parser.ts @@ -5,7 +5,22 @@ import { ParsedRequest } from "./types"; export function parseRequest(req: IncomingMessage) { console.log("HTTP " + req.url); const { pathname, query } = parse(req.url || "/", true); - const { fontSize, images, widths, heights, theme, md } = query || {}; + const { + fontSize, + images, + widths, + heights, + theme, + md, + + // Attributes for Manifold card: + question, + probability, + metadata, + creatorName, + creatorUsername, + creatorAvatarUrl, + } = query || {}; if (Array.isArray(fontSize)) { throw new Error("Expected a single fontSize"); @@ -26,6 +41,15 @@ export function parseRequest(req: IncomingMessage) { text = arr.join("."); } + // Take a url query param and return a single string + const getString = (stringOrArray: string[] | string | undefined): string => { + if (Array.isArray(stringOrArray)) { + // If the query param is an array, return the first element + return stringOrArray[0]; + } + return stringOrArray || ""; + }; + const parsedRequest: ParsedRequest = { fileType: extension === "jpeg" ? extension : "png", text: decodeURIComponent(text), @@ -35,6 +59,15 @@ export function parseRequest(req: IncomingMessage) { images: getArray(images), widths: getArray(widths), heights: getArray(heights), + + question: + getString(question) || "Will you create a prediction market on Manifold?", + probability: getString(probability) || "85", + metadata: getString(metadata) || "Jan 1  •  M$ 123 pool", + creatorName: getString(creatorName) || "Manifold Markets", + creatorUsername: getString(creatorUsername) || "ManifoldMarkets", + creatorAvatarUrl: + getString(creatorAvatarUrl) || "https://manifold.markets/logo.png", }; parsedRequest.images = getDefaultImages(parsedRequest.images); return parsedRequest; diff --git a/og-image/api/_lib/template.ts b/og-image/api/_lib/template.ts index 8d89a3cf..3689cc2e 100644 --- a/og-image/api/_lib/template.ts +++ b/og-image/api/_lib/template.ts @@ -1,20 +1,5 @@ -import { readFileSync } from "fs"; -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); - -const rglr = readFileSync( - `${__dirname}/../_fonts/Inter-Regular.woff2` -).toString("base64"); -const bold = readFileSync(`${__dirname}/../_fonts/Inter-Bold.woff2`).toString( - "base64" -); -const mono = readFileSync(`${__dirname}/../_fonts/Vera-Mono.woff2`).toString( - "base64" -); function getCss(theme: string, fontSize: string) { let background = "white"; @@ -30,36 +15,12 @@ function getCss(theme: string, fontSize: string) { return ` @import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap'); - @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: normal; - src: url(data:font/woff2;charset=utf-8;base64,${rglr}) format('woff2'); - } - - @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: bold; - src: url(data:font/woff2;charset=utf-8;base64,${bold}) format('woff2'); - } - - @font-face { - font-family: 'Vera'; - font-style: normal; - font-weight: normal; - src: url(data:font/woff2;charset=utf-8;base64,${mono}) format("woff2"); - } - body { background: ${background}; 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 { @@ -108,50 +69,92 @@ 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, + + question, + probability, + metadata, + creatorName, + creatorUsername, + creatorAvatarUrl, + } = parsedReq; return ` - - Generated Image - + + + Generated Image + + + - -
-
-
- ${images - .map( - (img, i) => - getPlusSign(i) + getImage(img, widths[i], heights[i]) - ) - .join("")} -
-
-
${emojify( - md ? marked(text) : sanitizeHtml(text) - )} -
+ +
+ +
+
+ +
+

${creatorName}

+

@${creatorUsername}

+
- +
+ + +
+ + +
+ +
+
+ ${question} +
+
+
${probability}%
+
chance
+
+
+ + +
+
+ ${metadata} +
+
+
+ `; } - -function getImage(src: string, width = "auto", height = "225") { - return ``; -} - -function getPlusSign(i: number) { - return i === 0 ? "" : '
+
'; -} diff --git a/og-image/api/_lib/types.ts b/og-image/api/_lib/types.ts index 1335b84f..c0126a3b 100644 --- a/og-image/api/_lib/types.ts +++ b/og-image/api/_lib/types.ts @@ -10,4 +10,12 @@ export interface ParsedRequest { images: string[]; widths: string[]; heights: string[]; + + // Attributes for Manifold card: + question: string; + probability: string; + metadata: string; + creatorName: string; + creatorUsername: string; + creatorAvatarUrl: string; } diff --git a/og-image/public/og-cover.html b/og-image/public/og-cover.html new file mode 100644 index 00000000..94d45749 --- /dev/null +++ b/og-image/public/og-cover.html @@ -0,0 +1,135 @@ + + + + + Generated Image + + + + + +
+ +
+
+ +
+

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 +
+
+
+ + diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx index eec82f69..f2f2619d 100644 --- a/web/pages/_app.tsx +++ b/web/pages/_app.tsx @@ -30,7 +30,7 @@ function MyApp({ Component, pageProps }: AppProps) {