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

Start customizing opengraph image

Browse Source
This commit is contained in:
Austin Chen 2022-01-07 13:27:54 -08:00
parent fccf52eb34
commit aba0022a00
2 changed files with 101 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,3 @@
import { readFileSync } from "fs";
import marked from "marked";
import { sanitizeHtml } from "./sanitizer";
import { ParsedRequest } from "./types";
@ -6,16 +5,6 @@ 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";
let foreground = "black";
@ -30,27 +19,6 @@ 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%);
@ -115,15 +83,18 @@ export function getHtml(parsedReq: ParsedRequest) {
const { text, theme, md, fontSize, images, widths, heights } = parsedReq;
return `<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Generated Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8">
<title>Generated Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
${getCss(theme, fontSize)}
</style>
<body>
<div>
<div class="spacer">
<div class="spacer"></div>
<div class="logo-wrapper">
${images
.map(
@ -132,7 +103,6 @@ export function getHtml(parsedReq: ParsedRequest) {
)
.join("")}
</div>
<div class="spacer">
<div class="heading">${emojify(
md ? marked(text) : sanitizeHtml(text)
)}

94
og-image/public/og-cover.html Normal file
View File

@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Generated Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap");
body {
background: white;
background-image: radial-gradient(
circle at 25px 25px,
lightgray 2%,
transparent 0%
),
radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%);
background-size: 100px 100px;
height: 100vh;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
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 0.05em 0 0.1em;
vertical-align: -0.1em;
}
.heading {
font-family: "Major Mono Display", monospace;
font-size: 100px;
font-style: normal;
color: black;
line-height: 1.8;
}
</style>
<body>
<div>
<div class="spacer"></div>
<div class="logo-wrapper">
<img
class="logo"
alt="Generated Image"
src="https:&#x2F;&#x2F;manifold.markets&#x2F;logo.png"
width="auto"
height="225"
/>
</div>
<div class="heading">
<p><strong>Helloz</strong> World</p>
</div>
</div>
</body>
</html>