Fix code highlight, fix cloning

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",

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

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))

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>
 

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>

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>

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;
 }