[
  {
    "path": ".github/workflows/build-docs.yml",
    "content": "name: Build Documentation\n\non:\n  push:\n    branches:    \n      - master \n    paths:\n      - '.github/workflows/build-docs.yml'\n      - 'docs_src/*'\n      - 'docs_src/*/*'\n      - 'docs_src/*/*/*'\n      - 'docs_src/*/*/*/*'\n      - 'docs_src/*/*/*/*/*'\n\njobs:\n  docs-build-deploy:\n    runs-on: ubuntu-18.04\n    steps:\n    - uses: actions/checkout@master\n\n    - name: Setup Node\n      uses: actions/setup-node@v1\n      with:\n        node-version: 12.x\n\n    - name: Build\n      run: cd docs_src && npm i && npm run build\n\n    - name: Deploy\n      uses: peaceiris/actions-gh-pages@v2.4.0\n      env:\n        ACTIONS_DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}\n        PUBLISH_BRANCH: gh-pages\n        PUBLISH_DIR: ./docs_src/__DOCS__/dist/svelte-docs"
  },
  {
    "path": ".github/workflows/npm-publish-core.yml",
    "content": "name: Publish @svelte-docs/core\n\non:\n  push:\n    branches:    \n      - master \n    paths:\n      - '.github/workflows/npm-publish-core.yml'\n      - 'packages/core/package.json'\n\njobs:\n  publish-npm:\n    runs-on: ubuntu-18.04\n    steps:\n      - uses: actions/checkout@v1\n      - name: Setup Node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 12\n          registry-url: https://registry.npmjs.org/\n      - name: Installing NPM deps\n        run: npm --prefix packages/core install\n      - name: Copy Readme file\n        run: cp README.md packages/core/README.md\n      - name: Building & publishing on NPM\n        run: cd packages/core && npm publish\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}"
  },
  {
    "path": ".github/workflows/npm-publish-create.yml",
    "content": "name: Publish create-svelte-docs\n\non:\n  push:\n    branches:    \n      - master \n    paths:\n      - '.github/workflows/npm-publish-create.yml'\n      - 'packages/create/package.json'\n\njobs:\n  publish-npm:\n    runs-on: ubuntu-18.04\n    steps:\n      - uses: actions/checkout@v1\n      - name: Setup Node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 12\n          registry-url: https://registry.npmjs.org/\n      - name: Installing NPM deps\n        run: npm --prefix packages/create install\n      - name: Copy Readme file\n        run: cp README.md packages/create/README.md\n      - name: Building & publishing on NPM\n        run: cd packages/create && npm publish\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}"
  },
  {
    "path": ".github/workflows/npm-publish-publisher.yml",
    "content": "name: Publish @svelte-docs/publisher\n\non:\n  push:\n    branches:    \n      - master \n    paths:\n      - '.github/workflows/npm-publish-publisher.yml'\n      - 'packages/publisher/package.json'\n\njobs:\n  publish-npm:\n    runs-on: ubuntu-18.04\n    steps:\n      - uses: actions/checkout@v1\n      - name: Setup Node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 12\n          registry-url: https://registry.npmjs.org/\n      - name: Installing NPM deps\n        run: npm --prefix packages/publisher install\n      - name: Building & publishing on NPM\n        run: cd packages/publisher && npm publish\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}"
  },
  {
    "path": ".github/workflows/npm-publish-server.yml",
    "content": "name: Publish @svelte-docs/server\n\non:\n  push:\n    branches:    \n      - master \n    paths:\n      - '.github/workflows/npm-publish-server.yml'\n      - 'packages/server/package.json'\n\njobs:\n  publish-npm:\n    runs-on: ubuntu-18.04\n    steps:\n      - uses: actions/checkout@v1\n      - name: Setup Node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 12\n          registry-url: https://registry.npmjs.org/\n      - name: Installing NPM deps\n        run: npm --prefix packages/server install\n      - name: Building & publishing on NPM\n        run: cd packages/server && npm publish\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}"
  },
  {
    "path": ".github/workflows/npm-publish-themes.yml",
    "content": "name: Publish @svelte-docs/themes\n\non:\n  push:\n    branches:    \n      - master \n    paths:\n      - '.github/workflows/npm-publish-themes.yml'\n      - 'packages/themes/package.json'\n\njobs:\n  publish-npm:\n    runs-on: ubuntu-18.04\n    steps:\n      - uses: actions/checkout@v1\n      - name: Setup Node\n        uses: actions/setup-node@v1\n        with:\n          node-version: 12\n          registry-url: https://registry.npmjs.org/\n      - name: Installing NPM deps\n        run: npm --prefix packages/themes install\n      - name: Building & publishing on NPM\n        run: cd packages/themes && npm publish\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}"
  },
  {
    "path": ".gitignore",
    "content": ".DS_Store\nnode_modules\n__DOCS__\ntemplate/src/theme\n__DEV__"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 Alexey Schebelev\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Svelte-Docs\n\n<span style=\"color:gold\">**Sorry, but current version of Svelte-Docs will not be developing anymore. I will rework whole project with `svelte-kit` as it will be released.**</span>\n \nSvelte-Docs is a rapid way to write documentation for your Svelte components.\n\n![](https://github.com/AlexxNB/svelte-docs/workflows/Publish%20create-svelte-docs/badge.svg)\n![](https://github.com/AlexxNB/svelte-docs/workflows/Publish%20@svelte-docs/core/badge.svg)\n![](https://github.com/AlexxNB/svelte-docs/workflows/Publish%20@svelte-docs/publisher/badge.svg)\n![](https://github.com/AlexxNB/svelte-docs/workflows/Publish%20@svelte-docs/server/badge.svg)\n\n> **It is an early alpha version of the Svelte-Docs so probably buggy and unstable. It also means that future versions may include breakable changes.**\n\n## Features\n\n* Based on MDSv format, which allows write documentation in Markdown mixed with Svelte's features.\n* Import and use any Svelte components right inside a markup\n* Documentation building as static files, so you can publish it everywhere\n* Customizable themes\n* Built-in deploy on Github Pages\n\n## Getting Started\n\nJust run:\n\n```bash\nnpm init svelte-docs\n```\n\nThen [write](https://alexxnb.github.io/svelte-docs/writing/mdsv) the documentation and [build](https://alexxnb.github.io/svelte-docs/start) it into static site.\n\n## Documentation\n\nFor more info see the [Documentation](https://alexxnb.github.io/svelte-docs).\n"
  },
  {
    "path": "docs_src/.gitignore",
    "content": "node_modules\n__DOCS__"
  },
  {
    "path": "docs_src/exlibris/Button.svelte",
    "content": "<script>\n    export let primary;\n    export let error;\n</script>\n\n<button class:primary class:error><slot /></button>\n\n<style>\nbutton {\n  padding: .8rem 1.5rem;\n  color: #3f4144;\n  background: #d2d6dd;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  line-height: 1;\n  text-align: center;\n  transition: opacity 0.2s ease;\n  text-decoration: none;\n  display: inline-block;\n  cursor: pointer;\n}\n\n.primary{\n  color: #EEEEEE;\n  background: #14854F;\n}\n\n.error{\n  color: #EEEEEE;\n  background: #d43939;\n}\n\n</style>"
  },
  {
    "path": "docs_src/exlibris/Counter.svelte",
    "content": "<script>\nlet count = 0;\n</script>\n\n<span class=\"counter\">\n<span class=\"minus\" on:click={e => count--}>-</span>\n<span class=\"value\">{count}</span>\n<span class=\"plus\" on:click={e => count++}>+</span>\n</span>\n\n<style>\n.counter{\nbackground-color: #f9ac00;\npadding: 2px;\nborder-radius:5px;\n}\n\n.value{\ndisplay: inline-block;\nbackground-color: white;\ntext-align: center;\npadding:0 5px;\nborder-radius:5px;\ncolor: black;\n}\n\n.minus,.plus{\ndisplay: inline-block;\ncolor: white;\nwidth:15px;\ntext-align: center;\nfont-weight: bold;\ncursor:pointer;\n}\n</style>"
  },
  {
    "path": "docs_src/exlibris/Input.svelte",
    "content": "<script>\n    /** @type {string} Name of the input */\n    export let name;\n    /** @type {('text','number','range','date')} Type of the input */\n    export let type = 'text';\n    /** \n     * Should the input be disabled\n     * @type {bool} \n     */\n    export let disabled = false;\n    /** @type {(number|string)} Size of the input */\n    export let size = 1;\n</script>"
  },
  {
    "path": "docs_src/exlibris/Modal.svelte",
    "content": "<script>\n    import {fade} from 'svelte/transition';\n    export let open = false;\n</script>\n\n{#if open}\n<div class=\"container\" transition:fade={{ duration: 200 }}>\n    <div class=\"background\" on:click={e => open=false}/>\n    <div class=\"modal\"><slot></slot></div>\n</div>\n{/if}\n\n<style>\n.container{\n    position:fixed;\n    top:0px;\n    left:0px;\n    width:100vw;\n    height:100vh;\n    z-index:10000;\n}\n.background{\n    position:fixed;\n    top:0px;\n    left: 0px;\n    width:100vw;\n    height:100vh;\n    background-color:black;\n    opacity: 0.5;\n}\n.modal{\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    min-width:300px;\n    background-color: white;\n    padding: 10px;\n}\n</style>"
  },
  {
    "path": "docs_src/exlibris/chota.js",
    "content": "export {default as Button} from './Button.svelte';"
  },
  {
    "path": "docs_src/exlibris/spoiler.md",
    "content": "> *MDSv is really cool!*"
  },
  {
    "path": "docs_src/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"svelte-docs-template\",\n  \"version\": \"0.2.0\",\n  \"dependencies\": {\n    \"@svelte-docs/server\": \"^0.1.6\"\n  },\n  \"devDependencies\": {\n    \"@svelte-docs/core\": \"^0.10.13\",\n    \"@svelte-docs/publisher\": \"^0.2.3\",\n    \"@svelte-docs/themes\": \"^1.0.1\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"rollup\": \"^2.35.1\"\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c node_modules/@svelte-docs/core/rollup.config.js\",\n    \"autobuild\": \"rollup -c node_modules/@svelte-docs/core/rollup.config.js -w\",\n    \"dev\": \"run-p start:dev start:pagewatch autobuild\",\n    \"start\": \"node node_modules/@svelte-docs/server\",\n    \"start:dev\": \"node node_modules/@svelte-docs/server --dev --single\",\n    \"start:pagewatch\": \"node node_modules/@svelte-docs/core/watcher\",\n    \"deploy\": \"npm run build && node node_modules/@svelte-docs/publisher\"\n  }\n}\n"
  },
  {
    "path": "docs_src/src/examples.css",
    "content": "/* Styling of the examples view */\n\nbody {\n\tcolor: #333;\n\tmargin: 0;\n\tpadding: 8px;\n\tbox-sizing: border-box;\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n}\n\na {\n\tcolor: rgb(0,100,200);\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\na:visited {\n\tcolor: rgb(0,80,160);\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput, button, select, textarea {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n}\n\ninput:disabled {\n\tcolor: #ccc;\n}\n\ninput[type=\"range\"] {\n\theight: 0;\n}\n\nbutton {\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\nbutton:active {\n\tbackground-color: #ddd;\n}\n\nbutton:focus {\n\tborder-color: #666;\n}"
  },
  {
    "path": "docs_src/src/includes/error.md",
    "content": "---\nlayout: 'no_sidebar'\n---\n# Page not found! #\n\n[Go to start page](/)\n\n<style>\n    h1,p {text-align:center}\n    h1 {color: var(--primary)}\n</style>"
  },
  {
    "path": "docs_src/src/includes/github.svelte",
    "content": "<script>\n    import { cubicInOut } from 'svelte/easing';\n    import { tweened } from 'svelte/motion';\n\n    /** @type {string} URL to repository */\n    export let url;\n\n    /** @type {bool} Should animation play on hover */\n    export let animation = false;\n\n    let hover = false;\n    \n    function mEnter () {\n        if(!animation) return;\n        hover=true\n    }\n    function mLeave () {\n        hover=false\n    }\n    const rotation = tweened(0, {\n\t\tduration: 500,\n\t\teasing: cubicInOut\n    });\n    \n    function slideLeft(node) {\n        return {\n            delay:0,\n            duration:500,\n            css: t => `overflow:hide; width: ${cubicInOut(t) * 50}px; opacity: ${t}`\n        };\n    }\n    $: $rotation = (hover) ? 100 : 0;\n</script>\n\n<a class=\"github\" href={url} target=\"_blank\" \n    on:mouseenter={mEnter} on:mouseleave={mLeave}><svg viewBox=\"0 0 24 24\" style=\"transform: rotate(-{$rotation}deg)\">\n        <path d=\"M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z\"></path>\n    </svg>{#if hover}<span class=\"label\" transition:slideLeft>Github</span>{/if}</a>\n\n<style>\n.github {\n    color:var(--text);\n}\n\n.github:hover{\n    text-decoration: none;\n}\n\n.label{\n    display: inline-block;\n}\nsvg{\n    display: inline-block;\n    vertical-align: text-bottom;\n    width:24px; \n    height:24px; \n    fill:currentColor;\n}\n</style>"
  },
  {
    "path": "docs_src/src/includes/logo.md",
    "content": "import {current_page} from '@svelte-docs/get/routes';\n\n\n{#if $current_page.url !== ''}\n# [![LOGO](static/logo.svg)](/) #\n{/if}\n\n<style>\n    img{\n        height: 30px;\n        vertical-align: middle;\n    }   \n</style>"
  },
  {
    "path": "docs_src/src/includes/opengraph.svelte",
    "content": "<script>\n    import {current_page} from '@svelte-docs/get/routes';\n    import maintitle from '@svelte-docs/get/maintitle';\n    \n    let descr = 'A rapid way to document your Svelte things';\n    let img = 'https://alexxnb.github.io/svelte-docs/static/social.png';\n\n    $: title = $current_page.title ? $current_page.title + ' — ' + maintitle : maintitle;\n    $: url = `https://alexxnb.github.io/svelte-docs/${$current_page.url}`;\n</script>\n\n\n<svelte:head>\n    <meta property=\"og:title\" content={title}>\n    <meta property=\"og:description\" content={descr}>\n    <meta property=\"og:image\" content={img}>\n    <meta property=\"og:url\" content={url}>\n    <meta name=\"twitter:title\" content={title}>\n    <meta name=\"twitter:description\" content={descr}>\n    <meta name=\"twitter:image\" content={img}>\n    <meta name=\"twitter:card\" content=\"summary_large_image\">\n</svelte:head>"
  },
  {
    "path": "docs_src/src/includes/sidebar.md",
    "content": "* [Introduction](introduction)\n* [Getting Started](getting-started)\n* Writing docs\n    - [What is MDSv](writing/mdsv)\n    - [Structure](writing/structure)\n    - [Includes](writing/includes)\n    - [Routing](writing/routing)\n    - [Static files](writing/static)\n    - [Page settings](writing/settings)\n* [Configuration](config/file)\n    - [basepath](config/basepath)\n    - [theme](config/theme)\n    - [title](config/title)\n    - [pathes](config/pathes)\n    - [aliases](config/aliases)\n    - [preprocess](config/preprocess)\n* Builtins\n    - [Example](builtins/example)\n    - [Properties](builtins/properties)\n* Styling\n    - [Theme tuning](theming/theme-tuning)\n    - [Examples view](theming/examples)\n    - [Custom theme](theming/custom-theme)\n    - List of themes\n        - [Default](theming/list/default)\n        - [Light](theming/list/light)\n* Publishing\n    - [GitHub Pages](publishing/ghpages) "
  },
  {
    "path": "docs_src/src/includes/topbar.md",
    "content": "import Github from './github.svelte';\nimport Opengraph from './opengraph.svelte';\n\n<Opengraph />\n\n* [Docs](getting-started)\n* <Github animation url=\"https://github.com/alexxnb/svelte-docs\"/>"
  },
  {
    "path": "docs_src/src/pages/builtins/example.md",
    "content": "# Example code block\n\nWhen you document your Svelte component you want show it in action. You can do it with *Example code block*. \n\n```markdown\n    ```example\n    <script>\n        let name='Button';\n    </script>\n\n    <button>{name}</button>\n\n    <style>\n        button{background: red}\n    </style>\n    ```\n```\n\n```example\n<script>\n    let name='Button';\n</script>\n\n<button>{name}</button>\n\n<style>\n    button{background: red}\n</style>\n```\n\n### Hide script and/or style blocks\n\nSometimes no need to show what is inside the *style* or *script* blocks. You can use `script:hide` and `style:hide` modifiers.\n\n```markdown\n    ```example script:hide style:hide\n    <script>\n        let name='Button';\n    </script>\n\n    <button>{name}</button>\n\n    <style>\n        button{background: red}\n    </style>\n    ```\n```\n\n```example script:hide style:hide\n<script>\n    let name='Button';\n</script>\n\n<button>{name}</button>\n\n<style>\n    button{background: red}\n</style>\n```\n\n### Set fixed height of the example\n\nBy default result part of the example has flexible height, which changing within content. But you can lock height with `height:<pixels>` modifier.\n\n```markdown\n    ```example height:200\n     ...\n    ```\n```\n\n```example height:200\n<script>\n    import Modal from './Modal.svelte';\n    let open = false;\n</script>\n\n<button on:click={()=>open=!open}>Show Modal</button>\n\n<Modal {open}>\n    <h1>Hello!</h1>\n    <p>I'm modal.</p>\n</Modal>\n```\n\n### Import in examples\n\nYou can import any installed NPM package or local file as you usually do inside ordinary `*.svelte` file.\n\n```example\n<script>\n    import {Button} from 'svelte-chota';\n</script>\n\n<Button primary>Button</Button>\n```\n\nAlso you can import any local file by relative path according documents directory root:\n\n```example\n<script>\n    import Button from './../mylib/Button.svelte';\n</script>\n\n<Button>Button</Button>\n```\n\nOther way to import local files - using aliases (see [config.aliases](config/aliases)).\n\n```javascript\n// svelte-docs.config.js\n...\naliases:{\n    './Button.svelte': './../mylib/Button.svelte',\n    'my-button-package': './../mylib/Button.svelte'\n},\n...\n```\n\n\n```example\n<script>\n    import Button from './Button.svelte';\n    import Button2 from 'my-button-package';\n</script>\n\n<Button>Button</Button>\n<Button2 error>Button2</Button2>\n```\n\n### Styling\n\nStyles of the documentation site doesn't affect on the Example's result. Examples have their own global styles(which will be used by all examples). You can read more in the [Theming examples](theming/examples) section.It is stored in `src/theme/examples.css` file. "
  },
  {
    "path": "docs_src/src/pages/builtins/properties.md",
    "content": "# Properties\n\nUsually all components you want to document have some properties, which should be described. Properties code block allows do it as easy as possible.\n\nSuppose you have a *Input.svelte* component with following properties:\n\n```html\n<script>\n    export let name;\n    export let type = 'text';\n    export let disabled = false;\n    export let size = 1;\n</script>\n```\n\nThere are four properties:\n\n1. *name* - it hasn't default value, so it is not optional. Probably it should be string type, but who knows.\n2. *type* - it is string value, optional because has default value. What other values may be used? \n3. *disabled* - it is simple: optional, type bool, false by default.\n4. *size* - easy: optional, type number, 1 by default. Nope! Also it could be string like '20px'.\n\nSo lets create fancy table of properties for this component:\n\n```markdown\n    ```properties\n    name | Name of the input | string\n    type | Type of the input | 'text','number','range','date'('text)\n    disabled | Should the input be disabled | bool(false)\n    size | Size of the input | number/string(1)\n    ```\n```\n\n```properties\nname | Name of the input | string\ntype | Type of the input | 'text','number','range','date'('text)\ndisabled | Should the input be disabled | bool(false)\nsize | Size of the input | number/string(1)\n```\n\nNow user of your component will know all about its properties.\n\n### Describing property\n\n* Each line of the *properties* code block must have three parts separated by `|` sign: *name* of the property, *description* and *type* of the property.\n\n* If property may have one of the defined values, list them separated by commas: `'a','b','c'`\n  \n* If property may be various types - list them with `/` separator: `number/string/bool`,`'a','b','c'/bool`\n\n* If property has default value add it in `(...)` right after *types*: `bool(true)`, `string/number('foo')`\n\n### Autogenerated properties\n\nAnother way to describre properties, retrieve it right from the Svelte component with [JSDoc @type](https://devdocs.io/jsdoc/tags-type) comments. Let's change our *Input.svelte* and add comment for each properties:\n\n```html\n// ./../mylib/Input.svelte\n<script>\n    /** @type {string} Name of the input */\n    export let name;\n    /** @type {('text','number','range','date')} Type of the input */\n    export let type = 'text';\n    /** \n     * Should the input be disabled\n     * @type {bool} \n     */\n    export let disabled = false;\n    /** @type {(number|string)} Size of the input */\n    export let size = 1;\n</script>\n```\n\nYou should write only description and types in the comments. Property name and default value will be parsed automaticly.\n\nThen just place a path to the this component inside Properties code block:\n\n```markdown\n    ```properties\n    ./../mylib/Input.svelte\n    ```\n```\n\nAnd get the result:\n\n```properties\n    ./exlibris/Input.svelte\n```"
  },
  {
    "path": "docs_src/src/pages/config/aliases.md",
    "content": "# aliases option\n\nOption `aliases` is the list of aliases for you local component's paths.\n\nSuppose you have following structure of your project:\n\n```javascript\nmy-project\n├── docs_src\n│   └── ...\n├── mycomponent\n│   └── Counter.svelte\n└── ...\n```\n\nAnd you want to import `mycomponents/Counter.svelte` in your Example code block(or just in the page), you may use relative path(from the docs root) like this:\n\n```markdown\n    ```example\n    <script>\n        import Counter from './../mycomponent/Counter.svelte';\n    </script>\n    <Counter />\n    ```\n```\n\nBut it is not looks good, especially when you will publish your components on NPM and want to teach users how to use it . \n\nSo you can add *virtual package* using `aliases` option:\n\n```javascript\naliases:{\n    ...\n    \"my-counter-package\": \"./../mycomponent/Counter.svelte\",\n    ...\n}\n```\n\nAnd then you can import this *virtual package* inside of the Example:\n\n```markdown\n    ```example\n    <script>\n        import Counter from 'my-counter-package';\n    </script>\n    <Counter />\n    ```\n```"
  },
  {
    "path": "docs_src/src/pages/config/basepath.md",
    "content": "# Basepath option\n\nOption `basepath` is a part of URL to the root documentation site. \n\nBy default `basepath` is equal `'/'`, it is mean that documentation will be available by URL like https://mydocs.com or https://docs.mysite.com. \n\nWhen you need to place documentation in the subdirectory of your existing site, you should change `basepath` to the value like `/subdir/`. In this case your documentation will be available by URL like https://mysite.com/subdir.\n\n> If you plan to publish documentation at the Github Pages of your repository, then set `basepath: '/name-of-your-repo/'`."
  },
  {
    "path": "docs_src/src/pages/config/file.md",
    "content": "# Configuration\n\nAt the root of the documents sources directory you can find find `svelte-docs.config.js` file. For more info, see the description of each option by the link on the sidebar.\n"
  },
  {
    "path": "docs_src/src/pages/config/pathes.md",
    "content": "# Pathes option\n\nThere are two pathes you can change. \n\n* `pathes.dev` - directory, where builded site is stored in development mode when you run command `npm run dev`. It is nonoptimized version with additional code for debugging during development process. **Don't use this files in production!**\n\n* `pathes.build` - directory, where stored files of the builded site for production when you run command `npm run build`. You can deploy these files to the any service, which is support serving of the static files.\n\n> In most cases you don't need to change these options.\n"
  },
  {
    "path": "docs_src/src/pages/config/preprocess.md",
    "content": "# Preprocess option\n\nYou can use any Svelte preprocessor for your Examples code block. Just install it from NPM, import in the `svelte-docs.config.file` and add to the  `preprocess` option same way you do in `rollup.config.js`.\n\n\n```javascript\nconst markdown = require('svelte-preprocess-markdown');\n\nmodule.exports={\n    ...\n    preprocess: [\n        ...\n        markdown({filetype: 'svelte'}),\n        ...\n    ]\n    ...\n}\n```\n\nThen all your examples will be preprocessed:\n\n```markdown\n    ```example\n    <script>\n    let name = 'World';\n    </script>\n\n    # Hello, {name}!\n    ```\n```"
  },
  {
    "path": "docs_src/src/pages/config/theme.md",
    "content": "# Theme option\n\nChoose theme for documentation site. List of avialable themes you can find on the sidebar.\n\n```js\n...\ntheme: 'default',\n...\n```\n\nAlso you can write path to the local dir here:\n\n```js\n...\ntheme: './src/my-own-theme',\n...\n```\n\n> In this case, it should be directory with [valid theme content](theming/custom-theme). "
  },
  {
    "path": "docs_src/src/pages/config/title.md",
    "content": "# Title option\n\nThere are two properties which can be changed:\n\n* `title.main` - this is constant part of the page's title.\n\n* `title.header` - if `true`, content of the first header on the page will be added before `title.main` in the page's title. It will look up for 1 and 2 level markdown or HTML headers on the current page. \n"
  },
  {
    "path": "docs_src/src/pages/getting-started.md",
    "content": "# Getting started\n\n### Initialize Svelte-docs\n\nJust run this command in the root directory of your project:\n\n```bash\nnpm init svelte-docs\n```\n\nIt will ask you about the destination directory for the documents' sources. Then it will download template and theme into the specified directory and install required NPM packages.\n\n### Edit your docs\n\nSwitch to the created directory, ex.:\n\n```bash\ncd docs_srv\n```\n\nRun docs in development mode on the local server:\n\n```bash\nnpm run dev\n```\n\nPoint your browser on [http://localhost:5000](http://localhost:5000) to see your docs in action.\n\nNow you can edit files in `src/pages` directory and browser will be reloaded on each save. \n\n### Build the documentation site\n\nAs soon as documentation ready for release you need to run the build:\n\n```bash\nnpm run build\n```\n\nAll needed files will be builded into the `__DOCS__/build` directory(see [config.pathes](config/pathes)). You can upload it to any service which supports static file serving. For convenience, Svelte-Docs have built-in ability to publish site on Github Pages.\n"
  },
  {
    "path": "docs_src/src/pages/index.md",
    "content": "---\nlayout: 'no_sidebar'\ntitle: false\n---\n\n<div class=\"hero\">\n    <div class=\"banner\">\n\n        ![Svelte-Docs Logo](static/logo.svg)\n\n        <p>A rapid way to document your Svelte things</p>\n        \n    </div>\n\n    <div class=\"buttons\">\n        <a href=\"introduction\">Introduction</a>\n        <a href=\"getting-started\">Getting Started</a>\n    </div>\n</div>\n\n<style>\n    .hero{\n        display: flex;\n        flex-direction: column;\n        height:100vh;\n        margin-top: calc(var(--topbar-height) * -1);\n    }\n\n    .banner{\n        flex: 1 0 auto;\n        margin-top: 100px;\n    }\n\n    .banner img{\n        width: 300px;\n    }\n\n    .banner p{\n        font-size: 1.5em;\n        font-weight: 600;\n        text-align: center;\n    }\n\n    .buttons{\n        flex: 0 0 auto;\n        text-align: center;\n        margin-bottom: 100px;\n    }\n\n    .buttons a{\n        display: inline-block;\n        padding: 10px;\n        color: white;\n        background: var(--primary);\n        text-decoration: none;\n        opacity: 1;\n        border-radius: 3px;\n    }\n\n    .buttons a:hover{\n        opacity: .8;\n    }\n</style>\n"
  },
  {
    "path": "docs_src/src/pages/introduction.md",
    "content": "# Introducing\n\n## Features\n\nSvelte-Docs is a rapid way to write documentation for your [Svelte](https://svelte.dev) components.\n\n> **<div class=\"red\">It is an early alpha version of the Svelte-Docs so probably buggy and unstable. It also means that future versions may include breakable changes.</div>**\n\n* Based on [MDSv](writing/mdsv) format, which allows writing documentation in Markdown mixed with Svelte's features.\n\n* Import and use any Svelte components right inside a markup\n\n* Documentation building as static files, so you can publish it everywhere\n\n* Customizable [themes](theming)\n\n* Built-in [deploy](publishing/ghpages) on Github Pages\n\n## Zero-config\n\nJust run:\n\n```bash\nnpm init svelte-docs\n```\n\nThen [write](writing/mdsv) the documentation and [build](start) it into static site.\n\n\n## Built-ins\n\n### Examples\n\nExample block shows how your components work. It provides an encapsulated CSS environment, virtual imports and ability to use any Svelte preprocessor.\n\n```example\n<button>My button</button>\n```\n\n### Properties\n\nProperties block provides a simple way to document properties of your components. It can be written manually or *auto-generated*  from the component's `*.svelte` file.\n\n```properties\ntype | Type of the button | 'default','error','warning'('default')\ndisabled | Should the button be disabled | bool(false)\n```\n\n<style>\n    .red{\n        color: var(--primary);\n    }\n</style>\n"
  },
  {
    "path": "docs_src/src/pages/publishing/ghpages.md",
    "content": "# Publishing on Github Pages\n\nSvelte-docs has built-in publishing tool to deploy builded documentation into *gh-pages* branch of your current project. \n\nTo do it just run command in you documents source directory at any time:\n\n```bash\nnpm run deploy\n```\n\nThen you should confirm publishing and wait some time while documents will be deployed to the GitHub.\n\n> Your document sources directory or any parent directory should contents `.git` folder with initialized Github repository.\n\n> You must set the [config.basepath](config/basepath) too the value equal `/you-repository-name/`;"
  },
  {
    "path": "docs_src/src/pages/theming/custom-theme.md",
    "content": "# Custom theme\n\nYou can make your own theme and use its directory path as [config.theme](config/theme) value. There are several files which must exist:\n\n```bash\nthemedir\n├── components\n|   ├── Layout.svelte        # Page layout\n|   ├── Error.svelte         # Error page layout\n|   ├── Example.svelte       # Example component\n|   └── Properties.svelte    # Properties component\n├── info.md                # Some info about the theme\n└── style.css                # CSS Styles\n```\n\nThe simplest way is to copy one of the defaut themes and change it as you want. You can find them in the `./node_modules/@svelte-docs/themes` directory or downaload from the [Github](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/AlexxNB/svelte-docs/tree/master/packages/themes)"
  },
  {
    "path": "docs_src/src/pages/theming/examples.md",
    "content": "# Examples view CSS\n\nExamples view(where the result shows) use CSS styles which are isolated from theme of the site. They are situated in the `src/examples.css` file. \n\n## import styles\n\nYou can include CSS file from the local directory, npm package or from CDN:\n\n```css\n@import './../mystyles.css';\n@import './node_modules/my-favorite-css-framework';\n@import 'https://anycdn.com/my-favorite-css-framework';\n```\n\n> When you use `:global()` or `@import` keywords in one example, they will affect on the all examples, because all examples styles bundeled in the single CSS file."
  },
  {
    "path": "docs_src/src/pages/theming/list/default.md",
    "content": "import Info from '@CWD/../packages/themes/default/info.md';\n\n# Default\n<Info />"
  },
  {
    "path": "docs_src/src/pages/theming/list/light.md",
    "content": "import Info from '@CWD/../packages/themes/light/info.md';\n\n# Light\n<Info />"
  },
  {
    "path": "docs_src/src/pages/theming/theme-tuning.md",
    "content": "# Theme tuning\n\nEach theme allows to tune some predefined CSS variables which are listed in themes descriptions.\n\nAdd values you want to change into the `src/theme.css` as shown below:\n\n```css\n:root{\n    --primary: #009225;\n    --secondary: #3f3f70;\n}\n```\n\nAlso you may write your own CSS styles there, they will overwrite default styles for same selectors:\n\n```css\nh1{\n    color: red;\n    text-transform: uppercase;\n}\n```"
  },
  {
    "path": "docs_src/src/pages/theming.md",
    "content": "# Theming\n\nSvelte-docs supports the customizable appearance. All you need for applying changes to almost every visual aspect of your documentation is located in `src/theme` dir.\n\n### Themes\n\nAt the moment we have only one default theme which is made as a copy of the official [Svelte documentation](https://svelte.dev/docs) theme. But feel free to [add](https://github.com/alexxnb/svelte-docs/pulls) your fantastic theme to this repository. \n\n### Colors\n\nTo tune the colors of the current theme just edit custom properties in the `src/theme/styles.css` file.\n\n### Styles\n\nAll styles of the site are in the `src/theme/styles` directory. Any of this `*.css` files should be imported in the `src/theme/styles.css` file.\n\n### Layout\n\nYou can find Svelte components in the `src/theme/components` directory. It is the barebone of the documentation site. Change it only if you know what you do."
  },
  {
    "path": "docs_src/src/pages/writing/includes.md",
    "content": "# Includes\n\nIn the `src/includes` directory live little MDSv components which you can include in any page you want. There are some default files used by theme:\n\n### sidebar.md\n\nThis file contains list of content on the left sidebar. This is your documentation's structure reflected in markdown code. \n\nLet's look on example:\n\n```markdown\n* Getting Started\n‎‎‎‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ ‎- [Install](install)\n* [Components](components/list)\n‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ - [Button](components/button)\n‎ ‎‏‏‎ ‎‏‏‎ ‎‏‏‎ - [Input](components/input)\n* [Github](https://github.com/me/my-svelte-lib)\n```\n\nUsually it is just a list of links or strings. You can freely arrange items as you want, no necessary to reproduce a file structure of the `src/pages` directory. \n\nURL of local pages is an a path to corresponding `*.md` file. In the example above `components/button` will link to the page described in `src/pages/components/button.md` file. Please see [Routing](writing/routing) section for more info about URL.\n\nExternal URLs will be opened in new window.\n\n### logo.md\n\nCommonly used for showing any logotype.  Just write something like:\n\n```markdown\n# MyComponent #\n```\n\nOr you can use an image as your logotype:\n\n```markdown\n# ![Logo](static/logo.png) #\n```\n\n### topbar.md\n\nPlay with right section of the topbar. For example add some links there:\n\n```markdown\n* [Home](/)\n* [Github](https://github.com/me/my-svelte-lib)\n```\n\n### error.md\n\nJust an error message which will be shown when user requests unexistent URL.\n\n## Custom includes\n\nYou are free to create any `*.md` files which you can to include on any page you want using special import path:\n\n```html\n<script>\n    import Banner from '@INCLUDES/banner.md';\n</script>\n\n<Banner />\n```"
  },
  {
    "path": "docs_src/src/pages/writing/mdsv.md",
    "content": "<script>\n    import Counter from './../../../exlibris/Counter.svelte';\n    import Spoiler from './../../../exlibris/spoiler.md';\n     let items = ['item0','item1'];\n    function add() { items = [...items,'item'+items.length] }\n    function del() { items = items.slice(0,-1) }\n</script>\n\n# What is MDSv\n\nMDSv is a Svelte component written in Markdown syntax. You can import and use any Svelte components right inside the markdown markup. \n\nFor more info please visit the [svelte-preprocess-markdown](https://alexxnb.github.io/svelte-preprocess-markdown/) site.\n\nMarkdown is a fast and comfortable way to write documentation, but MDSv providing full power of Svelte to your docs. \n\nThis document also wrote in MDSv format, so we can do this right inside the document...\n\n```svelte\n<script>\n    let items = ['item0','item1'];\n    function add() { items = [...items,'item'+items.length] }\n    function del() { items = items.slice(0,-1) }\n</script>\n...\n{#each item as item}\n* {item}\n{/each}\n\n<button on:click={add}>Add Item</button>\n<button on:click={del}>Del Item</button>\n```\n\n... and get the result:\n\n{#each items as item}\n* {item}\n{/each}\n\n<button on:click={add}>Add Item</button>\n<button on:click={del}>Del Item</button>\n\nOr we can import any Svelte component and use it where we want:\n\n```markdown\n<script>\n    import Counter from './Counter.svelte';\n</script>\n\n*The counter:* <Counter /> \n```\n\n... and it will work:\n\n*The counter:* <Counter /> \n\nYou even can import other `*.md` files:\n\n```markdown\n<!-- spoiler.md -->\n> *MDSv is really cool!*\n\n\n<!-- document.md -->\n<script>\n    import Spoiler from './spoiler.md';\n</script>\n\n**Spoiler:**\n<Spoiler />\n```\n\n... and it will be included in the specified place:\n\n**Spoiler:**\n<Spoiler />"
  },
  {
    "path": "docs_src/src/pages/writing/routing.md",
    "content": "# Routing\n\n*Svelte-Docs* has built-in routing system based on files structure in the `src/pages` directory:\n\n```bash\nsrc                     #  URL path part:\n└── pages               #\n    ├── components      #\n    │   ├── list.md     #  components/list\n    │   ├── button.md   #  components/button\n    │   └── input.md    #  components/input\n    ├── install.md      #  install\n    └── index.md         #  / \n\n```\n\nYou can make links anywhere in your docs with URL part based on file hierarchy. For example, if you want create link to the `src/pages/components/button.md` use `components/button` as a href attribute of the `a` element - `components/button`. Or in markdown write - `[Button](component/button)`."
  },
  {
    "path": "docs_src/src/pages/writing/settings.md",
    "content": "# Pages configuration\n\nYou can configure every pages with few parameters in markdown's metatags block at the top of needed pages.\n\n```markdown\n---\nparameter1: value1\nparameter2: value2\n---\n... \n```\n\n### title\n\nYou can specify title of current page. It is overwrite [`title.header`](config/title) config option. \n\n```markdown\n---\ntitle: 'My page'\n---\n... \n```\n\n\n### layout\n\nEvery theme have various layouts which can be with this property. If no layout specified will be used `default` layout. You can find list of available layouts in the themes descriptions.\n\nIn this example, page will render in fullscreen layout without sidebar on the left side(assume default theme):\n\n```markdown\n---\nlayout: 'no_sidebar'\n---\n... \n```"
  },
  {
    "path": "docs_src/src/pages/writing/static.md",
    "content": "# Static files\n\nAny static files used in documents such as images, icons or files for download are stored in `src/static` directory.\n\nFor example, if you placed image in the `src/static/great-success.png` then you can include it by following code:\n\n```markdown\n![Great Success](static/great-success.png);\n```\n\n... and get image on your page:\n\n![Great Success](static/great-success.png);"
  },
  {
    "path": "docs_src/src/pages/writing/structure.md",
    "content": "# Structure\n\nLet's see the structure of the doc's project directory:\n\n```bash\nsrc\n├── includes\n├── pages\n├── static\n├── examples.css   \n└── theme.css   \n...\nsvelte-docs.config.js\n```\n\nIt is very simple, sources of you documentation are live in `src` directory:\n\n* **includes** - there are small pieces of the MDSv code that can be reusable within any document page\n* **pages** - all pages of your documentation are stored in this directory\n* **static** - place here any static assets using in your documentation (files, images, icons and etc.)\n* **examples.css** - it is styles using within examples\n* **theme.css** - tune current documentation theme with variables, add new styles or `@import` any css file."
  },
  {
    "path": "docs_src/src/theme.css",
    "content": "/* Theme tunning: for full list ov variables visit the https://alexxnb.github.io/svelte-docs/theming */\n"
  },
  {
    "path": "docs_src/svelte-docs.config.js",
    "content": "module.exports = {\n    // if you will serve docs in subderictory use '/subdir/'\n    basepath: '/svelte-docs/',\n\n    theme: 'default',\n\n    title: {\n        // constant part of page title\n        main: 'Svelte-Docs Reference',\n\n        // use first header's content in the window title \n        // looking for `# Header` and `## Header` on the current page\n        header: true,\n    },  \n\n    // URL to your favicon\n    favicon: 'static/favicon.png',\n\n    // URL to your social link preview image (best is 1200×630)\n    preview: 'https://alexxnb.github.io/svelte-docs/static/social.png',\n    \n    pathes: {\n        // directory for files, generated in development mode \n        dev: '__DOCS__/dev',\n\n        // directory for builted documentaton\n        build: '__DOCS__/dist',\n    },\n    \n    aliases:{\n        // Virtual packages in Examples\n        // <virtual_package_name>: <local_path>,\n        //\n        // Ex1: './Button.svelte': './../dist/Button.svelte',\n        // Ex2: 'mylib': './../dist/index.js', (don't miss `index` and `.js` at the end!)\n        //\n        //  Then you can use in Example:\n        //  import Button from './Button.svelte';\n        //  import { Input } from 'mylib';\n        'svelte-chota': './exlibris/chota.js',\n        './../mylib/Button.svelte': './exlibris/Button.svelte',\n        './Button.svelte': './exlibris/Button.svelte',\n        './Modal.svelte': './exlibris/Modal.svelte',\n        'my-button-package': './exlibris/Button.svelte',\n    },\n    \n    preprocess: [\n        // preprocessors for Svelte if needed in Examples\n        // syntax same as for `preprocess` option in `rollup-plugin-svelte`\n        // Ex:  Import preprocessor at top of the config file:\n        //          import {markdown} from 'svelte-preprocess-markdown';\n        //      Then add it here:\n        //          markdown({filetype: 'svelte'}),\n\n    ]\n\n}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"private\": true,\n  \"version\": \"0.2.0\",\n  \"scripts\": {\n    \"postinstall\": \"node scripts/install\",\n    \"link\": \"node scripts/link\",\n    \"clean\": \"node scripts/clean\",\n    \"dev\": \"npm --prefix __DEV__ run dev\",\n    \"build\": \"npm --prefix __DEV__ run build\",\n    \"start\": \"npm --prefix __DEV__ run start\",\n    \"init\": \"node ./packages/create/cli.js\"\n  },\n  \"keywords\": [],\n  \"author\": \"Alexey Schebelev\",\n  \"license\": \"MIT\",\n  \"devDependencies\": {\n    \"fs-extra\": \"^8.1.0\",\n    \"std-pour\": \"^1.1.0\",\n    \"symlink-dir\": \"^3.1.1\"\n  },\n  \"dependencies\": {}\n}\n"
  },
  {
    "path": "packages/core/App.svelte",
    "content": "<script>\n\t// import theme\n\timport '@THEME/style.css';\n\timport '@SRC/theme.css';\n\timport Layout from '@THEME/components/Layout.svelte';\n\timport {initNavigation} from './navigation.js';\n\timport {onMount} from 'svelte';\n\n\tonMount(()=>{\n\t\treturn initNavigation();\n\t})\n</script>\n\n<Layout />\n\n"
  },
  {
    "path": "packages/core/aliases/rollup_plugin_aliases.js",
    "content": "import path from 'path';\nimport fs from 'fs';\nimport { ERR } from './../utils.js';\nimport config from './../config';\n\n// handle imports of virtual packages\nexport default function() {\n    return {\n        name: 'rollup_plugin_aliases',\n\n        resolveId(id,importer) { \n            if(id.endsWith('.svelte') && config.aliases[id] !== undefined){\n                return this.resolve(config.aliases[id],importer);\n            }\n            return config.aliases[id] ? id : null;\n        },\n        load(id) { \n            if(config.aliases[id] !== undefined){\n                const pkgpath = path.resolve(config.aliases[id]);\n                if (!fs.existsSync(pkgpath)) ERR('Config.aliases: No such file',pkgpath);\n\n                if(pkgpath.endsWith('.svelte')) \n                    return `export {default} from '${pkgpath}';`; \n                else\n                    return `export * from '${pkgpath}';`; \n                \n            }else\n                return null;\n        }\n    }\n}"
  },
  {
    "path": "packages/core/builtins/Example/Example.svelte",
    "content": "<script context=\"module\">\n    let uid = 1;\n</script>\n\n<script>    \n    import ExampleLayout from '@svelte-docs/get/ExampleLayout';\n    import basepath from '@svelte-docs/get/basepath';\n\n    export let name;\n    export let code;\n    export let height = false;\n\n    const fixedheight = Number.isInteger(height);\n\n    let iframe;\n    let iframe_id = uid++;\n    let iframe_height = fixedheight ? height : 70;\n\n    const srcdoc = `<!doctype html>\n<html style=\"height: auto !important\">\n    <head>\n        <meta charset='utf-8'>\n        <base href='${basepath}' />\n        <link rel='stylesheet' href='examples.css'>\n        <scr`+`ipt defer src='examples.js'></scr`+`ipt>\n    </head>\n    <body style=\"height: auto !important\"></body>\n</html>`;\n\n    const sendMessage = function(){\n        iframe.contentWindow.postMessage({\"COMPONENT\":name,iframe_id}, \"*\"); \n    }\n\n    window.addEventListener('message', function (event) {\n        if(event.data.iframe_id && event.data.iframe_id === iframe_id){\n            if (!fixedheight && event.data.hasOwnProperty(\"HEIGHT\")) {\n                iframe_height = event.data.HEIGHT;\n            }\n        }\n    })\n\n</script>\n\n\n<ExampleLayout>\n    <iframe slot=\"result\"\n        on:load={sendMessage}\n        style=\"height:{iframe_height}px\"\n        title=\"Result\"\n        scrolling=\"no\"\n        bind:this={iframe}\n        sandbox=\"allow-same-origin allow-popups-to-escape-sandbox allow-scripts allow-popups allow-forms allow-pointer-lock allow-top-navigation allow-modals allow-scripts\"\n        {srcdoc}\n    ></iframe>\n     <pre slot=\"code\" class=\"hljs\"><code>{@html code.trim()}</code></pre>\n</ExampleLayout>\n\n<style>   \n\tpre{margin:0px;}\n\n    iframe{\n        width: 100%;\n        display: block;\n        border:none;\n    }\n</style>\n"
  },
  {
    "path": "packages/core/builtins/Example/iframe.js",
    "content": "import { addListener } from 'resize-detector';\n\nlet iframe_id = 0;\n\nfunction getHeight(){\n    return document.documentElement.offsetHeight\n}\n\nwindow.addEventListener('message', function (event) {\n    if (event.data.hasOwnProperty(\"COMPONENT\")) {\n        const Example = app[event.data.COMPONENT];\n        iframe_id = event.data.iframe_id;\n \n\n        addListener(document.body, (e)=>{\n            event.source.postMessage({ 'HEIGHT': getHeight(), iframe_id }, \"*\");\n        });\n\n        new Example({\n            target: document.body,\n            props: {}\n        });    \n    }\n});"
  },
  {
    "path": "packages/core/builtins/Example/replacer.js",
    "content": "import highlight from './../../highlight';\nimport { ExamplesStore } from './../../stores';\n\nexport default (content,params,name) => () => {\n    ExamplesStore.set(name,content);\n  \n    if(params.script && params.script === 'hide'){\n      content = content.replace(/^[\\t ]*<script>[\\S\\s]*?<\\/script>\\n?/m,'');\n    }\n  \n    if(params.style && params.style === 'hide'){\n      content = content.replace(/^[\\t ]*<style.*>[\\S\\s]*?<\\/style>\\n?/m,'');\n    }\n\n    let height = params.height || 'false';\n  \n    return `<Example name=\"${name}\" code={\"${highlight(content,params.lang,true)}\"} height={${height}}/>`;\n  }\n\n  "
  },
  {
    "path": "packages/core/builtins/Properties/parser.js",
    "content": "import espree from 'espree';\n\nexport function getInterface(source){\n    const code = extractScriptTag(source);\n\n    const proplist = parseJS(code).filter(o => o.type==='property');\n    const jsdoc = parseJSDoc(code);\n\n    return proplist.reduce((list,prop) => {\n        let info = {type:undefined,descr:undefined,...jsdoc.find(v => v.index === prop.index)};\n        const propObj = { \n            name: prop.name,\n            description: info.descr,\n            attr: {\n                default: prop.default,\n                types: parseTypes(info.type)\n            }\n        };\n\n        return [...list,propObj];\n    },[]);\n}\n\n\n\nfunction extractScriptTag(source){\n    const extractScriptRegex = /<script(.*?)>([\\s\\S]+?)<\\/script>/gi;\n    let match = extractScriptRegex.exec(source);\n    \n    if (match && (match[1].includes(`context=\"module\"`) || match[1].includes(`context='module'`))) {\n        match = extractScriptRegex.exec(source);\n    }\n    \n    return match === null ? '' : match[2].trim();\n}\n\n\n\nfunction parseJS(code){\n\n    const node = espree.parse(code,{ecmaVersion:10,sourceType: \"module\"});\n\n    let vars = {};\n    return node.body.reduce((list,node) => {\n      \n      if(node.type === 'FunctionDeclaration' || node.type === 'VariableDeclaration'){\n        if(node.declarations) node.declarations.forEach(dec => vars[dec.id.name] = parseDeclarator(dec,node.kind));\n        return list;\n      }\n      \n      const sample = {index:node.start,type:'unknown',name:'unknown',default:undefined};\n      \n      if(node.declaration === null && node.specifiers.length > 0){\n        return [...list,...node.specifiers.reduce((sublist,spec)=>{\n          sublist.push({...sample,...(vars[spec.local.name] || {}),...{name:spec.exported.name}});\n          return sublist;\n        },[])]\n      }\n\n      if(node.type === 'ExportNamedDeclaration' && node.declaration){\n        const decs = node.declaration.declarations ? Array.from(node.declaration.declarations) : [node.declaration]; \n        return [...list,...decs.reduce((sublist,dec)=>{\n          sublist.push({...sample,...parseDeclarator(dec,node.kind)});\n          return sublist;\n        },[])]\n      }\n\n      return list;\n    },[]);\n}\n\nfunction parseDeclarator(dec,kind){\n  if(dec.type === 'FunctionDeclaration'){\n    return {type:'method',name:dec.id.name}\n  }   \n\n  if(dec.type === 'VariableDeclarator'){\n    const def = dec.init === null ? undefined :\n                dec.init.type === 'Literal' ? dec.init.raw :\n                dec.init.type === 'FunctionExpression' ? 'func()' : undefined;\n    const type = kind === 'const' ? 'const' : 'property';\n    return {type,name:dec.id.name,default:def}\n  } \n}\n\nfunction parseJSDoc(code){\n    let list = [];\n    let match;\n    const re = /(\\/\\*\\*[\\s\\S]+?\\*\\/)[\\s]+/g;\n    while(match = re.exec(code)){\n      const index = match['index']+match[0].length;\n      const jsdoc = match[1].replace(/(\\/\\*\\*|\\*\\/|^\\s*\\*(?!\\/))/gm,'').trim();\n      const parsed = /((?:^[^@].+$\\s+)+)*^[ \\t]*@type +\\{(.+)\\} *(.+)?/m.exec(jsdoc);\n      if(!parsed) continue;\n      const descr = [parsed[1],parsed[3]].join(\"\").trim(); \n      list.push({index,type:parsed[2],descr})\n    }\n    \n    return list;\n}\n\nfunction parseTypes(code){\n    \n    if(!code) return [];\n\n    const re = /(^\\(|\\)$)/g;\n    \n   return code.replace(re,'').split('|').map(type => {\n      const values = type.replace(re,'').split(',');\n      return values.length === 1 ? values[0] : values;\n    });\n  }\n"
  },
  {
    "path": "packages/core/builtins/Properties/replacer.js",
    "content": "import marked from 'marked';\nimport fs from 'fs-extra';\nimport { PROPS_CMP } from './../../constants';\nimport { getRealImportedPath } from './../../utils';\nimport { getInterface } from './parser';\n\nimport('svelte/register');\n\nexport default (content,params,name) => () => {\n    let props = [];\n    if(!/[|\\n]/.test(content) && /\\//.test(content)){\n      const filepath = getRealImportedPath(content.trim())\n  \n      if(filepath){\n        const source = fs.readFileSync(filepath,{encoding:'utf-8'});\n        props = getInterface(source);\n      }\n    }else{\n      props = content.split('\\n')\n        .map(line => line.split('|')\n          .map(cell => cell.trim())\n        )                       //<3 <3 <3 Love will save the World !\n        .filter(line => !(line.length <3) )\n        .map(line => {return { name:line[0], description:line[1], attr:line[2] }})\n        .map(line => {\n          const parsed = /([^\\(\\)]+)(\\((.+)\\))?/.exec(line.attr);\n  \n          line.attr = {\n            default: parsed[3],\n            types: parsed[1].split('/').map(type => {\n              type = type.trim();\n              type = type.split(',').map(i => i.trim());\n              return (type.length === 1) ? type[0] : type;\n            })\n          }\n  \n          line.description = marked(line.description).replace(/<\\/?p>\\n?/g,'');\n        \n          return line;\n        })\n    }\n    \n    const App = require(PROPS_CMP).default;\n    const {html} = App.render({data:props});\n    return html;\n  }\n  \n  function propsExtrator(source){\n    const re_props = /(\\/\\*\\s+(.+)\\|(.+)\\*\\/[\\t ]*\\n)?[\\t ]*export\\s+(.+?)[\\t ]+([^= ;]+)([\\t ]+=\\s+(.+?))?[\\t ]*;?\\n/g;\n    let result;\n    let props = [];\n  \n    const trim = (str) => {\n      if(typeof str === 'string') str = str.trim();\n      return str;\n    }\n  \n    while(result = re_props.exec(source)){\n      props.push({ \n        name:trim(result[5]), \n        description:trim(result[2]), \n        attr:{\n          default: trim(result[7]),\n          types: result[3] ? result[3].split('/').map(type => {\n            type = type.trim();\n            type = type.split(',').map(i => i.trim());\n            return (type.length === 1) ? type[0] : type;\n          }) : result[3]\n        } \n      });\n    }\n  \n    return props;\n  }"
  },
  {
    "path": "packages/core/builtins/blockparser.js",
    "content": "export function getBlocks (text) {\n\n    const re = new RegExp('^([\\\\t ]*)```([\\\\w:\\. ]*)[\\\\t ]*$','mg');\n    let result;\n    let level = 0;\n    let map = [];\n    const mapitem = {type:'',params:[], fragment:'' , content:''};\n    let start = 0;\n    let end = 0;\n    let length = 0;\n    while(result = re.exec(text)){\n        if(result[2].length !== 0) {\n            level++;\n            if(level === 1) {\n                start = result['index']\n                const {type,params} = getProps(result[2]);\n                mapitem.type = type;\n                mapitem.params = params;\n            }\n        }else{\n            level--;\n            if(level === 0) {\n                end = (result['index']+result[1].length+3)\n                mapitem.fragment = text.slice(start,end)\n                let content = mapitem.fragment.split(\"\\n\");\n                content.shift();\n                content.pop();\n                const minspace = content.reduce((min,line) => {\n                  const cur = Number( line.replace( /^([\\t ]*).+$/,(txt,spaces)=>spaces.length));\n                  return cur<min ? cur : min;\n                },Infinity);\n                content = content.map(line => line.replace(new RegExp('^[\\t ]{0,'+minspace+'}'),''))  ;  \n                mapitem.content =content.join(\"\\n\");\n                map.push({...mapitem});\n                mapitem.type = mapitem.fragment = mapitem.content = '';\n                mapitem.params = {};\n            }\n            \n        }\n    }\n\n    return map\n}\n\n\nfunction getProps(str) {\n  if(!str) return {type:'',params:[]};\n  const list = str.replace(/\\s{2,}/g,' ').trim().split(' ');\n  const type = list.shift();\n  const params = list.reduce((acc,item) => {\n    const p = item.split(':');\n    if(p.length === 1) p.push(null);\n    acc[p[0]] = p[1];\n    return acc\n  },{})\n\n  return {type,params}\n}"
  },
  {
    "path": "packages/core/builtins/rollup_plugin_builtins.js",
    "content": "import { BUILTIN_PKG, CMP_EXAMPLE} from './../constants';\n\nfunction getBuiltComponents(pkg) {\n\n    if(pkg === BUILTIN_PKG) return `\n        export {default as Example} from '${CMP_EXAMPLE}'; \n    `;\n}\n\nexport function builtins() {\n    const packages = [BUILTIN_PKG];\n\n    return {\n        name: 'rollup_plugin_builtins',\n        resolveId(id) { return packages.indexOf(id) !== -1 ? id : null },\n        load(id) { \n            if(packages.indexOf(id) !== -1) return getBuiltComponents(id);\n            return null;\n        }\n    }\n}\n\n"
  },
  {
    "path": "packages/core/builtins/rollup_plugin_examples.js",
    "content": "import { EX_CSS,EX_IFRAME,EX_CMP, EX_LAYOUT } from './../constants';\nimport { ExamplesStore } from './../stores';\nimport config from './../config';\n\nconst components = {\n    \"@svelte-docs/get/BuiltinExample\": `export {default} from '${EX_CMP}';`,\n    \"@svelte-docs/get/ExampleLayout\": `export {default} from '${EX_LAYOUT}';`,\n    \"@svelte-docs/get/basepath\": `export default '${config.basepath}';`,\n}\n\nexport function example_component() {\n    return {\n        name: 'rollup_plugin_builtins',\n        resolveId(id) { return components[id] !== undefined ? id : null },\n        load(id) { \n            if(components[id] !== undefined) return components[id]; \n            return null;\n        }\n    }\n}\n\n// handle imports of the examples components\nexport function examples_sources() {\n    const re = /(Ex_\\d+_[a-f0-9]{32})\\.svelte/;\n\n    return {\n        name: 'rollup_plugin_examples_sources',\n\n        resolveId(id) { return re.test(id) ? id : null },\n        load(id) { \n            if(re.test(id)) {\n                const source = ExamplesStore.get(id.replace(re,'$1'));\n                if(source) return source;\n            }\n            return null;\n        }\n    }\n}\n\n// handle import of the examples index file\nexport function examples_index() {\n    return {\n        name: 'rollup_plugin_examples_index',\n\n        resolveId(id) { return id === 'examples_src.js' ? id : null },\n        load(id) { \n            if(id === 'examples_src.js') {\n                let file = `\n                import '${EX_IFRAME}';\n                import '${EX_CSS}';\n                `;\n\n                Object.keys(ExamplesStore.get()).forEach(name => {\n                    file = file+`\\nexport {default as ${name}} from '${name}.svelte';`\n                });\n\n                return file;\n            }\n            return null;\n        }\n    }\n}"
  },
  {
    "path": "packages/core/builtins/svelte_preprocess_builtins.js",
    "content": "import hasha from 'hasha';\nimport touch from 'touch';\nimport { ExamplesStore } from './../stores';\nimport { EX_INDEX } from './../constants';\nimport { getBlocks } from './blockparser';\nimport example_replacer from './Example/replacer';\nimport properties_replacer from './Properties/replacer';\n\n\nexport function builtins() {\n    \n    return {\n        markup({ content, filename }) {\n          \n            if(filename.endsWith('.md')){\n                content = replaceBuiltins(content,filename);\n            }\n\n            return { code: content };\n        }\n    };\n}\n\nfunction replaceBuiltins(text,filename){\n  const used = new Set();\n  let uid = 0;\n\n  //current file identificator\n  const fid = hasha(filename,{algorithm: 'md5'});\n  \n  //remve all examples by file id\n  ExamplesStore.delete(new RegExp(`Ex_\\\\d+_${fid}`));\n  \n   \n  // parse blocks in the file\n  getBlocks(text).forEach(block => {\n    \n    if(block.type === 'example') {\n      used.add('Example');\n\n      let name = `Ex_${uid++}_${fid}`;\n      text = text.replace(\n        block.fragment,\n        example_replacer(block.content,block.params,name)\n      )\n    \n    }else if(block.type === 'properties') {\n      \n      let name = `Props_${uid++}_${fid}`;\n      text = text.replace(\n        block.fragment,\n        properties_replacer(block.content,block.params,name)\n      )\n    }\n\n  });\n  \n  if(used.size > 0){\n    let used_str = Array.from(used).map(cmp => `import ${cmp} from '@svelte-docs/get/Builtin${cmp}';`).join(\"\\n\");\n    \n    if(/^[\\t ]*<script>/.test(text))\n      text = text.replace(/^[\\t ]*<script>/,\"$&\\n\"+used_str);\n    else if(/^[\\t ]*import .+ from .+$/.test(text))\n      text = text.replace(/^[\\t ]*import .+ from .+$/,used_str+\"\\n$&\");\n    else\n      text = text+\"\\n\\n\"+`<script>\\n${used_str}\\n</script>`; \n  }\n\n  if(used.has('Example')) touch(EX_INDEX);\n  \n  return text;\n}\n\n\n\n\n\n"
  },
  {
    "path": "packages/core/config.js",
    "content": "import importCWD from 'import-cwd';\n\nconst config = importCWD('./svelte-docs.config.js');\n\nexport default config;"
  },
  {
    "path": "packages/core/constants.js",
    "content": "import path from 'path';\nimport config from './config';\nimport {getThemePath} from './themes';\n\nexport const CWD = process.cwd();\nexport const CORE = path.resolve(path.join(CWD,'node_modules','@svelte-docs','core'));\n\nexport const DEVPATH = path.join(CWD,config.pathes.dev);\nexport const BUILDPATH = path.join(CWD,config.pathes.build);\nexport const INDEX = path.join(CORE,'main.js');\n\nexport const SRC = path.join(CWD,'src');\nexport const PAGES = path.join(SRC,'pages');\nexport const INCLUDES = path.join(SRC,'includes');\nexport const THEME = getThemePath();\nexport const STATIC = path.join(SRC,'static');\nexport const STARTPAGE = path.join(PAGES,'index.md');\nexport const ERRORPAGE = path.join(INCLUDES,'error.md');\n\nexport const PROPS_CMP = path.join(THEME,'components','Properties.svelte');\nexport const EX_LAYOUT = path.join(THEME,'components','Example.svelte');\nexport const EX_CSS = path.join(SRC,'examples.css');\nexport const EX_CMP = path.join(CORE,'builtins','Example','Example.svelte');\nexport const EX_IFRAME = path.join(CORE,'builtins','Example','iframe.js');\nexport const EX_INDEX = path.join(CORE,'examples.main.js');\n"
  },
  {
    "path": "packages/core/examples.main.js",
    "content": "export * from 'examples_src.js';"
  },
  {
    "path": "packages/core/fixidents/rollup_plugin_fixidents.js",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\n\n// this will remove idents inside <pre> tags in builted bundle;\nexport default function () {\n    \n    const ident_remover = function(text) {\n        return text.replace(/(<code[^>]+>)\\\\n\\\\t\\\\t\\\\t/,'$1').replace(/\\\\t\\\\t\\\\t/g,'');\n    }\n\n    let FILE = '';\n    return {\n        name: 'rollup_plugin_fixident',\n        writeBundle: async (opts, bundle) => {\n           fs.writeFileSync(opts.file, bundle[path.basename(opts.file)].code.replace(/innerHTML='<code.+?code>'/g,ident_remover));\n        }\n    }\n}\n"
  },
  {
    "path": "packages/core/highlight.js",
    "content": "import hljs from 'highlight.js';\nimport hljs_svelte from 'highlightjs-svelte';\n\nhljs_svelte(hljs);\n\nexport default function(text,lang,interpolation=false) {\n    lang = (lang || 'svelte');\n\n    const result = hljs.highlight(lang,text);\n\n    let code = result.value\n            .replace(/{/g,'&#123;')\n            .replace(/}/g,'&#125;');\n            \n    if(interpolation){\n        code = code\n            .replace(/\"/g,'\\\\\"')\n            .replace(/\\n/g,'\\\\n');\n    }\n    \n    return code;\n  }"
  },
  {
    "path": "packages/core/indexer/rollup_plugin_indexer.js",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport { PAGES } from './../constants';\nimport config from './../config';\n\n\nexport default function (dev=false) {\n\n    return {\n        name: 'rollup_plugin_indexer',\n        writeBundle(opts) { \n            const dir = opts.dir || path.dirname(opts.file);\n\n            fs.outputFileSync(path.join(dir,'index.html'),getTemplate());\n\n            if(!dev) goTree(PAGES);               \n        }\n    }\n}\n\nfunction goTree(dir,slug='') {\n    fs.readdirSync(dir).forEach( file => {\n        const filepath = path.join(dir,file);\n        if(fs.statSync(filepath).isDirectory()){\n            if(!file.startsWith('_')){\n               goTree(filepath,path.join(slug,file));\n            }\n        }else{\n            const match = file.match(/^([^_][\\S]+)\\.(?:md|svelte)$/);\n            if(match){\n                fs.outputFileSync(path.join(config.pathes.build,config.basepath,slug,match[1],'index.html'),getTemplate());\n            }\n        }\n    });\n}\n\nfunction getTemplate(){\n    \n    return `<!doctype html>\n<html>\n<head>\n    <meta charset='utf-8'>\n    <meta name='viewport' content='width=device-width,initial-scale=1.0'>\n    <base href=\"${config.basepath}\" />\n    <title>${config.title.main}</title>\n    ${config.favicon ? `<link rel='icon' type='image/png' href='${config.favicon}'>` : ''}\n    <link rel='stylesheet' href='bundle.css'>\n    <script defer src='bundle.js'></script>\n</head>\n\n<body>\n</body>\n</html>`\n}"
  },
  {
    "path": "packages/core/main.js",
    "content": "import App from './App.svelte';\n\nconst app = new App({\n\ttarget: document.body,\n\tprops: {}\n});\n\nexport default app;"
  },
  {
    "path": "packages/core/navigation.js",
    "content": "import {writable} from 'svelte/store';\n\nexport const url = writable(getURL());\n\nexport function go(href){\n    history.pushState({}, '', href === '' ? getBasepath() : href);\n    url.set(href.split('#')[0]);\n}\n\nexport function initNavigation() {\n    addEventListener('click', click);\n    addEventListener('popstate', gohistory);\n    \n    return function() {\n        removeEventListener('click', click);\n        removeEventListener('popstate', gohistory);\n    }\n}\n\nfunction gohistory(){\n    url.set(getURL());\n}\n\nfunction getURL() {\n    let path = location.pathname;\n    path = cleanURL(path);\n    return path;\n}\n\nfunction click (event) {\n\n    const a = event.target.closest('a');\n    if(!a) return;\n\n    const href = a.getAttribute('href');\n    \n    if(!href) return;\n    \n    // Open external links in new tab\n    if(/^\\w+:\\/\\//.test(href)) {\n        a.setAttribute('target','_blank');\n        return;\n    }\n    \n    event.preventDefault();\n\n    if(/^\\/$/.test(href)) {\n        return go('')\n    }\n    return go(href);\n}\n\nfunction cleanURL(url){\n    const basepath = getBasepath();\n    if(url.startsWith(basepath)) url = url.slice(basepath.length);\n    if(url.startsWith('/')) url = url.slice(1);\n    if(url.endsWith('/')) url = url.slice(0,-1);\n    return url;\n}\n\nfunction getBasepath(){\n    let basepath = (document.querySelector('base') || {}).href.replace(window.location.origin,'').slice(0,-1);\n    return basepath === '' ? '/' : basepath;\n}\n"
  },
  {
    "path": "packages/core/package.json",
    "content": "{\n  \"name\": \"@svelte-docs/core\",\n  \"version\": \"0.10.13\",\n  \"description\": \"Core of Svelte-docs builder\",\n  \"dependencies\": {\n    \"@rollup/plugin-commonjs\": \"^11.1.0\",\n    \"@rollup/plugin-node-resolve\": \"^7.1.3\",\n    \"chalk\": \"^2.4.2\",\n    \"espree\": \"^6.1.2\",\n    \"fs-extra\": \"^8.1.0\",\n    \"hasha\": \"^5.2.2\",\n    \"highlight.js\": \"^10.4.1\",\n    \"highlightjs-svelte\": \"^1.0.6\",\n    \"import-cwd\": \"^3.0.0\",\n    \"ini\": \"^2.0.0\",\n    \"node-watch\": \"^0.6.4\",\n    \"postcss-import\": \"^12.0.1\",\n    \"resize-detector\": \"^0.2.2\",\n    \"rollup\": \"^2.35.1\",\n    \"rollup-plugin-livereload\": \"^1.3.0\",\n    \"rollup-plugin-postcss\": \"^2.9.0\",\n    \"rollup-plugin-svelte\": \"^7.0.0\",\n    \"rollup-plugin-terser\": \"^7.0.2\",\n    \"svelte\": \"^3.31.0\",\n    \"svelte-preprocess-markdown\": \"^2.7.3\",\n    \"sync-folders\": \"^2.0.0\",\n    \"touch\": \"^3.1.0\"\n  },\n  \"keywords\": [],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/AlexxNB/svelte-docs.git\"\n  },\n  \"author\": \"Alexey Schebelev\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/AlexxNB/svelte-docs/issues\"\n  },\n  \"homepage\": \"https://alexxnb.github.io/svelte-docs\"\n}\n"
  },
  {
    "path": "packages/core/pages/rollup_plugin_pages.js",
    "content": "import getRoutes from './routes';\nimport config from './../config';\n\nconst imports = {\n    \"@svelte-docs/get/routes\": getRoutes,\n    \"@svelte-docs/get/maintitle\": ()=>`export default '${config.title.main}'`,\n}\n\nexport function pages() {\n    return {\n        name: 'rollup_plugin_pages',\n        resolveId(id) { return imports[id] !== undefined ? id : null },\n        load(id) { \n            if(imports[id] !== undefined) return imports[id](); \n            return null;\n        }\n    }\n}"
  },
  {
    "path": "packages/core/pages/routes.js",
    "content": "import path from 'path';\nimport fs from 'fs';\n\nimport {PAGES,STARTPAGE,ERRORPAGE} from './../constants';\nimport config from './../config';\n\n\nexport default function () {\n    const pages = getRoutes(PAGES);\n\n    const strImports = pages.map(item =>`import {default as ${item.component}, META as ${item.component}_META} from '${item.path}'`).join(\";\\n\");\n    const strRoutes = pages.map(item =>`{\n        url: '${item.route}', \n        component:${item.component}, \n        title: (${item.component}_META.hasOwnProperty('title')) ? ${item.component}_META.title : ${item.title ? `'${item.title}'` : null},\n        meta:${item.component}_META\n    }`).join(\",\\n\");\n\n    return `${strImports}\n\n    import {derived} from 'svelte/store';\n    import {url} from '@svelte-docs/core/navigation'\n    \n    const routes = [\n        ${strRoutes}\n    ]\n\n    const error_route = routes.filter(r => r.url === 'sd:error')[0];\n\n    export const current_page = derived(url,$url => {\n\n        const route = routes.filter(r => r.url === $url);\n        \n        if(route.length > 0)\n            return route[0];\n        else\n            return error_route;\n    });\n    `;\n}\n\nfunction getRoutes(dir,slug='') {\n    slug = `${slug}/`;\n\n    let pages = [];\n    if(slug==='/') {\n        pages.push({\n            component:'Startpage',\n            route:'',\n            path:STARTPAGE,\n            title:retrieveTitleFromHeader(STARTPAGE)\n        });\n\n        pages.push({\n            component:'Errorpage',\n            route:'sd:error',\n            path:ERRORPAGE,\n            title:retrieveTitleFromHeader(ERRORPAGE)\n        });\n    }\n\n    fs.readdirSync(dir).forEach( file => {\n        const filepath = path.join(dir,file);\n        if(isDir(filepath)){\n            if(!file.startsWith('_')){\n               const subpages = getRoutes(filepath,slug+formatSlug(file));\n               pages = pages.concat(subpages);\n            }\n        }else{\n            const match = file.match(/^([^_][\\S]+)\\.(?:md|svelte)$/);\n            if(match){\n                const compname = formatComponentName(match[1]);\n                const url = slug+formatSlug(match[1]);\n                pages.push({\n                    component:compname,\n                    route:url.slice(1),\n                    path:filepath,\n                    title:retrieveTitleFromHeader(filepath)\n                });\n            }\n        }\n    });\n\n    return pages;\n}\n\nfunction isDir(filepath) {\n    return fs.statSync(filepath).isDirectory()\n}\n\nfunction formatComponentName(text){\n    return formatSlug(text)\n        .split('-')\n        .reduce(\n            (name,word) => {\n               return name + word.charAt(0).toUpperCase() + word.slice(1);\n            },'');\n}\n\nfunction formatSlug(text){\n    return text.replace(/[^\\w\\d\\-]/g,'-');\n}\n\nfunction retrieveTitleFromHeader(filename){\n    if(config.title.header !== true) return null;\n\n    let source = fs.readFileSync(filename,'utf-8');\n\n    let re = /^\\s*(#{1,2}(?!#)|<h(1|2)>)((.+)(\\1|<\\/h\\2>)|(.+)$)/mi;\n    let result = source.match(re);\n    return (result) ? String(result[4] || result[6]).trim() : null;\n}"
  },
  {
    "path": "packages/core/replacer/rollup_plugin_replacer.js",
    "content": "import {CWD,SRC,INCLUDES,THEME} from './../constants';\n\nconst vars = {\n    \"@CWD\": CWD,\n    \"@SRC\": SRC,\n    \"@INCLUDES\": INCLUDES,\n    \"@THEME\": THEME,\n}\n\nexport default function () {\n    return {\n        name: 'rollup_plugin_replacer',\n        resolveId(id) { \n            return Object.keys(vars).reduce((str,v) => {\n                return (id.startsWith(v)) ? id.replace(v,vars[v]) : str;\n            },null);\n        }\n    }\n}"
  },
  {
    "path": "packages/core/rollup.config.js",
    "content": "import fs from 'fs-extra';\nimport path from 'path';\nimport svelte from 'rollup-plugin-svelte';\nimport resolve from '@rollup/plugin-node-resolve';\nimport commonjs from '@rollup/plugin-commonjs';\nimport livereload from 'rollup-plugin-livereload';\nimport { terser } from 'rollup-plugin-terser';\nimport {markdown} from 'svelte-preprocess-markdown';\nimport postcss from 'rollup-plugin-postcss';\nimport postcssImport from 'postcss-import';\n\nimport replacer from './replacer/rollup_plugin_replacer';\nimport aliases from './aliases/rollup_plugin_aliases';\nimport indexer from './indexer/rollup_plugin_indexer';\nimport syncer from './syncer/rollup_plugin_syncer';\nimport fixidents from './fixidents/rollup_plugin_fixidents';\nimport {pages} from './pages/rollup_plugin_pages';\nimport {example_component, examples_sources,examples_index} from './builtins/rollup_plugin_examples';\nimport {builtins} from './builtins/svelte_preprocess_builtins';\n\nimport {INDEX,DEVPATH,BUILDPATH,EX_INDEX,SRC} from './constants';\nimport highlight from './highlight';\nimport config from './config';\n\nconst production = !process.env.ROLLUP_WATCH;\n\nconst DIR = production ? path.join(BUILDPATH,config.basepath) : path.join(DEVPATH,config.basepath);\n\nfs.removeSync(DIR);\n\nexport default [{\n\tinput: INDEX,\n\toutput: {\n\t\tsourcemap: !production,\n\t\tformat: 'iife',\n\t\tname: 'app',\n\t\tfile: path.join(DIR,'bundle.js')\n\t},\n\tplugins: [\n\t\treplacer(),\n\t\taliases(),\n\t\tindexer(!production),\n\t\tsyncer(!production),\n\t\tpages(),\n\t\texample_component(),\n\t\tsvelte({\n\t\t\tdev: !production,\n\t\t\temitCss:true,\n\t\t\textensions: ['.svelte','.md'],\n\t\t\tpreprocess: [\n\t\t\t\tbuiltins(),\n\t\t\t\tmarkdown({highlight,headerIds:true})\n\t\t\t]\n\t\t}),\n\t\tpostcss({\n            extract: true,\n            minimize: production,\n\t\t\tsourceMap: !production,\n\t\t\tplugins:[\n\t\t\t\tpostcssImport()\n\t\t\t]\n        }),\n\t\tresolve({\n\t\t\tbrowser: true,\n\t\t\tdedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')\n\t\t}),\n\t\tcommonjs(),\n\t\t!production && livereload(DIR),\n\t\tproduction && terser(),\n\t\tproduction && fixidents(),\n\t],\n\twatch: {\n\t\tclearScreen: false,\n\t\texclude: [SRC]\n\t}\n},\n// Examples bundle\n{\n\tinput: EX_INDEX,\n\toutput: {\n\t\tsourcemap: false,\n\t\tformat: 'iife',\n\t\tname: 'app',\n\t\tfile: path.join(DIR,'examples.js')\n\t},\n\tplugins: [\n\t\taliases(),\n\t\texamples_index(),\n\t\texamples_sources(),\n\t\tproduction && fixidents(),\n\t\tsvelte({\n\t\t\tdev: production,\n\t\t\temitCss:true,\n\t\t\textensions: ['.svelte'],\n\t\t\tpreprocess: config.preprocess\n\t\t}),\n\t\tpostcss({\n            extract: true,\n            minimize: production,\n\t\t\tsourceMap: false,\n\t\t\tplugins:[\n\t\t\t\tpostcssImport()\n\t\t\t]\n        }),\n\t\tresolve({\n\t\t\tbrowser: true,\n\t\t\tdedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')\n\t\t}),\n\t\tcommonjs(),\n\t\tproduction && terser()\n\t],\n\twatch: {\n\t\tclearScreen: false,\n\t\texclude: [SRC]\n\t}\n}];"
  },
  {
    "path": "packages/core/stores.js",
    "content": "let STORES = {};\n\nexport const ExamplesStore = init_store();\n\nfunction init_store() {\n    const id = {};\n    STORES[id] = {};\n    return {\n        set: (name,value) => {\n            STORES[id][name] = value\n        },\n        get: (name) => {\n            if(name){\n                let list = {};\n                if(name instanceof RegExp){\n                    Object.keys(STORES[id]).forEach(item => {\n                        if(name.test(item)) list[item]= STORES[id][item];\n                    });\n                    return list;\n                }else{\n                    return STORES[id][name];\n                }\n            }\n\n            return STORES[id];\n        },\n        length: () => {\n            return STORES[id].length;\n        },\n        clear: () => {\n            STORES[id] = {};\n        },\n        delete: (name) => {\n            if(name instanceof RegExp){\n                Object.keys(STORES[id]).forEach(item => {\n                    if(name.test(item)) delete STORES[id][item];\n                });\n            }else{\n                delete STORES[id][name];\n            }\n        }\n    }\n}\n\n\n"
  },
  {
    "path": "packages/core/syncer/rollup_plugin_syncer.js",
    "content": "import path from 'path';\nimport fs from 'fs-extra';\nimport syncFolders from 'sync-folders';\n\nimport {STATIC,THEME} from './../constants';\n\nconst assets = [\n    path.join(THEME,'assets'),\n    STATIC,\n]\n\nexport default function (dev=false) {\n    const options = {\n        type: dev ? 'hardlink' : 'copy'\n    }\n\n    return {\n        name: 'rollup_plugin_syncer',\n        generateBundle(opts, bundle) { \n            const dir = opts.dir || path.dirname(opts.file);\n            assets.forEach(asset => {\n                const filepath = path.resolve(asset)\n                if(fs.pathExistsSync(filepath)){\n                    syncFolders(filepath, dir, options);\n                }\n            })\n        }\n    }\n}\n"
  },
  {
    "path": "packages/core/themes.js",
    "content": "import fs from 'fs-extra';\nimport path from 'path';\nimport config from './config';\n\nconst CWD = process.cwd();\n\nexport function getThemePath(){\n    if(!config.theme) throw new Error('No theme option in the `svelte-docs.config.js`');\n    \n\n    // Check if theme is present in default pack\n    const package_path = path.join(CWD,'node_modules','@svelte-docs','themes',config.theme);\n    if(fs.existsSync(package_path)) return package_path;\n\n    // Check if user set option to the local path\n    const local_path = path.resolve(config.theme);\n    if(fs.existsSync(local_path)) return local_path;\n\n    throw new Error('Unknown theme option value in the `svelte-docs.config.js`');\n}\n"
  },
  {
    "path": "packages/core/utils.js",
    "content": "import chalk from 'chalk';\nimport path from 'path';\nimport fs from 'fs-extra';\nimport config from './config';\n\nexport function ERR(text,comment) {\n    console.log(chalk.bold.red('(!)',text));\n    if(comment !== undefined) console.log(chalk.red(comment));\n    process.exit(1);\n}\n\nexport function getRealImportedPath(filepath){\n//0. is path exists\n    if(fs.pathExistsSync(filepath)) return filepath;\n    const alias = config.aliases[filepath];\n\n    if (alias) {\n        let pieces = alias.split('/');\n        let mdl = pieces[0];\n        let rel = pieces\n\n//1. plain search in virtual modules\n        if(alias !== undefined){\n            filepath = path.resolve(alias);\n            if(fs.pathExistsSync(filepath)) return filepath;\n        }\n//2. relative search in virtual modules\n        if(config.aliases[mdl] !== undefined) {\n            filepath = path.resolve(path.join(config.aliases[mdl],rel));\n            if(fs.pathExistsSync(filepath)) return filepath;\n        }\n    }\n\n//3. relative search in nodemodules\n    const nodepath = path.resolve(path.join('.','node_modules',filepath))\n    if(fs.pathExistsSync(nodepath)) return nodepath;\n\n    return undefined;\n}\n"
  },
  {
    "path": "packages/core/watcher.js",
    "content": "const path = require('path');\nconst touch = require('touch');\nconst watch = require('node-watch');\n\nconst watch_path = [\n    path.resolve('./src'),\n]\n\nconst touch_path = path.resolve('./node_modules/@svelte-docs/core/App.svelte');\n\n\nwatch(watch_path, { recursive: true }, function(evt, name) {\n    touch(touch_path);\n});\n"
  },
  {
    "path": "packages/create/cli.js",
    "content": "#!/usr/bin/env node\nconst fs = require('fs-extra')\nconst path = require('path')\nconst meow = require('meow')\nconst prompts = require('prompts/dist')\nconst chalk = require('chalk')\nconst fetchRepoDir = require('fetch-repo-dir');\nconst exec = require('shelljs.exec');\n\nconst logo = chalk.bold('[Svelte-Docs]')\nconst log = (...args) => {\n  console.log(logo, ...args)\n}\nlog.error = (...args) => {\n  console.log(chalk.red('[ERROR]'), ...args)\n}\n\nfunction npminstall (dir) {\n  return new Promise((resolve, reject) => {\n    const child = spawn('npm', [ '--prefix', dir, 'install' ], {\n      stdio: 'inherit'\n    })\n    child.on('close', code => {\n      if (code !== 0) {\n        reject()\n        return\n      }\n      resolve()\n    })\n  })\n}\n\nconst themes = [\n  { name: 'Default', path: 'default' },\n]\n\nconst cli = meow(`\n  Usage\n\n    $ npm init svelte-docs\n\n    $ npx create-svelte-docs\n\n  Options\n\n    --name  Directory name for docs\n\n    -y      Create docs without confirmation step\n\n`, {\n  booleanDefault: undefined,\n  flags: {\n    help: {\n      type: 'boolean',\n      alias: 'h'\n    },\n    version: {\n      type: 'boolean',\n      alias: 'v'\n    },\n    name: {\n      type: 'string'\n    },\n    confirm: {\n      type: 'boolean',\n      alias: 'y'\n    }\n  }\n})\n\nconst form = [\n  /*\n  {\n    type: 'select',\n    name: 'template',\n    message: 'Choose a base template',\n    choices: templates.map(({ name }, i) => ({ title: name, value: i }))\n  },\n  */\n  {\n    type: 'text',\n    name: 'name',\n    message: 'Choose a name for the docs sources folder',\n    initial: 'docs_src'\n  },\n  {\n    type: 'confirm',\n    name: 'confirm',\n    message: (prev, values) => `Create docs sources in ${values.name}?`,\n    initial: true\n  }\n]\n\nconst run = async opts => {\n  prompts.inject(opts)\n  const response = await prompts(form)\n\n  if (!response.confirm) {\n    log('aborted')\n    process.exit(0)\n  }\n  const { name } = response\n  const theme = themes[response.theme] || themes[0]\n\n  log('Creating docs ...')\n\n  if (!name) {\n    log.error('name is required')\n    process.exit(1)\n  }\n\n  if (!theme) {\n    log.error('theme not found')\n    process.exit(1)\n  }\n\n  try{\n    log('Downloading docs template...');\n    await fetchRepoDir([\n      {src: 'alexxnb/svelte-docs/template', dir:name},\n    ]);\n    log('Installing NPM packages...');\n    exec(`npm --prefix ${name} install`);\n    log('Docs created succesfully!')\n    log(chalk.green(`Go to the ${name} and execute 'npm run dev' command`));\n    process.exit(0)\n  }catch(err){\n    log.error('Failed to create docs')\n      log.error(err)\n      process.exit(1)\n  }\n}\n\nrun(cli.flags);\n\n"
  },
  {
    "path": "packages/create/package.json",
    "content": "{\n  \"name\": \"create-svelte-docs\",\n  \"version\": \"0.3.2\",\n  \"description\": \"CLI tool to init docs source directory\",\n  \"main\": \"cli.js\",\n  \"bin\": {\n    \"create-svelte-docs\": \"./cli.js\"\n  },\n  \"scripts\": {\n    \"start\": \"./cli.js\"\n  },\n  \"keywords\": [],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/AlexxNB/svelte-docs.git\"\n  },\n  \"author\": \"Alexey Schebelev\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/AlexxNB/svelte-docs/issues\"\n  },\n  \"homepage\": \"https://alexxnb.github.io/svelte-docs\",\n  \"dependencies\": {\n    \"chalk\": \"^2.4.1\",\n    \"fetch-repo-dir\": \"^1.0.4\",\n    \"fs-extra\": \"^8.1.0\",\n    \"meow\": \"^5.0.0\",\n    \"prompts\": \"^0.1.12\",\n    \"shelljs.exec\": \"^1.1.8\"\n  }\n}\n"
  },
  {
    "path": "packages/publisher/package.json",
    "content": "{\n  \"name\": \"@svelte-docs/publisher\",\n  \"version\": \"0.2.3\",\n  \"description\": \"Helps to publish Svelte-docs on Github Pages and other resources\",\n  \"main\": \"publisher.js\",\n  \"scripts\": {},\n  \"keywords\": [],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/AlexxNB/svelte-docs.git\"\n  },\n  \"author\": \"Alexey Schebelev\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/AlexxNB/svelte-docs/issues\"\n  },\n  \"homepage\": \"https://alexxnb.github.io/svelte-docs\",\n  \"dependencies\": {\n    \"chalk\": \"^2.4.2\",\n    \"gitinfo\": \"^2.4.0\",\n    \"import-cwd\": \"^3.0.0\",\n    \"prompts\": \"^0.1.12\",\n    \"shelljs.exec\": \"^1.1.8\"\n  }\n}\n"
  },
  {
    "path": "packages/publisher/publisher.js",
    "content": "const importCWD = require('import-cwd');\nconst exec = require('shelljs.exec');\nconst path = require('path');\nconst createGitinfo = require('gitinfo').default;\nconst chalk = require('chalk');\nconst prompts = require('prompts');\n\nconst config = importCWD('./svelte-docs.config.js');\n\nconsole.log(chalk.bold('Publishing the documentation...'));\n\n\nasync function run() {\n    const git = createGitinfo();\n\n    if(!git) Err('can\\'t find .git folder in the parents directories');\n\n    const GITURL = git.getGithubUrl();\n    const GITUSER = git.getUsername();\n    const GITNAME = git.getName();\n    const DIR = path.join(process.cwd(),config.pathes.build,config.basepath).replace(/\\/$/,'');\n\n    if(!GITURL.startsWith('https://github.com')) Err('Can publish in Github repository only, but `'+GITURL+'` was found.');\n\n    if(`/${GITNAME}/` !== config.basepath) Err('you should set `basepath` option in `svelte-docs.config.js` as the name of your repository `'+ GITNAME +'`');\n\n    const result = await prompts([\n        {\n            type: 'confirm',\n            name: 'confirm',\n            message: 'Publish documents in `gh-pages` branch of the `'+GITURL+'` repository?',\n            initial: true\n        }\n    ]);\n\n    if(result.confirm){\n        console.log('Wait while deploy on GitHub Pages...');\n        publish_ghpages(DIR, function(err) {\n            if(err) Err('Fail on publishing:',err);\n            console.log(chalk.bold('Done!'));\n            console.log(chalk.green(`You can open it at https://${GITUSER.toLowerCase()}.github.com/${GITNAME}`));\n            process.exit(0);\n        });\n    }else{\n        Err('Publishing canceled');\n    }\n}\n\nrun();\n\n\nfunction Err(message){\n    console.log(chalk.red('[Error]', message));\n    process.exit(1);\n}\n\nfunction publish_ghpages(dir,cb){\n    dir = path.relative(process.cwd(),dir);\n    const result = exec(`npx gh-pages -d ${dir}`);\n    cb( result.code === 0 ? null : result.stderr);\n}"
  },
  {
    "path": "packages/server/package.json",
    "content": "{\n  \"name\": \"@svelte-docs/server\",\n  \"version\": \"0.1.6\",\n  \"description\": \"HTTP server to run Svelte-docs in development or production modes\",\n  \"main\": \"server.js\",\n  \"scripts\": {},\n  \"keywords\": [],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/AlexxNB/svelte-docs.git\"\n  },\n  \"author\": \"Alexey Schebelev\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/AlexxNB/svelte-docs/issues\"\n  },\n  \"homepage\": \"https://alexxnb.github.io/svelte-docs\",\n  \"dependencies\": {\n    \"chalk\": \"^2.4.2\",\n    \"console-clear\": \"^1.1.1\",\n    \"import-cwd\": \"^3.0.0\",\n    \"meow\": \"^8.0.0\",\n    \"sirv\": \"^0.4.6\"\n  }\n}\n"
  },
  {
    "path": "packages/server/server.js",
    "content": "#!/usr/bin/env node\n\nconst path = require('path');\nconst meow = require('meow');\nconst sirv = require('sirv');\nconst { createServer } = require('http');\nconst clear = require('console-clear');\nconst chalk = require('chalk');\nconst importCWD = require('import-cwd');\n\nconst config = importCWD('./svelte-docs.config.js');\n\nconst cli = meow(`\n    Usage\n      $ node sirv.js [options]\n \n    Options\n      --dev, -d  Development mode\n      --cors, -c  Enable \"CORS\" headers to allow any origin requestor\n      --single, -s  SPA Mode\n \n    Examples\n      $ node sirv.js --dev --basepath subdir\n`, {\n    flags: {\n        dev: {\n            type: 'boolean',\n            alias: 'd'\n        },\n        cors: {\n            type: 'boolean',\n            alias: 'c'\n        },\n        single: {\n            type: 'boolean',\n            alias: 's'\n        }\n    }\n});\n\nconst CWD = process.cwd();\n\nconst DEV = cli.flags.dev;\nconst CORS = cli.flags.cors;\nconst SINGLE = cli.flags.single;\n\nconst DIR = DEV ? path.join(CWD,config.pathes.dev) : path.join(CWD,config.pathes.build);\n\nlet port = process.env.PORT || 5000;\nlet hostname = process.env.HOST || '0.0.0.0';\n\nconst mw = sirv(DIR, {\n    dev: DEV,\n    maxAge: 31536000, // 1Y\n    immutable: true,\n    setHeaders: CORS ? (res) => {\n        res.setHeader('Access-Control-Allow-Origin', '*');\n        res.setHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Range');\n    } : undefined,\n    onNoMatch: SINGLE ? (req, res) => (req.path=config.basepath,mw(req, res, () => (res.statusCode=404,res.end()))) : undefined\n});\n\ncreateServer(mw).listen(port, hostname, err => {\n    if (err) throw err;\n\n    const srv = DEV ? chalk.yellow('DEVELOPMENT server started...') : chalk.green('Server started...');\n\n    clear(true);\n    console.log(`\n    ${chalk.bold('Svelte-Docs:')} ${srv}\n    Please open: ${chalk.blue('http://'+(hostname === '0.0.0.0' ? 'localhost' : hostname)+':'+port+config.basepath)}\n    `);\n});\n"
  },
  {
    "path": "packages/themes/default/components/Document.svelte",
    "content": "<script>\n    import {current_page} from '@svelte-docs/get/routes';\n\n    current_page.subscribe(() => {\n        window.scrollTo(0,0);\n    });\n</script>\n\n<article>\n    <svelte:component this={$current_page.component} />\n</article>\n\n\n"
  },
  {
    "path": "packages/themes/default/components/Example.svelte",
    "content": "<div class=\"example\">\n    <div class=\"result\">\n        <slot name=\"result\"/>\n    </div>\n    <div class=\"code\">\n        <slot name=\"code\"/>\n    </div>\n</div>"
  },
  {
    "path": "packages/themes/default/components/Layout.svelte",
    "content": "<script>\n\timport { writable } from 'svelte/store';\n\timport { tweened } from 'svelte/motion';\n\timport { current_page } from '@svelte-docs/get/routes';\n\timport maintitle from '@svelte-docs/get/maintitle';\n\timport Topbar from './Topbar.svelte';\n\timport Sections from './Sections.svelte';\n\timport Document from './Document.svelte';\n\timport { cubicOut } from 'svelte/easing';\n\n\tfunction slideH(node) {\n\n\t\tconst delay = 10;\n\t\tconst duration = 200;\n\t\tconst easing = cubicOut;\n\n\t\tconst style = getComputedStyle(node);\n\t\tconst width = parseFloat(style.width);\n\n\t\treturn {\n\t\t\tdelay,\n\t\t\tduration,\n\t\t\teasing,\n\t\t\tcss: t =>\n\t\t\t\t`overflow: hidden;` +\n\t\t\t\t`width: ${t * width}px;`\n\t\t};\n\t}\n\n\tfunction set_active_link(node){\n\t\treturn {\n\t\t\tdestroy: current_page.subscribe(page => {\n\t\t\t\tconst url = page.url || '/';\n\t\t\t\tnode.querySelectorAll('a').forEach(a => {\n\t\t\t\tif(a.getAttribute('href') === url)\n\t\t\t\t\ta.classList.add('active');\n\t\t\t\telse\n\t\t\t\t\ta.classList.remove('active')\n\t\t\t\t});\n\t\t\t})\n\t\t}\n\t}\n\n\tfunction hide_sidebar(node){\n\n\t\tconst handler = () => show_sidebar=false;\n\t\tdocument.body.addEventListener('click',handler);\n\t\treturn{\n\t\t\tdestroy(){\n\t\t\t\tdocument.body.removeEventListener('click',handler);\n\t\t\t}\n\t\t}\n\t}\n\n\tlet window_width = 0;\n\tlet show_sidebar = false;\n\tconst mobile = writable(true);\n\tconst rotate = tweened(0,{duration:200, easing:cubicOut});\n\n\t$: $mobile = window_width < 800;\n\t$: show_sidebar = $mobile ? show_sidebar : false;\n\t$: $rotate = show_sidebar ? 180 : 0;\n\n\t$: title = $current_page.title ? $current_page.title + ' — ' + maintitle : maintitle;\n\t$: layout = $current_page.meta.layout ? $current_page.meta.layout : 'default';\n\n</script>\n\n<svelte:window bind:innerWidth={window_width}/>\n\n<svelte:head>\n\t<title>{title}</title>\n</svelte:head>\n\n<!-- top bar -->\n<header>\n\t<Topbar />\n</header>\n\n{#if layout === 'no_sidebar'}\n\n\t<!-- content -->\n\t<main class=\"fullscreen\" class:mobile={$mobile}>\n\t\t<Document />\n\t</main>\n\n{/if}\n\n{#if layout === 'default'}\n\n\t{#if $mobile}\n\t<!-- side bar -->\n\t<button class=\"showNav\" on:click|stopPropagation={()=>show_sidebar=!show_sidebar}>\n\t\t<img src=\"assets/burger.svg\" alt=\"Open Menu\" style=\"transform: rotate({$rotate}deg)\"/>\n\t</button>\n\t{/if}\n\t\n\t{#if !$mobile || show_sidebar}\n\t<nav use:set_active_link use:hide_sidebar transition:slideH>\n\t\t<Sections />\n\t</nav> \n\t{/if}\n\n\t<!-- content -->\n\t<main class:mobile={$mobile}>\n\t\t<Document />\n\t</main>\n\n{/if}\n"
  },
  {
    "path": "packages/themes/default/components/Properties.svelte",
    "content": "<script>\n/* (!) Restart bandler if this file was edited\n*   \n*   Properties data structure:\n*   data = [\n*       { \n*           name <string>,\n*           description <string>,\n*           attr[\n*               default<string>,\n*               types: <string> | [ <string> ]\n*           ]\n*       },\n*       ...\n*   ]\n*/\n    export let data;\n\n    function getTypes(types) {\n\n        if(!types) return '';\n\n        const typeValue = (type) => {\n            if(!type) return '';\n            if(typeof type === 'string') return type;\n            \n            return type.map(v => `<i>${v}</i>`).join(',');\n        }\n\n        return types.map(type=>`<dfn>${typeValue(type)}</dfn>`).join('');\n    }\n</script>\n\n<dl class=\"properties\">\n{#each data as prop}\n<dt class:required={!prop.attr.default}>{prop.name}</dt>\n<dd>{@html getTypes(prop.attr.types)}</dd>\n<dd>{prop.attr.default ? prop.attr.default : ''}</dd>\n<dd>{@html prop.description ? prop.description : ''}</dd>\n{/each}\n</dl>"
  },
  {
    "path": "packages/themes/default/components/Sections.svelte",
    "content": "<script>    \n    import Sidebar from '@INCLUDES/sidebar.md';\n</script>\n\n<Sidebar />"
  },
  {
    "path": "packages/themes/default/components/Topbar.svelte",
    "content": "<script>\n   import Logo from '@INCLUDES/logo.md';\n   import Topbar from '@INCLUDES/topbar.md';\n</script>\n\n<section>\n    <Logo />\n</section>\n<section>\n    <Topbar />\n</section>"
  },
  {
    "path": "packages/themes/default/info.md",
    "content": "Theme based on [offical Svelte documentation site](https://svelte.dev/docs).\n\n*by Alexey Schebelev*\n\n## Theme variables\n\n|Variable|Default|Comment|\n|--------|-------|-----------|\n| `--font`               | \"Overpass\", sans-serif |  |\n| `--font-mono`          | \"Fira Mono\", monospace |  |\n| `--primary`            | #ff3e00 |  |\n| `--secondary`          | #676778 |  |\n| `--dark`               | #34343d |  |\n| `--light`              | #c0c0d8 |  |\n| `--white`              | #ffffff |  |\n| `--code`               | #f6fafd |  |\n| `--text`               | --dark  |  |\n| `--text-sidebar`       | #d4d4d4 |  |\n| `--text-sidebar-links` | --white |  |\n| `--topbar-height`      | 50px |  |\n| `--sidebar-width`      | 300px |  |\n| `--example-border`     | --light | Border color of the example block |\n| `--props-border`       | --light | Colors of the properties block |\n| `--props-devider`      | --code |  |\n| `--props-types-bg`     | --code |  |\n| `--props-types-border` | --light |  |\n| `--props-types-text`   | --hl-keyword |  |\n| `--props-oneof-text`   | --hl-string |  |\n| `--props-default-text` | --light |  |\n| `--hl-background`      | --code | Code highlighting colors  |\n| `--hl-text`            | #505050 |  |\n| `--hl-comment`         | #8da4bc |  |\n| `--hl-keyword`         | #3c87b9 |  |\n| `--hl-string`          | #a18851 |  |\n| `--hl-number`          | #76a562 |  |\n| `--hl-name`            | #c36031 |  |\n| `--hl-attr`            | #a18851 |  |\n| `--hl-builtin`         | #505050 |  |\n\n\n## Layouts\n\n|Name    |Description|\n|--------|-----------|\n| `default`      | Layout with topbar, sidebar on the left and content|\n| `no_sidebar`   | Layout without sidebar |"
  },
  {
    "path": "packages/themes/default/style.css",
    "content": "@import \"styles/layout.css\";\n@import \"styles/typography.css\";\n@import \"styles/fonts.css\";\n@import \"styles/highlight.css\";\n\n:root{\n    --font: \"Overpass\", sans-serif;\n    --font-mono: \"Fira Mono\", monospace;\n\n    --primary: #ff3e00;\n    --secondary: #676778;\n    --dark: #34343d;\n    --light: #c0c0d8;\n\n    --white: #ffffff;\n    --code: #f6fafd;\n\n    --text: var(--dark);\n    --text-sidebar:#d4d4d4;\n    --text-sidebar-links:var(--white);\n\n    --topbar-height: 50px;\n    --sidebar-width: 300px;\n\n    --example-border: var(--light);\n\n    --props-border: var(--light);\n    --props-devider: var(--code);\n    --props-types-bg: var(--code);\n    --props-types-border: var(--light);\n    --props-types-text: var(--hl-keyword);\n    --props-oneof-text: var(--hl-string);\n    --props-default-text: var(--light);\n    \n    --hl-background: var(--code);\n    --hl-text: #505050;\n    --hl-comment: #8da4bc; \n    --hl-keyword: #3c87b9; \n    --hl-string: #a18851; \n    --hl-number: #76a562; \n    --hl-name: #c36031; \n    --hl-attr: #a18851; \n    --hl-builtin: #505050; \n}\n\n"
  },
  {
    "path": "packages/themes/default/styles/fonts.css",
    "content": "/* overpass-300normal */\n@font-face {\n\tfont-family: 'Overpass';\n\tfont-style: normal;\n\tfont-weight: 300;\n\tfont-display: fallback;\n\tsrc:\n\t\tlocal('Overpass Light '),\n\t\tlocal('Overpass-Light'),\n\t\turl('assets/fonts/overpass-300.woff2') format('woff2');\n}\n\n/* overpass-400normal */\n@font-face {\n\tfont-family: 'Overpass';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-display: fallback;\n\tsrc:\n\t\tlocal('Overpass Light '),\n\t\tlocal('Overpass-Light'),\n\t\turl('assets/fonts/overpass-400.woff2') format('woff2');\n}\n\n/* overpass-600normal */\n@font-face {\n\tfont-family: 'Overpass';\n\tfont-style: normal;\n\tfont-weight: 600;\n\tfont-display: fallback;\n\tsrc:\n\t\tlocal('Overpass Bold '),\n\t\tlocal('Overpass-Bold'),\n\t\turl('assets/fonts/overpass-600.woff2') format('woff2');\n}\n\n/* fira-mono-400normal */\n@font-face {\n\tfont-family: 'Fira Mono';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-display: fallback;\n\tsrc:\n\t\tlocal('Fira Mono'),\n\t\tlocal('Fira-Mono'),\n\t\turl('assets/fonts/fira-mono-400.woff2') format('woff2');\n}"
  },
  {
    "path": "packages/themes/default/styles/highlight.css",
    "content": "/*\n*   You can just import theme from the higlight.js package:\n*   Example: @import 'highlight.js/styles/solarized-light.css'\n*/\n\n.hljs {\n\tdisplay: block;\n\toverflow-x: auto;\n\tpadding: 0.5em;\n\tbackground: var(--hl-background);\n\tcolor: var(--hl-text);\n\tfont-family: var(--font-mono);\n\tline-height: 1;\n}\n  \n.hljs-comment,\n.hljs-quote {\n\tcolor: var(--hl-comment);\n}\n  \n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-addition {\n\tcolor: var(--hl-keyword);\n}\n  \n.hljs-number{\n\tcolor: var(--hl-number);\n}\n  \n.hljs-string,\n.hljs-meta .hljs-meta-string,\n.hljs-literal,\n.hljs-doctag,\n.hljs-regexp {\n\tcolor: var(--hl-string);\n}\n  \n.hljs-title,\n.hljs-section,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class {\n\tcolor: var(--hl-name);\n}\n  \n.hljs-attribute,\n.hljs-attr,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-class .hljs-title,\n.hljs-type {\n\tcolor: var(--hl-attr);\n}\n  \n.hljs-symbol,\n.hljs-bullet,\n.hljs-subst,\n.hljs-meta,\n.hljs-meta .hljs-keyword,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-link {\n\tcolor: var(--hl-string);\n}\n  \n.hljs-built_in{\n\tcolor: var(--hl-builtin);\n}\n\n.hljs-deletion {\n\tcolor: #dc322f;\n}\n  \n.hljs-formula {\n\tbackground: #eee8d5;\n}\n  \n.hljs-emphasis {\n\tfont-style: italic;\n}\n  \n.hljs-strong {\n\tfont-weight: bold;\n}"
  },
  {
    "path": "packages/themes/default/styles/layout.css",
    "content": "html, body {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tmargin: 0;\n\tpadding: 0px;\n\tbox-sizing: border-box;\n}\n\n\n/* Top bar */\nheader{\n\tposition:fixed;\n\ttop:0px;\n\tleft:0px;\n\twidth: 100vw;\n\theight:var(--topbar-height);\n\tline-height:var(--topbar-height);\n\tbackground-color:var(--white);\n\tbox-shadow: 0 0 15px -5px var(--dark);\n\tz-index: 1001;\n\n\tdisplay: flex;\n  \tflex-wrap: wrap;\n}\n\nheader section{\n\tmargin:0px 1em;\n\tflex-grow: 1;\n\ttext-align: center;  \n}\n\nheader section:first-child{\n\ttext-align: left; \n}\n\nheader section:last-child{\n\ttext-align: right; \n}\n\nheader section ul{\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\nheader section li{\n\tdisplay: inline-block;\n\tmargin:0 .5em;\n}\n\nheader section li:last-child{\n\tmargin-right: 0;\n}\n\nheader section li a{\n\tcolor: var(--text);\n}\n\nheader section h1{\n\tfont-size: 2rem;\n\tfont-weight: 400;\n\tmargin:0;\n}\n\nheader section img{\n\tmax-height: var(--topbar-height);\n\twidth: auto;\n}\n\nheader section h1 a{\n\tcolor: var(--primary);\n}\nheader section h1 a:hover{\n\ttext-decoration: none;\n}\n\n\n/* Sidebar navigation */\nnav{\n\tposition:fixed;\n\ttop:var(--topbar-height);\n\tleft:0px;\n\twidth:var(--sidebar-width);\n\theight:100vh;\n\tbackground-color:var(--secondary);\n\tbox-shadow: 0 0 15px -5px var(--dark);\n\toverflow-x: hidden;\n\tz-index:1000;\n\tcolor: var(--text-sidebar);\n}\n\nnav a{\n\tcolor: var(--text-sidebar-links);\n}\n\nnav ul{\n\tdisplay: block;\n\tpadding:0 .5em 0 2em;\n\ttext-transform: uppercase;\n\tfont-weight: 600;\n}\n\nnav ul ul{\n\tdisplay: block;\n\tpadding:0 0 .3em 1em;\n\ttext-transform: initial;\n\tfont-weight: 400;\n}\n\nnav ul li{\n\tdisplay: block;\n\tpadding: 0;\n\tmargin: 0 0 .5em 0;\n}\n\nnav ul li li{\n\tmargin: 0;\n}\n\nnav a:hover, nav a.active{\n\ttext-decoration: underline;\n}\nnav a.active::after {\n\tfloat:right;\n\tcontent: url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><g><path fill=\"white\" d=\"M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z\" /></g></svg>');\n}\n\n.showNav{\n\t\tposition: fixed;\n\t\tbottom: 10px;\n\t\tleft: 10px;\n\t\twidth:37px;\n\t\theight:37px;\n\t\tz-index: 10101;\n\t\tborder: 1px solid var(--dark);\n\t\tbackground-color: var(--white);\n\t\tcursor:pointer;\n\t}\n\n\n/* Content */\nmain{\n\tpadding-top:var(--topbar-height);\n\tmargin-left:var(--sidebar-width);\n\tbackground-color:var(--bg-light);\n\tmin-height: calc(100vh - var(--topbar-height));\n\tmax-width:70em;\n}\n\nmain.fullscreen{\n\tmargin:0 auto;\n}\n\narticle{\n\tpadding:0 4em;\n}\n\narticle img {\n\tdisplay: block;\n    max-width: 100%;\n\theight: auto;\n\tmargin: 0 auto;\n}\n\nmain.mobile{\n\tmargin-left:0px;\n\tmax-width: 100%;\n}\n\nmain.mobile article{\n\tpadding:0 1em;\n}\n\n/* Example block */\n.example{\n\tborder:1px solid var(--example-border);\n\tmargin:25px;\n}\n\n/* .example > .result{} */\n .example > .code{\n\tborder-top:1px solid var(--example-border);\n } \n\n\n/* Properties block */\n\n.properties{\n\tposition: relative;\n\tdisplay: block;\n\tborder:1px solid var(--props-border);\n\tmargin:25px;\n\tpadding: .3em;\n}\n\n.properties dd, .properties dt{\n\tdisplay: inline-block;\n\tmargin:0px;\n}\n\n/*name*/\n.properties dt{\n\twidth: 10em;\n\tfont-weight: bold;\n\tpadding-top:.5em;\n}\n\n.properties dt.required{\n\ttext-decoration: underline;\n}\n\n/*type*/\n.properties dt + dd{\n\tcolor: var(--props-border);\n\tpadding-top:.5em;\n}\n\n.properties dfn{\n\tdisplay: inline-block;\n\tpadding: 0 .3em;\n\tcolor: var(--props-types-text);\n\tbackground: var(--props-types-bg);\n\tborder: 1px solid var(--props-types-border);\n\tborder-radius: .3em;\n\tmargin-right: .3em;\n\tfont-style: normal;\n\tfont-family: var(--font-mono);\n\tfont-size:.8em;\n\tletter-spacing: -.05em;\n}\n\n.properties dfn i{\n\tcolor: var(--props-oneof-text);\n}\n\n\n/*default*/\n.properties dt + dd + dd{\n\twidth:100%;\n\tcolor: var(--props-default-text);\n\tpadding-top:.3em;\n}\n\n/*description*/\n.properties dt + dd + dd + dd{\n\tdisplay: block;\n\tborder-bottom: 1px solid var(--props-devider);\n\tpadding:0 .3em .3em 10em;\n\tmargin-top:-1em;\n}\n\n.properties dd:last-of-type{\n\tborder-bottom: none;\n}"
  },
  {
    "path": "packages/themes/default/styles/typography.css",
    "content": "body {\n\tcolor: var(--text);\n\tfont-family:  \"Overpass\", sans-serif;\n\tfont-weight: 300;\n\tline-height: 1.6;\n}\n\nstrong{\n\tfont-weight: 600;\n}\n\na {\n\tcolor: rgb(0,100,200);\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput, button, select, textarea {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n}\n\ninput:disabled {\n\tcolor: #ccc;\n}\n\ninput[type=\"range\"] {\n\theight: 0;\n}\n\nbutton {\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\nbutton:active {\n\tbackground-color: #ddd;\n}\n\nbutton:focus {\n\tborder-color: #666;\n}\n\ncode{\n\tfont-family: var(--font-mono);\n\tfont-size: .8rem;\n\tbackground: var(--code);\n\tborder: 1px solid var(--light);\n\tcolor: var(--secondary);\n\tpadding: 0 .2em;\n\tborder-radius: .2em;\n\twhite-space: nowrap;\n}\n\n\npre {\n\tbackground-color: var(--code);\n\tfont-size: 1em;\n\tpadding: 1rem;\n\toverflow-x: auto;\n\tborder-radius: .3em;\n\tmargin:25px;\n}\n  \npre code {\n\tbackground: none;\n\tborder: none;\n\tpadding: 0;\n\twhite-space: pre;\n\tline-height:.8rem;\n}\n\nblockquote {\n\tbackground-color: var(--code);\n\tpadding: 1rem 2rem;\n\tborder-left: 3px solid var(--light);\n}\n"
  },
  {
    "path": "packages/themes/light/components/Example.svelte",
    "content": "<div class=\"example\">\n    <div class=\"result\">\n        <slot name=\"result\"/>\n    </div>\n    <div class=\"code\">\n        <slot name=\"code\"/>\n    </div>\n</div>"
  },
  {
    "path": "packages/themes/light/components/Layout.svelte",
    "content": "<script>\n\timport { current_page } from '@svelte-docs/get/routes';\n\timport maintitle from '@svelte-docs/get/maintitle';\n\timport Logo from '@INCLUDES/logo.md';\n    import Topbar from '@INCLUDES/topbar.md';\n\timport Sidebar from '@INCLUDES/sidebar.md';\n\timport { set_active_link, outside_click } from './../../utils';\n\t\n\tcurrent_page.subscribe(() => {\n        window.scrollTo(0,0);\n\t});\n\n\tlet window_width = 0;\n\tlet show_sidebar = false;\n\n\t$: mobile = window_width < 800;\n\t$: show_sidebar = mobile ? show_sidebar : false;\n\n\t$: title = $current_page.title ? $current_page.title + ' — ' + maintitle : maintitle;\n\t$: nosidebar = $current_page.meta.layout === 'no_sidebar';\n</script>\n\n\n<svelte:head>\n\t<title>{title}</title>\n</svelte:head>\n\n<svelte:window bind:innerWidth={window_width}/>\n\n<div class=\"main\" class:nosidebar={nosidebar||mobile}>\n\t<div class=\"article\">\n\t   <svelte:component this={$current_page.component} />\n\t</div>\n</div>\n\n{#if !nosidebar}\n\t{#if !mobile || (mobile&&show_sidebar)}\n\t<div class=\"sidebar\" use:set_active_link use:outside_click={()=>show_sidebar=false}>\n\t\t<Sidebar />\n\t</div>\n\t{/if}\n{/if}\n\n<div class=\"topbar\">\n\t{#if mobile && !nosidebar}\n\t<button class=\"show_sidebar\" on:click|stopPropagation={()=>show_sidebar=!show_sidebar}>\n\t\t<svg style=\"width:24px;height:24px\" viewBox=\"0 0 24 24\">\n\t\t\t<path fill=\"currentColor\" d=\"M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z\" />\n\t\t</svg>\n\t</button>\n\t{/if}\n\t<div class=\"logo\"><Logo /></div>\n\t<div><Topbar /></div>\n</div>\n\n\n\n\n"
  },
  {
    "path": "packages/themes/light/components/Properties.svelte",
    "content": "<script>\n/* (!) Restart bandler if this file was edited\n*   \n*   Properties data structure:\n*   data = [\n*       { \n*           name <string>,\n*           description <string>,\n*           attr[\n*               default<string>,\n*               types: <string> | [ <string> ]\n*           ]\n*       },\n*       ...\n*   ]\n*/\n    export let data;\n\n    function getTypes(types) {\n\n        if(!types) return '';\n\n        const typeValue = (type) => {\n            if(!type) return '';\n            if(typeof type === 'string') return type;\n            \n            return type.map(v => `<span>${v}</span>`).join(',');\n        }\n\n        return types.map(type=>`<span class=\"typedef\">${typeValue(type)}</span>`).join('');\n    }\n</script>\n\n<table class=\"properties\">\n{#each data as prop}\n    <tr>\n        <td>\n            <div class=\"propname\" class:required={!prop.attr.default}>{prop.name}</div>\n            <div class=\"default\">{prop.attr.default ? prop.attr.default : ''}</div>\n        </td>\n        <td>\n            <div class=\"types\">{@html getTypes(prop.attr.types)}</div>\n        </td>\n        <td>\n            <div class=\"description\">{@html prop.description ? prop.description : ''}</div>\n        </td>\n    </tr>\n{/each}\n</table>"
  },
  {
    "path": "packages/themes/light/info.md",
    "content": "Light and clean theme \n*by Alexey Schebelev*\n\n## Theme variables\n\n|Variable|Default|Comment|\n|--------|-------|-----------|\n| `--font`               | -apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol |  |\n| `--font-mono`          | SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace |  |\n| `--primary`            | #5BC9C3 |  |\n| `--secondary`          | #B1B1B3 |  |\n| `--dark`               | #1A202C |  |\n| `--light`              | #E2E8F0 |  |\n| `--white`              | #ffffff |  |\n| `--code`               | #011627 |  |\n| `--tag`                | #FEEBC8 |  |\n| `--tag-border`         | #fdd58a |  |\n| `--tag-text`           | #DD6B20 |  |\n| `--text`               | --dark  |  |\n| `--topbar-height`      | 50px |  |\n| `--sidebar-width`      | 250px |  |\n| `--quote`              | --tag |  |\n| `--quote-side`         | --tag-text |  |\n| `--example-border`     | --light | Border color of the example block |\n| `--props-border`       | --light | Colors of the properties block |\n| `--props-devider`      | --code |  |\n| `--props-types-bg`     | --tag |  |\n| `--props-types-border` | --tag-border |  |\n| `--props-types-text`   | --tag-text |  |\n| `--props-oneof-text`   | --hl-builtin |  |\n| `--props-default-text` | --light |  |\n| `--hl-background`      | --code | Code highlighting colors  |\n| `--hl-text`            | #D6DEEB |  |\n| `--hl-comment`         | #637777 |  |\n| `--hl-keyword`         | #7FDBCA |  |\n| `--hl-string`          | #ADDB67 |  |\n| `--hl-number`          | #F78C6C |  |\n| `--hl-name`            | #FFCB8B |  |\n| `--hl-attr`            | #ADDB67 |  |\n| `--hl-builtin`         | #8B6CAF |  |\n\n\n## Layouts\n\n|Name    |Description|\n|--------|-----------|\n| `default`      | Layout with topbar, sidebar on the left and content|\n| `no_sidebar`   | Layout without sidebar |"
  },
  {
    "path": "packages/themes/light/style.css",
    "content": "@import \"styles/layout.css\";\n@import \"styles/typography.css\";\n@import \"styles/highlight.css\";\n\n:root{\n    --font: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,\n            Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";\n    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n\n    --primary: #5BC9C3;\n    --secondary: #B1B1B3;\n    --dark: #1A202C;\n    --light: #E2E8F0;\n\n    --white: #ffffff;\n    --code: #011627;\n\n    --tag: #FEEBC8;\n    --tag-border:#fdd58a;\n    --tag-text:#DD6B20;\n\n    --text: var(--dark);\n\n    --topbar-height: 50px;\n    --sidebar-width: 250px;\n\n    --quote: var(--tag);\n    --quote-side: var(--tag-text);\n\n    --example-border: var(--light);\n\n    --props-border: var(--light);\n    --props-devider: var(--code);\n    --props-types-bg: var(--tag);\n    --props-types-border: var(--tag-border);\n    --props-types-text: var(--tag-text);\n    --props-oneof-text: var(--hl-builtin);\n    --props-default-text: var(--light);\n    \n    --hl-background: var(--code);\n    --hl-text: #D6DEEB;\n    --hl-comment: #637777; \n    --hl-keyword: #7FDBCA; \n    --hl-string: #ADDB67; \n    --hl-number: #F78C6C; \n    --hl-name: #FFCB8B; \n    --hl-attr: #ADDB67; \n    --hl-builtin: #8B6CAF; \n}\n\n"
  },
  {
    "path": "packages/themes/light/styles/highlight.css",
    "content": "/*\n*   You can just import theme from the higlight.js package:\n*   Example: @import 'highlight.js/styles/solarized-light.css'\n*/\n\n.hljs {\n\tdisplay: block;\n\toverflow-x: auto;\n\tpadding: 0.5em;\n\tbackground: var(--hl-background);\n\tcolor: var(--hl-text);\n\tfont-family: var(--font-mono);\n}\n  \n.hljs-comment,\n.hljs-quote {\n\tcolor: var(--hl-comment);\n}\n  \n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-addition {\n\tcolor: var(--hl-keyword);\n}\n  \n.hljs-number{\n\tcolor: var(--hl-number);\n}\n  \n.hljs-string,\n.hljs-meta .hljs-meta-string,\n.hljs-literal,\n.hljs-doctag,\n.hljs-regexp {\n\tcolor: var(--hl-string);\n}\n  \n.hljs-title,\n.hljs-section,\n.hljs-name,\n.hljs-selector-id,\n.hljs-selector-class {\n\tcolor: var(--hl-name);\n}\n  \n.hljs-attribute,\n.hljs-attr,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-class .hljs-title,\n.hljs-type {\n\tcolor: var(--hl-attr);\n}\n  \n.hljs-symbol,\n.hljs-bullet,\n.hljs-subst,\n.hljs-meta,\n.hljs-meta .hljs-keyword,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-link {\n\tcolor: var(--hl-string);\n}\n  \n.hljs-built_in{\n\tcolor: var(--hl-builtin);\n}\n\n.hljs-deletion {\n\tcolor: #dc322f;\n}\n  \n.hljs-formula {\n\tbackground: #eee8d5;\n}\n  \n.hljs-emphasis {\n\tfont-style: italic;\n}\n  \n.hljs-strong {\n\tfont-weight: bold;\n}"
  },
  {
    "path": "packages/themes/light/styles/layout.css",
    "content": "html, body {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tmargin: 0;\n\tpadding: 0px;\n\tbox-sizing: border-box;\n}\n\n.topbar{\n\tdisplay:flex;\n\tjustify-content: space-between;\n\tflex-wrap: nowrap;\n\talign-items: center;\n\tposition: fixed;\n\ttop:0px;\n\theight: var(--topbar-height);\n\tborder-bottom: 1px solid var(--light);\n\twidth: 100vw;\n\tline-height: var(--topbar-height);\n\tbackground-color: var(--white);\n}\n\n.logo{\n\tmargin-left:1em;\n\twhite-space: nowrap;\n\toverflow-x: hidden;\n}\n\n.logo h1{\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\n.logo h1 a:hover{\n\ttext-decoration: none;\n}\n\n.topbar ul{\n\tmargin:0px;\n\tpadding:0px;\n\twhite-space: nowrap;\n}\n\n.topbar ul li{\n\tdisplay:inline-block;\n\tmargin-right: 1em;\n}\n\n.topbar .show_sidebar{\n\tdisplay: block;\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tcolor: var(--primary);\n\talign-self: center;\n\tmargin: .2rem\n}\n\n\n.page{\n\tdisplay: flex;\n\talign-content: flex-start;\n}\n\n.sidebar{\n\tposition: fixed;\n\tleft: 0px;\n\ttop: 0px;\n\tbottom: 0px;\n\twidth: var(--sidebar-width);\n\theight: calc(100vh - var(--topbar-height));\n\tmargin-top: var(--topbar-height);\n\tborder-right: 1px solid var(--light);\n\tpadding: 1em;\n\tbox-sizing: border-box;\n\tfont-size: .9em;\n\tbackground-color: var(--white);\n}\n\n.sidebar ul{\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.sidebar ul li{\n\tdisplay: block;\n\tcolor: var(--secondary);\n\tfont-weight: bolder;\n\tmargin: .3em 0;\n}\n\n.sidebar ul li a{\n\tdisplay: block;\n\tcolor: var(--text);\n\tfont-weight: normal;\n}\n\n.sidebar ul li a:hover{\n\tcolor: var(--primary);\n}\n\n.sidebar ul li a.active{\n\tcolor: var(--primary);\n\tfont-weight: bolder;\n}\n\n.sidebar ul ul{\n\tmargin-left: 1em;\n}\n\n.main{\n\tpadding-top: var(--topbar-height);\n\tmargin-left: var(--sidebar-width);\n}\n\n.main.nosidebar{\n\tmargin-left: .5rem;\n\tmargin-right: .5rem;\n}\n\n.article{\n\tmargin: 0 auto 3em auto;\n\tmax-width: 46rem;\n}\n\n.article img {\n\tdisplay: block;\n    max-width: 100%;\n\theight: auto;\n\tmargin: 0 auto;\n}\n\ntable.properties{\n\tmargin: 25px;\n\tborder-collapse: collapse;\n\twidth: 100%;\n}\n\ntable.properties td{\n\tvertical-align: top;\n\tpadding: .7rem;\n}\n\ntable.properties .propname{\n\tfont-weight: bolder;\n}\n\ntable.properties .propname.required{\n\ttext-decoration: underline;\n}\n\ntable.properties .default{\n\tcolor: var(--secondary);\n}\n\ntable.properties tr{\n\tborder-bottom: 1px solid var(--light);\n}\n\ntable.properties tr:last-child{\n\tborder-bottom: none;\n}\n\n\nspan.typedef{\n\tdisplay: inline-block;\n\tpadding: 0 .3em;\n\tcolor: var(--props-types-text);\n\tbackground: var(--props-types-bg);\n\tborder: 1px solid var(--props-types-border);\n\tborder-radius: .3em;\n\tmargin-right: .3em;\n\tfont-style: normal;\n\tfont-family: var(--font-mono);\n\tfont-size:.8em;\n\tletter-spacing: -.05em;\n}\n\nspan.typedef span{\n\tcolor: var(--props-oneof-text);\n}"
  },
  {
    "path": "packages/themes/light/styles/typography.css",
    "content": "body {\n\tcolor: var(--text);\n\tline-height: 1.6;\n\tfont-family: var(--font);\n}\n\n\na {\n\tcolor: var(--primary);\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput, button, select, textarea {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid var(--light);\n\tborder-radius: 2px;\n}\n\ninput:disabled {\n\tcolor: var(--light);\n}\n\ninput[type=\"range\"] {\n\theight: 0;\n}\n\nbutton {\n\tcolor: #333;\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\nbutton:active {\n\tbackground-color: #ddd;\n}\n\nbutton:focus {\n\tborder-color: #666;\n}\n\ncode{\n\tfont-family: var(--font-mono);\n\tfont-size: .9rem;\n\tbackground: var(--tag);\n\tborder: 1px solid var(--tag-border);\n\tcolor: var(--tag-text);\n\tpadding: 0 .2em;\n\tborder-radius: .2em;\n\twhite-space: nowrap;\n}\n\n\npre {\n\tbackground-color: var(--code);\n\tpadding: 1rem;\n\toverflow-x: auto;\n\tborder-radius: .7em;\n\tmargin:25px;\n}\n  \npre code {\n\tbackground: none;\n\tborder: none;\n\tpadding: 0;\n\twhite-space: pre;\n\tfont-size: .9rem;\n\tline-height: 1rem;\n\tcolor: var(--hl-text);\n}\n\n.example{\n\tborder: 1px solid var(--example-border);\n\tborder-radius: .7em;\n\tmargin:25px;\n}\n\n.example pre {\n\tborder-top-left-radius : 0;\n\tborder-top-right-radius : 0;\n}\n\nblockquote {\n\tbackground-color: var(--quote);\n\tpadding: 1rem 2rem;\n\tborder-left: 3px solid var(--quote-side);\n}\n"
  },
  {
    "path": "packages/themes/package.json",
    "content": "{\n  \"name\": \"@svelte-docs/themes\",\n  \"version\": \"1.0.1\",\n  \"description\": \"Themes set for the svelte-docs\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/AlexxNB/svelte-docs.git\"\n  },\n  \"author\": \"Alexey Schebelev\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/AlexxNB/svelte-docs/issues\"\n  },\n  \"homepage\": \"https://alexxnb.github.io/svelte-docs\",\n  \"dependencies\": {},\n  \"devDependencies\": {\n    \"svelte\": \"^3.15.0\"\n  }\n}\n"
  },
  {
    "path": "packages/themes/utils.js",
    "content": "import { current_page } from '@svelte-docs/get/routes';\n\nexport function set_active_link(node){\n    return {\n        destroy: current_page.subscribe(page => {\n            node.querySelectorAll('a').forEach(a => {\n            if(a.getAttribute('href') === page.url)\n                a.classList.add('active');\n            else\n                a.classList.remove('active')\n            });\n        })\n    }\n}\n\nexport function outside_click(node,handler){\n    document.body.addEventListener('click',handler);\n    return{\n        destroy(){\n            document.body.removeEventListener('click',handler);\n        }\n    }\n}"
  },
  {
    "path": "scripts/clean.js",
    "content": "const fs = require('fs-extra');\nconst path = require('path');\n\nconst subjects = ['node_modules','__DOCS__','__DEV__'];\n\nfunction cleanDirectory(dir='.') { \n    fs.readdirSync(dir).forEach(file => {\n        if(file === 'docs_src') return;\n        const filepath = path.join(dir,file);\n        if(subjects.includes(file)) {\n            console.log(filepath, 'removed');\n            fs.removeSync(filepath)\n        }else if(fs.statSync(filepath).isDirectory()){\n            cleanDirectory(filepath)\n        }\n    })\n}\n\nfs.removeSync('./template/src/theme');\ncleanDirectory();\n"
  },
  {
    "path": "scripts/install.js",
    "content": "const fs = require('fs-extra');\nconst path = require('path');\nconst { pour } = require('std-pour');\nconst ln = require('symlink-dir')\n\nconst PKGDIR = './packages';\nconst TPLDIR = './template';\n\nconst DEVDIR = './__DEV__'\n\nconst NMDIR = path.join(DEVDIR,'node_modules','@svelte-docs');\n\nasync function run(){\n\n    console.log('1. Symlink template to the Dev dir');\n    ln(TPLDIR,DEVDIR);\n\n\n    console.log('2. Do `npm i` in the Dev dir.');\n    await npm('install',TPLDIR);\n\n\n    console.log('3. Do `npm i` in all packages and symlinking it in template.');\n\n    fs.mkdirpSync(NMDIR);\n    fs.readdirSync(PKGDIR).forEach(async pkg => {\n        if(fs.existsSync( path.join(PKGDIR,pkg,'package.json')) ){\n            await npm('install',path.join(PKGDIR,pkg));\n            ln(path.join(PKGDIR,pkg),path.join(NMDIR,pkg));\n        }\n    })\n\n    console.log('Ready!');\n}\n\nasync function exec(command){\n    let ar = command.split(' ').map(e => e.trim()).filter(e => e !== '');\n    try{\n        await pour(ar.shift(), ar);\n    }catch(err){\n        throw new Error(err);\n    }\n}\n\nasync function npm(command,dir){\n    if(dir)\n        await exec(`npm --prefix ${dir} ${command}`);\n    else\n        await exec(`npm ${command}`);\n}\n\nrun();"
  },
  {
    "path": "scripts/link.js",
    "content": "const fs = require('fs');\nconst path = require('path');\nconst ln = require('symlink-dir')\n\nconst PKGDIR = './packages';\nconst TPLDIR = './templates/default';\nconst NMDIR = path.join(TPLDIR,'node_modules','@svelte-docs');\n\nfs.readdirSync(PKGDIR).forEach(pkg => {\n    if(fs.existsSync( path.join(PKGDIR,pkg,'package.json')) ){\n        ln(path.join(PKGDIR,pkg),path.join(NMDIR,pkg));\n    }\n})\n\n"
  },
  {
    "path": "template/.gitignore",
    "content": "node_modules\n__DOCS__"
  },
  {
    "path": "template/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"svelte-docs-template\",\n  \"version\": \"0.3.2\",\n  \"dependencies\": {\n    \"@svelte-docs/server\": \"^0.1.6\"\n  },\n  \"devDependencies\": {\n    \"@svelte-docs/core\": \"^0.10.13\",\n    \"@svelte-docs/publisher\": \"^0.2.3\",\n    \"@svelte-docs/themes\": \"^1.0.1\",\n    \"npm-run-all\": \"^4.1.5\"\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c node_modules/@svelte-docs/core/rollup.config.js\",\n    \"autobuild\": \"rollup -c node_modules/@svelte-docs/core/rollup.config.js -w\",\n    \"dev\": \"run-p start:dev start:pagewatch autobuild\",\n    \"start\": \"node node_modules/@svelte-docs/server\",\n    \"start:dev\": \"node node_modules/@svelte-docs/server --dev --single\",\n    \"start:pagewatch\": \"node node_modules/@svelte-docs/core/watcher\",\n    \"deploy\": \"npm run build && node node_modules/@svelte-docs/publisher\"\n  }\n}\n"
  },
  {
    "path": "template/src/examples.css",
    "content": "/* Styling of the examples view */\n\nbody {\n\tcolor: #333;\n\tmargin: 0;\n\tpadding: 8px;\n\tbox-sizing: border-box;\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n}\n\na {\n\tcolor: rgb(0,100,200);\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\na:visited {\n\tcolor: rgb(0,80,160);\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput, button, select, textarea {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n}\n\ninput:disabled {\n\tcolor: #ccc;\n}\n\ninput[type=\"range\"] {\n\theight: 0;\n}\n\nbutton {\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\nbutton:active {\n\tbackground-color: #ddd;\n}\n\nbutton:focus {\n\tborder-color: #666;\n}"
  },
  {
    "path": "template/src/includes/error.md",
    "content": "---\nlayout: 'no_sidebar'\n---\n# Page not found! #\n\n[Go to start page](/)\n\n<style>\n    h1,p {text-align:center}\n    h1 {color: var(--primary)}\n</style>"
  },
  {
    "path": "template/src/includes/logo.md",
    "content": "# [Svelte<span>Docs</span>](/) #\n\n<style>\n    span{color:var(--light)}\n</style>"
  },
  {
    "path": "template/src/includes/sidebar.md",
    "content": "* [Getting Started](getting-started)\n* Components\n    - [Button](components/button)\n* [Github](https://github.com/alexxnb/svelte-docs)"
  },
  {
    "path": "template/src/includes/topbar.md",
    "content": "* [Docs](getting-started)\n* [Github](https://github.com/alexxnb/svelte-docs)"
  },
  {
    "path": "template/src/pages/components/button.md",
    "content": "# Button\n\nMy button component\n\n## Usage\n```example\n<button>default</button>\n<button disabled>disabled</button> \n```\n\n## Properties\n```properties\ntype | Type of the button | 'default','error','success'('default')\ndisabled | Make button disabled | bool(false)\n```"
  },
  {
    "path": "template/src/pages/getting-started.md",
    "content": "# About my component\n\nIt is very cool button.\n\n## Installation\n\nRun this command:\n\n```shell\n$ npm install -D my-svelte-button\n```\n\nThen you can import it in your projects:\n\n```html\n<script> \n    import Button from 'my-svelte-button';\n</script>\n```\n"
  },
  {
    "path": "template/src/pages/index.md",
    "content": "---\nlayout: 'no_sidebar'\ntitle: false\n---\n# Great Success\n\nYou are ready to write documentation for new [Svelte](https://svelte.dev) thing!\n\nStart from editing files in `src/pages` directory.\n\n![Great Success](static/great-success.png \"Great Success\")\n\n> For more info visit the [Svelte-Docs Reference](https://alexxnb.github.io/svelte-docs/)"
  },
  {
    "path": "template/src/theme.css",
    "content": "/* Theme tunning: for full list ov variables visit the https://alexxnb.github.io/svelte-docs/theming */\n\n:root{\n\n    --somevar: #ff3e00;\n    \n}"
  },
  {
    "path": "template/svelte-docs.config.js",
    "content": "module.exports = {\n    // if you will serve docs in subdirictory use '/subdir/'\n    basepath: '/',\n\n    // theme \n    theme: 'default',\n\n    title: {\n        // constant part of page title\n        main: 'Svelte Thing Documentation',\n\n        // use first header's content as a part of page's title \n        // it looks for `# Header` and `## Header` on the current page\n        header: true,\n    },    \n\n    // URL to your favicon\n    favicon: 'static/favicon.png',\n \n    pathes: {\n        // directory for files, generated in development mode \n        dev: '__DOCS__/dev',\n\n        // directory for builted documentaton\n        build: '__DOCS__/dist',\n    },\n    \n    aliases:{\n        // Virtual packages \n        // <virtual_package_name>: <local_path>,\n        //\n        // Ex1: './Button.svelte': './../dist/Button.svelte',\n        // Ex2: 'mylib': './../dist/index.js', (don't miss `index` and `.js` at the end!)\n        //\n        //  Then you can use:\n        //  import Button from './Button.svelte';\n        //  import { Input } from 'mylib';\n    },\n    \n    preprocess: [\n        // preprocessors for Svelte if needed in Examples\n        // syntax same as for `preprocess` option in `rollup-plugin-svelte`\n        // Ex:  Import preprocessor at top of the config file:\n        //          import {markdown} from 'svelte-preprocess-markdown';\n        //      Then add it here:\n        //          markdown({filetype: 'svelte'}),\n\n    ]\n\n}"
  }
]