flip/og-image
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/og-image.git synced 2026-02-06 10:46:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add query string for widths & heights

Browse Source
This commit is contained in:
Steven 2019-03-01 14:41:27 -05:00
parent 4498cffb3e
commit dde2c24cbb
4 changed files with 34 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/card.ts
View File

@ -5,11 +5,17 @@ import { getHtml } from './template';
import { writeTempFile, pathToFileURL } from './file';
const isDev = !process.env.NOW_REGION;
const isHtmlDebug = process.env.OG_HTML_DEBUG === '1';
export default async function handler(req: IncomingMessage, res: ServerResponse) {
try {
const parsedReq = parseRequest(req);
const html = getHtml(parsedReq);
if (isHtmlDebug) {
res.setHeader('Content-Type', 'text/html');
res.end(html);
return;
}
const { text, fileType } = parsedReq;
const filePath = await writeTempFile(text, html);
const fileUrl = pathToFileURL(filePath);

14
src/parser.ts
View File

@ -4,14 +4,14 @@ import { parse } from 'url';
export function parseRequest(req: IncomingMessage) {
console.log('HTTP ' + req.url);
const { pathname = '/', query = {} } = parse(req.url || '', true);
const { fontSize, images, theme, md } = query;
const { fontSize, images, widths, heights, theme, md } = query;
if (Array.isArray(fontSize)) {
throw new Error('Expected a single fontSize');
}
if (Array.isArray(theme)) {
throw new Error('Expected a single theme');
}
const arr = pathname.slice(1).split('.');
let extension = '';
@ -31,13 +31,19 @@ export function parseRequest(req: IncomingMessage) {
theme: theme === 'dark' ? 'dark' : 'light',
md: md === '1' || md === 'true',
fontSize: fontSize || '96px',
images: Array.isArray(images) ? images : [images],
images: getArray(images),
widths: getArray(widths),
heights: getArray(heights),
};
parsedRequest.images = getDefaultImages(parsedRequest.images, parsedRequest.theme);
return parsedRequest;
}
function getDefaultImages(images: string[], theme: Theme) {
function getArray(stringOrArray: string[] | string): string[] {
return Array.isArray(stringOrArray) ? stringOrArray : [stringOrArray];
}
function getDefaultImages(images: string[], theme: Theme): string[] {
if (images.length > 0 && images[0] && images[0].startsWith('https://assets.zeit.co/image/upload/front/assets/design/')) {
return images;
}

27
src/template.ts
View File

@ -64,7 +64,7 @@ function getCss(theme: string, fontSize: string) {
content: '\`';
}
.img-wrapper {
.logo-wrapper {
display: flex;
align-items: center;
align-content: center;
@ -73,8 +73,6 @@ function getCss(theme: string, fontSize: string) {
}
.logo {
width: auto;
height: 225px;
margin: 0 75px;
}
@ -88,7 +86,7 @@ function getCss(theme: string, fontSize: string) {
margin: 150px;
}
img.emoji {
.emoji {
height: 1em;
width: 1em;
margin: 0 .05em 0 .1em;
@ -105,8 +103,7 @@ function getCss(theme: string, fontSize: string) {
}
export function getHtml(parsedReq: ParsedRequest) {
const { text, theme, md, fontSize, images } = parsedReq;
const [ firstImage, ...otherImages ] = images;
const { text, theme, md, fontSize, images, widths, heights } = parsedReq;
return `<!DOCTYPE html>
<html>
<meta charset="utf-8">
@ -118,11 +115,10 @@ export function getHtml(parsedReq: ParsedRequest) {
<body>
<div>
<div class="spacer">
<div class="img-wrapper">
<img class="logo" src="${sanitizeHtml(firstImage)}" />
${otherImages.map(img =>
`<div class="plus">+</div><img class="logo" src="${sanitizeHtml(img)}" />`
)}
<div class="logo-wrapper">
${images.map((img, i) =>
getPlusSign(i) + getImage(img, widths[i], heights[i])
).join('')}
</div>
<div class="spacer">
<div class="heading">${emojify(
@ -133,3 +129,12 @@ export function getHtml(parsedReq: ParsedRequest) {
</body>
</html>`;
}
function getImage(url: string, width ='auto', height = '225') {
const src = sanitizeHtml(url);
return `<img class="logo" src="${src}" width="${width}" height="${height}" />`
}
function getPlusSign(i: number) {
return i === 0 ? '' : '<div class="plus">+</div>';
}

2
src/types.d.ts vendored
View File

@ -8,4 +8,6 @@ interface ParsedRequest {
md: boolean;
fontSize: string;
images: string[];
widths: string[];
heights: string[];
}