From 1671346f4cc21bf9d3438cd5750dcc3aa23b2f7e Mon Sep 17 00:00:00 2001
From: Anna Barmina <abarmina@exadel.com>
Date: Wed, 16 Jun 2021 00:58:45 +0200
Subject: [PATCH 1/4] refactor: color randomizer move to a separate function

---
 pages/views-11ty/data/functions.js | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 pages/views-11ty/data/functions.js

diff --git a/pages/views-11ty/data/functions.js b/pages/views-11ty/data/functions.js
new file mode 100644
index 000000000..6d3c4a903
--- /dev/null
+++ b/pages/views-11ty/data/functions.js
@@ -0,0 +1,5 @@
+module.exports = {
+  randomColor() {
+    return `#${Math.floor(Math.random() * 4095).toString(16)}`;
+  },
+};

From 3672818b93820b6e07774c3fe9f8b39e57088ec6 Mon Sep 17 00:00:00 2001
From: Anna Barmina <abarmina@exadel.com>
Date: Wed, 16 Jun 2021 01:06:02 +0200
Subject: [PATCH 2/4] refactor: draft components move to nunjucks

---
 .../drafts/esl-multi-carousel-page-dev.njk}   | 76 +++++++++----------
 .../drafts/esl-multi-carousel-page.njk}       | 70 ++++++++---------
 .../drafts/esl-multi-carousel-rule.njk}       | 70 ++++++++---------
 .../drafts/esl-single-carousel-page.njk}      | 16 ++--
 pages/views-11ty/includes/header.njk          |  2 +-
 5 files changed, 117 insertions(+), 117 deletions(-)
 rename pages/{views/pages/drafts/esl-multi-carousel-page-dev.html => views-11ty/drafts/esl-multi-carousel-page-dev.njk} (64%)
 rename pages/{views/pages/drafts/esl-multi-carousel-page.html => views-11ty/drafts/esl-multi-carousel-page.njk} (59%)
 rename pages/{views/pages/drafts/esl-multi-carousel-rule.html => views-11ty/drafts/esl-multi-carousel-rule.njk} (63%)
 rename pages/{views/pages/drafts/esl-single-carousel-page.html => views-11ty/drafts/esl-single-carousel-page.njk} (71%)

diff --git a/pages/views/pages/drafts/esl-multi-carousel-page-dev.html b/pages/views-11ty/drafts/esl-multi-carousel-page-dev.njk
similarity index 64%
rename from pages/views/pages/drafts/esl-multi-carousel-page-dev.html
rename to pages/views-11ty/drafts/esl-multi-carousel-page-dev.njk
index b02b6bf7a..1e4845827 100644
--- a/pages/views/pages/drafts/esl-multi-carousel-page-dev.html
+++ b/pages/views-11ty/drafts/esl-multi-carousel-page-dev.njk
@@ -1,9 +1,10 @@
 ---
-layout: ../../layouts/basic.html
+layout: basic
 title: Multi Slide Carousel
+name: Multi Slide Carousel
+tags: drafts
 ---
 
