From cb7071bf04d2893fabea0a3f1c5a883bc38a6d18 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 27 Jan 2021 20:17:28 +0300
Subject: [PATCH] Code cleanup, move docs data to json, update docs structure

---
 package.json                                  |  1 +
 rollup.config.js                              |  5 +-
 src/docs/Carousel.svx                         | 28 +-----
 src/docs/Divider.svelte                       | 11 ---
 src/docs/Layouts/Main.svelte                  | 92 +++++++++----------
 .../AlbumsPreview/AlbumsPreview.svelte        | 43 +--------
 .../AlbumsPreview/Image.svelte                |  0
 src/docs/{ => components}/Color.svelte        |  2 +-
 src/docs/components/Divider.svelte            | 11 +++
 src/docs/data/albums.json                     | 40 ++++++++
 src/docs/data/colors.json                     | 11 +++
 src/docs/data/images.json                     |  7 ++
 yarn.lock                                     |  9 +-
 13 files changed, 136 insertions(+), 124 deletions(-)
 delete mode 100644 src/docs/Divider.svelte
 rename src/docs/{ => components}/AlbumsPreview/AlbumsPreview.svelte (60%)
 rename src/docs/{ => components}/AlbumsPreview/Image.svelte (100%)
 rename src/docs/{ => components}/Color.svelte (99%)
 create mode 100644 src/docs/components/Divider.svelte
 create mode 100644 src/docs/data/albums.json
 create mode 100644 src/docs/data/colors.json
 create mode 100644 src/docs/data/images.json

diff --git a/package.json b/package.json
index b26fa51..e01258e 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@storybook/addon-actions": "^6.1.14",
     "@storybook/addon-essentials": "^6.1.14",
diff --git a/rollup.config.js b/rollup.config.js
index cd71aff..c1026f3 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -2,6 +2,7 @@ import { join } from 'path';
 import svelte from 'rollup-plugin-svelte';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
+import json from '@rollup/plugin-json';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
@@ -93,7 +94,9 @@ export default {
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify
-    production && terser()
+    production && terser(),
+
+    json(),
   ],
   watch: {
     clearScreen: false
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index 6b11d09..d279cdc 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -1,29 +1,11 @@
 <script>
   import _ from 'lodash'
   import Carousel from '../components/Carousel/Carousel.svelte'
-  import Color from './Color.svelte'
-  import AlbumsPreview from './AlbumsPreview/AlbumsPreview.svelte'
-  import Divider from './Divider.svelte'
-
-  const colors = [
-    { color: '#85d78b', text: '#85d78b' },
-    { color: '#71d077', text: '#71d077' },
-    { color: '#5dca64', text: '#5dca64' },
-    { color: '#49c351', text: '#49c351' },
-    { color: '#35bd3e', text: '#35bd3e' },
-    { color: '#2faa37', text: '#2faa37' },
-    { color: '#2a9731', text: '#2a9731' },
-    { color: '#25842b', text: '#25842b' },
-    { color: '#1f7125', text: '#1f7125' },
-  ]
-
-  const images = [
-    'https://cdn.pixabay.com/photo/2017/03/13/10/25/hummingbird-2139278_1280.jpg',
-    'https://cdn.pixabay.com/photo/2016/03/27/19/49/nature-1283976_1280.jpg',
-    'https://cdn.pixabay.com/photo/2018/07/09/18/17/apple-3526737_1280.jpg',
-    'https://cdn.pixabay.com/photo/2016/08/30/16/05/leaf-1631181_1280.jpg',
-    'https://cdn.pixabay.com/photo/2019/11/13/11/01/meadow-4623279_1280.jpg'
-  ]
+  import Color from './components/Color.svelte'
+  import AlbumsPreview from './components/AlbumsPreview/AlbumsPreview.svelte'
+  import Divider from './components/Divider.svelte'
+  import images from './data/images.json'
+  import colors from './data/colors.json'
 </script>
 
 # Features
diff --git a/src/docs/Divider.svelte b/src/docs/Divider.svelte
deleted file mode 100644
index afe139a..0000000
--- a/src/docs/Divider.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<div class="divider">
-
-</div>
-
-<style>
-.divider {
-  margin-top: 30px;
-  margin-bottom: 30px;
-  height: 1px;
-}
-</style>
\ No newline at end of file
diff --git a/src/docs/Layouts/Main.svelte b/src/docs/Layouts/Main.svelte
index 552e5e1..2808469 100644
--- a/src/docs/Layouts/Main.svelte
+++ b/src/docs/Layouts/Main.svelte
@@ -23,57 +23,57 @@
 </div>
 
 <style>
-.docs__main-layout__main-container {
-  background-color: #eaeaea;
-}
+  .docs__main-layout__main-container {
+    background-color: #eaeaea;
+  }
 
-.docs__main-layout__header-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 300px;
-  padding: 10px;
-  box-sizing: border-box;
-  background-color: #f0e68c;
-}
-.docs__main-layout__logo {
-  height: 80%;
-}
-.docs__main-layout__links-container {
-  display: flex;
-  justify-content: center;
-  padding: 10px;
-}
-.docs__main-layout__links-container > a {
-  text-decoration: none;
-  color: #009800;
-}
-.docs__main-layout__links-container > a:not(:last-child) {
-  margin-right: 10px;
-}
+  .docs__main-layout__header-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: #f0e68c;
+  }
+  .docs__main-layout__logo {
+    height: 80%;
+  }
+  .docs__main-layout__links-container {
+    display: flex;
+    justify-content: center;
+    padding: 10px;
+  }
+  .docs__main-layout__links-container > a {
+    text-decoration: none;
+    color: #009800;
+  }
+  .docs__main-layout__links-container > a:not(:last-child) {
+    margin-right: 10px;
+  }
 
