Добавляет превью цвета в блоках кода (#996)

* Добавляет код

* Правит выравнивание

.eleventy.js

@@ -11,6 +11,7 @@ const headingsIdTransform = require('./src/transforms/headings-id-transform')
 const headingsAnchorTransform = require('./src/transforms/headings-anchor-transform')
 const articleCodeBlocksTransform = require('./src/transforms/article-code-blocks-transform')
 const articleInlineCodeTransform = require('./src/transforms/article-inline-code-transform')
+const colorPickerTransform = require('./src/transforms/color-picker-transform')
 const codeClassesTransform = require('./src/transforms/code-classes-transform')
 const codeBreakifyTransform = require('./src/transforms/code-breakify-transform')
 const tocTransform = require('./src/transforms/toc-transform')
@@ -287,6 +288,7 @@ module.exports = function (config) {
       linkTransform,
       articleCodeBlocksTransform,
       articleInlineCodeTransform,
+      colorPickerTransform,
       codeClassesTransform,
       codeBreakifyTransform,
       iframeAttrTransform,

src/styles/blocks/color-picker.css

@@ -0,0 +1,17 @@
+.token.color::before {
+  content: "";
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: var(--color-picker-margin);
+  background-color: var(--color-picker);
+  line-height: 0;
+}
+
+.color-picker__internal {
+  --color-picker-margin: 0 2px;
+}
+
+.color-picker__external {
+  --color-picker-margin: 0 2px 0 0;
+}

src/styles/code-dark-theme.css

@@ -142,6 +142,11 @@ pre[class*="language-"] {
   color: hsl(187, 47%, 55%);
 }
 
+/* Color-picker */
+.token.color::before {
+  border: 1px solid #fff;
+}
+
 /* HTML overrides */
 .token.attr-value > .token.punctuation.attr-equals,
 .token.special-attr > .token.attr-value > .token.value.css {

src/styles/code-light-theme.css

@@ -131,6 +131,11 @@ pre[class*="language-"] {
   color: hsl(198, 99%, 37%);
 }
 
+/* Color-picker */
+.token.color::before {
+  border: 1px solid hsl(230, 8%, 24%);
+}
+
 /* HTML overrides */
 .token.attr-value > .token.punctuation.attr-equals,
 .token.special-attr > .token.attr-value > .token.value.css {

src/styles/index.css

@@ -81,3 +81,4 @@
 @import 'blocks/linked-article.css';
 @import 'blocks/related-articles-list.css';
 @import 'blocks/code-fix.css';
+@import 'blocks/color-picker.css';

src/transforms/color-picker-transform.js

@@ -0,0 +1,17 @@
+/**
+ * @param {Window} window
+ */
+module.exports = function (window) {
+  const content = window.document.querySelector('.article__content-inner')
+  const color = content?.querySelectorAll('.token.color')
+
+  color?.forEach(function (item) {
+    item.style.setProperty('--color-picker', ` ${item.textContent}`)
+
+    if (/[(]/.test(item.previousElementSibling.textContent)) {
+      item.classList.add('color-picker__internal') // Добавляет дополнительный margin слева, если токен цвета внутри скобок
+    } else {
+      item.classList.add('color-picker__external')
+    }
+  })
+}