-{{##content:
 <div class="container-fluid">
   <div class="row flex-column">
     <h2>Demo 1: </h2>
@@ -17,31 +18,31 @@ <h2>Demo 1: </h2>
       <div data-slides-area>
         <!-- CAROUSEL-ITEM -->
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide active style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide active style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>222</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide active style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide active style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>333</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>444</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>555</p>
           </div>
@@ -76,79 +77,79 @@ <h2>Demo 2: </h2>
       <div data-slides-area>
         <!-- CAROUSEL-ITEM -->
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>222</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>333</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>444</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>555</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>666</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>777</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>888</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>999</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>101010</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>121212</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>131313</p>
           </div>
@@ -183,105 +184,105 @@ <h2>Demo 3: </h2>
       <div data-slides-area>
         <!-- CAROUSEL-ITEM -->
         <esl-carousel-slide
-          style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+          style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111</p>
           </div>
         </esl-carousel-slide>
 
         <esl-carousel-slide
-          style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+          style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>222</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>333</p>
           </div>
         </esl-carousel-slide>
 
         <esl-carousel-slide first
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>444</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>555</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>666</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>777</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>888</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>999</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>101010</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>121212</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>131313</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>141010</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>151111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>161212</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>171313</p>
           </div>
@@ -298,4 +299,3 @@ <h2>Demo 3: </h2>
     </esl-carousel>
   </div>
 </div>
-#}}
diff --git a/pages/views/pages/drafts/esl-multi-carousel-page.html b/pages/views-11ty/drafts/esl-multi-carousel-page.njk
similarity index 59%
rename from pages/views/pages/drafts/esl-multi-carousel-page.html
rename to pages/views-11ty/drafts/esl-multi-carousel-page.njk
index 2ba10ba5f..b131c8f1f 100644
--- a/pages/views/pages/drafts/esl-multi-carousel-page.html
+++ b/pages/views-11ty/drafts/esl-multi-carousel-page.njk
@@ -1,9 +1,10 @@
 ---
-layout: ../../layouts/basic.html
+layout: basic
 title: Multi Slide Carousel
+name: Multi Slide Carousel
+tags: drafts
 ---
 
-{{##content:
 <div class="container-fluid">
   <div class="row flex-column">
     <h2>Demo 1: </h2>
@@ -17,97 +18,97 @@ <h2>Demo 1: </h2>
       <div data-slides-area>
         <!-- CAROUSEL-ITEM -->
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>222</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>333</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>444</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>555</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>666</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>777</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>888</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>999</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>101010</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>121212</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>131313</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>141414</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>151515</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>161616</p>
           </div>
@@ -137,98 +138,98 @@ <h2>Demo 2: </h2>
 
       <div data-slides-area>
         <!-- CAROUSEL-ITEM -->
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111</p>
           </div>
         </esl-carousel-slide>
 
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>222</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>333</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>444</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>555</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>666</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>777</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>888</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>999</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>101010</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>111111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>121212</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>131313</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>141414</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>151515</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>161616</p>
           </div>
@@ -245,4 +246,3 @@ <h2>Demo 2: </h2>
     </esl-carousel>
   </div>
 </div>
-#}}
diff --git a/pages/views/pages/drafts/esl-multi-carousel-rule.html b/pages/views-11ty/drafts/esl-multi-carousel-rule.njk
similarity index 63%
rename from pages/views/pages/drafts/esl-multi-carousel-rule.html
rename to pages/views-11ty/drafts/esl-multi-carousel-rule.njk
index da6ba32f7..5cda15f94 100644
--- a/pages/views/pages/drafts/esl-multi-carousel-rule.html
+++ b/pages/views-11ty/drafts/esl-multi-carousel-rule.njk
@@ -1,9 +1,10 @@
 ---
-layout: ../../layouts/basic.html
+layout: basic
 title: Slide Carousel - Rules
+name: Slide Carousel - Rules
+tags: drafts
 ---
 
-{{##content:
 <div class="container-fluid">
   <div class="row flex-column">
     <h2>Demo 1: </h2>
@@ -22,99 +23,99 @@ <h2>Demo 1: </h2>
       <div data-slides-area>
         <!-- CAROUSEL-ITEM -->
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>First Slide</p>
           </div>
         </esl-carousel-slide>
 
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Second Slide</p>
           </div>
         </esl-carousel-slide>
 
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Third Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Fourth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Fiveth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Sixth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Seventh Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Eighth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Nineth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Tenth slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Eleventh Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Twelfth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Thirteenth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Fourteenth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Fiveteenth Slide</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>Sixteenth Slide</p>
           </div>
@@ -153,99 +154,99 @@ <h2>Demo 2: </h2>
       <div data-slides-area>
         <!-- CAROUSEL-ITEM -->
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="1">
             <p>111</p>
           </div>
         </esl-carousel-slide>
 
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="2">
             <p>222</p>
           </div>
         </esl-carousel-slide>
 
         <esl-carousel-slide active
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="3">
             <p>333</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="4">
             <p>444</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="5">
             <p>555</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="6">
             <p>666</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="7">
             <p>777</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="8">
             <p>888</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="9">
             <p>999</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="10">
             <p>101010</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="11">
             <p>111111</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="12">
             <p>121212</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="13">
             <p>131313</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="14">
             <p>141414</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="15">
             <p>151515</p>
           </div>
         </esl-carousel-slide>
 
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text" data-slide-target="16">
             <p>161616</p>
           </div>
@@ -258,4 +259,3 @@ <h2>Demo 2: </h2>
     </esl-carousel>
   </div>
 </div>
-#}}
diff --git a/pages/views/pages/drafts/esl-single-carousel-page.html b/pages/views-11ty/drafts/esl-single-carousel-page.njk
similarity index 71%
rename from pages/views/pages/drafts/esl-single-carousel-page.html
rename to pages/views-11ty/drafts/esl-single-carousel-page.njk
index 4b228d6c3..0619ceb1e 100644
--- a/pages/views/pages/drafts/esl-single-carousel-page.html
+++ b/pages/views-11ty/drafts/esl-single-carousel-page.njk
@@ -1,9 +1,10 @@
 ---
-layout: ../../layouts/basic.html
+layout: basic
 title: Single Slide Carousel
+name: Single Slide Carousel
+tags: drafts
 ---
 
-{{##content:
 <div class="container-fluid">
   <div class="row flex-column">
     <a href="javascript:void 0" class="sr-only">Fake anchor</a>
@@ -18,27 +19,27 @@ <h2>Demo 1: </h2>
       <div data-slides-area>
         <!-- CAROUSEL-ITEM -->
         <esl-carousel-slide data-active-slide
-                            style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+                            style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>aaa</p>
           </div>
         </esl-carousel-slide>
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>bbb</p>
           </div>
         </esl-carousel-slide>
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>ccc</p>
           </div>
         </esl-carousel-slide>
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>ddd</p>
           </div>
         </esl-carousel-slide>
-        <esl-carousel-slide style="background: #{{= Math.floor(Math.random()*4095).toString(16) }}">
+        <esl-carousel-slide style="background: {{ functions.randomColor() }}">
           <div class="post-text">
             <p>eee</p>
           </div>
@@ -56,4 +57,3 @@ <h2>Demo 1: </h2>
     </esl-carousel>
   </div>
 </div>
-#}}
diff --git a/pages/views-11ty/includes/header.njk b/pages/views-11ty/includes/header.njk
index 93a7a0a15..bf414a766 100644
--- a/pages/views-11ty/includes/header.njk
+++ b/pages/views-11ty/includes/header.njk
@@ -14,7 +14,7 @@
       </li>
       {% if env.environment == "development" %}
         <li class="nav-item hd-dropdown">
-          {{ menu ("Drafts", "draft") }}
+          {{ menu ("Drafts", "drafts") }}
         </li>
       {% endif %}
 

From f87ac89c9100b994e4c6225d5f076347503b1a9e Mon Sep 17 00:00:00 2001
From: Anna Barmina <abarmina@exadel.com>
Date: Wed, 16 Jun 2021 01:11:14 +0200
Subject: [PATCH 3/4] refactor: remove server-sketch and its dependencies

---
 package-lock.json                             | 417 ------------------
 package.json                                  |   1 -
 pages/controllers/PublishConfig.js            |  10 -
 pages/views/error.html                        |  13 -
 pages/views/pages/drafts/_parts/code1.html    |  16 -
 .../pages/drafts/_parts/example-text.txt      |  16 -
 6 files changed, 473 deletions(-)
 delete mode 100644 pages/controllers/PublishConfig.js
 delete mode 100644 pages/views/error.html
 delete mode 100644 pages/views/pages/drafts/_parts/code1.html
 delete mode 100644 pages/views/pages/drafts/_parts/example-text.txt

diff --git a/package-lock.json b/package-lock.json
index 2b0cb6b54..a746181ef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -944,23 +944,6 @@
         }
       }
     },
-    "@exadel/server-sketch": {
-      "version": "https://github.com/exadel-inc/server-sketch/archive/refs/tags/v0.6.0.tar.gz",
-      "integrity": "sha512-7SK7dDnaqwpW0Gbhg/YvkXQ8aCWmBURY9Nvjj6U15tjFNb0yuxaLSMumRIjfo4/HQSsFzirYcGfc2ycdeU55ZA==",
-      "dev": true,
-      "requires": {
-        "browser-sync": "^2.26.12",
-        "chalk": "^4.1.0",
-        "compression": "^1.7.3",
-        "express": "^4.14.1",
-        "express-dot-engine": "^1.0.7",
-        "express-http-proxy": "^1.5.0",
-        "glob": "^7.1.3",
-        "lodash": "^4.17.11",
-        "opn": "^5.4.0",
-        "request": "^2.81.0"
-      }
-    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2618,12 +2601,6 @@
       "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
       "dev": true
     },
-    "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
-      "dev": true
-    },
     "array-ify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz",
@@ -3012,78 +2989,6 @@
       "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==",
       "dev": true
     },
-    "body-parser": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-      "dev": true,
-      "requires": {
-        "bytes": "3.1.0",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.7.0",
-        "raw-body": "2.4.0",
-        "type-is": "~1.6.17"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "http-errors": {
-          "version": "1.7.2",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-          "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-          "dev": true,
-          "requires": {
-            "depd": "~1.1.2",
-            "inherits": "2.0.3",
-            "setprototypeof": "1.1.1",
-            "statuses": ">= 1.5.0 < 2",
-            "toidentifier": "1.0.0"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
-        },
-        "qs": {
-          "version": "6.7.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-          "dev": true
-        },
-        "raw-body": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-          "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-          "dev": true,
-          "requires": {
-            "bytes": "3.1.0",
-            "http-errors": "1.7.2",
-            "iconv-lite": "0.4.24",
-            "unpipe": "1.0.0"
-          }
-        },
-        "statuses": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-          "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-          "dev": true
-        }
-      }
-    },
     "bottleneck": {
       "version": "2.19.5",
       "resolved": "https://registry.npmjs.org/bottleneck/-/bottleneck-2.19.5.tgz",
@@ -3883,53 +3788,6 @@
       "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=",
       "dev": true
     },
-    "compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
-      "requires": {
-        "mime-db": ">= 1.43.0 < 2"
-      }
-    },
-    "compression": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
-        "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "bytes": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-          "dev": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        }
-      }
-    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4053,29 +3911,6 @@
         "@babel/types": "^7.6.1"
       }
     },
