docs: update readme, add example screenshots

README.md

@@ -56,31 +56,37 @@ npm install ansis
 
 ## Usage
 
+You can import module and named colors with ESM or CommonJS syntax.
+
 ```js
-import { black, red, cyan, inverse, reset } from 'ansis/colors'; // named import
-import ansis from 'ansis'; // ESM
-const ansis = require('ansis'); // CommonJS
+// ESM
+import ansis from 'ansis';
+import { red, black, inverse, reset } from 'ansis/colors';
+
+// CommonJS
+const ansis = require('ansis');
+const { red, black, inverse, reset } = require('ansis/colors');
 
 console.log(ansis.green`Hello ${inverse`ANSI`} World!`);
 console.log(black.bgYellow`Warning:${reset.cyan` /path/to/file.js`} ${red`not found!`}`);
 ```
 
 Output:\
-![output](docs/img/quik-start-output.png?raw=true "output")
+![screenshot "Hello ANSI World!"](docs/img/quik-start-output.png?raw=true)
 
 
 ## Named import
 
 You can import named colors, styles and functions.
-All imported colors and styles **are chainable**.
+All imported colors and styles are **chainable**.
 
 > **Note**
 >
-> Imported code is not treeshakeable.\
+> Imported code is not treeshakeable.
 > Don't worry, full functional code is `3KB` only.
 
 ```js
-import { red, green, blue, yellow, hex, bold, italic } from 'ansis/colors';
+import { red, hex, italic } from 'ansis/colors';
 
 red.bold('text');
 italic.underline.cyan('text');
@@ -91,31 +97,52 @@ hex('#FF75D1').bgCyan.bold('text');
 <a id="chained-syntax" name="chained-syntax" href="#chained-syntax"></a>
 ## Chained syntax
 
+All colors, styles and functions are chainable. Each color or style can be combined in any order.
+
 ```js
 import ansis from 'ansis';
-import { red, italic, underline } from 'ansis/colors';
+import { red, cyan, bold, italic, hex } from 'ansis/colors';
 
 // with namespace
 ansis.red('text');
-ansis.cyan.italic('text');
-ansis.blue.underline.bold('text');
+ansis.cyan.bold('text');
+ansis.hex('#FF75D1').bgCyan.bold('text');
+ansis.bold.bgHex('#FF75D1').cyan('text');
+ansis.italic.bold.strike.yellow.bgMagentaBright('text');
 
 // with named import
-red.italic.bold('text');
-italic.bold.red('text');
-underline.yellowBright('text');
+red('text');
+cyan.bold('text');
+hex('#FF75D1').bgCyan.bold('text');
+bold.bgHex('#FF75D1').cyan('text');
+italic.bold.strike.yellow.bgMagentaBright('text');
 ```
 
 
 <a id="nested-syntax" name="nested-syntax" href="#nested-syntax"></a>
 ## Nested syntax
 
+Each color or style can be nested with one another.
+
 ```js
-import { white, cyan, green } from 'ansis/colors';
+import { red, italic, underline } from 'ansis/colors';
 
-white(`MakBookPro, ${cyan.bold(`RAM:`)} 64 GB | ${green.bold(`GPU:`)} 32 cores`);
+red(`red ${italic(`red italic ${underline(`red italic underline`)}`)} red`);
+
+// deep nested chained styles
+green(
+  `green ${yellow(
+    `yellow ${magenta(
+      `magenta ${cyan(
+        `cyan ${red.italic.underline(`red italic underline`)} cyan`,
+      )} magenta`,
+    )} yellow`,
+  )} green`,
+);
 ```
 
+Output:\
+![screenshot nested styles](docs/img/ansis-nested.png?raw=true)
 
 <a id="templateLiterals" name="templateLiterals" href="#templateLiterals"></a>
 ## Template literals
@@ -125,8 +152,8 @@ None of the existing libraries (chalk, kleur, colorette, colors.js etc.) support
 This does it only one library - `ansis`. Use it and enjoy!
 
 ```js
-// import used standard styles, colors and functions
-import { white, red, green, yellow, cyan, bold, visible, hex } from 'ansis/colors';
+// import used base styles, colors and functions
+import { red, green, bold, visible, inverse, hex } from 'ansis/colors';
 
 // define custom colors
 const pink = hex('#FF75D1');
@@ -143,22 +170,39 @@ bold.yellowBright`text`;
 hex('#FF75D1').bgYellow.bold`text`;
 
 // nested
-white`MakBookPro, ${cyan.bold`RAM:`} 64 GB | ${green.bold`GPU:`} 32 cores`;
-white`MakBookPro, ${cyan.bold`RAM: ${yellow`64`} GB`} | ${green.bold`GPU: ${yellow`32`} cores`}`;
+red`red ${green`green ${pink.italic`pink italic`} green`} red`;
+```
+
+Multiline nested example.
+```js
+let cpu = 33;
+let ram = 44;
+let disk = 55;
 
