Update links

package.json

@@ -32,6 +32,7 @@
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.12.11",
     "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-image": "^2.1.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@storybook/addon-actions": "^6.1.14",

rollup.config.js

@@ -7,6 +7,7 @@ import livereload from 'rollup-plugin-livereload'
 import { terser } from 'rollup-plugin-terser'
 import babel from 'rollup-plugin-babel'
 import css from 'rollup-plugin-import-css'
+import image from '@rollup/plugin-image';
 import { mdsvex } from 'mdsvex'
 
 const production = !process.env.ROLLUP_WATCH
@@ -70,6 +71,8 @@ export default {
     // a separate file - better for performance
     css({ output: 'index.css', minify: true }),
 
+    image(),
+
     // If you have external dependencies installed from
     // npm, you'll most likely need these plugins. In
     // some cases you'll need additional configuration -

src/docs/Layouts/Main.svelte

@@ -15,24 +15,31 @@
 </script>
 
 <script>
-  const links = [{
+  import links from '../data/links.json'
-    title: 'GitHub',
+  import githubLogo from '../icons/github-logo.svg'
-    url: 'https://github.com/vadimkorr/svelte-carousel'
+  import npmLogo from '../icons/npm-logo.svg'
-  }, {
+  import youtubeLogo from '../icons/youtube-logo.svg'
-    title: 'NPM',
+
-    url: 'https://www.npmjs.com/package/svelte-carousel'
+  const icons = {
-  }, {
+    'github-logo': githubLogo,
-    title: 'REPL',
+    'npm-logo': npmLogo,
-    url: 'https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5'
+    'youtube-logo': youtubeLogo,
-  }]
+  }
+
 </script>
 
 <div class="docs__main-layout__main-container">
   <div class="docs__main-layout__header-container">
     <img class="docs__main-layout__logo" src="./svelte-carousel-logo-md.png" alt="svelte-carousel-logo" />
     <div class="docs__main-layout__links-container">
-      {#each links as { url, title } (title)}
+      {#each links as { url, title, iconName } (title)}
-        <a href={url} target="_blank" rel="noopener noreferrer">{title}</a>
+        <a href={url} target="_blank" rel="noopener noreferrer" class="docs__main-layout__link">
+          {#if iconName}
+            <img class="docs__main-layout__link-icon" src={icons[iconName]}>
+          {:else}
+            <span class="docs__main-layout__link-text">{title}</span>
+          {/if}
+        </a>
       {/each}
     </div>
   </div>
@@ -69,11 +76,30 @@
   .docs__main-layout__links-container > a {
     text-decoration: none;
     color: #009800;
-    font-size: 18px;
+    display: flex;
+    align-items: center;
+    background-color: #c0b870;
+    padding: 5px;
+    border-radius: 3px;
   }
   .docs__main-layout__links-container > a:not(:last-child) {
     margin-right: 10px;
   }
+  .docs__main-layout__links-container > a:last-child {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+  }
+  .docs__main-layout__links-container > a:first-child {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+  }
+
+  .docs__main-layout__link-icon {
+    width: 30px;
+  }
+  .docs__main-layout__link-text {
+    font-size: 18px;
+  }
 
   .docs__main-layout__content-container {
     margin: 0 auto;

src/docs/data/links.json

@@ -0,0 +1,16 @@
+[{
+  "title": "GitHub",
+  "iconName": "github-logo",
+  "url": "https://github.com/vadimkorr/svelte-carousel"
+}, {
+  "title": "NPM",
+  "iconName": "npm-logo",
+  "url": "https://www.npmjs.com/package/svelte-carousel"
+}, {
+  "title": "YouTube",
+  "iconName": "youtube-logo",
+  "url": "https://www.youtube.com/channel/UCQnQ5wh8Eh1q-E2s-fN1Xcg"
+}, {
+  "title": "REPL",
+  "url": "https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5"
+}]

src/docs/icons/github-logo.svg

@@ -0,0 +1 @@
+<svg width="256" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403z" fill="#161614"/></svg>

src/docs/icons/npm-logo.svg

@@ -0,0 +1 @@
+<svg width="512" height="165" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M157.538 164.103h65.641v-32.82h65.642V0H157.538v164.103zM223.18 32.82H256v65.64h-32.82v-65.64zM315.077 0v131.282h65.64V32.821h32.821v98.461h32.821V32.821h32.82v98.461H512V0H315.077zM0 131.282h65.641V32.821h32.82v98.461h32.821V0H0v131.282z" fill="#C12127"/></svg>

src/docs/icons/youtube-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="240" height="240"><path fill="#FF3D00" d="M43.2 33.9c-.4 2.1-2.1 3.7-4.2 4-3.3.5-8.8 1.1-15 1.1-6.1 0-11.6-.6-15-1.1-2.1-.3-3.8-1.9-4.2-4-.4-2.3-.8-5.7-.8-9.9s.4-7.6.8-9.9c.4-2.1 2.1-3.7 4.2-4C12.3 9.6 17.8 9 24 9c6.2 0 11.6.6 15 1.1 2.1.3 3.8 1.9 4.2 4 .4 2.3.9 5.7.9 9.9-.1 4.2-.5 7.6-.9 9.9z"/><path fill="#FFF" d="M20 31V17l12 7z"/></svg>

yarn.lock

@@ -1540,6 +1540,14 @@
     magic-string "^0.25.7"
     resolve "^1.17.0"
 
+"@rollup/plugin-image@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-image/-/plugin-image-2.1.0.tgz#55a477f07af04b1b0caf63f098568a8bf8b1fa8f"
+  integrity sha512-IiRhjv65A4Rb/9R+gTP2JdIciumkc8c+3xFoUfw3PUkX77SqqzvJ028AfX856E3ZdExMrqY9C9ZVXN46w6rh9A==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    mini-svg-data-uri "^1.2.3"
+
 "@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"
@@ -7858,6 +7866,11 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
+mini-svg-data-uri@^1.2.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz#91d2c09f45e056e5e1043340b8b37ba7b50f4fac"
+  integrity sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"