Add gfm alerts

lib/tags.js

@@ -20,7 +20,6 @@ import {
   p,
   picture,
   section,
-  span,
 } from './tags/base-tags.js';
 import { blockquote } from './tags/blockquote.js';
 import { br } from './tags/br.js';
@@ -39,6 +38,7 @@ import { img } from './tags/img.js';
 import { button, input, output } from './tags/inputs.js';
 import { li, ol, ul } from './tags/list.js';
 import { progress } from './tags/progress.js';
+import { span } from './tags/span.js';
 import { caption, table } from './tags/table.js';
 import {
   b,

lib/tags/base-tags.js

@@ -7,7 +7,6 @@ const inline = inlineTag();
 
 const blockWithNewlines = blockTag((value) => value, { marginTop: 1, marginBottom: 1 });
 
-export const span = inline;
 export const label = inline;
 export const blink = inline;
 

lib/tags/blockquote.js

@@ -1,11 +1,23 @@
-import compose from 'compose-function';
+import chalkString from 'chalk-string';
 
 import { blockTag } from '../tag-helpers/block-tag.js';
-import { indentify } from '../utils.js';
-
-export const blockquote = (tag, context) => blockTag(
-  compose(
-    indentify(context.theme.blockquote('│ '), false),
-  ),
-  { marginTop: 1, marginBottom: 1 },
-)(tag, { ...context, lineWidth: context.lineWidth - 2 });
+import { getAttribute, getColorFromClass, indentify } from '../utils.js';
+
+const newStyle = chalkString();
+
+export const blockquote = (tag, context) => {
+  const classAttributes = getAttribute(tag, 'class', '')
+    ?.split(' ')
+    ?.find((classAttribute) => classAttribute.startsWith('x-cli-color-'));
+
+  const color = getColorFromClass(classAttributes);
+
+  return blockTag(
+    indentify(
+      color ? newStyle(color, '│ ') : context.theme.blockquote('│ '),
+      false,
+    ),
+
+    { marginTop: 1, marginBottom: 1 },
+  )(tag, { ...context, lineWidth: context.lineWidth - 2 });
+};

lib/tags/code.js

@@ -48,13 +48,13 @@ export const code = (tag, context) => inlineTag((value, tag) => {
       pad,
       true,
     )(
-      wrapAnsi(codeLine, context.lineWidth - pad.length - 2, {
+      wrapAnsi(`|${codeLine}|`, context.lineWidth - pad.length - 2, {
         trim: true,
-      }),
+      }).slice(1, -1),
     )}`,
   );
 
-  return indentify('', false)(codeContent.join('\n'));
+  return indentify(' ', false)(codeContent.join('\n'));
 })(tag, context);
 
 export const pre = (tag, context) => blockTag((value) => value, { marginTop: 2, marginBottom: 2 })(

lib/tags/span.js

@@ -0,0 +1,20 @@
+import ansiEscapes from 'ansi-escapes';
+import chalkString from 'chalk-string';
+import { stdout } from 'supports-hyperlinks';
+
+import inlineTag from '../tag-helpers/inline-tag.js';
+import { getAttribute, getColorFromClass } from '../utils.js';
+
+const newStyle = chalkString();
+
+export const span = inlineTag((value, tag, context) => {
+  const classAttributes = getAttribute(tag, 'class', '')
+    ?.split(' ')
+    ?.find((classAttribute) => classAttribute.startsWith('x-cli-color-'));
+
+  const color = getColorFromClass(classAttributes);
+
+  const text = color ? newStyle(color, value) : context.theme.a(value);
+
+  return text;
+});

lib/utils.js

@@ -61,3 +61,11 @@ export const getAttribute = (tag, attributeName, defaultValue) => {
 
   return attribute.value;
 };
+
+export const getColorFromClass = (classAttribute = '') => {
+  if (classAttribute?.startsWith('x-cli-color-')) {
+    return classAttribute?.slice(12);
+  }
+
+  return null;
+};

package.json

@@ -11,6 +11,10 @@
   "bin": {
     "html": "bin/html.js"
   },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=7.0.0"
+  },
   "author": "Grigorii Horos",
   "license": "GPL3",
   "keywords": [
@@ -25,7 +29,6 @@
     "type": "git",
     "url": "https://github.com/horosgrisa/cli-html.git"
   },
-  "engines": {},
   "homepage": "https://github.com/horosgrisa/cli-html",
   "dependencies": {
     "ansi-align": "^3.0.1",