-.docs__main-layout__content-container {
-  margin: 0 auto;
-}
-@media screen and (min-width: 0px) {
   .docs__main-layout__content-container {
-    width: 95%;
+    margin: 0 auto;
   }
-}
-@media screen and (min-width: 768px) {
-  .docs__main-layout__content-container {
-    width: 70%;
+  @media screen and (min-width: 0px) {
+    .docs__main-layout__content-container {
+      width: 95%;
+    }
   }
-}
-@media screen and (min-width: 992px) {
-  .docs__main-layout__content-container {
-    width: 60%;
+  @media screen and (min-width: 768px) {
+    .docs__main-layout__content-container {
+      width: 70%;
+    }
   }
-}
-@media screen and (min-width: 1200px) {
-  .docs__main-layout__content-container {
-    width: 50%;
+  @media screen and (min-width: 992px) {
+    .docs__main-layout__content-container {
+      width: 60%;
+    }
+  }
+  @media screen and (min-width: 1200px) {
+    .docs__main-layout__content-container {
+      width: 50%;
+    }
   }
-}
 </style>
diff --git a/src/docs/AlbumsPreview/AlbumsPreview.svelte b/src/docs/components/AlbumsPreview/AlbumsPreview.svelte
similarity index 60%
rename from src/docs/AlbumsPreview/AlbumsPreview.svelte
rename to src/docs/components/AlbumsPreview/AlbumsPreview.svelte
index 6df3fe6..a346440 100644
--- a/src/docs/AlbumsPreview/AlbumsPreview.svelte
+++ b/src/docs/components/AlbumsPreview/AlbumsPreview.svelte
@@ -1,47 +1,8 @@
 <script>
-  import Carousel from '../../components/Carousel/Carousel.svelte'
+  import Carousel from '../../../components/Carousel/Carousel.svelte'
   import Image from './Image.svelte'
+  import albums from '../../data/albums.json'
 
-  const albums = {
-    forest: {
-      title: 'Forest',
-      tags: ['forest', 'trees'],
-      images: [
-        'https://cdn.pixabay.com/photo/2017/04/09/09/56/avenue-2215317_1280.jpg',
-        'https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477_1280.jpg',
-        'https://cdn.pixabay.com/photo/2016/08/11/23/55/trees-1587301_1280.jpg',
-        'https://cdn.pixabay.com/photo/2016/08/16/19/09/forest-1598756_1280.jpg',
-        'https://cdn.pixabay.com/photo/2016/11/29/07/12/forest-1868028_1280.jpg',
-        'https://cdn.pixabay.com/photo/2015/03/26/09/45/woods-690257_1280.jpg'
-      ]
-    },
-    birds: {
-      title: 'Birds',
-      tags: ['birds', 'owl', 'parrot'],
-      images: [
-        'https://cdn.pixabay.com/photo/2016/11/18/12/14/owl-1834152_1280.jpg',
-        'https://cdn.pixabay.com/photo/2016/05/26/04/19/macaw-1416388_1280.jpg'
-      ]
-    },
-    flowers: {
-      title: 'Flowers',
-      tags: ['flowers', 'blossom', 'beauty'],
-      images: [
-        'https://cdn.pixabay.com/photo/2018/09/06/23/37/hydrangea-3659614_1280.jpg',
-        'https://cdn.pixabay.com/photo/2016/04/12/18/19/carnation-1325012_1280.jpg',
-        'https://cdn.pixabay.com/photo/2017/06/06/19/18/rose-2378156_1280.jpg'
-      ]
-    },
-    coffee: {
-      title: 'Coffee',
-      tags: ['coffee', 'cup'],
-      images: [
-        'https://cdn.pixabay.com/photo/2017/05/12/08/29/coffee-2306471_1280.jpg',
-        'https://cdn.pixabay.com/photo/2016/03/30/21/59/coffee-beans-1291656_1280.jpg',
-        'https://cdn.pixabay.com/photo/2018/01/31/09/57/coffee-3120750_1280.jpg',
-      ]
-    }
-  }
   function imagesLength(length) {
     return `${length} image${length > 1 ? 's' : ''}`
   }
diff --git a/src/docs/AlbumsPreview/Image.svelte b/src/docs/components/AlbumsPreview/Image.svelte
similarity index 100%
rename from src/docs/AlbumsPreview/Image.svelte
rename to src/docs/components/AlbumsPreview/Image.svelte
diff --git a/src/docs/Color.svelte b/src/docs/components/Color.svelte
similarity index 99%
rename from src/docs/Color.svelte
rename to src/docs/components/Color.svelte
index 029ec7b..08a989b 100644
--- a/src/docs/Color.svelte
+++ b/src/docs/components/Color.svelte
@@ -5,7 +5,7 @@
 <div
   class="color-container"
   style="background-color: {color};"
-  >
+>
   <p>{text}</p>
 </div>
 
diff --git a/src/docs/components/Divider.svelte b/src/docs/components/Divider.svelte
new file mode 100644
index 0000000..92db679
--- /dev/null
+++ b/src/docs/components/Divider.svelte
@@ -0,0 +1,11 @@
+<div class="divider">
+
+</div>
+
+<style>
+  .divider {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    height: 1px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/docs/data/albums.json b/src/docs/data/albums.json
new file mode 100644
index 0000000..41edefb
--- /dev/null
+++ b/src/docs/data/albums.json
@@ -0,0 +1,40 @@
+{
+  "forest": {
+    "title": "Forest",
+    "tags": ["forest", "trees"],
+    "images": [
+      "https://cdn.pixabay.com/photo/2017/04/09/09/56/avenue-2215317_1280.jpg",
+      "https://cdn.pixabay.com/photo/2017/11/12/13/37/forest-2942477_1280.jpg",
+      "https://cdn.pixabay.com/photo/2016/08/11/23/55/trees-1587301_1280.jpg",
+      "https://cdn.pixabay.com/photo/2016/08/16/19/09/forest-1598756_1280.jpg",
+      "https://cdn.pixabay.com/photo/2016/11/29/07/12/forest-1868028_1280.jpg",
+      "https://cdn.pixabay.com/photo/2015/03/26/09/45/woods-690257_1280.jpg"
+    ]
+  },
+  "birds": {
+    "title": "Birds",
+    "tags": ["birds", "owl", "parrot"],
+    "images": [
+      "https://cdn.pixabay.com/photo/2016/11/18/12/14/owl-1834152_1280.jpg",
+      "https://cdn.pixabay.com/photo/2016/05/26/04/19/macaw-1416388_1280.jpg"
+    ]
+  },
+  "flowers": {
+    "title": "Flowers",
+    "tags": ["flowers", "blossom", "beauty"],
+    "images": [
+      "https://cdn.pixabay.com/photo/2018/09/06/23/37/hydrangea-3659614_1280.jpg",
+      "https://cdn.pixabay.com/photo/2016/04/12/18/19/carnation-1325012_1280.jpg",
+      "https://cdn.pixabay.com/photo/2017/06/06/19/18/rose-2378156_1280.jpg"
+    ]
+  },
+  "coffee": {
+    "title": "Coffee",
+    "tags": ["coffee", "cup"],
+    "images": [
+      "https://cdn.pixabay.com/photo/2017/05/12/08/29/coffee-2306471_1280.jpg",
+      "https://cdn.pixabay.com/photo/2016/03/30/21/59/coffee-beans-1291656_1280.jpg",
+      "https://cdn.pixabay.com/photo/2018/01/31/09/57/coffee-3120750_1280.jpg"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/src/docs/data/colors.json b/src/docs/data/colors.json
new file mode 100644
index 0000000..1405e4a
--- /dev/null
+++ b/src/docs/data/colors.json
@@ -0,0 +1,11 @@
+[
+  { "color": "#85d78b", "text": "#85d78b" },
+  { "color": "#71d077", "text": "#71d077" },
+  { "color": "#5dca64", "text": "#5dca64" },
+  { "color": "#49c351", "text": "#49c351" },
+  { "color": "#35bd3e", "text": "#35bd3e" },
+  { "color": "#2faa37", "text": "#2faa37" },
+  { "color": "#2a9731", "text": "#2a9731" },
+  { "color": "#25842b", "text": "#25842b" },
+  { "color": "#1f7125", "text": "#1f7125" }
+]
diff --git a/src/docs/data/images.json b/src/docs/data/images.json
new file mode 100644
index 0000000..e99582a
--- /dev/null
+++ b/src/docs/data/images.json
@@ -0,0 +1,7 @@
+[
+  "https://cdn.pixabay.com/photo/2017/03/13/10/25/hummingbird-2139278_1280.jpg",
+  "https://cdn.pixabay.com/photo/2016/03/27/19/49/nature-1283976_1280.jpg",
+  "https://cdn.pixabay.com/photo/2018/07/09/18/17/apple-3526737_1280.jpg",
+  "https://cdn.pixabay.com/photo/2016/08/30/16/05/leaf-1631181_1280.jpg",
+  "https://cdn.pixabay.com/photo/2019/11/13/11/01/meadow-4623279_1280.jpg"
+]
diff --git a/yarn.lock b/yarn.lock
index e0df71f..2b9a53e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1227,6 +1227,13 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
+"@rollup/plugin-json@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
+  integrity sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+
 "@rollup/plugin-node-resolve@^11.0.0":
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.1.0.tgz#fa0f888297b3aebcd6534e8aba4e6fe01997649a"
@@ -1247,7 +1254,7 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
-"@rollup/pluginutils@^3.1.0":
+"@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==