-    "content-disposition": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.2"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        }
-      }
-    },
-    "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
-      "dev": true
-    },
     "conventional-changelog-angular": {
       "version": "5.0.12",
       "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-5.0.12.tgz",
@@ -4171,12 +4006,6 @@
       "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
       "dev": true
     },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-      "dev": true
-    },
     "copy-anything": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
@@ -4607,12 +4436,6 @@
         "domelementtype": "1"
       }
     },
-    "dot": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dot/-/dot-1.1.3.tgz",
-      "integrity": "sha512-/nt74Rm+PcfnirXGEdhZleTwGC2LMnuKTeeTIlI82xb5loBBoXNYzr2ezCroPSMtilK8EZIfcNZwOcHN+ib1Lg==",
-      "dev": true
-    },
     "dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -4947,12 +4770,6 @@
         "is-symbol": "^1.0.2"
       }
     },
-    "es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "dev": true
-    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -5559,163 +5376,6 @@
         }
       }
     },
-    "express": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.7",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
-        "content-type": "~1.0.4",
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "cookie": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-          "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-          "dev": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "finalhandler": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-          "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-          "dev": true,
-          "requires": {
-            "debug": "2.6.9",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "on-finished": "~2.3.0",
-            "parseurl": "~1.3.3",
-            "statuses": "~1.5.0",
-            "unpipe": "~1.0.0"
-          }
-        },
-        "mime": {
-          "version": "1.6.0",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-          "dev": true
-        },
-        "qs": {
-          "version": "6.7.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-          "dev": true
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "dev": true
-        },
-        "send": {
-          "version": "0.17.1",
-          "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-          "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-          "dev": true,
-          "requires": {
-            "debug": "2.6.9",
-            "depd": "~1.1.2",
-            "destroy": "~1.0.4",
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "etag": "~1.8.1",
-            "fresh": "0.5.2",
-            "http-errors": "~1.7.2",
-            "mime": "1.6.0",
-            "ms": "2.1.1",
-            "on-finished": "~2.3.0",
-            "range-parser": "~1.2.1",
-            "statuses": "~1.5.0"
-          },
-          "dependencies": {
-            "ms": {
-              "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-              "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-              "dev": true
-            }
-          }
-        },
-        "serve-static": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-          "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-          "dev": true,
-          "requires": {
-            "encodeurl": "~1.0.2",
-            "escape-html": "~1.0.3",
-            "parseurl": "~1.3.3",
-            "send": "0.17.1"
-          }
-        },
-        "statuses": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-          "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-          "dev": true
-        }
-      }
-    },
-    "express-dot-engine": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/express-dot-engine/-/express-dot-engine-1.0.8.tgz",
-      "integrity": "sha512-Unl8RNSxL/7ZKV/PvhVVKxO7xg6+gh4tCrdnMBjahvIC+P7SO+qmfTcffLQTZLRvZ3Z/8E7OcA7asIRK85iKbA==",
-      "dev": true,
-      "requires": {
-        "dot": "^1.1.2",
-        "js-yaml": "^3.13.1",
-        "lodash": "^4.17.15"
-      }
-    },
-    "express-http-proxy": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/express-http-proxy/-/express-http-proxy-1.6.2.tgz",
-      "integrity": "sha512-soP7UXySFdLbeeMYL1foBkEoZj6HELq9BDAOCr1sLRpqjPaFruN5o6+bZeC+7U4USWIl4JMKEiIvTeKJ2WQdlQ==",
-      "dev": true,
-      "requires": {
-        "debug": "^3.0.1",
-        "es6-promise": "^4.1.1",
-        "raw-body": "^2.3.0"
-      }
-    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -6033,12 +5693,6 @@
         "mime-types": "^2.1.12"
       }
     },
