public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Setup mdx for docs

Browse Source
This commit is contained in:
Vadim
2021-01-24 18:41:06 +03:00
parent b539689024
commit ee0ed9e5a7
10 changed files with 133 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/index.css Normal file
View File

@@ -0,0 +1,2 @@
.main-container.svelte-7d88a5.svelte-7d88a5{display:flex;width:100%;flex-direction:column;align-items:center}.carousel-container.svelte-7d88a5.svelte-7d88a5{display:flex;width:100%}.content-container.svelte-7d88a5.svelte-7d88a5{flex:1;display:flex;overflow:hidden;box-sizing:border-box}.content-container.svelte-7d88a5>div.svelte-7d88a5{width:100%;display:flex;transition-timing-function:ease-in-out;transition-property:transform}.arrow-container.svelte-7d88a5.svelte-7d88a5{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}:root{--dot-size:10px}.main-container.svelte-1j143j1{display:flex;align-items:center}.dot-container.svelte-1j143j1{height:calc(var(--dot-size) + 10px);width:calc(var(--dot-size) + 10x);display:flex;align-items:center;justify-content:center}:root{--size:2px
}.circle.svelte-1bt6c9d{width:20px;height:20px;border-radius:50%;background-color:rgba(93, 93, 93, 0.5);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer}.circle.svelte-1bt6c9d:hover{opacity:0.9}.arrow.svelte-1bt6c9d{border:solid #1e1e1e;border-width:0 var(--size) var(--size) 0;padding:var(--size);position:relative}.next.svelte-1bt6c9d{transform:rotate(-45deg);left:calc(var(--size) / -2)}.prev.svelte-1bt6c9d{transform:rotate(135deg);right:calc(var(--size) / -2)}.disabled.svelte-1bt6c9d,.disabled.svelte-1bt6c9d:hover{opacity:0.5}.main-container.svelte-6wkp3k{display:flex;align-items:center;justify-content:center;height:16px;width:16px}.dot.svelte-6wkp3k{background-color:#5d5d5d;border-radius:50%;display:inline-block;opacity:0.5;cursor:pointer;transition:opacity 100ms ease}.dot.svelte-6wkp3k:hover{opacity:0.9}.current.svelte-6wkp3k{opacity:0.7}

11
docs/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>svelte-carousel</title>
<link rel='stylesheet' href='./index.css'>
<script defer src='./index.js'></script>
</head>
<body></body>
</html>

1
docs/index.js Normal file
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

@@ -26,6 +26,8 @@
"start": "sirv public", "start": "sirv public",
"storybook": "start-storybook -p 6006", "storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook", "build-storybook": "build-storybook",
"build:docs": "set DOCS=true && rollup -c",
"dev:docs": "set DOCS=true && rollup -c -w",
"prepublishOnly": "npm run build" "prepublishOnly": "npm run build"
}, },
"devDependencies": { "devDependencies": {
@@ -37,6 +39,7 @@
"@storybook/addon-links": "^6.1.14", "@storybook/addon-links": "^6.1.14",
"@storybook/svelte": "^6.1.14", "@storybook/svelte": "^6.1.14",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"mdsvex": "^0.8.9",
"rollup": "^2.3.4", "rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0", "rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0", "rollup-plugin-livereload": "^2.0.0",

30
rollup.config.js
View File

@@ -4,9 +4,26 @@ import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload'; import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser'; import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only'; import css from 'rollup-plugin-css-only';
import { mdsvex } from "mdsvex";
const production = !process.env.ROLLUP_WATCH; const production = !process.env.ROLLUP_WATCH;
const docsConfig = {
input: 'src/main.js',
outputFormat: 'iife',
outputFile: 'docs/index.js'
}
const packageConfig = {
input: 'src/docs/main.js',
outputFormat: 'es',
outputFile: 'dist/index.js'
}
const docs = !!process.env.DOCS
const getConfig = () => {
return docs ? docsConfig : packageConfig
}
function serve() { function serve() {
let server; let server;
@@ -29,19 +46,22 @@ function serve() {
} }
export default { export default {
input: 'src/main.js', input: getConfig().input,
output: { output: {
sourcemap: true, sourcemap: false,
format: 'es', format: getConfig().outputFormat,
name: 'app', name: 'app',
file: 'dist/index.js' file: getConfig().outputFile
}, },
plugins: [ plugins: [
svelte({ svelte({
compilerOptions: { compilerOptions: {
// enable run-time checks when not in production // enable run-time checks when not in production
dev: !production dev: !production
} },
// tell svelte to handle mdsvex files
extensions: [".svelte", ".svx"],
preprocess: mdsvex()
}), }),
// we'll extract any component CSS out into // we'll extract any component CSS out into
// a separate file - better for performance // a separate file - better for performance

8
src/docs/App.svelte Normal file
View File

@@ -0,0 +1,8 @@
<script>
import Carousel from './Carousel.svx'
import './global.css'
</script>
<main>
<Carousel />
</main>

62
src/docs/Carousel.svx Normal file
View File

@@ -0,0 +1,62 @@
<script>
import Carousel from '../components/Carousel/Carousel.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' },
]
]
</script>
## Single item
<Carousel>
{#each colorGroups.flat() as { color, text } (color)}
<div
class="color-container"
style="background-color: {color};"
>
<p>{text}</p>
</div>
{/each}
</Carousel>
## Multiple items
<Carousel>
{#each colorGroups as colorGroup, groupIndex (groupIndex)}
<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}
</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>

3
src/docs/global.css Normal file
View File

@@ -0,0 +1,3 @@
* {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

7
src/docs/main.js Normal file
View File

@@ -0,0 +1,7 @@
import App from './App.svelte';
const app = new App({
target: document.body,
});
export default app;

13
yarn.lock
View File

@@ -6501,6 +6501,15 @@ mdast-util-to-string@^1.0.0:
resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527" resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A== integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
mdsvex@^0.8.9:
version "0.8.9"
resolved "https://registry.yarnpkg.com/mdsvex/-/mdsvex-0.8.9.tgz#7d7bf557ba83bb7f2856f6211b387f8f1688d791"
integrity sha512-9CDBDV29IVNJsJWDlCg1UwascU8QmuHsYEXJH2ZGsf7lCCWUDSwbOmR+I77tm8D2YQrPsbLCLq/UndUMJck3Cw==
dependencies:
"@types/unist" "^2.0.3"
prismjs "^1.17.1"
vfile-message "^2.0.4"
mdurl@^1.0.0: mdurl@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -7497,7 +7506,7 @@ pretty-hrtime@^1.0.3:
resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
prismjs@^1.21.0, prismjs@~1.23.0: prismjs@^1.17.1, prismjs@^1.21.0, prismjs@~1.23.0:
version "1.23.0" version "1.23.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA== integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
@@ -9512,7 +9521,7 @@ vfile-location@^3.0.0, vfile-location@^3.2.0:
resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.2.0.tgz#d8e41fbcbd406063669ebf6c33d56ae8721d0f3c" resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.2.0.tgz#d8e41fbcbd406063669ebf6c33d56ae8721d0f3c"
integrity sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA== integrity sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==
vfile-message@^2.0.0: vfile-message@^2.0.0, vfile-message@^2.0.4:
version "2.0.4" version "2.0.4"
resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a" resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ== integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==