open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Take in params to configure Manifold card

Browse Source
This commit is contained in:
Austin Chen 2022-01-09 18:04:52 -05:00
parent a0dc66648f
commit 3d0e5da838
4 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
og-image/api/_lib/parser.ts
View File

@ -5,7 +5,22 @@ import { ParsedRequest } from "./types";
export function parseRequest(req: IncomingMessage) { export function parseRequest(req: IncomingMessage) {
console.log("HTTP " + req.url); console.log("HTTP " + req.url);
const { pathname, query } = parse(req.url || "/", true); 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)) { if (Array.isArray(fontSize)) {
throw new Error("Expected a single fontSize"); throw new Error("Expected a single fontSize");
@ -26,6 +41,15 @@ export function parseRequest(req: IncomingMessage) {
text = arr.join("."); 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 = { const parsedRequest: ParsedRequest = {
fileType: extension === "jpeg" ? extension : "png", fileType: extension === "jpeg" ? extension : "png",
text: decodeURIComponent(text), text: decodeURIComponent(text),
@ -35,6 +59,15 @@ export function parseRequest(req: IncomingMessage) {
images: getArray(images), images: getArray(images),
widths: getArray(widths), widths: getArray(widths),
heights: getArray(heights), 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); parsedRequest.images = getDefaultImages(parsedRequest.images);
return parsedRequest; return parsedRequest;

29
og-image/api/_lib/template.ts
View File

@ -82,7 +82,17 @@ function getCss(theme: string, fontSize: string) {
} }
export function getHtml(parsedReq: ParsedRequest) { export function getHtml(parsedReq: ParsedRequest) {
const { theme, fontSize } = parsedReq; const {
theme,
fontSize,
question,
probability,
metadata,
creatorName,
creatorUsername,
creatorAvatarUrl,
} = parsedReq;
return `<!DOCTYPE html> return `<!DOCTYPE html>
<html> <html>
<head> <head>
@ -100,13 +110,13 @@ export function getHtml(parsedReq: ParsedRequest) {
<div class="absolute left-24 top-8"> <div class="absolute left-24 top-8">
<div class="flex flex-row align-bottom gap-6"> <div class="flex flex-row align-bottom gap-6">
<img <img
class="h-24 w-24 rounded-full bg-gray-400 flex items-center justify-center" class="h-24 w-24 rounded-full bg-white flex items-center justify-center"
src="https://lh3.googleusercontent.com/a-/AOh14GiZyl1lBehuBMGyJYJhZd-N-mstaUtgE4xdI22lLw=s96-c" src="${creatorAvatarUrl}"
alt="" alt=""
/> />
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-gray-900 text-3xl">Austin Chen</p> <p class="text-gray-900 text-3xl">${creatorName}</p>
<p class="text-gray-500 text-3xl">@AustinChen</p> <p class="text-gray-500 text-3xl">@${creatorUsername}</p>
</div> </div>
</div> </div>
</div> </div>
@ -129,11 +139,11 @@ export function getHtml(parsedReq: ParsedRequest) {
</div> </div>
<div class="flex flex-row justify-between gap-12 pt-36"> <div class="flex flex-row justify-between gap-12 pt-36">
<div class="text-indigo-700 text-6xl"> <div class="text-indigo-700 text-6xl leading-snug">
Will Manifold switch its logo to a manatee by April? ${question}
</div> </div>
<div class="flex flex-col text-primary"> <div class="flex flex-col text-primary">
<div class="text-8xl">30%</div> <div class="text-8xl">${probability}%</div>
<div class="text-4xl">chance</div> <div class="text-4xl">chance</div>
</div> </div>
</div> </div>
@ -141,8 +151,7 @@ export function getHtml(parsedReq: ParsedRequest) {
<!-- Metadata --> <!-- Metadata -->
<div class="absolute bottom-16"> <div class="absolute bottom-16">
<div class="text-gray-500 text-3xl"> <div class="text-gray-500 text-3xl">
Jan 7 &nbsp;•&nbsp; Closes Mar 31, 9:59pm &nbsp;•&nbsp; M$ 448 pool ${metadata}
&nbsp;•&nbsp; #ManifoldMarkets #fun
</div> </div>
</div> </div>
</div> </div>

8
og-image/api/_lib/types.ts
View File

@ -10,4 +10,12 @@ export interface ParsedRequest {
images: string[]; images: string[];
widths: string[]; widths: string[];
heights: string[]; heights: string[];
// Attributes for Manifold card:
question: string;
probability: string;
metadata: string;
creatorName: string;
creatorUsername: string;
creatorAvatarUrl: string;
} }

2
og-image/public/og-cover.html
View File

@ -114,7 +114,7 @@
</div> </div>
<div class="flex flex-row justify-between gap-12 pt-36"> <div class="flex flex-row justify-between gap-12 pt-36">
<div class="text-indigo-700 text-6xl"> <div class="text-indigo-700 text-6xl leading-snug">
Will Manifold switch its logo to a manatee by April? Will Manifold switch its logo to a manatee by April?
</div> </div>
<div class="flex flex-col text-primary"> <div class="flex flex-col text-primary">