-    "forwarded": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
-      "dev": true
-    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -6834,12 +6488,6 @@
       "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
       "dev": true
     },
-    "ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true
-    },
     "is-absolute": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
@@ -9420,12 +9068,6 @@
       "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
       "dev": true
     },
-    "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
-      "dev": true
-    },
     "meow": {
       "version": "8.1.2",
       "resolved": "https://registry.npmjs.org/meow/-/meow-8.1.2.tgz",
@@ -9445,12 +9087,6 @@
         "yargs-parser": "^20.2.3"
       }
     },
-    "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
-      "dev": true
-    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -9463,12 +9099,6 @@
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "dev": true
     },
-    "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
-      "dev": true
-    },
     "micromark": {
       "version": "2.11.4",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
@@ -11322,12 +10952,6 @@
         "ee-first": "1.1.1"
       }
     },
-    "on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-      "dev": true
-    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -11352,15 +10976,6 @@
       "integrity": "sha1-OHW0sO96UsFW8NtB1GCduw+Us4c=",
       "dev": true
     },
-    "opn": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",
-      "integrity": "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==",
-      "dev": true,
-      "requires": {
-        "is-wsl": "^1.1.0"
-      }
-    },
     "optionator": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -11632,12 +11247,6 @@
       "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
       "dev": true
     },