-// mutiline nested
+// normal colors
 visible`
-CPU:  ${red.bold`${33}%`}
-RAM:  ${green`${44}%`}
-DISK: ${hex('#FFAB40')`${55}%`}
+CPU:  ${red`${cpu}%`}
+RAM:  ${green`${ram}%`}
+DISK: ${hex('#FFAB40')`${disk}%`}
+`;
+
+// inversed colors
+inverse`
+CPU:  ${red`${cpu}%`}
+RAM:  ${green`${ram}%`}
+DISK: ${hex('#FFAB40')`${disk}%`}
 `;
 ```
 
+Output:\
+![screenshot multiline nested](docs/img/ansis-multiline-nested.png?raw=true)
 
 
 <a id="base-colors" name="base-colors" href="#base-colors"></a>
 ## Base colors and styles
 
+Colors and styles have standard names used by many popular libraries, such as [chalk][chalk], [colorette][colorette], [kleur][kleur], [cli-color][cli-color], [ansi-colors][ansi-colors].
+
 | Foreground colors     | Background colors | Styles                                     |
 |:----------------------|:------------------|--------------------------------------------|
 | `black`               | `bgBlack`         | `dim` (alias`faint`)                       |

examples/index.js

@@ -113,6 +113,27 @@ log();
 // Check replacement in props.parent
 //log(ansis.green.bold.underline(`foo ${ansis.red.italic('bar')} foo`));
 
+/**
+ * Nested syntax
+ */
+log();
+log(inverse`Nested syntax:`);
+log();
+log(red(`red ${italic`red italic ${underline`red italic underline`}`} red`));
+log();
+// simple variant for readme
+log(
+  green(
+    `green ${yellow(
+      `yellow ${magenta(
+        `magenta ${cyan(
+          `cyan ${red.italic.underline(`red italic underline`)} cyan`,
+        )} magenta`,
+      )} yellow`,
+    )} green`,
+  ),
+);
+
 /**
  * Deep nested chained styles
  */
@@ -159,12 +180,8 @@ const pink = hex('#FF75D1');
 log(red`red`);
 log(yellow.italic`yellow using ${'some'} variable`);
 log(hex('#fce').bgCyan.underline`text underline`);
-log(red`red ${yellow`yellow ${green`green ${pink`pink`} green`} yellow`} red`);
-log(red`${bold`${italic`${underline`underline`} italic`} bold`} red`);
-
-log(white`MakBookPro, ${cyan`RAM:`} 64 GB`);
-log(white`MakBookPro, ${cyan`RAM:`} 64 GB | ${yellow`GPU:`} 32 cores`);
-log(white`MakBookPro, ${cyan`RAM: ${cyanBright`64`} GB`} | ${yellow`GPU: ${yellowBright`32`} cores`}`);
+log(red`red ${green`green ${pink.italic`pink italic`} green`} red`);
+log(red`red ${cyan.bold`cyan bold ${pink.underline`pink bold underline`} cyan bold`} red`);
 
 /**
  * Extend base colors
@@ -221,29 +238,35 @@ ansis2.extend({
 log(ansis2.pink('pink'));
 log(ansis2.bold.orange('orange'));
 
-
 /**
  * Misc
  */
 // visible
 log(ansis.visible`visible`);
 
-// chalk: non-standard syntax, bad practices, slow because used RegExp
-log(chalk`
-CPU:  {red.bold ${33}%}
-RAM:  {green ${44}%}
-DISK: {hex('#FFAB40') ${55}%}
-`);
+/**
+ * Multiline nested example from readme
+ */
+let cpu = 33;
+let ram = 44;
+let disk = 55;
 
 // ansis: standard ES2016 syntax, very fast because works native
 log(visible`
-CPU:  ${red.bold`${33}%`}
-RAM:  ${green`${44}%`}
-DISK: ${hex('#FFAB40')`${55}%`}
+CPU:  ${red`${cpu}%`}
+RAM:  ${green`${ram}%`}
+DISK: ${hex('#FFAB40')`${disk}%`}
 `);
 
 log(inverse`
-CPU:  ${red.bold`${33}%`}
-RAM:  ${green`${44}%`}
-DISK: ${hex('#FFAB40')`${55}%`}
+CPU:  ${red`${cpu}%`}
+RAM:  ${green`${ram}%`}
+DISK: ${hex('#FFAB40')`${disk}%`}
+`);
+
+// chalk: non-standard syntax, bad practices, slow because used RegExp
+log(chalk`
+CPU:  {red.bold ${cpu}%}
+RAM:  {green ${ram}%}
+DISK: {hex('#FFAB40') ${disk}%}
 `);