Merge pull request #4 from littletof/feat/theme

feat: accept theme override

Author: littletof

example.ts

@@ -33,4 +33,4 @@ const res = await runPrompt();
 
 await snap([
     {content: `\x1b[42m \x1b[1m\x1b[37mSnapper\x1b[39m\x1b[22m 📷  \x1b[49m`, imageSavePath: 'snapper.png', viewport: {width: 145, height: 35}},
-]);
+], /*{ puppeteerLaunchOptions: {headless: false},  theme: {background: "#ccc"}}*/);

server.ts

@@ -12,8 +12,10 @@ export function buildServer(): Application {
         const body = await context.request.body({ type: 'json'});
         const formData = await body.value;
         const termtext = decodeURI(formData['text'])/*  : context.request.url.searchParams.get('text') */;
-
-        context.response.body = new String(template).replace('\'##REPLACEME##\'', `\`${termtext.replace(/([`'"$])/g, '\\$1')}\``);
+        const termTheme = {...defaultTheme, ...(formData['theme'] ? JSON.parse(decodeURI(formData['theme'])) : {}) };
+        context.response.body = new String(template)
+            .replace('\'##REPLACEME##\'', `\`${termtext.replace(/([`'"$])/g, '\\$1')}\``)
+            .replace('\'##THEME##\'', `${JSON.stringify(termTheme)}`);
     })
 
     const app = new Application();
@@ -38,4 +40,26 @@ export function startServer(opts?: {port?: number}) {
         listen: buildServer().listen({port: opts?.port || 7777, signal}),
         abort: () => controller.abort()
     };
-}
+}
+
+export const defaultTheme = {
+    "foreground": "#cccccc",
+    "background": "#1e1e1e",
+    "cursorColor": "#cccccc",
+    "black": "#000000",
+    "red": "#c62f37",
+    "green": "#37be78",
+    "yellow": "#e2e822",
+    "blue": "#396ec7",
+    "purple": "#b835bc",
+    "cyan": "#3ba7cc",
+    "white": "#e5e5e5",
+    "brightBlack": "#666666",
+    "brightRed": "#e94a51",
+    "brightGreen": "#45d38a",
+    "brightYellow": "#f2f84a",
+    "brightBlue": "#4e8ae9",
+    "brightPurple": "#d26ad6",
+    "brightCyan": "#49b7da",
+    "brightWhite": "#e5e5e5"
+};

snapper.ts

@@ -10,7 +10,7 @@ export interface SnapParams {
 // TODO Deno puppeteer types
 export type PuppeteerLaunchOptions = any;
 
-export async function snap(snaps: SnapParams[], options?: {snapServerUrl?: string, puppeteerLaunchOptions?: PuppeteerLaunchOptions}) {
+export async function snap(snaps: SnapParams[], options?: {snapServerUrl?: string, theme?: any, puppeteerLaunchOptions?: PuppeteerLaunchOptions}) {
     const {listen, abort} = startServer();
 
     const browser = await puppeteer.launch(options?.puppeteerLaunchOptions || {
@@ -23,14 +23,24 @@ export async function snap(snaps: SnapParams[], options?: {snapServerUrl?: strin
     const page = await browser.newPage();
 
     for(let textCase of snaps) {
-        page.setViewport({deviceScaleFactor: 3, width: 1080, height: 30, ...textCase.viewport});
+        const viewPort = {deviceScaleFactor: 3, width: 1080, height: 30, ...textCase.viewport};
+        // TODO handle headless looking different
+        // if(typeof options?.puppeteerLaunchOptions?.headless === "boolean" && !options.puppeteerLaunchOptions.headless) {
+        //     viewPort.width += 15;
+        // }
+        page.setViewport(viewPort);
+
+        let postData: any = {text: encodeURI(textCase.content)};
+        if(options?.theme) {
+            postData.theme = JSON.stringify(options.theme);
+        }
 
         await page.setRequestInterception(true);
 
         page.once("request", async interceptedRequest => {
             await interceptedRequest.continue({
                 method: "POST",
-                postData: `{"text": "${encodeURI(textCase.content)}"}`,
+                postData: JSON.stringify(postData),
                 headers: {
                 ...interceptedRequest.headers(),
                 "Content-Type": "application/json"

template.ts

@@ -18,6 +18,8 @@ export const template = `
         var fitAddon = new this.fitAddon();
         term.loadAddon(fitAddon);
 
+        term.setOption('theme', '##THEME##');
+
         term.open(document.getElementById('terminal'));
         fitAddon.fit();
         const text = '##REPLACEME##';