From 1e0b3d30204d543ef40186c4ce0b2691208e5cbb Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sun, 24 Jan 2021 23:36:21 +0300
Subject: [PATCH] Fix code highlight, fix cloning

---
 package.json                            |  1 +
 rollup.config.js                        |  2 +-
 src/components/Carousel/Carousel.svelte |  2 +-
 src/docs/App.svelte                     |  1 +
 src/docs/Carousel.svx                   | 79 ++++++++++++-------------
 src/docs/Color.svelte                   | 26 ++++++++
 src/docs/global.css                     |  3 -
 7 files changed, 68 insertions(+), 46 deletions(-)
 create mode 100644 src/docs/Color.svelte

diff --git a/package.json b/package.json
index 8438259..b26fa51 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@storybook/addon-links": "^6.1.14",
     "@storybook/svelte": "^6.1.14",
     "babel-loader": "^8.2.2",
+    "lodash": "^4.17.20",
     "mdsvex": "^0.8.9",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
diff --git a/rollup.config.js b/rollup.config.js
index eb046a2..7b4ada6 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -84,7 +84,7 @@ export default {
 
     // Watch the `public` directory and refresh the
     // browser on changes when not in production
-    !production && livereload('public'),
+    !production && livereload('docs'),
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index d99220f..4adbadf 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -96,7 +96,7 @@
   }
   
   function addClones() {
-    const first = pagesElement.firstChild
+    const first = pagesElement.children[0]
     const last = pagesElement.children[pagesElement.children.length - 1]
     pagesElement.prepend(last.cloneNode(true))
     pagesElement.append(first.cloneNode(true))
diff --git a/src/docs/App.svelte b/src/docs/App.svelte
index 8b5a876..74752e7 100644
--- a/src/docs/App.svelte
+++ b/src/docs/App.svelte
@@ -1,5 +1,6 @@
 <script>
   import Carousel from './Carousel.svx'
+  import '../../node_modules/prismjs/themes/prism.css'
   import './global.css'
 </script>
 
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index e6d59df..be58505 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -1,62 +1,59 @@
 <script>
+  import _ from 'lodash'
   import Carousel from '../components/Carousel/Carousel.svelte'
+  import Color from './Color.svelte'
 
-  const colorGroups = [
-    [
-      { color: '#e5f9f0', text: '#e5f9f0' },
-      { color: '#ccf3e2', text: '#ccf3e2' },
-      { color: '#b2edd3', text: '#b2edd3' },
-    ], [
-      { color: '#99e7c5', text: '#99e7c5' },
-      { color: '#7fe1b7', text: '#7fe1b7' },
-      { color: '#66dba8', text: '#66dba8' },
-    ], [
-      { color: '#4cd59a', text: '#4cd59a' },
-      { color: '#32cf8b', text: '#32cf8b' },
-      { color: '#19c97d', text: '#19c97d' },
-    ]
+  const colors = [
+    { color: '#e5f9f0', text: '#e5f9f0' },
+    { color: '#ccf3e2', text: '#ccf3e2' },
+    { color: '#b2edd3', text: '#b2edd3' },
+    { color: '#99e7c5', text: '#99e7c5' },
+    { color: '#7fe1b7', text: '#7fe1b7' },
+    { color: '#66dba8', text: '#66dba8' },
+    { color: '#4cd59a', text: '#4cd59a' },
+    { color: '#32cf8b', text: '#32cf8b' },
+    { color: '#19c97d', text: '#19c97d' },
   ]
 </script>
 
 ## Single item
 <Carousel>
-  {#each colorGroups.flat() as { color, text } (color)}
-    <div
-      class="color-container"
-      style="background-color: {color};"
-    >
-      <p>{text}</p>
-    </div>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
   {/each}
 </Carousel>
 
+```jsx
+<Carousel>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+```
+
 ## Multiple items
 <Carousel>
-  {#each colorGroups as colorGroup, groupIndex (groupIndex)}
+  {#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
     <div style="display: flex;">
-      {#each colorGroup as { color, text } (color)}
-        <div
-          class="color-container"
-          style="background-color: {color}; width: 33.33%;"
-        >
-          <p>{text}</p>
-        </div>
+      {#each colorsChunk as { color, text } (color)}
+        <Color {color} {text} />
       {/each}
     </div>
   {/each}
 </Carousel>
 
+```jsx
+<Carousel>
+  {#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
+    <div style="display: flex;">
+      {#each colorsChunk as { color, text } (color)}
+        <Color {color} {text} />
+      {/each}
+    </div>
+  {/each}
+</Carousel>
+```
+
 <style>
-  .color-container {
-    height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    user-select: none;
-  }
-  .color-container > p {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    font-style: italic;
-    font-size: 18px;
-  }
+
 </style>
diff --git a/src/docs/Color.svelte b/src/docs/Color.svelte
new file mode 100644
index 0000000..36dda72
--- /dev/null
+++ b/src/docs/Color.svelte
@@ -0,0 +1,26 @@
+<script>
+  export let color, text
+</script>
+
+<div
+  class="color-container"
+  style="background-color: {color};"
+  >
+  <p>{text}</p>
+</div>
+
+<style>
+  .color-container {
+    height: 100px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+  }
+  .color-container > p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    font-size: 18px;
+  }
+</style>
diff --git a/src/docs/global.css b/src/docs/global.css
index 772d477..b03d044 100644
--- a/src/docs/global.css
+++ b/src/docs/global.css
@@ -5,8 +5,5 @@ html, body {
   margin: 0;
   padding: 5px;
   box-sizing: border-box;
-}
-
-* {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
\ No newline at end of file