shellfie 1.2.8 → 1.3.3

package/README.md

@@ -1,20 +1,20 @@
 # shellfie 🤳🏽
 
-create beautiful terminal screenshots programmatically
+<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',
@@ -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,6 +1,6 @@
 {
   "name": "shellfie",
-  "version": "1.2.8",
+  "version": "1.3.3",
   "description": "create beautiful terminal screenshots programmatically",
   "main": "shellfie.js",
   "directories": {

package/shellfie.js

@@ -2,6 +2,7 @@ const puppeteer = require('puppeteer');
 const getConfig = require('./utils/config');
 const path = require('path');
 const fs = require('fs').promises;
+const { getStyles } = require('./utils/styles');
 
 async function shellfie(data, config) {
     try {
@@ -20,8 +21,6 @@ async function shellfie(data, config) {
         const lines = (Array.isArray(data) || mode === 'raw') ? data : data.split('\n');
 
         // inject js scripts
-        const localModules = __dirname + '/node_modules';
-        console.log(localModules);
         await page.addScriptTag({ path: require.resolve('xterm/lib/xterm.js') });
         await page.addScriptTag({ path: require.resolve('xterm-addon-fit/lib/xterm-addon-fit.js') });
 
@@ -56,12 +55,25 @@ async function shellfie(data, config) {
             document.querySelector('.xterm-screen').style.height = `${height}px`;
             fit.fit();
 
-        }, { lines, mode, options: style ? { theme, ...style, rendererType } : { theme, rendererType }, viewport });
+        }, { lines, mode, options: { 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.evaluate((theme) => document.querySelector('.terminal').style.background = theme.background, theme);
+        const templateStyle = __dirname + '/template/template.css';
+
+        // inject user style
+        if (style) {
+            const styles = getStyles(style);
+            const className = rendererType === 'dom' ? '.terminal.xterm' : 'canvas';
+            const content = `${className} {${styles}}`
+            await page.addStyleTag({content})
+        }
+
+        // inject styles
+        await page.addStyleTag({ path: templateStyle });
+        await page.addStyleTag({ path: `${localPath}/node_modules/xterm/css/xterm.css` });
+        
+
+
         await page.evaluateHandle('document.fonts.ready');
         
         // crop image   

package/template/template.css

@@ -51,4 +51,8 @@ body {
 
 .xterm-cursor {
   display: none !important;
+}
+
+canvas {
+  width: unset;
 }

package/utils/styles.js

@@ -0,0 +1,32 @@
+function processLine(key, value) {
+    const words = key.split(/(?=[A-Z])/);
+    if (words.length > 1) {
+      key = words.map(word => word.toLowerCase()).join('-')
+    }
+    
+    return `${key}: ${value};`
+}
+
+function stringifyStyle(style) {
+  return Object.keys(style)
+    .map((rule) => processLine(rule, style[rule]))
+    .join(' ');
+}
+
+function getStyle(className, style) {
+  return `${className}{ ${stringifyStyle(style)} }`;
+}
+
+function getStyles(style) {
+  return Object.keys(style)
+    .map((key) => {
+        if (typeof style[key] === "object") {
+            return getStyle(key, style[key]);
+        } else {
+            return processLine(key, style[key]);
+        }
+    })
+    .join('');
+}
+
+module.exports = { stringifyStyle, getStyles, getStyle };