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

Merge pull request #61 from vadimkorr/feature/#48_Add-anchors-to-demo-site

Browse Source 
feature/#48 add anchors to demo site
This commit is contained in:
Vadim
2021-08-14 19:31:16 +03:00
committed by GitHub
parent d71f4f5518 ab39e7f4f0
commit 05ad54f9a4
15 changed files with 169 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@@ -14,9 +14,8 @@
The awesome carousel component for Svelte 3
## Demo
https://vadimkorr.github.io/svelte-carousel \
[REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)
* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)
* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)
## Installation
```bash
@@ -35,7 +34,6 @@ Import component
```
## SvelteKit support
There are several things to keep in mind when `svelte-carousel` is used with SvelteKit. This is because `svelte-carousel` is a client-side library and depends on `document` and `window`. [See more in SvelteKit FAQ](https://kit.svelte.dev/faq).
1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components)
@@ -47,7 +45,6 @@ yarn add svelte-carousel -D
npm install svelte-carousel -D
```
2. Import and use it:
```jsx
@@ -82,23 +79,23 @@ npm install svelte-carousel -D
## Props
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `arrows` | `boolean` | `true` | Enables next/prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) |
| `autoplay` | `boolean` | `false` | Enables auto play of pages |
| `autoplay` | `boolean` | `false` | Enables autoplay of pages |
| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |
| `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) |
| `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator |
| `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enable swiping |
| `swiping` | `boolean` | `true` | Enables swiping |
## Events
### `pageChange`
Is dispatched on page change
It is dispatched on page change
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
@@ -142,8 +139,7 @@ Slot props:
```
### `dots`
This slot is used for customizing dots appearance.
This slot is used for customizing how dots look like.
Slot props:
@@ -167,7 +163,6 @@ Slot props:
```
### Default slot
This slot takes content for the carousel.
Slot props:

11
docs/index.css
View File

@@ -1,9 +1,9 @@
html,body{position:relative;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;}
code[class*="language-"],pre[class*="language-"] {color:#ccc;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}pre[class*="language-"] {padding:1em;margin:.5em 0;overflow:auto;}:not(pre) > code[class*="language-"],pre[class*="language-"] {background:#2d2d2d;}:not(pre) > code[class*="language-"] {padding:.1em;border-radius:.3em;white-space:normal;}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata {color:#999;}.token.punctuation {color:#ccc;}.token.tag,.token.attr-name,.token.namespace,.token.deleted {color:#e2777a;}.token.function-name {color:#6196cc;}.token.boolean,.token.number,.token.function {color:#f08d49;}.token.property,.token.class-name,.token.constant,.token.symbol {color:#f8c555;}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin {color:#cc99cd;}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable {color:#7ec699;}.token.operator,.token.entity,.token.url {color:#67cdcc;}.token.important,.token.bold {font-weight:bold;}.token.italic {font-style:italic;}.token.entity {cursor:help;}.token.inserted {color:green;}
.img-container.svelte-4bw00n.svelte-4bw00n{display:block;width:100%;height:200px}.img-container.svelte-4bw00n>img.svelte-4bw00n{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}.custom-arrow.svelte-4bw00n.svelte-4bw00n{width:20px;background-color:#000000;opacity:0.3;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-arrow.svelte-4bw00n.svelte-4bw00n:hover{opacity:0.5}.custom-arrow.svelte-4bw00n>i.svelte-4bw00n{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.custom-arrow-prev.svelte-4bw00n.svelte-4bw00n{left:0}.custom-arrow-prev.svelte-4bw00n>i.svelte-4bw00n{transform:rotate(135deg);right:-4px}.custom-arrow-next.svelte-4bw00n.svelte-4bw00n{right:0}.custom-arrow-next.svelte-4bw00n>i.svelte-4bw00n{transform:rotate(-45deg);left:-4px}.custom-dots.svelte-4bw00n.svelte-4bw00n{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 20px}
.divider.svelte-10zimfx{margin-top:15px;margin-bottom:15px;height:1px}
.color-container.svelte-1bsdhrs.svelte-1bsdhrs{height:150px;width:100%;display:flex;align-items:center;justify-content:center;user-select:none}.color-container.svelte-1bsdhrs>p.svelte-1bsdhrs{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-style:italic;font-size:18px}
.custom-dot__dot-container.svelte-1ufq367{height:25px;width:25px;background-color:#727272;border-radius:50%;opacity:0.7;display:flex;align-items:center;justify-content:center;margin:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}.custom-dot__dot-container.svelte-1ufq367:hover{opacity:0.9}.custom-dot__dot-container_active.svelte-1ufq367{background-color:#009800}.custom-dot__symbol.svelte-1ufq367{font-size:14px;font-weight:bold;color:#eaeaea}
.divider.svelte-1dny3ln{margin-top:30px;margin-bottom:30px;height:1px}
:root{--sc-color-rgb-light-50p:rgba(93,93,93,0.5);--sc-color-rgb-light:#5d5d5d;--sc-color-hex-dark-50p:rgba(30,30,30,0.5);--sc-color-hex-dark:#1e1e1e}.sc-carousel__carousel-container.svelte-h7bw08{display:flex;width:100%;flex-direction:column;align-items:center}.sc-carousel__content-container.svelte-h7bw08{position:relative;display:flex;width:100%}.sc-carousel__pages-window.svelte-h7bw08{flex:1;display:flex;overflow:hidden;box-sizing:border-box;position:relative}.sc-carousel__pages-container.svelte-h7bw08{width:100%;display:flex;transition-property:transform}.sc-carousel__arrow-container.svelte-h7bw08{padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.sc-carousel-progress__container.svelte-h7bw08{width:100%;height:5px;background-color:var(--sc-color-rgb-light-50p);position:absolute;bottom:0}
.albums-container.svelte-tqqkfc.svelte-tqqkfc{display:flex;justify-content:center;flex-wrap:wrap}.album-container.svelte-tqqkfc.svelte-tqqkfc{width:250px;padding:10px;background-color:#c6c6c6;border-radius:5px;margin:5px}.album-title.svelte-tqqkfc.svelte-tqqkfc{font-size:16px}.album-size.svelte-tqqkfc.svelte-tqqkfc{font-size:10px;color:#585858}.album-tag.svelte-tqqkfc.svelte-tqqkfc{background-color:#8f8f8f;border-radius:5px;padding:1px 5px;color:#ffffff;margin-top:3px;margin-bottom:3px;display:inline-block;font-size:10px}.album-tag.svelte-tqqkfc.svelte-tqqkfc:not(:last-child){margin-right:3px}.album-arrow.svelte-tqqkfc.svelte-tqqkfc{width:20px;background-color:#000000;opacity:0;position:absolute;top:0;bottom:0;z-index:1;transition:opacity 150ms ease;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.album-arrow.svelte-tqqkfc>i.svelte-tqqkfc{border:solid #1e1e1e;border-width:0 5px 5px 0;padding:5px;position:relative}.album-container.svelte-tqqkfc:hover .album-arrow.svelte-tqqkfc{opacity:0.5}.album-arrow-prev.svelte-tqqkfc.svelte-tqqkfc{left:0}.album-arrow-prev.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(135deg);right:-4px}.album-arrow-next.svelte-tqqkfc.svelte-tqqkfc{right:0}.album-arrow-next.svelte-tqqkfc>i.svelte-tqqkfc{transform:rotate(-45deg);left:-4px}
.docs__main-layout__main-container.svelte-17evj66.svelte-17evj66{background-color:#eaeaea}.docs__main-layout__header-container.svelte-17evj66.svelte-17evj66{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.svelte-17evj66.svelte-17evj66{height:80%;max-width:100%;object-fit:contain}.docs__main-layout__links-container.svelte-17evj66.svelte-17evj66{display:flex;justify-content:center;padding:10px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66{text-decoration:none;color:#009800;font-size:18px}.docs__main-layout__links-container.svelte-17evj66>a.svelte-17evj66:not(:last-child){margin-right:10px}.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{margin:0 auto}@media screen and (min-width:0px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:95%}}@media screen and (min-width:768px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:70%}}@media screen and (min-width:992px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:60%}}@media screen and (min-width:1200px){.docs__main-layout__content-container.svelte-17evj66.svelte-17evj66{width:50%}}
@@ -11,8 +11,11 @@ code[class*="language-"],pre[class*="language-"] {color:#ccc;background:none;fon
:root{--sc-arrow-size:2px}.sc-carousel-arrow__circle.svelte-9ztt4p{width:20px;height:20px;border-radius:50%;background-color:var(--sc-color-rgb-light-50p);display:flex;align-items:center;justify-content:center;transition:opacity 100ms ease;cursor:pointer;-webkit-tap-highlight-color:transparent}.sc-carousel-arrow__circle.svelte-9ztt4p:hover{opacity:0.9}.sc-carousel-arrow__arrow.svelte-9ztt4p{border:solid var(--sc-color-hex-dark);border-width:0 var(--sc-arrow-size) var(--sc-arrow-size) 0;padding:var(--sc-arrow-size);position:relative}.sc-carousel-arrow__arrow-next.svelte-9ztt4p{transform:rotate(-45deg);left:calc(var(--sc-arrow-size) / -2)}.sc-carousel-arrow__arrow-prev.svelte-9ztt4p{transform:rotate(135deg);right:calc(var(--sc-arrow-size) / -2)}.sc-carousel-arrow__circle_disabled.svelte-9ztt4p,.sc-carousel-arrow__circle_disabled.svelte-9ztt4p:hover{opacity:0.5}
.sc-carousel-progress__indicator.svelte-nuyenl{height:100%;background-color:var(--sc-color-hex-dark-50p)}
.image-container.svelte-1cv82er{display:block;width:100%;height:150px}img.svelte-1cv82er{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
td.svelte-17sscyq{padding:2px 10px}
tr.svelte-yxhgu7{border-bottom:2px solid #009800}
th.svelte-1w3aa8v{padding:5px 10px}
tr.svelte-yxhgu7{border-bottom:2px solid #009800}
.table-wrapper.svelte-1kq2472{max-width:100%;overflow-x:auto}table.svelte-1kq2472{border-collapse:collapse}
:root{--sc-dot-size:6px;--sc-active-dot-size:8px;--sc-dot-size-animation-time:250ms}.sc-carousel-dot__dot.svelte-1uelw0b{background-color:var(--sc-color-rgb-light);border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease,height var(--sc-dot-size-animation-time) ease,width var(--sc-dot-size-animation-time) ease;cursor:pointer;-webkit-tap-highlight-color:transparent;height:var(--sc-dot-size);width:var(--sc-dot-size)}.sc-carousel-dot__dot.svelte-1uelw0b:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-1uelw0b{opacity:0.7;height:var(--sc-active-dot-size);width:var(--sc-active-dot-size)}
td.svelte-17sscyq{padding:2px 10px}
:root{--sc-dot-size:6px;--sc-active-dot-size:8px;--sc-dot-size-animation-time:250ms}.sc-carousel-dot__dot.svelte-1uelw0b{background-color:var(--sc-color-rgb-light);border-radius:50%;display:inline-block;opacity:0.5;transition:opacity 100ms ease,height var(--sc-dot-size-animation-time) ease,width var(--sc-dot-size-animation-time) ease;cursor:pointer;-webkit-tap-highlight-color:transparent;height:var(--sc-dot-size);width:var(--sc-dot-size)}.sc-carousel-dot__dot.svelte-1uelw0b:hover{opacity:0.9}.sc-carousel-dot__dot_active.svelte-1uelw0b{opacity:0.7;height:var(--sc-active-dot-size);width:var(--sc-active-dot-size)}
h1.docs__title{margin:16px 0}h1.docs__title .docs__anchor::before{top:15px}
h2.docs__title{margin:14px 0}h2.docs__title .docs__anchor::before{top:8px}
.docs__title{display:inline-block}.docs__title:hover .docs__anchor::before{visibility:visible}.docs__anchor.svelte-18qhn7m{position:relative;margin-left:10px;text-decoration:none;color:#000000}.docs__anchor.svelte-18qhn7m::before{visibility:hidden;font-size:14px;content:"\1F517";position:absolute;left:-20px}

2
docs/index.html
View File

@@ -6,7 +6,7 @@
<meta name='description' content='The awesome carousel component for Svelte 3'>
<meta name='keywords' content='carousel component, svelte carousel, svelte, carousel, image carousel, slider'>
<title>svelte-carousel</title>
<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="./favicon.png"/>
<link rel='stylesheet' href='./index.css'>
<script defer src='./index.js'></script>
</head>

4
docs/index.js
View File

File diff suppressed because one or more lines are too long

62
src/docs/Carousel.svx
View File

@@ -9,9 +9,9 @@
import colors from './data/colors.json'
</script>
# Features
# Features!anchorId:features;
## Single item
## Single item!anchorId:features-single-item;
<Carousel>
{#each colors as { color, text } (color)}
<Color {color} {text} />
@@ -28,7 +28,7 @@
<Divider />
## Multiple items
## Multiple items!anchorId:features-multiple-items;
<Carousel>
{#each _.chunk(colors, 3) as colorsChunk, chunkIndex (chunkIndex)}
<div style="display: flex;">
@@ -53,7 +53,7 @@
<Divider />
## Autoplay
## Autoplay!anchorId:features-autoplay;
<Carousel
autoplay
autoplayDuration={2000}
@@ -76,7 +76,7 @@
<Divider />
## Autoplay with duration progress
## Autoplay with duration progress!anchorId:features-autoplay-duration-progress;
<Carousel
autoplay
autoplayDuration={5000}
@@ -101,8 +101,7 @@
<Divider />
## Autoplay with pause on focus
## Autoplay with pause on focus!anchorId:features-autoplay-pause-on-focus;
**For desktop** - hover over the carousel to toggle the autoplay.
**For touchable devices** - tap the carousel to toggle the autoplay.
@@ -132,7 +131,7 @@
<Divider />
## Lazy loading of images
## Lazy loading of images!anchorId:features-lazy-loading;
<Carousel
let:loaded
>
@@ -161,7 +160,7 @@
<Divider />
## Arrows customization
## Arrows customization!anchorId:features-arrows-customization;
<Carousel
let:showPrevPage
let:showNextPage
@@ -196,7 +195,7 @@
<Divider />
## Dots customization
## Dots customization!anchorId:features-dots-customization;
<Carousel
let:currentPageIndex
let:pagesCount
@@ -239,12 +238,12 @@
<Divider />
## Use case
## Use cases!anchorId:features-use-cases;
<AlbumsPreview />
<Divider />
# Installation
# Installation!anchorId:installation;
```bash
yarn add svelte-carousel
```
@@ -252,7 +251,7 @@ yarn add svelte-carousel
npm install svelte-carousel
```
Import component
Import component:
```jsx
<script>
import Carousel from 'svelte-carousel'
@@ -262,11 +261,10 @@ Import component
<Divider />
# Props
# Props!anchorId:props;
| Prop | Type | Default | Description |
|---------------------------|------------|-----------------|-----------------------------------------------|
| `arrows` | `boolean` | `true` | Enable Next/Prev arrows |
| `arrows` | `boolean` | `true` | Enables next/prev arrows |
| `infinite` | `boolean` | `true` | Infinite looping |
| `initialPageIndex` | `number` | `0` | Page to start on |
| `duration` | `number` | `500` | Transition duration (ms) |
@@ -274,17 +272,17 @@ Import component
| `autoplayDuration` | `number` | `3000` | Autoplay change interval (ms) |
| `autoplayDirection` | `string` | `'next'` | Autoplay change direction (`next` or `prev`) |
| `pauseOnFocus` | `boolean` | `false` | Pauses autoplay on focus (for desktop - hover over the carousel to toggle the autoplay, for touchable devices - tap the carousel to toggle the autoplay) |
| `autoplayProgressVisible` | `boolean` | `false` | Show autoplay duration progress indicator |
| `autoplayProgressVisible` | `boolean` | `false` | Shows autoplay duration progress indicator |
| `dots` | `boolean` | `true` | Current page indicator dots |
| `timingFunction` | `string` | `'ease-in-out'` | CSS animation timing function |
| `swiping` | `boolean` | `true` | Enable swiping |
| `swiping` | `boolean` | `true` | Enables swiping |
<Divider />
# Events
# Events!anchorId:events;
## `pageChange`
Is dispatched on page change
## pageChange!anchorId:events-page-change;
It is dispatched on page change.
| Payload field | Type | Description |
|--------------------|-------------|---------------------------------------|
@@ -302,9 +300,9 @@ Is dispatched on page change
<Divider />
# Slots
# Slots!anchorId:slots;
## `prev` and `next`
## prev and next!anchorId:slots-prev-next;
They are used for customizing prev and next buttons.
Slot props:
@@ -329,9 +327,8 @@ Slot props:
</Carousel>
```
## `dots`
This slot is used for customizing dots appearance.
## dots!anchorId:slots-dots;
This slot is used for customizing how dots look like.
Slot props:
@@ -354,8 +351,7 @@ Slot props:
</Carousel>
```
## Default slot
## Default slot!anchorId:slots-default;
This slot takes content for the carousel.
Slot props:
@@ -377,9 +373,9 @@ Slot props:
<Divider />
# Methods
# Methods!anchorId:methods;
## `goTo`
## goTo!anchorId:methods-go-to;
Navigates to a page by index. `(pageIndex, options) => Promise<void>`.
Arguments:
@@ -406,7 +402,7 @@ Arguments:
<button class="button" on:click={goToStartPage}>Go</button>
```
## `goToPrev`
## goToPrev!anchorId:methods-go-to-prev;
Navigates to the previous page. `(options) => Promise<void>`.
Arguments:
@@ -432,7 +428,7 @@ Arguments:
<button class="button" on:click={goToPrevPage}>Go</button>
```
## `goToNext`
## goToNext!anchorId:methods-go-to-next;
Navigates to the next page. `(options) => Promise<void>`.
Arguments:
@@ -521,4 +517,4 @@ Arguments:
justify-content: center;
padding: 0 20px;
}
</style>
</style>

5
src/docs/Layouts/Main.svelte
View File

@@ -3,11 +3,14 @@
import Th from './custom/Th.svelte';
import Tr from './custom/Tr.svelte';
import Td from './custom/Td.svelte';
import { H1, H2 } from './custom/H';
export {
Table as table,
Th as th,
Tr as tr,
Td as td
Td as td,
H1 as h1,
H2 as h2,
};
</script>

48
src/docs/Layouts/custom/H/H.svelte Normal file
View File

@@ -0,0 +1,48 @@
<script>
import { onMount } from 'svelte'
import { parseTitleStr } from '../../../utils/string'
export let titleComponent
let titleEl
let anchorId
let title
onMount(() => {
const parsed = parseTitleStr(titleEl.textContent)
title = parsed.title
anchorId = parsed.props.anchorId
})
</script>
<div>
<svelte:component this={titleComponent} id={anchorId} class="docs__title">
<a class="docs__anchor" href={`#${anchorId}`}>
{title}
{#if !title}
<span bind:this={titleEl}><slot /></span>
{/if}
</a>
</svelte:component>
</div>
<style>
:global(.docs__title) {
display: inline-block;
}
:global(.docs__title:hover .docs__anchor::before) {
visibility: visible;
}
.docs__anchor {
position: relative;
margin-left: 10px;
text-decoration: none;
color: #000000;
}
.docs__anchor::before {
visibility: hidden;
font-size: 14px;
content: "\1F517";
position: absolute;
left: -20px;
}
</style>

17
src/docs/Layouts/custom/H/H1/H1.svelte Normal file
View File

@@ -0,0 +1,17 @@
<script>
import H from '../H.svelte'
import H1 from './H1Dom.svelte'
</script>
<H titleComponent={H1}>
<slot />
</H>
<style>
:global(h1.docs__title) {
margin: 16px 0;
}
:global(h1.docs__title .docs__anchor::before) {
top: 15px;
}
</style>

3
src/docs/Layouts/custom/H/H1/H1Dom.svelte Normal file
View File

@@ -0,0 +1,3 @@
<h1 {...$$props}>
<slot />
</h1>

17
src/docs/Layouts/custom/H/H2/H2.svelte Normal file
View File

@@ -0,0 +1,17 @@
<script>
import H from '../H.svelte'
import H2 from './H2Dom.svelte'
</script>
<H titleComponent={H2}>
<slot />
</H>
<style>
:global(h2.docs__title) {
margin: 14px 0;
}
:global(h2.docs__title .docs__anchor::before) {
top: 8px;
}
</style>

3
src/docs/Layouts/custom/H/H2/H2Dom.svelte Normal file
View File

@@ -0,0 +1,3 @@
<h2 {...$$props}>
<slot />
</h2>

7
src/docs/Layouts/custom/H/index.js Normal file
View File

@@ -0,0 +1,7 @@
import H1 from './H1/H1.svelte'
import H2 from './H2/H2.svelte'
export {
H1,
H2
}

1
src/docs/README.md Normal file
View File

@@ -0,0 +1 @@
Source code for demo site

6
src/docs/components/Divider.svelte
View File

@@ -4,8 +4,8 @@
<style>
.divider {
margin-top: 30px;
margin-bottom: 30px;
margin-top: 15px;
margin-bottom: 15px;
height: 1px;
}
</style>
</style>

19
src/docs/utils/string.js Normal file
View File

@@ -0,0 +1,19 @@
export const parseProps = (propsStr) => {
const props = propsStr?.split(';').filter(Boolean) || []
return props.reduce((acc, cur) => {
const prop = cur.split(':')
return {
...acc,
[prop[0]]: prop[1]
}
}, {})
}
export const parseTitleStr = (titleStr) => {
const parts = titleStr.split('!')
return {
title: parts[0],
props: parseProps(parts[1])
}
}