import { sanitizeHtml } from "./sanitizer";
import { ParsedRequest } from "./types";
function getCss(theme: string, fontSize: string) {
let background = "white";
let foreground = "black";
let radial = "lightgray";
if (theme === "dark") {
background = "black";
foreground = "white";
radial = "dimgray";
}
// To use Readex Pro: `font-family: 'Readex Pro', sans-serif;`
return `
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap');
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;
font-family: "Readex Pro", sans-serif;
}
code {
color: #D400FF;
font-family: 'Vera';
white-space: pre-wrap;
letter-spacing: -5px;
}
code:before, code:after {
content: '\`';
}
.logo-wrapper {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
justify-items: center;
}
.logo {
margin: 0 75px;
}
.plus {
color: #BBB;
font-family: Times New Roman, Verdana;
font-size: 100px;
}
.spacer {
margin: 150px;
}
.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}
.heading {
font-family: 'Major Mono Display', monospace;
font-size: ${sanitizeHtml(fontSize)};
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 {
theme,
fontSize,
question,
probability,
metadata,
creatorName,
creatorUsername,
creatorAvatarUrl,
} = parsedReq;
const hideAvatar = creatorAvatarUrl ? "" : "hidden";
return `
Generated Image
${creatorName}
@${creatorUsername}
`;
}
