Update style

grigorii-horos · grigorii-horos · commit 64a4fbb7bf4d · 2023-06-20T21:55:32.000+03:00
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ html examples/demo.html
 
 This will produce the following:
 
-![Screenshot of cli-html](./images/1.png)
+![Screenshot of cli-html](./images/terminal.png)
 
 ## Usage as module
 
diff --git a/examples/headers.html b/examples/headers.html
@@ -0,0 +1,6 @@
+<h1>h1, h1, h1, h1, h1</h1>
+<h2>h2, h2, h2, h2, h2</h2>
+<h3>h3, h3, h3, h3, h3</h3>
+<h4>h4, h4, h4, h4, h4</h4>
+<h5>h5, h5, h5, h5, h5</h5>
+<h6>h6, h6, h6, h6, h6</h6>
diff --git a/images/1.png b/images/1.png
diff --git a/images/terminal.png b/images/terminal.png
diff --git a/lib/tag-helpers/text-node.js b/lib/tag-helpers/text-node.js
@@ -12,10 +12,10 @@ export const textNode = (tag, context) => {
     };
   }
 
-  const normalized = [...normalizeWhitespace(tag.value).replace(/\n/g, ' ')];
+  const normalized = [...normalizeWhitespace(tag.value).replaceAll('\n', ' ')];
 
   const pre = [' ', '\n'].includes(normalized[0]) ? normalized.shift() : null;