-    "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-      "dev": true
-    },
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -12366,16 +11975,6 @@
       "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
       "dev": true
     },
-    "proxy-addr": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
-      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
-      "dev": true,
-      "requires": {
-        "forwarded": "~0.1.2",
-        "ipaddr.js": "1.9.1"
-      }
-    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -14728,16 +14327,6 @@
       "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
       "dev": true
     },
-    "type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dev": true,
-      "requires": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      }
-    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -14949,12 +14538,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
-      "dev": true
-    },
     "verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
diff --git a/package.json b/package.json
index ed00fc7cb..fcabc3073 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,6 @@
     "@11ty/eleventy": "^0.12.1",
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@exadel/server-sketch": "https://github.com/exadel-inc/server-sketch/archive/refs/tags/v0.6.0.tar.gz",
     "@juggle/resize-observer": "^3.3.1",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
diff --git a/pages/controllers/PublishConfig.js b/pages/controllers/PublishConfig.js
deleted file mode 100644
index 253d64c1c..000000000
--- a/pages/controllers/PublishConfig.js
+++ /dev/null
@@ -1,10 +0,0 @@
-const {join} = require('path');
-const {version} = require('../../package.json');
-
-module.exports = () => ({
-  version,
-  host: SERVER_CONFIG.hostPath || '',
-  local: !SERVER_CONFIG.publicMode,
-  public: !!SERVER_CONFIG.publicMode,
-  resolve: (url) => join(SERVER_CONFIG.hostPath || '', url)
-});
diff --git a/pages/views/error.html b/pages/views/error.html
deleted file mode 100644
index 0ec028226..000000000
--- a/pages/views/error.html
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: ./layouts/basic.html
-containerCls: container
----
-{{##content:
-<h1 class="text-center text-danger">Unknown Error</h1>
-<hr/>
-<h5>{{= page.data.message }}</h5>
-<hr/>
-<pre class="error-details">
-  {{= page.data.stack }}
-</pre>
-#}}
diff --git a/pages/views/pages/drafts/_parts/code1.html b/pages/views/pages/drafts/_parts/code1.html
deleted file mode 100644
index daf17069c..000000000
--- a/pages/views/pages/drafts/_parts/code1.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; color: rgb(0, 0, 0); background: rgb(255, 255, 255);"><span class="xml"><span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="font-weight: 700; color: green;">"my-carousel-style"</span>
-   <span class="hljs-attr">config</span>=<span class="hljs-string" style="font-weight: 700; color: green;">"@+SM =&gt; </span></span></span><span class="hljs-template-variable" style="color: rgb(102, 14, 122);">{count: 2, view: 'multislide', cls: 'multi'}</span><span class="xml"><span class="hljs-tag" style="background: rgb(239, 239, 239);"><span class="hljs-string" style="font-weight: 700; color: green;"> | @XS =&gt; </span></span></span><span class="hljs-template-variable" style="color: rgb(102, 14, 122);">{view: 'single'}</span><span class="xml"><span class="hljs-tag" style="background: rgb(239, 239, 239);"><span class="hljs-string" style="font-weight: 700; color: green;">"</span>&gt;</span>
-
-   <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="font-weight: 700; color: green;">"arrow-prev"</span> <span class="hljs-attr">data-slide-target</span>=<span class="hljs-string" style="font-weight: 700; color: green;">"prev"</span>&gt;</span>Previous<span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">button</span>&gt;</span>
-   <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">div</span> <span class="hljs-attr">data-slides-area</span>&gt;</span>
-     <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span> <span class="hljs-attr">active</span>&gt;</span>Slide 1 Content<span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span>&gt;</span>
-     <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span> <span class="hljs-attr">active</span>&gt;</span>Slide 2 Content<span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span>&gt;</span>
-     <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span>&gt;</span>Slide 3 Content<span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span>&gt;</span>
-     <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span>&gt;</span>Slide 4 Content<span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span>&gt;</span>
-     <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span>&gt;</span>Slide 5 Content<span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-slide</span>&gt;</span>
-   <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">div</span>&gt;</span>
-   <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="font-weight: 700; color: green;">"arrow-next"</span> <span class="hljs-attr">data-slide-target</span>=<span class="hljs-string" style="font-weight: 700; color: green;">"next"</span>&gt;</span>Next<span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">button</span>&gt;</span>
-
-   <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-dots</span> <span class="hljs-attr">class</span>=<span class="hljs-string" style="font-weight: 700; color: green;">"carousel-dots-wrapper"</span>&gt;</span><span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-dots</span>&gt;</span>
-   <span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-autoplay-plugin</span> <span class="hljs-attr">timeout</span>=<span class="hljs-string" style="font-weight: 700; color: green;">"5000"</span>&gt;</span><span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel-autoplay-plugin</span>&gt;</span>
-<span class="hljs-tag" style="background: rgb(239, 239, 239);">&lt;/<span class="hljs-name" style="font-weight: 700; color: navy;">esl-carousel</span>&gt;</span></span></pre>
diff --git a/pages/views/pages/drafts/_parts/example-text.txt b/pages/views/pages/drafts/_parts/example-text.txt
deleted file mode 100644
index 2f0e9ceed..000000000
--- a/pages/views/pages/drafts/_parts/example-text.txt
+++ /dev/null
@@ -1,16 +0,0 @@
-<esl-carousel class="my-carousel-style"
-   config="@+SM => {count: 2, view: 'multislide', cls: 'multi'} | @XS => {view: 'single'}">
-
-   <button class="arrow-prev" data-slide-target="prev">Previous</button>
-   <div data-slides-area>
-     <esl-carousel-slide active>Slide 1 Content</esl-carousel-slide>
-     <esl-carousel-slide active>Slide 2 Content</esl-carousel-slide>
-     <esl-carousel-slide>Slide 3 Content</esl-carousel-slide>
-     <esl-carousel-slide>Slide 4 Content</esl-carousel-slide>
-     <esl-carousel-slide>Slide 5 Content</esl-carousel-slide>
-   </div>
-   <button class="arrow-next" data-slide-target="next">Next</button>
-
-   <esl-carousel-dots class="carousel-dots-wrapper"></esl-carousel-dots>
-   <esl-carousel-autoplay-plugin timeout="5000"></esl-carousel-autoplay-plugin>
-</esl-carousel>

From 6792173218413c3214ac17ae8b1cca832dfb1bd3 Mon Sep 17 00:00:00 2001
From: Anna Barmina <abarmina@exadel.com>
Date: Wed, 16 Jun 2021 01:57:57 +0200
Subject: [PATCH 4/4] fix: get always valid color values

---
 pages/views-11ty/data/functions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/views-11ty/data/functions.js b/pages/views-11ty/data/functions.js
index 6d3c4a903..f4fe756c9 100644
--- a/pages/views-11ty/data/functions.js
+++ b/pages/views-11ty/data/functions.js
@@ -1,5 +1,5 @@
 module.exports = {
   randomColor() {
-    return `#${Math.floor(Math.random() * 4095).toString(16)}`;
+    return `#${Math.floor(Math.random() * 4095).toString(16).padStart(3, "0")}`;
   },
 };