✨ add thumbnail

antoinekm · antoinekm · commit 5c5e69183736 · 2022-08-22T17:31:37.000+02:00
diff --git a/api/_lib/parser.ts b/api/_lib/parser.ts
@@ -5,7 +5,7 @@ import { ParsedRequest, Theme } from './types';
 export function parseRequest(req: IncomingMessage) {
     console.log('HTTP ' + req.url);
     const { pathname, query } = parse(req.url || '/', true);
-    const { fontSize, images, widths, heights, theme, md, description } = (query || {});
+    const { description, thumbnail, fontSize, images, widths, heights, theme, md } = (query || {});
 
     if (Array.isArray(fontSize)) {
         throw new Error('Expected a single fontSize');
@@ -16,6 +16,9 @@ export function parseRequest(req: IncomingMessage) {
     if (Array.isArray(description)) {
         throw new Error('Expected a single description');
     }
+    if (Array.isArray(thumbnail)) {
+        throw new Error('Expected a single description');
+    }
     
     const arr = (pathname || '/').slice(1).split('.');
     let extension = '';
@@ -33,6 +36,7 @@ export function parseRequest(req: IncomingMessage) {
         fileType: extension === 'jpeg' ? extension : 'png',
         title: decodeURIComponent(text),
         description: decodeURIComponent(getString(description)),
+        thumbnail: getString(thumbnail),
         theme: (theme === 'light' || theme === 'black' || theme === 'dark' || theme === 'expat' || theme === 'night') ? theme : 'light',
         md: md === '1' || md === 'true',
         fontSize: fontSize || '96px',
diff --git a/api/_lib/template.ts b/api/_lib/template.ts
@@ -8,7 +8,7 @@ const emojify = (text: string) => twemoji.parse(text, twOptions);
 
 const mono = readFileSync(`${__dirname}/../_fonts/Vera-Mono.woff2`).toString('base64');
 
-function getCss(theme: Theme, fontSize: string) {
+function getCss(theme: Theme, fontSize: string, thumbnail?: string) {
     let background = 'white';
     let foreground = 'black';
 
@@ -31,6 +31,8 @@ function getCss(theme: Theme, fontSize: string) {
             break;
     }
 
+    if(thumbnail) background = `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, ${background} 100%), url(${thumbnail});`;
+
     return `
     @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
     
@@ -47,6 +49,9 @@ function getCss(theme: Theme, fontSize: string) {
 
     body {
         background: ${background};
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
         height: 100vh;
         display: flex;
         flex-direction: column;
@@ -124,14 +129,14 @@ function getCss(theme: Theme, fontSize: string) {
 }
 
 export function getHtml(parsedReq: ParsedRequest) {
-    const { title, description, theme, md, fontSize, images, widths, heights } = parsedReq;
+    const { title, description, thumbnail, 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">
     <style>
-        ${getCss(theme, fontSize)}
+        ${getCss(theme, fontSize, thumbnail)}
     </style>
     <body>
         <div class="container">
diff --git a/api/_lib/types.ts b/api/_lib/types.ts
@@ -5,6 +5,7 @@ export interface ParsedRequest {
     fileType: FileType;
     title: string;
     description: string;
+    thumbnail: string;
     theme: Theme;
     md: boolean;
     fontSize: string;
diff --git a/web/index.ts b/web/index.ts
@@ -192,6 +192,7 @@ const App = (_: any, state: AppState, setState: SetState) => {
         md = true,
         title = 'onRuntime Studio',
         description = 'Enjoy this tool from **onRuntime Studio**!',
+        thumbnail = 'https://picsum.photos/1920/1080',
         images=[imageLightOptions[0].value],
         widths=[],
         heights=[],
@@ -207,6 +208,7 @@ const App = (_: any, state: AppState, setState: SetState) => {
     const url = new URL(window.location.origin);
     url.pathname = `${encodeURIComponent(title)}.${fileType}`;
     url.searchParams.append('description', encodeURIComponent(description));
+    url.searchParams.append('thumbnail', thumbnail);
     url.searchParams.append('theme', theme);
     url.searchParams.append('md', mdValue);
     url.searchParams.append('fontSize', fontSize);
@@ -282,6 +284,16 @@ const App = (_: any, state: AppState, setState: SetState) => {
                         }
                     })
                 }),
+                H(Field, {
+                    label: 'Thumbnail Input',
+                    input: H(TextInput, {
+                        value: thumbnail,
+                        oninput: (val: string) => {
+                            console.log('oninput ' + val, url);
+                            setLoadingState({ thumbnail: val, overrideUrl: url });
+                        }
+                    })
+                }),
                 H(Field, {
                     label: 'Image 1',
                     input: H('div',