-  const post = [' ', '\n'].includes(normalized[normalized.length - 1]) ? normalized.pop() : null;
+  const post = [' ', '\n'].includes(normalized.at(-1)) ? normalized.pop() : null;
 
   return {
     pre,
diff --git a/lib/tags/base-tags.js b/lib/tags/base-tags.js
@@ -27,7 +27,10 @@ export const form = block;
 export const picture = block;
 export const hgroup = block;
 
-export const figcaption = blockTag((value) => chalk.bgGreen.bold(` § ${value} `), {
-  marginTop: 1,
-  marginBottom: 1,
-});
+export const figcaption = blockTag(
+  (value) => chalk.bgGreen.bold(` ${value} `),
+  {
+    marginTop: 1,
+    marginBottom: 1,
+  },
+);
diff --git a/lib/tags/code.js b/lib/tags/code.js
@@ -9,7 +9,7 @@ import { getAttribute, indentify } from '../utils.js';
 export const code = (tag, context) => inlineTag((value, tag) => {
   const classAttributes = getAttribute(tag, 'class', '').split(' ');
 
-  const content = value[value.length - 1] === '\n' ? value.slice(0, -1) : value;
+  const content = value.at(-1) === '\n' ? value.slice(0, -1) : value;
 
   let langName = null;
 
@@ -24,13 +24,13 @@ export const code = (tag, context) => inlineTag((value, tag) => {
   });
 
   const codeValue = langName
-    ? (highlight(content, {
+    ? highlight(content, {
       language: langName,
       theme: {
         comment: chalk.blackBright,
       },
-    }))
-    : chalk.yellow(content);
+    })
+    : chalk.red(content);
 
   if (tag.parentNode.nodeName !== 'pre') {
     return chalk.bgBlack(codeValue);
@@ -42,7 +42,9 @@ export const code = (tag, context) => inlineTag((value, tag) => {
   const pad = `${Array.from({ length: codeLinesLength }).join(' ')}  `;
 
   const codeContent = codeValueLines.map(
-    (codeLine, index) => `${chalk.black.bold(`${index + 1}`.padStart(codeLinesLength, ' '))} ${indentify(
+    (codeLine, index) => `${chalk.blackBright.dim(
+      `${index + 1}`.padStart(codeLinesLength, ' '),
+    )} ${indentify(
       pad,
       true,
     )(
diff --git a/lib/tags/details.js b/lib/tags/details.js
@@ -9,7 +9,7 @@ export const details = (tag, context) => {
 
   return blockTag(
     (value) => `${boxen(value || '', {
-      title: summary && summary.value ? `> ${summary.value.replace(/\n/g, ' ')}` : '> Summary',
+      title: summary && summary.value ? `> ${summary.value.replaceAll('\n', ' ')}` : '> Summary',
       dimTitle: false,
       titleColor: 'red',
       padding: {
diff --git a/lib/tags/fieldset.js b/lib/tags/fieldset.js
@@ -9,7 +9,7 @@ export const fieldset = (tag, context) => {
 
   return blockTag(
     (value) => `${boxen_(value, {
-      title: summary && summary.value ? summary.value.replace(/\n/g, ' ') : null,
+      title: summary && summary.value ? summary.value.replaceAll('\n', ' ') : null,
       dimTitle: false,
       titleColor: 'yellow',
       padding: {
diff --git a/lib/tags/headers.js b/lib/tags/headers.js
@@ -2,27 +2,27 @@ import chalk from 'chalk';
 
 import { blockTag } from '../tag-helpers/block-tag.js';
 
-export const h1 = blockTag((value) => chalk.bgBlue.bold(` § ${value} `), {
+export const h1 = blockTag((value) => chalk.blue.bold(` # ${value} `), {
   marginTop: 2,
   marginBottom: 1,
 });
-export const h2 = blockTag((value) => chalk.bgBlueBright.bold(` § ${value} `), {
+export const h2 = blockTag((value) => chalk.blue.bold(` ## ${value} `), {
   marginTop: 1,
   marginBottom: 1,
 });
-export const h3 = blockTag((value) => chalk.bgCyan.bold(` § ${value} `), {
+export const h3 = blockTag((value) => chalk.blue.bold(` ### ${value} `), {
   marginTop: 1,
   marginBottom: 1,
 });
-export const h4 = blockTag((value) => ` ${chalk.blue.bold(`§ ${value}`)}`, {
+export const h4 = blockTag((value) => chalk.cyan.bold(` #### ${value}`), {
   marginTop: 1,
   marginBottom: 1,
 });
-export const h5 = blockTag((value) => ` ${chalk.blueBright(`§ ${value}`)}`, {
+export const h5 = blockTag((value) => chalk.cyan(` ##### ${value}`), {
   marginTop: 1,
   marginBottom: 1,
 });
-export const h6 = blockTag((value) => ` ${chalk.cyan(`§ ${value}`)}`, {
+export const h6 = blockTag((value) => chalk.cyan(` ###### ${value}`), {
   marginTop: 1,
   marginBottom: 1,
 });
diff --git a/lib/tags/inputs.js b/lib/tags/inputs.js
@@ -21,15 +21,9 @@ export const input = (tag) => {
   if (getAttribute(tag, 'type', 'text') === 'checkbox') {
     return {
       pre: null,
-      value: `${
-        grey('[')
-      }${
-        getAttribute(tag, 'checked', ' ') === ''
-          ? red.bold('☓')
-          : red.bold(' ')
-      }${
-        grey(']')
-      }`,
+      value: `${grey('[')}${
+        getAttribute(tag, 'checked', ' ') === '' ? red.bold('✓') : red.bold(' ')
+      }${grey(']')}`,
       post: null,
       type: 'inline',
       nodeName: tag.nodeName,
@@ -39,15 +33,9 @@ export const input = (tag) => {
   if (getAttribute(tag, 'type', 'text') === 'radio') {
     return {
       pre: null,
-      value: `${
-        grey('(')
-      }${
-        getAttribute(tag, 'checked', ' ') === ''
-          ? red.bold('☓')
-          : red.bold(' ')
-      }${
-        grey(')')
-      }`,
+      value: `${grey('(')}${
+        getAttribute(tag, 'checked', ' ') === '' ? red.bold('•') : red.bold(' ')
+      }${grey(')')}`,
       post: null,
       type: 'inline',
       nodeName: tag.nodeName,
diff --git a/lib/tags/list.js b/lib/tags/list.js
@@ -4,10 +4,7 @@ import { blockTag } from '../tag-helpers/block-tag.js';
 import { getAttribute, indentify } from '../utils.js';
 import { getListItemNumber, getListSymbol, getListType } from '../utils/list.js';
 
-const {
-  blue,
-  red,
-} = chalk;
+const { blueBright, redBright } = chalk;
 
 export const ol = (tag, context) => {
   const newContext = {
@@ -41,13 +38,15 @@ export const ul = (tag, context) => {
 
 export const li = (tag, context) => {
   if (context.orderedList) {
-    return blockTag((value) => `${blue(
-      `${getListItemNumber(context.liItemNumber, context.listType)}.`,
-    )} ${indentify('   ', true)(value)}`)(tag, { ...context, lineWidth: context.lineWidth - 3 });
+    return blockTag(
+      (value) => `${blueBright(
+        `${getListItemNumber(context.liItemNumber, context.listType)}.`,
+      )} ${indentify('   ', true)(value)}`,
+    )(tag, { ...context, lineWidth: context.lineWidth - 3 });
   }
 
   return blockTag((value) => `${indentify('  ')(value)}`.replace(
     / {2}/,
-    `${red(getListSymbol(context.listType))} `,
+    `${redBright(getListSymbol(context.listType))} `,
   ))(tag, { ...context, lineWidth: context.lineWidth - 2 });
 };
diff --git a/lib/tags/table.js b/lib/tags/table.js
@@ -24,9 +24,8 @@ const trVals = (tr) => {
     ? null
     : tr.childNodes.filter((tag) => ['td', 'th'].includes(tag.nodeName));
 
-  const theadTdsValue = !theadTds
-    ? null
-    : theadTds.map((tag, context) => {
+  const theadTdsValue = theadTds
+    ? theadTds.map((tag, context) => {
       const det = tag.nodeName === 'td' ? td(tag, context) : th(tag, context);
 
       const parsedStyle = styleParser(getAttribute(tag, 'style', ''));
@@ -46,14 +45,15 @@ const trVals = (tr) => {
         colSpan,
         rowSpan,
       };
-    });
+    })
+    : null;
   return theadTdsValue;
 };
 
 const tbodyVals = (tbody) => {
-  const theadTrs = !tbody
-    ? null
-    : tbody.childNodes.filter((tag) => ['tr'].includes(tag.nodeName));
+  const theadTrs = tbody
+    ? tbody.childNodes.filter((tag) => ['tr'].includes(tag.nodeName))
+    : null;
 
   const theadTrsVals = theadTrs.map(trVals);
   return theadTrsVals;
@@ -79,7 +79,7 @@ export const table = (tag, context) => {
     ? null
     : thead.childNodes.find((child) => child.nodeName === 'tr');
 
-  const theadsValue = !theadTr ? null : trVals(theadTr);
+  const theadsValue = theadTr ? trVals(theadTr) : null;
 
   if (theadsValue && theadsValue[0]) {
     tableArray.push(theadsValue);
@@ -95,7 +95,7 @@ export const table = (tag, context) => {
     ? null
     : tfoot.childNodes.find((child) => child.nodeName === 'tr');
 
-  const tfootdsValue = !tfootTr ? null : trVals(tfootTr);
+  const tfootdsValue = tfootTr ? trVals(tfootTr) : null;
 
   if (tfootdsValue && tfootdsValue[0]) {
     tableArray.push(tfootdsValue);
diff --git a/lib/utils/concat-inline-tags.js b/lib/utils/concat-inline-tags.js
@@ -19,26 +19,26 @@ const concatTwoInlineTags = (first, second) => {
       pre: first.pre,
       value: first.value,
       post:
-        first.post != null
-          ? first.post
-          : second.pre != null
-            ? second.pre
-            : second.post != null
-              ? second.post
-              : '',
+        first.post == null
+          ? second.pre == null
+            ? second.post == null
+              ? ''
+              : second.post
+            : second.pre
+          : first.post,
     };
   }
 
   if (first.value == null) {
     return {
       pre:
-        first.pre != null
-          ? first.pre
-          : first.post != null
-            ? first.post
-            : second.pre != null
-              ? second.pre
-              : '',
+        first.pre == null
+          ? first.post == null
+            ? second.pre == null
+              ? ''
+              : second.pre
+            : first.post
+          : first.pre,
       value: second.value,
       post: second.post,
     };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cli-html",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "Render HTML to Terminal",
   "main": "index.js",
   "type": "module",
@@ -32,8 +32,8 @@
   "homepage": "https://github.com/horosgrisa/cli-html",
   "dependencies": {
     "ansi-align": "^3.0.1",
-    "ansi-escapes": "^6.0.0",
-    "boxen": "^7.0.1",
+    "ansi-escapes": "^6.2.0",
+    "boxen": "^7.1.0",
     "chalk": "^5.2.0",
     "change-case": "^4.1.2",
     "cli-highlight": "^2.1.11",
@@ -49,22 +49,22 @@
     "number-to-alphabet": "^1.0.0",
     "parse5": "^7.1.1",
     "romanize": "^1.1.1",
-    "supports-hyperlinks": "^2.3.0",
+    "supports-hyperlinks": "^3.0.0",
     "term-size": "^3.0.1",
-    "wrap-ansi": "^8.0.1"
+    "wrap-ansi": "^8.1.0"
   },
   "devDependencies": {
     "confusing-browser-globals": "^1.0.11",
-    "eslint": "^8.32.0",
+    "eslint": "^8.43.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-standard-jsdoc": "^9.3.0",
     "eslint-plugin-async-await": "0.0.0",
-    "eslint-plugin-jsdoc": "^39.6.6",
+    "eslint-plugin-jsdoc": "^46.2.6",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-no-loops": "^0.3.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-simple-import-sort": "^9.0.0",
-    "eslint-plugin-unicorn": "^45.0.2"
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-unicorn": "^47.0.0"
   }
 }
