shellfie 1.2.5 → 1.3.0

package/README.md

@@ -1,20 +1,20 @@
 # shellfie 🤳🏽
 
-create beautiful terminal screenshots from formatted string
+<img src="./shellfies/logo.png" />
 
 # install
 ```bash
-yarn add shellfie
+npm install shellfie
 ```
 
 # the holy trinity ▽
-`shellfie` respects the holy trinity: the lib, the service, and the cli.   
+`shellfie` respects the holy trinity: the lib, the service, and the holy cli.   
   - [shellfie](https://github.com/tool3/shellfie)   
   - [shellfied](https://github.com/tool3/shellfied)   
   - [shellfie-cli](https://github.com/tool3/shellfie-cli)   
 
 # usage
-```js
+```javascript
 const data = [
     '\x1b[105mSHELLFIE\\x1b[0m🤳',
     '\x1b[38;5;225mthe easiest way',
@@ -54,10 +54,10 @@ outputs:
 ### `location`
 **type**: `string`   
 **description**: relative path to save your shellfies   
-### `puppeteerArgs`
-**type**: `string[]`   
+### `puppeteerOptions`
+**type**: `object`   
 **description**: optional puppteer args    
-**default**: `['--no-sandbox', '--disable-setuid-sandbox']`
+**default**: `{ args: ['--no-sandbox', '--disable-setuid-sandbox'] }`
 ### `mode`
 **type**: `string`   
 **description**: can allow raw string input. for example: `yarn test --colors > help.txt`, then copy the text and provide it to `shellfie` with this option set to `raw`.   
@@ -95,15 +95,15 @@ outputs:
   **type**: `number`   
   **description**: viewport height
 
-  # examples
-  ```js
-  await shellfie(["\x1b[32mGreen line", "\x1b[31;1mRED bold"], { name: 'small', viewport: { width: 200, height: 200 } });
-  ```   
+# examples
+```javascript
+await shellfie(["\x1b[32mGreen line", "\x1b[31;1mRED bold"], { name: 'small', viewport: { width: 200, height: 200 } });
+```   
 
 <img src="./shellfies/small.png" />   
 
 
-```js
+```javascript
 const testResults = [
     "yarn run v1.22.5",
     "$ mocha --no-timeouts tests/ --colors",
@@ -129,6 +129,43 @@ const testResults = [
     "Done in 19.60s.",
 ];
 await shellfie(testResults, { name: 'fira', style: { fontFamily: 'Fira Code', fontWeight: 'bold' } });
+await shellfie(testResults, { name: 'monospace', style: { fontFamily: 'monospace' } });
+await shellfie(testResults, { name: 'monaco', style: { fontFamily: 'Monaco' } });
 ```   
 
 <img src="./shellfies/fira.png" />
+<img src="./shellfies/monospace.png" />
+<img src="./shellfies/monaco.png" />
+
+### raw mode
+```javascript
+const string = `    
+cristal     ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+teen        ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+mind        ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+morning     ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+vice        ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+passion     ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+fruit       ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+instagram   ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+atlas       ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+retro       ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+summer      ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+pastel      ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+rainbow     ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
+  `
+await shellfie(string, { name: 'gradient', mode: 'raw', viewport: {width: 600, height: 350} });
+```
+<img src="./shellfies/gradient.png" />
+
+### bash colors
+```javascript
+const shellfie = require('shellfie');
+let backgroundColors = '';
+for (let i = 0; i < 255; i++) {
+    backgroundColors += `\x1b[48;5;${i}m ${i}\x1b[0m`;
+}
+await shellfie(backgroundColors, { name: 'background', viewport: {width: 500, height: 400} });
+```
+
+<img src="./shellfies/background.png" />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shellfie",
-  "version": "1.2.5",
-  "description": "create beautiful terminal screenshots from formatted string",
+  "version": "1.3.0",
+  "description": "create beautiful terminal screenshots programmatically",
   "main": "shellfie.js",
   "directories": {
     "test": "tests"
@@ -25,8 +25,8 @@
   "license": "MIT",
   "dependencies": {
     "puppeteer": "^5.5.0",
-    "xterm": "^4.9.0",
-    "xterm-addon-fit": "^0.4.0"
+    "xterm": "^4.14.1",
+    "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
     "mocha": "^8.2.1"

package/shellfie.d.ts

@@ -1,27 +1,29 @@
-export type ShellfieTheme = {
+declare type ShellfieTheme = {
     background: string;
     foreground: string;
 };
 
-export type ShellfieStyle = {
+declare type ShellfieStyle = {
     fontFamily: string;
     fontWeight: string;
     fontSize: number;
 };
 
-export type ShellfieViewport = {
+declare type ShellfieViewport = {
     width: number;
     height: number;
 };
 
-export type ShellfieOptions = {
+declare type ShellfieOptions = {
     name?: string;
     location?: string;
     theme?: ShellfieTheme;
     style?: ShellfieStyle;
     viewport?: ShellfieViewport;
     mode?: string;
-    puppeteerArgs?: string[];
+    puppeteerOptions?: Record<string, any>;
 };
 
-export default function shellfie(data: string | string[], options: ShellfieOptions): Promise<void>;
+declare function shellfie(data: string | string[], options: ShellfieOptions): Promise<void>;
+
+export = shellfie;

package/shellfie.js

@@ -9,9 +9,8 @@ async function shellfie(data, config) {
             throw new Error('no data provided.\nshelffie needs a string || string[] to produce an image.')
         }
         const localPath = process.env.INIT_CWD || process.cwd();
-        const { name, location, style, theme, ext, puppeteerArgs, viewport, mode } = getConfig(config, localPath);
-
-        const browser = await puppeteer.launch({ args: puppeteerArgs });
+        const { name, location, style, theme, ext, puppeteerOptions, viewport, mode, rendererType } = getConfig(config, localPath);
+        const browser = await puppeteer.launch(puppeteerOptions);
         const page = await browser.newPage();
 
         await page.setViewport({ ...viewport, deviceScaleFactor: 4 });
@@ -33,7 +32,7 @@ async function shellfie(data, config) {
         // setup terminal
         await page.evaluate(({ options, lines, mode, viewport }) => {
             const fit = new FitAddon.FitAddon();
-            const term = new Terminal({ ...options, rendererType: 'dom' });
+            const term = new Terminal({ ...options });
             term.open(document.getElementById('terminal'));
             term.loadAddon(fit);
             term.writeln('');
@@ -56,13 +55,14 @@ async function shellfie(data, config) {
             document.querySelector('.xterm-screen').style.height = `${height}px`;
             fit.fit();
 
-        }, { lines, mode, options: style ? { theme, ...style } : { theme }, viewport });
+        }, { lines, mode, options: style ? { theme, ...style, rendererType } : { theme, rendererType }, viewport });
         
         // inject styles
         await page.addStyleTag({ path: `${path.resolve(__dirname, 'template/template.css')}` });
-        await page.addStyleTag({ path: `${localModules}/xterm/css/xterm.css` })
+        await page.addStyleTag({ path: `${localModules}/xterm/css/xterm.css` });
+        await page.evaluate((theme) => document.querySelector('.terminal').style.background = theme.background, theme);
         await page.evaluateHandle('document.fonts.ready');
-
+        
         // crop image   
         const clip = await (await page.$(".main")).boundingBox();
         clip.height = Math.min(clip.height, page.viewport().height);

package/utils/config.js

@@ -1,43 +1,41 @@
-
 function generateId() {
-    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-    const charactersLength = characters.length;
-    let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  let result = '';
 
-    for (var i = 0; i < 7; i++) {
-        result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return `shellfie_${result}`;
+  for (var i = 0; i < 7; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return `shellfie_${result}`;
 }
 
-
 function getConfig(config, localPath) {
-    const defaultpuppeteerArgs = ['--no-sandbox', '--disable-setuid-sandbox'];
-    const defaultViewport = { width: 700, height: 600 };
-    const defaultTheme = { background: '#151515' };
+  const defaultViewport = { width: 700, height: 600 };
+  const defaultTheme = { background: '#151515' };
+
+  const options = {
+    name: generateId(),
+    location: `${localPath}/shellfies`,
+    style: {},
+    theme: defaultTheme,
+    rendererType: 'dom',
+    ext: 'png',
+    puppeteerOptions: { args: ['--no-sandbox', '--disable-setuid-sandbox'] },
+    viewport: defaultViewport,
+    mode: 'default',
+  };
 
-    const options = {
-        name: generateId(),
-        location: `${localPath}/shellfies`,
-        style: {},
-        theme: defaultTheme,
-        ext: 'png',
-        puppeteerArgs: defaultpuppeteerArgs,
-        viewport: defaultViewport,
-        mode: 'default'
-    };
+  if (config) {
+    const userConfig = Object.keys(config).reduce((acc, key) => {
+      if (key in options) {
+        acc[key] = typeof options[key] === 'object' ? Object.assign(options[key], config[key]) : config[key];
+      }
+      return acc;
+    }, {});
+    return Object.assign(options, userConfig);
+  }
 
-    if (config) {
-        const userConfig = Object.keys(config).reduce((acc, key) => {
-            if (key in options) {
-                acc[key] = typeof options[key] === "object" ? Object.assign(options[key], config[key]) : config[key];
-            }
-            return acc;
-        }, {});
-        return Object.assign(options, userConfig);
-    }
-    
-    return options;
+  return options;
 }
 
-module.exports = getConfig;
+module.exports = getConfig;