diff --git a/package.json b/package.json index 0bc3555..f30146f 100644 --- a/package.json +++ b/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", diff --git a/rollup.config.js b/rollup.config.js index 812a6ff..ed0fc14 100644 --- a/rollup.config.js +++ b/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 - diff --git a/src/docs/Layouts/Main.svelte b/src/docs/Layouts/Main.svelte index 7565021..92f888f 100644 --- a/src/docs/Layouts/Main.svelte +++ b/src/docs/Layouts/Main.svelte @@ -15,24 +15,31 @@
- {#each links as { url, title } (title)} - {title} + {#each links as { url, title, iconName } (title)} + + {#if iconName} + + {:else} + {title} + {/if} + {/each}
@@ -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; diff --git a/src/docs/data/links.json b/src/docs/data/links.json new file mode 100644 index 0000000..261a1ec --- /dev/null +++ b/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" +}] diff --git a/src/docs/icons/github-logo.svg b/src/docs/icons/github-logo.svg new file mode 100644 index 0000000..42b34c2 --- /dev/null +++ b/src/docs/icons/github-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/docs/icons/npm-logo.svg b/src/docs/icons/npm-logo.svg new file mode 100644 index 0000000..0853ed8 --- /dev/null +++ b/src/docs/icons/npm-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/docs/icons/youtube-logo.svg b/src/docs/icons/youtube-logo.svg new file mode 100644 index 0000000..cfae67d --- /dev/null +++ b/src/docs/icons/youtube-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ee4604c..63a6c46 100644 --- a/yarn.lock +++ b/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"