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

feature/#48 add anchors to demo site

README.md

@@ -14,9 +14,8 @@
 The awesome carousel component for Svelte 3
 
 ## Demo
-
+* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)
-https://vadimkorr.github.io/svelte-carousel \
+* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)
-[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 how dots look like.
-This slot is used for customizing dots appearance.
 
 Slot props:
 
@@ -167,7 +163,6 @@ Slot props:
 ```
 
 ### Default slot
-
 This slot takes content for the carousel.
 
 Slot props:

docs/index.css

@@ -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}
+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}

docs/index.html

@@ -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>

src/docs/Carousel.svx

@@ -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`
+## pageChange!anchorId:events-page-change;
-Is dispatched on 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`
+## dots!anchorId:slots-dots;
-
+This slot is used for customizing how dots look like.
-This slot is used for customizing dots appearance.
 
 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:

src/docs/Layouts/Main.svelte

@@ -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>
 

src/docs/Layouts/custom/H/H.svelte

@@ -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>

src/docs/Layouts/custom/H/H1/H1.svelte

@@ -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>

src/docs/Layouts/custom/H/H1/H1Dom.svelte

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

src/docs/Layouts/custom/H/H2/H2.svelte

@@ -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>

src/docs/Layouts/custom/H/H2/H2Dom.svelte

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

src/docs/Layouts/custom/H/index.js

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

src/docs/README.md

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

src/docs/components/Divider.svelte

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

src/docs/utils/string.js

@@ -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])
+  }
+}