From dde2c24cbb06199e16970078c8fa0638e6754b71 Mon Sep 17 00:00:00 2001 From: Steven Date: Fri, 1 Mar 2019 14:41:27 -0500 Subject: [PATCH] Add query string for widths & heights --- src/card.ts | 6 ++++++ src/parser.ts | 14 ++++++++++---- src/template.ts | 27 ++++++++++++++++----------- src/types.d.ts | 2 ++ 4 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/card.ts b/src/card.ts index 2d85092..9594c2e 100644 --- a/src/card.ts +++ b/src/card.ts @@ -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); diff --git a/src/parser.ts b/src/parser.ts index 4ee2a76..d53c6c4 100644 --- a/src/parser.ts +++ b/src/parser.ts @@ -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; } diff --git a/src/template.ts b/src/template.ts index 1e0413d..7e48831 100644 --- a/src/template.ts +++ b/src/template.ts @@ -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 ` @@ -118,11 +115,10 @@ export function getHtml(parsedReq: ParsedRequest) {
-
- - ${otherImages.map(img => - `
+
` - )} +
+ ${images.map((img, i) => + getPlusSign(i) + getImage(img, widths[i], heights[i]) + ).join('')}
${emojify( @@ -133,3 +129,12 @@ export function getHtml(parsedReq: ParsedRequest) { `; } + +function getImage(url: string, width ='auto', height = '225') { + const src = sanitizeHtml(url); + return `` +} + +function getPlusSign(i: number) { + return i === 0 ? '' : '
+
'; +} diff --git a/src/types.d.ts b/src/types.d.ts index b4bc404..85a8bb1 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -8,4 +8,6 @@ interface ParsedRequest { md: boolean; fontSize: string; images: string[]; + widths: string[]; + heights: string[]; }