Repository: AlexxNB/svelte-docs
Branch: master
Commit: f360de962c01
Files: 124
Total size: 112.0 KB
Directory structure:
gitextract_uics36sh/
├── .github/
│ └── workflows/
│ ├── build-docs.yml
│ ├── npm-publish-core.yml
│ ├── npm-publish-create.yml
│ ├── npm-publish-publisher.yml
│ ├── npm-publish-server.yml
│ └── npm-publish-themes.yml
├── .gitignore
├── LICENSE
├── README.md
├── docs_src/
│ ├── .gitignore
│ ├── exlibris/
│ │ ├── Button.svelte
│ │ ├── Counter.svelte
│ │ ├── Input.svelte
│ │ ├── Modal.svelte
│ │ ├── chota.js
│ │ └── spoiler.md
│ ├── package.json
│ ├── src/
│ │ ├── examples.css
│ │ ├── includes/
│ │ │ ├── error.md
│ │ │ ├── github.svelte
│ │ │ ├── logo.md
│ │ │ ├── opengraph.svelte
│ │ │ ├── sidebar.md
│ │ │ └── topbar.md
│ │ ├── pages/
│ │ │ ├── builtins/
│ │ │ │ ├── example.md
│ │ │ │ └── properties.md
│ │ │ ├── config/
│ │ │ │ ├── aliases.md
│ │ │ │ ├── basepath.md
│ │ │ │ ├── file.md
│ │ │ │ ├── pathes.md
│ │ │ │ ├── preprocess.md
│ │ │ │ ├── theme.md
│ │ │ │ └── title.md
│ │ │ ├── getting-started.md
│ │ │ ├── index.md
│ │ │ ├── introduction.md
│ │ │ ├── publishing/
│ │ │ │ └── ghpages.md
│ │ │ ├── theming/
│ │ │ │ ├── custom-theme.md
│ │ │ │ ├── examples.md
│ │ │ │ ├── list/
│ │ │ │ │ ├── default.md
│ │ │ │ │ └── light.md
│ │ │ │ └── theme-tuning.md
│ │ │ ├── theming.md
│ │ │ └── writing/
│ │ │ ├── includes.md
│ │ │ ├── mdsv.md
│ │ │ ├── routing.md
│ │ │ ├── settings.md
│ │ │ ├── static.md
│ │ │ └── structure.md
│ │ └── theme.css
│ └── svelte-docs.config.js
├── package.json
├── packages/
│ ├── core/
│ │ ├── App.svelte
│ │ ├── aliases/
│ │ │ └── rollup_plugin_aliases.js
│ │ ├── builtins/
│ │ │ ├── Example/
│ │ │ │ ├── Example.svelte
│ │ │ │ ├── iframe.js
│ │ │ │ └── replacer.js
│ │ │ ├── Properties/
│ │ │ │ ├── parser.js
│ │ │ │ └── replacer.js
│ │ │ ├── blockparser.js
│ │ │ ├── rollup_plugin_builtins.js
│ │ │ ├── rollup_plugin_examples.js
│ │ │ └── svelte_preprocess_builtins.js
│ │ ├── config.js
│ │ ├── constants.js
│ │ ├── examples.main.js
│ │ ├── fixidents/
│ │ │ └── rollup_plugin_fixidents.js
│ │ ├── highlight.js
│ │ ├── indexer/
│ │ │ └── rollup_plugin_indexer.js
│ │ ├── main.js
│ │ ├── navigation.js
│ │ ├── package.json
│ │ ├── pages/
│ │ │ ├── rollup_plugin_pages.js
│ │ │ └── routes.js
│ │ ├── replacer/
│ │ │ └── rollup_plugin_replacer.js
│ │ ├── rollup.config.js
│ │ ├── stores.js
│ │ ├── syncer/
│ │ │ └── rollup_plugin_syncer.js
│ │ ├── themes.js
│ │ ├── utils.js
│ │ └── watcher.js
│ ├── create/
│ │ ├── cli.js
│ │ └── package.json
│ ├── publisher/
│ │ ├── package.json
│ │ └── publisher.js
│ ├── server/
│ │ ├── package.json
│ │ └── server.js
│ └── themes/
│ ├── default/
│ │ ├── components/
│ │ │ ├── Document.svelte
│ │ │ ├── Example.svelte
│ │ │ ├── Layout.svelte
│ │ │ ├── Properties.svelte
│ │ │ ├── Sections.svelte
│ │ │ └── Topbar.svelte
│ │ ├── info.md
│ │ ├── style.css
│ │ └── styles/
│ │ ├── fonts.css
│ │ ├── highlight.css
│ │ ├── layout.css
│ │ └── typography.css
│ ├── light/
│ │ ├── components/
│ │ │ ├── Example.svelte
│ │ │ ├── Layout.svelte
│ │ │ └── Properties.svelte
│ │ ├── info.md
│ │ ├── style.css
│ │ └── styles/
│ │ ├── highlight.css
│ │ ├── layout.css
│ │ └── typography.css
│ ├── package.json
│ └── utils.js
├── scripts/
│ ├── clean.js
│ ├── install.js
│ └── link.js
└── template/
├── .gitignore
├── package.json
├── src/
│ ├── examples.css
│ ├── includes/
│ │ ├── error.md
│ │ ├── logo.md
│ │ ├── sidebar.md
│ │ └── topbar.md
│ ├── pages/
│ │ ├── components/
│ │ │ └── button.md
│ │ ├── getting-started.md
│ │ └── index.md
│ └── theme.css
└── svelte-docs.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/workflows/build-docs.yml
================================================
name: Build Documentation
on:
push:
branches:
- master
paths:
- '.github/workflows/build-docs.yml'
- 'docs_src/*'
- 'docs_src/*/*'
- 'docs_src/*/*/*'
- 'docs_src/*/*/*/*'
- 'docs_src/*/*/*/*/*'
jobs:
docs-build-deploy:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@master
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: Build
run: cd docs_src && npm i && npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v2.4.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: ./docs_src/__DOCS__/dist/svelte-docs
================================================
FILE: .github/workflows/npm-publish-core.yml
================================================
name: Publish @svelte-docs/core
on:
push:
branches:
- master
paths:
- '.github/workflows/npm-publish-core.yml'
- 'packages/core/package.json'
jobs:
publish-npm:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12
registry-url: https://registry.npmjs.org/
- name: Installing NPM deps
run: npm --prefix packages/core install
- name: Copy Readme file
run: cp README.md packages/core/README.md
- name: Building & publishing on NPM
run: cd packages/core && npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
================================================
FILE: .github/workflows/npm-publish-create.yml
================================================
name: Publish create-svelte-docs
on:
push:
branches:
- master
paths:
- '.github/workflows/npm-publish-create.yml'
- 'packages/create/package.json'
jobs:
publish-npm:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12
registry-url: https://registry.npmjs.org/
- name: Installing NPM deps
run: npm --prefix packages/create install
- name: Copy Readme file
run: cp README.md packages/create/README.md
- name: Building & publishing on NPM
run: cd packages/create && npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
================================================
FILE: .github/workflows/npm-publish-publisher.yml
================================================
name: Publish @svelte-docs/publisher
on:
push:
branches:
- master
paths:
- '.github/workflows/npm-publish-publisher.yml'
- 'packages/publisher/package.json'
jobs:
publish-npm:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12
registry-url: https://registry.npmjs.org/
- name: Installing NPM deps
run: npm --prefix packages/publisher install
- name: Building & publishing on NPM
run: cd packages/publisher && npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
================================================
FILE: .github/workflows/npm-publish-server.yml
================================================
name: Publish @svelte-docs/server
on:
push:
branches:
- master
paths:
- '.github/workflows/npm-publish-server.yml'
- 'packages/server/package.json'
jobs:
publish-npm:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12
registry-url: https://registry.npmjs.org/
- name: Installing NPM deps
run: npm --prefix packages/server install
- name: Building & publishing on NPM
run: cd packages/server && npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
================================================
FILE: .github/workflows/npm-publish-themes.yml
================================================
name: Publish @svelte-docs/themes
on:
push:
branches:
- master
paths:
- '.github/workflows/npm-publish-themes.yml'
- 'packages/themes/package.json'
jobs:
publish-npm:
runs-on: ubuntu-18.04
steps:
- uses: actions/checkout@v1
- name: Setup Node
uses: actions/setup-node@v1
with:
node-version: 12
registry-url: https://registry.npmjs.org/
- name: Installing NPM deps
run: npm --prefix packages/themes install
- name: Building & publishing on NPM
run: cd packages/themes && npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
__DOCS__
template/src/theme
__DEV__
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2019 Alexey Schebelev
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Svelte-Docs
<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>
Svelte-Docs is a rapid way to write documentation for your Svelte components.
> **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.**
## Features
* Based on MDSv format, which allows write documentation in Markdown mixed with Svelte's features.
* Import and use any Svelte components right inside a markup
* Documentation building as static files, so you can publish it everywhere
* Customizable themes
* Built-in deploy on Github Pages
## Getting Started
Just run:
```bash
npm init svelte-docs
```
Then [write](https://alexxnb.github.io/svelte-docs/writing/mdsv) the documentation and [build](https://alexxnb.github.io/svelte-docs/start) it into static site.
## Documentation
For more info see the [Documentation](https://alexxnb.github.io/svelte-docs).
================================================
FILE: docs_src/.gitignore
================================================
node_modules
__DOCS__
================================================
FILE: docs_src/exlibris/Button.svelte
================================================
<script>
export let primary;
export let error;
</script>
<button class:primary class:error><slot /></button>
<style>
button {
padding: .8rem 1.5rem;
color: #3f4144;
background: #d2d6dd;
border-radius: 4px;
border: 1px solid transparent;
line-height: 1;
text-align: center;
transition: opacity 0.2s ease;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.primary{
color: #EEEEEE;
background: #14854F;
}
.error{
color: #EEEEEE;
background: #d43939;
}
</style>
================================================
FILE: docs_src/exlibris/Counter.svelte
================================================
<script>
let count = 0;
</script>
<span class="counter">
<span class="minus" on:click={e => count--}>-</span>
<span class="value">{count}</span>
<span class="plus" on:click={e => count++}>+</span>
</span>
<style>
.counter{
background-color: #f9ac00;
padding: 2px;
border-radius:5px;
}
.value{
display: inline-block;
background-color: white;
text-align: center;
padding:0 5px;
border-radius:5px;
color: black;
}
.minus,.plus{
display: inline-block;
color: white;
width:15px;
text-align: center;
font-weight: bold;
cursor:pointer;
}
</style>
================================================
FILE: docs_src/exlibris/Input.svelte
================================================
<script>
/** @type {string} Name of the input */
export let name;
/** @type {('text','number','range','date')} Type of the input */
export let type = 'text';
/**
* Should the input be disabled
* @type {bool}
*/
export let disabled = false;
/** @type {(number|string)} Size of the input */
export let size = 1;
</script>
================================================
FILE: docs_src/exlibris/Modal.svelte
================================================
<script>
import {fade} from 'svelte/transition';
export let open = false;
</script>
{#if open}
<div class="container" transition:fade={{ duration: 200 }}>
<div class="background" on:click={e => open=false}/>
<div class="modal"><slot></slot></div>
</div>
{/if}
<style>
.container{
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
z-index:10000;
}
.background{
position:fixed;
top:0px;
left: 0px;
width:100vw;
height:100vh;
background-color:black;
opacity: 0.5;
}
.modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width:300px;
background-color: white;
padding: 10px;
}
</style>
================================================
FILE: docs_src/exlibris/chota.js
================================================
export {default as Button} from './Button.svelte';
================================================
FILE: docs_src/exlibris/spoiler.md
================================================
> *MDSv is really cool!*
================================================
FILE: docs_src/package.json
================================================
{
"private": true,
"name": "svelte-docs-template",
"version": "0.2.0",
"dependencies": {
"@svelte-docs/server": "^0.1.6"
},
"devDependencies": {
"@svelte-docs/core": "^0.10.13",
"@svelte-docs/publisher": "^0.2.3",
"@svelte-docs/themes": "^1.0.1",
"npm-run-all": "^4.1.5",
"rollup": "^2.35.1"
},
"scripts": {
"build": "rollup -c node_modules/@svelte-docs/core/rollup.config.js",
"autobuild": "rollup -c node_modules/@svelte-docs/core/rollup.config.js -w",
"dev": "run-p start:dev start:pagewatch autobuild",
"start": "node node_modules/@svelte-docs/server",
"start:dev": "node node_modules/@svelte-docs/server --dev --single",
"start:pagewatch": "node node_modules/@svelte-docs/core/watcher",
"deploy": "npm run build && node node_modules/@svelte-docs/publisher"
}
}
================================================
FILE: docs_src/src/examples.css
================================================
/* Styling of the examples view */
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a {
color: rgb(0,100,200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0,80,160);
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
input[type="range"] {
height: 0;
}
button {
background-color: #f4f4f4;
outline: none;
}
button:active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
================================================
FILE: docs_src/src/includes/error.md
================================================
---
layout: 'no_sidebar'
---
# Page not found! #
[Go to start page](/)
<style>
h1,p {text-align:center}
h1 {color: var(--primary)}
</style>
================================================
FILE: docs_src/src/includes/github.svelte
================================================
<script>
import { cubicInOut } from 'svelte/easing';
import { tweened } from 'svelte/motion';
/** @type {string} URL to repository */
export let url;
/** @type {bool} Should animation play on hover */
export let animation = false;
let hover = false;
function mEnter () {
if(!animation) return;
hover=true
}
function mLeave () {
hover=false
}
const rotation = tweened(0, {
duration: 500,
easing: cubicInOut
});
function slideLeft(node) {
return {
delay:0,
duration:500,
css: t => `overflow:hide; width: ${cubicInOut(t) * 50}px; opacity: ${t}`
};
}
$: $rotation = (hover) ? 100 : 0;
</script>
<a class="github" href={url} target="_blank"
on:mouseenter={mEnter} on:mouseleave={mLeave}><svg viewBox="0 0 24 24" style="transform: rotate(-{$rotation}deg)">
<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>
</svg>{#if hover}<span class="label" transition:slideLeft>Github</span>{/if}</a>
<style>
.github {
color:var(--text);
}
.github:hover{
text-decoration: none;
}
.label{
display: inline-block;
}
svg{
display: inline-block;
vertical-align: text-bottom;
width:24px;
height:24px;
fill:currentColor;
}
</style>
================================================
FILE: docs_src/src/includes/logo.md
================================================
import {current_page} from '@svelte-docs/get/routes';
{#if $current_page.url !== ''}
# [](/) #
{/if}
<style>
img{
height: 30px;
vertical-align: middle;
}
</style>
================================================
FILE: docs_src/src/includes/opengraph.svelte
================================================
<script>
import {current_page} from '@svelte-docs/get/routes';
import maintitle from '@svelte-docs/get/maintitle';
let descr = 'A rapid way to document your Svelte things';
let img = 'https://alexxnb.github.io/svelte-docs/static/social.png';
$: title = $current_page.title ? $current_page.title + ' — ' + maintitle : maintitle;
$: url = `https://alexxnb.github.io/svelte-docs/${$current_page.url}`;
</script>
<svelte:head>
<meta property="og:title" content={title}>
<meta property="og:description" content={descr}>
<meta property="og:image" content={img}>
<meta property="og:url" content={url}>
<meta name="twitter:title" content={title}>
<meta name="twitter:description" content={descr}>
<meta name="twitter:image" content={img}>
<meta name="twitter:card" content="summary_large_image">
</svelte:head>
================================================
FILE: docs_src/src/includes/sidebar.md
================================================
* [Introduction](introduction)
* [Getting Started](getting-started)
* Writing docs
- [What is MDSv](writing/mdsv)
- [Structure](writing/structure)
- [Includes](writing/includes)
- [Routing](writing/routing)
- [Static files](writing/static)
- [Page settings](writing/settings)
* [Configuration](config/file)
- [basepath](config/basepath)
- [theme](config/theme)
- [title](config/title)
- [pathes](config/pathes)
- [aliases](config/aliases)
- [preprocess](config/preprocess)
* Builtins
- [Example](builtins/example)
- [Properties](builtins/properties)
* Styling
- [Theme tuning](theming/theme-tuning)
- [Examples view](theming/examples)
- [Custom theme](theming/custom-theme)
- List of themes
- [Default](theming/list/default)
- [Light](theming/list/light)
* Publishing
- [GitHub Pages](publishing/ghpages)
================================================
FILE: docs_src/src/includes/topbar.md
================================================
import Github from './github.svelte';
import Opengraph from './opengraph.svelte';
<Opengraph />
* [Docs](getting-started)
* <Github animation url="https://github.com/alexxnb/svelte-docs"/>
================================================
FILE: docs_src/src/pages/builtins/example.md
================================================
# Example code block
When you document your Svelte component you want show it in action. You can do it with *Example code block*.
```markdown
```example
<script>
let name='Button';
</script>
<button>{name}</button>
<style>
button{background: red}
</style>
```
```
```example
<script>
let name='Button';
</script>
<button>{name}</button>
<style>
button{background: red}
</style>
```
### Hide script and/or style blocks
Sometimes no need to show what is inside the *style* or *script* blocks. You can use `script:hide` and `style:hide` modifiers.
```markdown
```example script:hide style:hide
<script>
let name='Button';
</script>
<button>{name}</button>
<style>
button{background: red}
</style>
```
```
```example script:hide style:hide
<script>
let name='Button';
</script>
<button>{name}</button>
<style>
button{background: red}
</style>
```
### Set fixed height of the example
By default result part of the example has flexible height, which changing within content. But you can lock height with `height:<pixels>` modifier.
```markdown
```example height:200
...
```
```
```example height:200
<script>
import Modal from './Modal.svelte';
let open = false;
</script>
<button on:click={()=>open=!open}>Show Modal</button>
<Modal {open}>
<h1>Hello!</h1>
<p>I'm modal.</p>
</Modal>
```
### Import in examples
You can import any installed NPM package or local file as you usually do inside ordinary `*.svelte` file.
```example
<script>
import {Button} from 'svelte-chota';
</script>
<Button primary>Button</Button>
```
Also you can import any local file by relative path according documents directory root:
```example
<script>
import Button from './../mylib/Button.svelte';
</script>
<Button>Button</Button>
```
Other way to import local files - using aliases (see [config.aliases](config/aliases)).
```javascript
// svelte-docs.config.js
...
aliases:{
'./Button.svelte': './../mylib/Button.svelte',
'my-button-package': './../mylib/Button.svelte'
},
...
```
```example
<script>
import Button from './Button.svelte';
import Button2 from 'my-button-package';
</script>
<Button>Button</Button>
<Button2 error>Button2</Button2>
```
### Styling
Styles 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.
================================================
FILE: docs_src/src/pages/builtins/properties.md
================================================
# Properties
Usually all components you want to document have some properties, which should be described. Properties code block allows do it as easy as possible.
Suppose you have a *Input.svelte* component with following properties:
```html
<script>
export let name;
export let type = 'text';
export let disabled = false;
export let size = 1;
</script>
```
There are four properties:
1. *name* - it hasn't default value, so it is not optional. Probably it should be string type, but who knows.
2. *type* - it is string value, optional because has default value. What other values may be used?
3. *disabled* - it is simple: optional, type bool, false by default.
4. *size* - easy: optional, type number, 1 by default. Nope! Also it could be string like '20px'.
So lets create fancy table of properties for this component:
```markdown
```properties
name | Name of the input | string
type | Type of the input | 'text','number','range','date'('text)
disabled | Should the input be disabled | bool(false)
size | Size of the input | number/string(1)
```
```
```properties
name | Name of the input | string
type | Type of the input | 'text','number','range','date'('text)
disabled | Should the input be disabled | bool(false)
size | Size of the input | number/string(1)
```
Now user of your component will know all about its properties.
### Describing property
* Each line of the *properties* code block must have three parts separated by `|` sign: *name* of the property, *description* and *type* of the property.
* If property may have one of the defined values, list them separated by commas: `'a','b','c'`
* If property may be various types - list them with `/` separator: `number/string/bool`,`'a','b','c'/bool`
* If property has default value add it in `(...)` right after *types*: `bool(true)`, `string/number('foo')`
### Autogenerated properties
Another 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:
```html
// ./../mylib/Input.svelte
<script>
/** @type {string} Name of the input */
export let name;
/** @type {('text','number','range','date')} Type of the input */
export let type = 'text';
/**
* Should the input be disabled
* @type {bool}
*/
export let disabled = false;
/** @type {(number|string)} Size of the input */
export let size = 1;
</script>
```
You should write only description and types in the comments. Property name and default value will be parsed automaticly.
Then just place a path to the this component inside Properties code block:
```markdown
```properties
./../mylib/Input.svelte
```
```
And get the result:
```properties
./exlibris/Input.svelte
```
================================================
FILE: docs_src/src/pages/config/aliases.md
================================================
# aliases option
Option `aliases` is the list of aliases for you local component's paths.
Suppose you have following structure of your project:
```javascript
my-project
├── docs_src
│ └── ...
├── mycomponent
│ └── Counter.svelte
└── ...
```
And 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:
```markdown
```example
<script>
import Counter from './../mycomponent/Counter.svelte';
</script>
<Counter />
```
```
But it is not looks good, especially when you will publish your components on NPM and want to teach users how to use it .
So you can add *virtual package* using `aliases` option:
```javascript
aliases:{
...
"my-counter-package": "./../mycomponent/Counter.svelte",
...
}
```
And then you can import this *virtual package* inside of the Example:
```markdown
```example
<script>
import Counter from 'my-counter-package';
</script>
<Counter />
```
```
================================================
FILE: docs_src/src/pages/config/basepath.md
================================================
# Basepath option
Option `basepath` is a part of URL to the root documentation site.
By default `basepath` is equal `'/'`, it is mean that documentation will be available by URL like https://mydocs.com or https://docs.mysite.com.
When 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.
> If you plan to publish documentation at the Github Pages of your repository, then set `basepath: '/name-of-your-repo/'`.
================================================
FILE: docs_src/src/pages/config/file.md
================================================
# Configuration
At 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.
================================================
FILE: docs_src/src/pages/config/pathes.md
================================================
# Pathes option
There are two pathes you can change.
* `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!**
* `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.
> In most cases you don't need to change these options.
================================================
FILE: docs_src/src/pages/config/preprocess.md
================================================
# Preprocess option
You 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`.
```javascript
const markdown = require('svelte-preprocess-markdown');
module.exports={
...
preprocess: [
...
markdown({filetype: 'svelte'}),
...
]
...
}
```
Then all your examples will be preprocessed:
```markdown
```example
<script>
let name = 'World';
</script>
# Hello, {name}!
```
```
================================================
FILE: docs_src/src/pages/config/theme.md
================================================
# Theme option
Choose theme for documentation site. List of avialable themes you can find on the sidebar.
```js
...
theme: 'default',
...
```
Also you can write path to the local dir here:
```js
...
theme: './src/my-own-theme',
...
```
> In this case, it should be directory with [valid theme content](theming/custom-theme).
================================================
FILE: docs_src/src/pages/config/title.md
================================================
# Title option
There are two properties which can be changed:
* `title.main` - this is constant part of the page's title.
* `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.
================================================
FILE: docs_src/src/pages/getting-started.md
================================================
# Getting started
### Initialize Svelte-docs
Just run this command in the root directory of your project:
```bash
npm init svelte-docs
```
It 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.
### Edit your docs
Switch to the created directory, ex.:
```bash
cd docs_srv
```
Run docs in development mode on the local server:
```bash
npm run dev
```
Point your browser on [http://localhost:5000](http://localhost:5000) to see your docs in action.
Now you can edit files in `src/pages` directory and browser will be reloaded on each save.
### Build the documentation site
As soon as documentation ready for release you need to run the build:
```bash
npm run build
```
All 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.
================================================
FILE: docs_src/src/pages/index.md
================================================
---
layout: 'no_sidebar'
title: false
---
<div class="hero">
<div class="banner">
<p>A rapid way to document your Svelte things</p>
</div>
<div class="buttons">
<a href="introduction">Introduction</a>
<a href="getting-started">Getting Started</a>
</div>
</div>
<style>
.hero{
display: flex;
flex-direction: column;
height:100vh;
margin-top: calc(var(--topbar-height) * -1);
}
.banner{
flex: 1 0 auto;
margin-top: 100px;
}
.banner img{
width: 300px;
}
.banner p{
font-size: 1.5em;
font-weight: 600;
text-align: center;
}
.buttons{
flex: 0 0 auto;
text-align: center;
margin-bottom: 100px;
}
.buttons a{
display: inline-block;
padding: 10px;
color: white;
background: var(--primary);
text-decoration: none;
opacity: 1;
border-radius: 3px;
}
.buttons a:hover{
opacity: .8;
}
</style>
================================================
FILE: docs_src/src/pages/introduction.md
================================================
# Introducing
## Features
Svelte-Docs is a rapid way to write documentation for your [Svelte](https://svelte.dev) components.
> **<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>**
* Based on [MDSv](writing/mdsv) format, which allows writing documentation in Markdown mixed with Svelte's features.
* Import and use any Svelte components right inside a markup
* Documentation building as static files, so you can publish it everywhere
* Customizable [themes](theming)
* Built-in [deploy](publishing/ghpages) on Github Pages
## Zero-config
Just run:
```bash
npm init svelte-docs
```
Then [write](writing/mdsv) the documentation and [build](start) it into static site.
## Built-ins
### Examples
Example block shows how your components work. It provides an encapsulated CSS environment, virtual imports and ability to use any Svelte preprocessor.
```example
<button>My button</button>
```
### Properties
Properties 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.
```properties
type | Type of the button | 'default','error','warning'('default')
disabled | Should the button be disabled | bool(false)
```
<style>
.red{
color: var(--primary);
}
</style>
================================================
FILE: docs_src/src/pages/publishing/ghpages.md
================================================
# Publishing on Github Pages
Svelte-docs has built-in publishing tool to deploy builded documentation into *gh-pages* branch of your current project.
To do it just run command in you documents source directory at any time:
```bash
npm run deploy
```
Then you should confirm publishing and wait some time while documents will be deployed to the GitHub.
> Your document sources directory or any parent directory should contents `.git` folder with initialized Github repository.
> You must set the [config.basepath](config/basepath) too the value equal `/you-repository-name/`;
================================================
FILE: docs_src/src/pages/theming/custom-theme.md
================================================
# Custom theme
You can make your own theme and use its directory path as [config.theme](config/theme) value. There are several files which must exist:
```bash
themedir
├── components
| ├── Layout.svelte # Page layout
| ├── Error.svelte # Error page layout
| ├── Example.svelte # Example component
| └── Properties.svelte # Properties component
├── info.md # Some info about the theme
└── style.css # CSS Styles
```
The 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)
================================================
FILE: docs_src/src/pages/theming/examples.md
================================================
# Examples view CSS
Examples 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.
## import styles
You can include CSS file from the local directory, npm package or from CDN:
```css
@import './../mystyles.css';
@import './node_modules/my-favorite-css-framework';
@import 'https://anycdn.com/my-favorite-css-framework';
```
> 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.
================================================
FILE: docs_src/src/pages/theming/list/default.md
================================================
import Info from '@CWD/../packages/themes/default/info.md';
# Default
<Info />
================================================
FILE: docs_src/src/pages/theming/list/light.md
================================================
import Info from '@CWD/../packages/themes/light/info.md';
# Light
<Info />
================================================
FILE: docs_src/src/pages/theming/theme-tuning.md
================================================
# Theme tuning
Each theme allows to tune some predefined CSS variables which are listed in themes descriptions.
Add values you want to change into the `src/theme.css` as shown below:
```css
:root{
--primary: #009225;
--secondary: #3f3f70;
}
```
Also you may write your own CSS styles there, they will overwrite default styles for same selectors:
```css
h1{
color: red;
text-transform: uppercase;
}
```
================================================
FILE: docs_src/src/pages/theming.md
================================================
# Theming
Svelte-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.
### Themes
At 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.
### Colors
To tune the colors of the current theme just edit custom properties in the `src/theme/styles.css` file.
### Styles
All 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.
### Layout
You 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.
================================================
FILE: docs_src/src/pages/writing/includes.md
================================================
# Includes
In 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:
### sidebar.md
This file contains list of content on the left sidebar. This is your documentation's structure reflected in markdown code.
Let's look on example:
```markdown
* Getting Started
- [Install](install)
* [Components](components/list)
- [Button](components/button)
- [Input](components/input)
* [Github](https://github.com/me/my-svelte-lib)
```
Usually 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.
URL 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.
External URLs will be opened in new window.
### logo.md
Commonly used for showing any logotype. Just write something like:
```markdown
# MyComponent #
```
Or you can use an image as your logotype:
```markdown
#  #
```
### topbar.md
Play with right section of the topbar. For example add some links there:
```markdown
* [Home](/)
* [Github](https://github.com/me/my-svelte-lib)
```
### error.md
Just an error message which will be shown when user requests unexistent URL.
## Custom includes
You are free to create any `*.md` files which you can to include on any page you want using special import path:
```html
<script>
import Banner from '@INCLUDES/banner.md';
</script>
<Banner />
```
================================================
FILE: docs_src/src/pages/writing/mdsv.md
================================================
<script>
import Counter from './../../../exlibris/Counter.svelte';
import Spoiler from './../../../exlibris/spoiler.md';
let items = ['item0','item1'];
function add() { items = [...items,'item'+items.length] }
function del() { items = items.slice(0,-1) }
</script>
# What is MDSv
MDSv is a Svelte component written in Markdown syntax. You can import and use any Svelte components right inside the markdown markup.
For more info please visit the [svelte-preprocess-markdown](https://alexxnb.github.io/svelte-preprocess-markdown/) site.
Markdown is a fast and comfortable way to write documentation, but MDSv providing full power of Svelte to your docs.
This document also wrote in MDSv format, so we can do this right inside the document...
```svelte
<script>
let items = ['item0','item1'];
function add() { items = [...items,'item'+items.length] }
function del() { items = items.slice(0,-1) }
</script>
...
{#each item as item}
* {item}
{/each}
<button on:click={add}>Add Item</button>
<button on:click={del}>Del Item</button>
```
... and get the result:
{#each items as item}
* {item}
{/each}
<button on:click={add}>Add Item</button>
<button on:click={del}>Del Item</button>
Or we can import any Svelte component and use it where we want:
```markdown
<script>
import Counter from './Counter.svelte';
</script>
*The counter:* <Counter />
```
... and it will work:
*The counter:* <Counter />
You even can import other `*.md` files:
```markdown
<!-- spoiler.md -->
> *MDSv is really cool!*
<!-- document.md -->
<script>
import Spoiler from './spoiler.md';
</script>
**Spoiler:**
<Spoiler />
```
... and it will be included in the specified place:
**Spoiler:**
<Spoiler />
================================================
FILE: docs_src/src/pages/writing/routing.md
================================================
# Routing
*Svelte-Docs* has built-in routing system based on files structure in the `src/pages` directory:
```bash
src # URL path part:
└── pages #
├── components #
│ ├── list.md # components/list
│ ├── button.md # components/button
│ └── input.md # components/input
├── install.md # install
└── index.md # /
```
You 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)`.
================================================
FILE: docs_src/src/pages/writing/settings.md
================================================
# Pages configuration
You can configure every pages with few parameters in markdown's metatags block at the top of needed pages.
```markdown
---
parameter1: value1
parameter2: value2
---
...
```
### title
You can specify title of current page. It is overwrite [`title.header`](config/title) config option.
```markdown
---
title: 'My page'
---
...
```
### layout
Every 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.
In this example, page will render in fullscreen layout without sidebar on the left side(assume default theme):
```markdown
---
layout: 'no_sidebar'
---
...
```
================================================
FILE: docs_src/src/pages/writing/static.md
================================================
# Static files
Any static files used in documents such as images, icons or files for download are stored in `src/static` directory.
For example, if you placed image in the `src/static/great-success.png` then you can include it by following code:
```markdown
;
```
... and get image on your page:
;
================================================
FILE: docs_src/src/pages/writing/structure.md
================================================
# Structure
Let's see the structure of the doc's project directory:
```bash
src
├── includes
├── pages
├── static
├── examples.css
└── theme.css
...
svelte-docs.config.js
```
It is very simple, sources of you documentation are live in `src` directory:
* **includes** - there are small pieces of the MDSv code that can be reusable within any document page
* **pages** - all pages of your documentation are stored in this directory
* **static** - place here any static assets using in your documentation (files, images, icons and etc.)
* **examples.css** - it is styles using within examples
* **theme.css** - tune current documentation theme with variables, add new styles or `@import` any css file.
================================================
FILE: docs_src/src/theme.css
================================================
/* Theme tunning: for full list ov variables visit the https://alexxnb.github.io/svelte-docs/theming */
================================================
FILE: docs_src/svelte-docs.config.js
================================================
module.exports = {
// if you will serve docs in subderictory use '/subdir/'
basepath: '/svelte-docs/',
theme: 'default',
title: {
// constant part of page title
main: 'Svelte-Docs Reference',
// use first header's content in the window title
// looking for `# Header` and `## Header` on the current page
header: true,
},
// URL to your favicon
favicon: 'static/favicon.png',
// URL to your social link preview image (best is 1200×630)
preview: 'https://alexxnb.github.io/svelte-docs/static/social.png',
pathes: {
// directory for files, generated in development mode
dev: '__DOCS__/dev',
// directory for builted documentaton
build: '__DOCS__/dist',
},
aliases:{
// Virtual packages in Examples
// <virtual_package_name>: <local_path>,
//
// Ex1: './Button.svelte': './../dist/Button.svelte',
// Ex2: 'mylib': './../dist/index.js', (don't miss `index` and `.js` at the end!)
//
// Then you can use in Example:
// import Button from './Button.svelte';
// import { Input } from 'mylib';
'svelte-chota': './exlibris/chota.js',
'./../mylib/Button.svelte': './exlibris/Button.svelte',
'./Button.svelte': './exlibris/Button.svelte',
'./Modal.svelte': './exlibris/Modal.svelte',
'my-button-package': './exlibris/Button.svelte',
},
preprocess: [
// preprocessors for Svelte if needed in Examples
// syntax same as for `preprocess` option in `rollup-plugin-svelte`
// Ex: Import preprocessor at top of the config file:
// import {markdown} from 'svelte-preprocess-markdown';
// Then add it here:
// markdown({filetype: 'svelte'}),
]
}
================================================
FILE: package.json
================================================
{
"private": true,
"version": "0.2.0",
"scripts": {
"postinstall": "node scripts/install",
"link": "node scripts/link",
"clean": "node scripts/clean",
"dev": "npm --prefix __DEV__ run dev",
"build": "npm --prefix __DEV__ run build",
"start": "npm --prefix __DEV__ run start",
"init": "node ./packages/create/cli.js"
},
"keywords": [],
"author": "Alexey Schebelev",
"license": "MIT",
"devDependencies": {
"fs-extra": "^8.1.0",
"std-pour": "^1.1.0",
"symlink-dir": "^3.1.1"
},
"dependencies": {}
}
================================================
FILE: packages/core/App.svelte
================================================
<script>
// import theme
import '@THEME/style.css';
import '@SRC/theme.css';
import Layout from '@THEME/components/Layout.svelte';
import {initNavigation} from './navigation.js';
import {onMount} from 'svelte';
onMount(()=>{
return initNavigation();
})
</script>
<Layout />
================================================
FILE: packages/core/aliases/rollup_plugin_aliases.js
================================================
import path from 'path';
import fs from 'fs';
import { ERR } from './../utils.js';
import config from './../config';
// handle imports of virtual packages
export default function() {
return {
name: 'rollup_plugin_aliases',
resolveId(id,importer) {
if(id.endsWith('.svelte') && config.aliases[id] !== undefined){
return this.resolve(config.aliases[id],importer);
}
return config.aliases[id] ? id : null;
},
load(id) {
if(config.aliases[id] !== undefined){
const pkgpath = path.resolve(config.aliases[id]);
if (!fs.existsSync(pkgpath)) ERR('Config.aliases: No such file',pkgpath);
if(pkgpath.endsWith('.svelte'))
return `export {default} from '${pkgpath}';`;
else
return `export * from '${pkgpath}';`;
}else
return null;
}
}
}
================================================
FILE: packages/core/builtins/Example/Example.svelte
================================================
<script context="module">
let uid = 1;
</script>
<script>
import ExampleLayout from '@svelte-docs/get/ExampleLayout';
import basepath from '@svelte-docs/get/basepath';
export let name;
export let code;
export let height = false;
const fixedheight = Number.isInteger(height);
let iframe;
let iframe_id = uid++;
let iframe_height = fixedheight ? height : 70;
const srcdoc = `<!doctype html>
<html style="height: auto !important">
<head>
<meta charset='utf-8'>
<base href='${basepath}' />
<link rel='stylesheet' href='examples.css'>
<scr`+`ipt defer src='examples.js'></scr`+`ipt>
</head>
<body style="height: auto !important"></body>
</html>`;
const sendMessage = function(){
iframe.contentWindow.postMessage({"COMPONENT":name,iframe_id}, "*");
}
window.addEventListener('message', function (event) {
if(event.data.iframe_id && event.data.iframe_id === iframe_id){
if (!fixedheight && event.data.hasOwnProperty("HEIGHT")) {
iframe_height = event.data.HEIGHT;
}
}
})
</script>
<ExampleLayout>
<iframe slot="result"
on:load={sendMessage}
style="height:{iframe_height}px"
title="Result"
scrolling="no"
bind:this={iframe}
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"
{srcdoc}
></iframe>
<pre slot="code" class="hljs"><code>{@html code.trim()}</code></pre>
</ExampleLayout>
<style>
pre{margin:0px;}
iframe{
width: 100%;
display: block;
border:none;
}
</style>
================================================
FILE: packages/core/builtins/Example/iframe.js
================================================
import { addListener } from 'resize-detector';
let iframe_id = 0;
function getHeight(){
return document.documentElement.offsetHeight
}
window.addEventListener('message', function (event) {
if (event.data.hasOwnProperty("COMPONENT")) {
const Example = app[event.data.COMPONENT];
iframe_id = event.data.iframe_id;
addListener(document.body, (e)=>{
event.source.postMessage({ 'HEIGHT': getHeight(), iframe_id }, "*");
});
new Example({
target: document.body,
props: {}
});
}
});
================================================
FILE: packages/core/builtins/Example/replacer.js
================================================
import highlight from './../../highlight';
import { ExamplesStore } from './../../stores';
export default (content,params,name) => () => {
ExamplesStore.set(name,content);
if(params.script && params.script === 'hide'){
content = content.replace(/^[\t ]*<script>[\S\s]*?<\/script>\n?/m,'');
}
if(params.style && params.style === 'hide'){
content = content.replace(/^[\t ]*<style.*>[\S\s]*?<\/style>\n?/m,'');
}
let height = params.height || 'false';
return `<Example name="${name}" code={"${highlight(content,params.lang,true)}"} height={${height}}/>`;
}
================================================
FILE: packages/core/builtins/Properties/parser.js
================================================
import espree from 'espree';
export function getInterface(source){
const code = extractScriptTag(source);
const proplist = parseJS(code).filter(o => o.type==='property');
const jsdoc = parseJSDoc(code);
return proplist.reduce((list,prop) => {
let info = {type:undefined,descr:undefined,...jsdoc.find(v => v.index === prop.index)};
const propObj = {
name: prop.name,
description: info.descr,
attr: {
default: prop.default,
types: parseTypes(info.type)
}
};
return [...list,propObj];
},[]);
}
function extractScriptTag(source){
const extractScriptRegex = /<script(.*?)>([\s\S]+?)<\/script>/gi;
let match = extractScriptRegex.exec(source);
if (match && (match[1].includes(`context="module"`) || match[1].includes(`context='module'`))) {
match = extractScriptRegex.exec(source);
}
return match === null ? '' : match[2].trim();
}
function parseJS(code){
const node = espree.parse(code,{ecmaVersion:10,sourceType: "module"});
let vars = {};
return node.body.reduce((list,node) => {
if(node.type === 'FunctionDeclaration' || node.type === 'VariableDeclaration'){
if(node.declarations) node.declarations.forEach(dec => vars[dec.id.name] = parseDeclarator(dec,node.kind));
return list;
}
const sample = {index:node.start,type:'unknown',name:'unknown',default:undefined};
if(node.declaration === null && node.specifiers.length > 0){
return [...list,...node.specifiers.reduce((sublist,spec)=>{
sublist.push({...sample,...(vars[spec.local.name] || {}),...{name:spec.exported.name}});
return sublist;
},[])]
}
if(node.type === 'ExportNamedDeclaration' && node.declaration){
const decs = node.declaration.declarations ? Array.from(node.declaration.declarations) : [node.declaration];
return [...list,...decs.reduce((sublist,dec)=>{
sublist.push({...sample,...parseDeclarator(dec,node.kind)});
return sublist;
},[])]
}
return list;
},[]);
}
function parseDeclarator(dec,kind){
if(dec.type === 'FunctionDeclaration'){
return {type:'method',name:dec.id.name}
}
if(dec.type === 'VariableDeclarator'){
const def = dec.init === null ? undefined :
dec.init.type === 'Literal' ? dec.init.raw :
dec.init.type === 'FunctionExpression' ? 'func()' : undefined;
const type = kind === 'const' ? 'const' : 'property';
return {type,name:dec.id.name,default:def}
}
}
function parseJSDoc(code){
let list = [];
let match;
const re = /(\/\*\*[\s\S]+?\*\/)[\s]+/g;
while(match = re.exec(code)){
const index = match['index']+match[0].length;
const jsdoc = match[1].replace(/(\/\*\*|\*\/|^\s*\*(?!\/))/gm,'').trim();
const parsed = /((?:^[^@].+$\s+)+)*^[ \t]*@type +\{(.+)\} *(.+)?/m.exec(jsdoc);
if(!parsed) continue;
const descr = [parsed[1],parsed[3]].join("").trim();
list.push({index,type:parsed[2],descr})
}
return list;
}
function parseTypes(code){
if(!code) return [];
const re = /(^\(|\)$)/g;
return code.replace(re,'').split('|').map(type => {
const values = type.replace(re,'').split(',');
return values.length === 1 ? values[0] : values;
});
}
================================================
FILE: packages/core/builtins/Properties/replacer.js
================================================
import marked from 'marked';
import fs from 'fs-extra';
import { PROPS_CMP } from './../../constants';
import { getRealImportedPath } from './../../utils';
import { getInterface } from './parser';
import('svelte/register');
export default (content,params,name) => () => {
let props = [];
if(!/[|\n]/.test(content) && /\//.test(content)){
const filepath = getRealImportedPath(content.trim())
if(filepath){
const source = fs.readFileSync(filepath,{encoding:'utf-8'});
props = getInterface(source);
}
}else{
props = content.split('\n')
.map(line => line.split('|')
.map(cell => cell.trim())
) //<3 <3 <3 Love will save the World !
.filter(line => !(line.length <3) )
.map(line => {return { name:line[0], description:line[1], attr:line[2] }})
.map(line => {
const parsed = /([^\(\)]+)(\((.+)\))?/.exec(line.attr);
line.attr = {
default: parsed[3],
types: parsed[1].split('/').map(type => {
type = type.trim();
type = type.split(',').map(i => i.trim());
return (type.length === 1) ? type[0] : type;
})
}
line.description = marked(line.description).replace(/<\/?p>\n?/g,'');
return line;
})
}
const App = require(PROPS_CMP).default;
const {html} = App.render({data:props});
return html;
}
function propsExtrator(source){
const re_props = /(\/\*\s+(.+)\|(.+)\*\/[\t ]*\n)?[\t ]*export\s+(.+?)[\t ]+([^= ;]+)([\t ]+=\s+(.+?))?[\t ]*;?\n/g;
let result;
let props = [];
const trim = (str) => {
if(typeof str === 'string') str = str.trim();
return str;
}
while(result = re_props.exec(source)){
props.push({
name:trim(result[5]),
description:trim(result[2]),
attr:{
default: trim(result[7]),
types: result[3] ? result[3].split('/').map(type => {
type = type.trim();
type = type.split(',').map(i => i.trim());
return (type.length === 1) ? type[0] : type;
}) : result[3]
}
});
}
return props;
}
================================================
FILE: packages/core/builtins/blockparser.js
================================================
export function getBlocks (text) {
const re = new RegExp('^([\\t ]*)```([\\w:\. ]*)[\\t ]*$','mg');
let result;
let level = 0;
let map = [];
const mapitem = {type:'',params:[], fragment:'' , content:''};
let start = 0;
let end = 0;
let length = 0;
while(result = re.exec(text)){
if(result[2].length !== 0) {
level++;
if(level === 1) {
start = result['index']
const {type,params} = getProps(result[2]);
mapitem.type = type;
mapitem.params = params;
}
}else{
level--;
if(level === 0) {
end = (result['index']+result[1].length+3)
mapitem.fragment = text.slice(start,end)
let content = mapitem.fragment.split("\n");
content.shift();
content.pop();
const minspace = content.reduce((min,line) => {
const cur = Number( line.replace( /^([\t ]*).+$/,(txt,spaces)=>spaces.length));
return cur<min ? cur : min;
},Infinity);
content = content.map(line => line.replace(new RegExp('^[\t ]{0,'+minspace+'}'),'')) ;
mapitem.content =content.join("\n");
map.push({...mapitem});
mapitem.type = mapitem.fragment = mapitem.content = '';
mapitem.params = {};
}
}
}
return map
}
function getProps(str) {
if(!str) return {type:'',params:[]};
const list = str.replace(/\s{2,}/g,' ').trim().split(' ');
const type = list.shift();
const params = list.reduce((acc,item) => {
const p = item.split(':');
if(p.length === 1) p.push(null);
acc[p[0]] = p[1];
return acc
},{})
return {type,params}
}
================================================
FILE: packages/core/builtins/rollup_plugin_builtins.js
================================================
import { BUILTIN_PKG, CMP_EXAMPLE} from './../constants';
function getBuiltComponents(pkg) {
if(pkg === BUILTIN_PKG) return `
export {default as Example} from '${CMP_EXAMPLE}';
`;
}
export function builtins() {
const packages = [BUILTIN_PKG];
return {
name: 'rollup_plugin_builtins',
resolveId(id) { return packages.indexOf(id) !== -1 ? id : null },
load(id) {
if(packages.indexOf(id) !== -1) return getBuiltComponents(id);
return null;
}
}
}
================================================
FILE: packages/core/builtins/rollup_plugin_examples.js
================================================
import { EX_CSS,EX_IFRAME,EX_CMP, EX_LAYOUT } from './../constants';
import { ExamplesStore } from './../stores';
import config from './../config';
const components = {
"@svelte-docs/get/BuiltinExample": `export {default} from '${EX_CMP}';`,
"@svelte-docs/get/ExampleLayout": `export {default} from '${EX_LAYOUT}';`,
"@svelte-docs/get/basepath": `export default '${config.basepath}';`,
}
export function example_component() {
return {
name: 'rollup_plugin_builtins',
resolveId(id) { return components[id] !== undefined ? id : null },
load(id) {
if(components[id] !== undefined) return components[id];
return null;
}
}
}
// handle imports of the examples components
export function examples_sources() {
const re = /(Ex_\d+_[a-f0-9]{32})\.svelte/;
return {
name: 'rollup_plugin_examples_sources',
resolveId(id) { return re.test(id) ? id : null },
load(id) {
if(re.test(id)) {
const source = ExamplesStore.get(id.replace(re,'$1'));
if(source) return source;
}
return null;
}
}
}
// handle import of the examples index file
export function examples_index() {
return {
name: 'rollup_plugin_examples_index',
resolveId(id) { return id === 'examples_src.js' ? id : null },
load(id) {
if(id === 'examples_src.js') {
let file = `
import '${EX_IFRAME}';
import '${EX_CSS}';
`;
Object.keys(ExamplesStore.get()).forEach(name => {
file = file+`\nexport {default as ${name}} from '${name}.svelte';`
});
return file;
}
return null;
}
}
}
================================================
FILE: packages/core/builtins/svelte_preprocess_builtins.js
================================================
import hasha from 'hasha';
import touch from 'touch';
import { ExamplesStore } from './../stores';
import { EX_INDEX } from './../constants';
import { getBlocks } from './blockparser';
import example_replacer from './Example/replacer';
import properties_replacer from './Properties/replacer';
export function builtins() {
return {
markup({ content, filename }) {
if(filename.endsWith('.md')){
content = replaceBuiltins(content,filename);
}
return { code: content };
}
};
}
function replaceBuiltins(text,filename){
const used = new Set();
let uid = 0;
//current file identificator
const fid = hasha(filename,{algorithm: 'md5'});
//remve all examples by file id
ExamplesStore.delete(new RegExp(`Ex_\\d+_${fid}`));
// parse blocks in the file
getBlocks(text).forEach(block => {
if(block.type === 'example') {
used.add('Example');
let name = `Ex_${uid++}_${fid}`;
text = text.replace(
block.fragment,
example_replacer(block.content,block.params,name)
)
}else if(block.type === 'properties') {
let name = `Props_${uid++}_${fid}`;
text = text.replace(
block.fragment,
properties_replacer(block.content,block.params,name)
)
}
});
if(used.size > 0){
let used_str = Array.from(used).map(cmp => `import ${cmp} from '@svelte-docs/get/Builtin${cmp}';`).join("\n");
if(/^[\t ]*<script>/.test(text))
text = text.replace(/^[\t ]*<script>/,"$&\n"+used_str);
else if(/^[\t ]*import .+ from .+$/.test(text))
text = text.replace(/^[\t ]*import .+ from .+$/,used_str+"\n$&");
else
text = text+"\n\n"+`<script>\n${used_str}\n</script>`;
}
if(used.has('Example')) touch(EX_INDEX);
return text;
}
================================================
FILE: packages/core/config.js
================================================
import importCWD from 'import-cwd';
const config = importCWD('./svelte-docs.config.js');
export default config;
================================================
FILE: packages/core/constants.js
================================================
import path from 'path';
import config from './config';
import {getThemePath} from './themes';
export const CWD = process.cwd();
export const CORE = path.resolve(path.join(CWD,'node_modules','@svelte-docs','core'));
export const DEVPATH = path.join(CWD,config.pathes.dev);
export const BUILDPATH = path.join(CWD,config.pathes.build);
export const INDEX = path.join(CORE,'main.js');
export const SRC = path.join(CWD,'src');
export const PAGES = path.join(SRC,'pages');
export const INCLUDES = path.join(SRC,'includes');
export const THEME = getThemePath();
export const STATIC = path.join(SRC,'static');
export const STARTPAGE = path.join(PAGES,'index.md');
export const ERRORPAGE = path.join(INCLUDES,'error.md');
export const PROPS_CMP = path.join(THEME,'components','Properties.svelte');
export const EX_LAYOUT = path.join(THEME,'components','Example.svelte');
export const EX_CSS = path.join(SRC,'examples.css');
export const EX_CMP = path.join(CORE,'builtins','Example','Example.svelte');
export const EX_IFRAME = path.join(CORE,'builtins','Example','iframe.js');
export const EX_INDEX = path.join(CORE,'examples.main.js');
================================================
FILE: packages/core/examples.main.js
================================================
export * from 'examples_src.js';
================================================
FILE: packages/core/fixidents/rollup_plugin_fixidents.js
================================================
import path from 'path';
import fs from 'fs-extra';
// this will remove idents inside <pre> tags in builted bundle;
export default function () {
const ident_remover = function(text) {
return text.replace(/(<code[^>]+>)\\n\\t\\t\\t/,'$1').replace(/\\t\\t\\t/g,'');
}
let FILE = '';
return {
name: 'rollup_plugin_fixident',
writeBundle: async (opts, bundle) => {
fs.writeFileSync(opts.file, bundle[path.basename(opts.file)].code.replace(/innerHTML='<code.+?code>'/g,ident_remover));
}
}
}
================================================
FILE: packages/core/highlight.js
================================================
import hljs from 'highlight.js';
import hljs_svelte from 'highlightjs-svelte';
hljs_svelte(hljs);
export default function(text,lang,interpolation=false) {
lang = (lang || 'svelte');
const result = hljs.highlight(lang,text);
let code = result.value
.replace(/{/g,'{')
.replace(/}/g,'}');
if(interpolation){
code = code
.replace(/"/g,'\\"')
.replace(/\n/g,'\\n');
}
return code;
}
================================================
FILE: packages/core/indexer/rollup_plugin_indexer.js
================================================
import path from 'path';
import fs from 'fs-extra';
import { PAGES } from './../constants';
import config from './../config';
export default function (dev=false) {
return {
name: 'rollup_plugin_indexer',
writeBundle(opts) {
const dir = opts.dir || path.dirname(opts.file);
fs.outputFileSync(path.join(dir,'index.html'),getTemplate());
if(!dev) goTree(PAGES);
}
}
}
function goTree(dir,slug='') {
fs.readdirSync(dir).forEach( file => {
const filepath = path.join(dir,file);
if(fs.statSync(filepath).isDirectory()){
if(!file.startsWith('_')){
goTree(filepath,path.join(slug,file));
}
}else{
const match = file.match(/^([^_][\S]+)\.(?:md|svelte)$/);
if(match){
fs.outputFileSync(path.join(config.pathes.build,config.basepath,slug,match[1],'index.html'),getTemplate());
}
}
});
}
function getTemplate(){
return `<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1.0'>
<base href="${config.basepath}" />
<title>${config.title.main}</title>
${config.favicon ? `<link rel='icon' type='image/png' href='${config.favicon}'>` : ''}
<link rel='stylesheet' href='bundle.css'>
<script defer src='bundle.js'></script>
</head>
<body>
</body>
</html>`
}
================================================
FILE: packages/core/main.js
================================================
import App from './App.svelte';
const app = new App({
target: document.body,
props: {}
});
export default app;
================================================
FILE: packages/core/navigation.js
================================================
import {writable} from 'svelte/store';
export const url = writable(getURL());
export function go(href){
history.pushState({}, '', href === '' ? getBasepath() : href);
url.set(href.split('#')[0]);
}
export function initNavigation() {
addEventListener('click', click);
addEventListener('popstate', gohistory);
return function() {
removeEventListener('click', click);
removeEventListener('popstate', gohistory);
}
}
function gohistory(){
url.set(getURL());
}
function getURL() {
let path = location.pathname;
path = cleanURL(path);
return path;
}
function click (event) {
const a = event.target.closest('a');
if(!a) return;
const href = a.getAttribute('href');
if(!href) return;
// Open external links in new tab
if(/^\w+:\/\//.test(href)) {
a.setAttribute('target','_blank');
return;
}
event.preventDefault();
if(/^\/$/.test(href)) {
return go('')
}
return go(href);
}
function cleanURL(url){
const basepath = getBasepath();
if(url.startsWith(basepath)) url = url.slice(basepath.length);
if(url.startsWith('/')) url = url.slice(1);
if(url.endsWith('/')) url = url.slice(0,-1);
return url;
}
function getBasepath(){
let basepath = (document.querySelector('base') || {}).href.replace(window.location.origin,'').slice(0,-1);
return basepath === '' ? '/' : basepath;
}
================================================
FILE: packages/core/package.json
================================================
{
"name": "@svelte-docs/core",
"version": "0.10.13",
"description": "Core of Svelte-docs builder",
"dependencies": {
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-node-resolve": "^7.1.3",
"chalk": "^2.4.2",
"espree": "^6.1.2",
"fs-extra": "^8.1.0",
"hasha": "^5.2.2",
"highlight.js": "^10.4.1",
"highlightjs-svelte": "^1.0.6",
"import-cwd": "^3.0.0",
"ini": "^2.0.0",
"node-watch": "^0.6.4",
"postcss-import": "^12.0.1",
"resize-detector": "^0.2.2",
"rollup": "^2.35.1",
"rollup-plugin-livereload": "^1.3.0",
"rollup-plugin-postcss": "^2.9.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.31.0",
"svelte-preprocess-markdown": "^2.7.3",
"sync-folders": "^2.0.0",
"touch": "^3.1.0"
},
"keywords": [],
"repository": {
"type": "git",
"url": "git+https://github.com/AlexxNB/svelte-docs.git"
},
"author": "Alexey Schebelev",
"license": "MIT",
"bugs": {
"url": "https://github.com/AlexxNB/svelte-docs/issues"
},
"homepage": "https://alexxnb.github.io/svelte-docs"
}
================================================
FILE: packages/core/pages/rollup_plugin_pages.js
================================================
import getRoutes from './routes';
import config from './../config';
const imports = {
"@svelte-docs/get/routes": getRoutes,
"@svelte-docs/get/maintitle": ()=>`export default '${config.title.main}'`,
}
export function pages() {
return {
name: 'rollup_plugin_pages',
resolveId(id) { return imports[id] !== undefined ? id : null },
load(id) {
if(imports[id] !== undefined) return imports[id]();
return null;
}
}
}
================================================
FILE: packages/core/pages/routes.js
================================================
import path from 'path';
import fs from 'fs';
import {PAGES,STARTPAGE,ERRORPAGE} from './../constants';
import config from './../config';
export default function () {
const pages = getRoutes(PAGES);
const strImports = pages.map(item =>`import {default as ${item.component}, META as ${item.component}_META} from '${item.path}'`).join(";\n");
const strRoutes = pages.map(item =>`{
url: '${item.route}',
component:${item.component},
title: (${item.component}_META.hasOwnProperty('title')) ? ${item.component}_META.title : ${item.title ? `'${item.title}'` : null},
meta:${item.component}_META
}`).join(",\n");
return `${strImports}
import {derived} from 'svelte/store';
import {url} from '@svelte-docs/core/navigation'
const routes = [
${strRoutes}
]
const error_route = routes.filter(r => r.url === 'sd:error')[0];
export const current_page = derived(url,$url => {
const route = routes.filter(r => r.url === $url);
if(route.length > 0)
return route[0];
else
return error_route;
});
`;
}
function getRoutes(dir,slug='') {
slug = `${slug}/`;
let pages = [];
if(slug==='/') {
pages.push({
component:'Startpage',
route:'',
path:STARTPAGE,
title:retrieveTitleFromHeader(STARTPAGE)
});
pages.push({
component:'Errorpage',
route:'sd:error',
path:ERRORPAGE,
title:retrieveTitleFromHeader(ERRORPAGE)
});
}
fs.readdirSync(dir).forEach( file => {
const filepath = path.join(dir,file);
if(isDir(filepath)){
if(!file.startsWith('_')){
const subpages = getRoutes(filepath,slug+formatSlug(file));
pages = pages.concat(subpages);
}
}else{
const match = file.match(/^([^_][\S]+)\.(?:md|svelte)$/);
if(match){
const compname = formatComponentName(match[1]);
const url = slug+formatSlug(match[1]);
pages.push({
component:compname,
route:url.slice(1),
path:filepath,
title:retrieveTitleFromHeader(filepath)
});
}
}
});
return pages;
}
function isDir(filepath) {
return fs.statSync(filepath).isDirectory()
}
function formatComponentName(text){
return formatSlug(text)
.split('-')
.reduce(
(name,word) => {
return name + word.charAt(0).toUpperCase() + word.slice(1);
},'');
}
function formatSlug(text){
return text.replace(/[^\w\d\-]/g,'-');
}
function retrieveTitleFromHeader(filename){
if(config.title.header !== true) return null;
let source = fs.readFileSync(filename,'utf-8');
let re = /^\s*(#{1,2}(?!#)|<h(1|2)>)((.+)(\1|<\/h\2>)|(.+)$)/mi;
let result = source.match(re);
return (result) ? String(result[4] || result[6]).trim() : null;
}
================================================
FILE: packages/core/replacer/rollup_plugin_replacer.js
================================================
import {CWD,SRC,INCLUDES,THEME} from './../constants';
const vars = {
"@CWD": CWD,
"@SRC": SRC,
"@INCLUDES": INCLUDES,
"@THEME": THEME,
}
export default function () {
return {
name: 'rollup_plugin_replacer',
resolveId(id) {
return Object.keys(vars).reduce((str,v) => {
return (id.startsWith(v)) ? id.replace(v,vars[v]) : str;
},null);
}
}
}
================================================
FILE: packages/core/rollup.config.js
================================================
import fs from 'fs-extra';
import path from 'path';
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import {markdown} from 'svelte-preprocess-markdown';
import postcss from 'rollup-plugin-postcss';
import postcssImport from 'postcss-import';
import replacer from './replacer/rollup_plugin_replacer';
import aliases from './aliases/rollup_plugin_aliases';
import indexer from './indexer/rollup_plugin_indexer';
import syncer from './syncer/rollup_plugin_syncer';
import fixidents from './fixidents/rollup_plugin_fixidents';
import {pages} from './pages/rollup_plugin_pages';
import {example_component, examples_sources,examples_index} from './builtins/rollup_plugin_examples';
import {builtins} from './builtins/svelte_preprocess_builtins';
import {INDEX,DEVPATH,BUILDPATH,EX_INDEX,SRC} from './constants';
import highlight from './highlight';
import config from './config';
const production = !process.env.ROLLUP_WATCH;
const DIR = production ? path.join(BUILDPATH,config.basepath) : path.join(DEVPATH,config.basepath);
fs.removeSync(DIR);
export default [{
input: INDEX,
output: {
sourcemap: !production,
format: 'iife',
name: 'app',
file: path.join(DIR,'bundle.js')
},
plugins: [
replacer(),
aliases(),
indexer(!production),
syncer(!production),
pages(),
example_component(),
svelte({
dev: !production,
emitCss:true,
extensions: ['.svelte','.md'],
preprocess: [
builtins(),
markdown({highlight,headerIds:true})
]
}),
postcss({
extract: true,
minimize: production,
sourceMap: !production,
plugins:[
postcssImport()
]
}),
resolve({
browser: true,
dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
}),
commonjs(),
!production && livereload(DIR),
production && terser(),
production && fixidents(),
],
watch: {
clearScreen: false,
exclude: [SRC]
}
},
// Examples bundle
{
input: EX_INDEX,
output: {
sourcemap: false,
format: 'iife',
name: 'app',
file: path.join(DIR,'examples.js')
},
plugins: [
aliases(),
examples_index(),
examples_sources(),
production && fixidents(),
svelte({
dev: production,
emitCss:true,
extensions: ['.svelte'],
preprocess: config.preprocess
}),
postcss({
extract: true,
minimize: production,
sourceMap: false,
plugins:[
postcssImport()
]
}),
resolve({
browser: true,
dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
}),
commonjs(),
production && terser()
],
watch: {
clearScreen: false,
exclude: [SRC]
}
}];
================================================
FILE: packages/core/stores.js
================================================
let STORES = {};
export const ExamplesStore = init_store();
function init_store() {
const id = {};
STORES[id] = {};
return {
set: (name,value) => {
STORES[id][name] = value
},
get: (name) => {
if(name){
let list = {};
if(name instanceof RegExp){
Object.keys(STORES[id]).forEach(item => {
if(name.test(item)) list[item]= STORES[id][item];
});
return list;
}else{
return STORES[id][name];
}
}
return STORES[id];
},
length: () => {
return STORES[id].length;
},
clear: () => {
STORES[id] = {};
},
delete: (name) => {
if(name instanceof RegExp){
Object.keys(STORES[id]).forEach(item => {
if(name.test(item)) delete STORES[id][item];
});
}else{
delete STORES[id][name];
}
}
}
}
================================================
FILE: packages/core/syncer/rollup_plugin_syncer.js
================================================
import path from 'path';
import fs from 'fs-extra';
import syncFolders from 'sync-folders';
import {STATIC,THEME} from './../constants';
const assets = [
path.join(THEME,'assets'),
STATIC,
]
export default function (dev=false) {
const options = {
type: dev ? 'hardlink' : 'copy'
}
return {
name: 'rollup_plugin_syncer',
generateBundle(opts, bundle) {
const dir = opts.dir || path.dirname(opts.file);
assets.forEach(asset => {
const filepath = path.resolve(asset)
if(fs.pathExistsSync(filepath)){
syncFolders(filepath, dir, options);
}
})
}
}
}
================================================
FILE: packages/core/themes.js
================================================
import fs from 'fs-extra';
import path from 'path';
import config from './config';
const CWD = process.cwd();
export function getThemePath(){
if(!config.theme) throw new Error('No theme option in the `svelte-docs.config.js`');
// Check if theme is present in default pack
const package_path = path.join(CWD,'node_modules','@svelte-docs','themes',config.theme);
if(fs.existsSync(package_path)) return package_path;
// Check if user set option to the local path
const local_path = path.resolve(config.theme);
if(fs.existsSync(local_path)) return local_path;
throw new Error('Unknown theme option value in the `svelte-docs.config.js`');
}
================================================
FILE: packages/core/utils.js
================================================
import chalk from 'chalk';
import path from 'path';
import fs from 'fs-extra';
import config from './config';
export function ERR(text,comment) {
console.log(chalk.bold.red('(!)',text));
if(comment !== undefined) console.log(chalk.red(comment));
process.exit(1);
}
export function getRealImportedPath(filepath){
//0. is path exists
if(fs.pathExistsSync(filepath)) return filepath;
const alias = config.aliases[filepath];
if (alias) {
let pieces = alias.split('/');
let mdl = pieces[0];
let rel = pieces
//1. plain search in virtual modules
if(alias !== undefined){
filepath = path.resolve(alias);
if(fs.pathExistsSync(filepath)) return filepath;
}
//2. relative search in virtual modules
if(config.aliases[mdl] !== undefined) {
filepath = path.resolve(path.join(config.aliases[mdl],rel));
if(fs.pathExistsSync(filepath)) return filepath;
}
}
//3. relative search in nodemodules
const nodepath = path.resolve(path.join('.','node_modules',filepath))
if(fs.pathExistsSync(nodepath)) return nodepath;
return undefined;
}
================================================
FILE: packages/core/watcher.js
================================================
const path = require('path');
const touch = require('touch');
const watch = require('node-watch');
const watch_path = [
path.resolve('./src'),
]
const touch_path = path.resolve('./node_modules/@svelte-docs/core/App.svelte');
watch(watch_path, { recursive: true }, function(evt, name) {
touch(touch_path);
});
================================================
FILE: packages/create/cli.js
================================================
#!/usr/bin/env node
const fs = require('fs-extra')
const path = require('path')
const meow = require('meow')
const prompts = require('prompts/dist')
const chalk = require('chalk')
const fetchRepoDir = require('fetch-repo-dir');
const exec = require('shelljs.exec');
const logo = chalk.bold('[Svelte-Docs]')
const log = (...args) => {
console.log(logo, ...args)
}
log.error = (...args) => {
console.log(chalk.red('[ERROR]'), ...args)
}
function npminstall (dir) {
return new Promise((resolve, reject) => {
const child = spawn('npm', [ '--prefix', dir, 'install' ], {
stdio: 'inherit'
})
child.on('close', code => {
if (code !== 0) {
reject()
return
}
resolve()
})
})
}
const themes = [
{ name: 'Default', path: 'default' },
]
const cli = meow(`
Usage
$ npm init svelte-docs
$ npx create-svelte-docs
Options
--name Directory name for docs
-y Create docs without confirmation step
`, {
booleanDefault: undefined,
flags: {
help: {
type: 'boolean',
alias: 'h'
},
version: {
type: 'boolean',
alias: 'v'
},
name: {
type: 'string'
},
confirm: {
type: 'boolean',
alias: 'y'
}
}
})
const form = [
/*
{
type: 'select',
name: 'template',
message: 'Choose a base template',
choices: templates.map(({ name }, i) => ({ title: name, value: i }))
},
*/
{
type: 'text',
name: 'name',
message: 'Choose a name for the docs sources folder',
initial: 'docs_src'
},
{
type: 'confirm',
name: 'confirm',
message: (prev, values) => `Create docs sources in ${values.name}?`,
initial: true
}
]
const run = async opts => {
prompts.inject(opts)
const response = await prompts(form)
if (!response.confirm) {
log('aborted')
process.exit(0)
}
const { name } = response
const theme = themes[response.theme] || themes[0]
log('Creating docs ...')
if (!name) {
log.error('name is required')
process.exit(1)
}
if (!theme) {
log.error('theme not found')
process.exit(1)
}
try{
log('Downloading docs template...');
await fetchRepoDir([
{src: 'alexxnb/svelte-docs/template', dir:name},
]);
log('Installing NPM packages...');
exec(`npm --prefix ${name} install`);
log('Docs created succesfully!')
log(chalk.green(`Go to the ${name} and execute 'npm run dev' command`));
process.exit(0)
}catch(err){
log.error('Failed to create docs')
log.error(err)
process.exit(1)
}
}
run(cli.flags);
================================================
FILE: packages/create/package.json
================================================
{
"name": "create-svelte-docs",
"version": "0.3.2",
"description": "CLI tool to init docs source directory",
"main": "cli.js",
"bin": {
"create-svelte-docs": "./cli.js"
},
"scripts": {
"start": "./cli.js"
},
"keywords": [],
"repository": {
"type": "git",
"url": "git+https://github.com/AlexxNB/svelte-docs.git"
},
"author": "Alexey Schebelev",
"license": "MIT",
"bugs": {
"url": "https://github.com/AlexxNB/svelte-docs/issues"
},
"homepage": "https://alexxnb.github.io/svelte-docs",
"dependencies": {
"chalk": "^2.4.1",
"fetch-repo-dir": "^1.0.4",
"fs-extra": "^8.1.0",
"meow": "^5.0.0",
"prompts": "^0.1.12",
"shelljs.exec": "^1.1.8"
}
}
================================================
FILE: packages/publisher/package.json
================================================
{
"name": "@svelte-docs/publisher",
"version": "0.2.3",
"description": "Helps to publish Svelte-docs on Github Pages and other resources",
"main": "publisher.js",
"scripts": {},
"keywords": [],
"repository": {
"type": "git",
"url": "git+https://github.com/AlexxNB/svelte-docs.git"
},
"author": "Alexey Schebelev",
"license": "MIT",
"bugs": {
"url": "https://github.com/AlexxNB/svelte-docs/issues"
},
"homepage": "https://alexxnb.github.io/svelte-docs",
"dependencies": {
"chalk": "^2.4.2",
"gitinfo": "^2.4.0",
"import-cwd": "^3.0.0",
"prompts": "^0.1.12",
"shelljs.exec": "^1.1.8"
}
}
================================================
FILE: packages/publisher/publisher.js
================================================
const importCWD = require('import-cwd');
const exec = require('shelljs.exec');
const path = require('path');
const createGitinfo = require('gitinfo').default;
const chalk = require('chalk');
const prompts = require('prompts');
const config = importCWD('./svelte-docs.config.js');
console.log(chalk.bold('Publishing the documentation...'));
async function run() {
const git = createGitinfo();
if(!git) Err('can\'t find .git folder in the parents directories');
const GITURL = git.getGithubUrl();
const GITUSER = git.getUsername();
const GITNAME = git.getName();
const DIR = path.join(process.cwd(),config.pathes.build,config.basepath).replace(/\/$/,'');
if(!GITURL.startsWith('https://github.com')) Err('Can publish in Github repository only, but `'+GITURL+'` was found.');
if(`/${GITNAME}/` !== config.basepath) Err('you should set `basepath` option in `svelte-docs.config.js` as the name of your repository `'+ GITNAME +'`');
const result = await prompts([
{
type: 'confirm',
name: 'confirm',
message: 'Publish documents in `gh-pages` branch of the `'+GITURL+'` repository?',
initial: true
}
]);
if(result.confirm){
console.log('Wait while deploy on GitHub Pages...');
publish_ghpages(DIR, function(err) {
if(err) Err('Fail on publishing:',err);
console.log(chalk.bold('Done!'));
console.log(chalk.green(`You can open it at https://${GITUSER.toLowerCase()}.github.com/${GITNAME}`));
process.exit(0);
});
}else{
Err('Publishing canceled');
}
}
run();
function Err(message){
console.log(chalk.red('[Error]', message));
process.exit(1);
}
function publish_ghpages(dir,cb){
dir = path.relative(process.cwd(),dir);
const result = exec(`npx gh-pages -d ${dir}`);
cb( result.code === 0 ? null : result.stderr);
}
================================================
FILE: packages/server/package.json
================================================
{
"name": "@svelte-docs/server",
"version": "0.1.6",
"description": "HTTP server to run Svelte-docs in development or production modes",
"main": "server.js",
"scripts": {},
"keywords": [],
"repository": {
"type": "git",
"url": "git+https://github.com/AlexxNB/svelte-docs.git"
},
"author": "Alexey Schebelev",
"license": "MIT",
"bugs": {
"url": "https://github.com/AlexxNB/svelte-docs/issues"
},
"homepage": "https://alexxnb.github.io/svelte-docs",
"dependencies": {
"chalk": "^2.4.2",
"console-clear": "^1.1.1",
"import-cwd": "^3.0.0",
"meow": "^8.0.0",
"sirv": "^0.4.6"
}
}
================================================
FILE: packages/server/server.js
================================================
#!/usr/bin/env node
const path = require('path');
const meow = require('meow');
const sirv = require('sirv');
const { createServer } = require('http');
const clear = require('console-clear');
const chalk = require('chalk');
const importCWD = require('import-cwd');
const config = importCWD('./svelte-docs.config.js');
const cli = meow(`
Usage
$ node sirv.js [options]
Options
--dev, -d Development mode
--cors, -c Enable "CORS" headers to allow any origin requestor
--single, -s SPA Mode
Examples
$ node sirv.js --dev --basepath subdir
`, {
flags: {
dev: {
type: 'boolean',
alias: 'd'
},
cors: {
type: 'boolean',
alias: 'c'
},
single: {
type: 'boolean',
alias: 's'
}
}
});
const CWD = process.cwd();
const DEV = cli.flags.dev;
const CORS = cli.flags.cors;
const SINGLE = cli.flags.single;
const DIR = DEV ? path.join(CWD,config.pathes.dev) : path.join(CWD,config.pathes.build);
let port = process.env.PORT || 5000;
let hostname = process.env.HOST || '0.0.0.0';
const mw = sirv(DIR, {
dev: DEV,
maxAge: 31536000, // 1Y
immutable: true,
setHeaders: CORS ? (res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Range');
} : undefined,
onNoMatch: SINGLE ? (req, res) => (req.path=config.basepath,mw(req, res, () => (res.statusCode=404,res.end()))) : undefined
});
createServer(mw).listen(port, hostname, err => {
if (err) throw err;
const srv = DEV ? chalk.yellow('DEVELOPMENT server started...') : chalk.green('Server started...');
clear(true);
console.log(`
${chalk.bold('Svelte-Docs:')} ${srv}
Please open: ${chalk.blue('http://'+(hostname === '0.0.0.0' ? 'localhost' : hostname)+':'+port+config.basepath)}
`);
});
================================================
FILE: packages/themes/default/components/Document.svelte
================================================
<script>
import {current_page} from '@svelte-docs/get/routes';
current_page.subscribe(() => {
window.scrollTo(0,0);
});
</script>
<article>
<svelte:component this={$current_page.component} />
</article>
================================================
FILE: packages/themes/default/components/Example.svelte
================================================
<div class="example">
<div class="result">
<slot name="result"/>
</div>
<div class="code">
<slot name="code"/>
</div>
</div>
================================================
FILE: packages/themes/default/components/Layout.svelte
================================================
<script>
import { writable } from 'svelte/store';
import { tweened } from 'svelte/motion';
import { current_page } from '@svelte-docs/get/routes';
import maintitle from '@svelte-docs/get/maintitle';
import Topbar from './Topbar.svelte';
import Sections from './Sections.svelte';
import Document from './Document.svelte';
import { cubicOut } from 'svelte/easing';
function slideH(node) {
const delay = 10;
const duration = 200;
const easing = cubicOut;
const style = getComputedStyle(node);
const width = parseFloat(style.width);
return {
delay,
duration,
easing,
css: t =>
`overflow: hidden;` +
`width: ${t * width}px;`
};
}
function set_active_link(node){
return {
destroy: current_page.subscribe(page => {
const url = page.url || '/';
node.querySelectorAll('a').forEach(a => {
if(a.getAttribute('href') === url)
a.classList.add('active');
else
a.classList.remove('active')
});
})
}
}
function hide_sidebar(node){
const handler = () => show_sidebar=false;
document.body.addEventListener('click',handler);
return{
destroy(){
document.body.removeEventListener('click',handler);
}
}
}
let window_width = 0;
let show_sidebar = false;
const mobile = writable(true);
const rotate = tweened(0,{duration:200, easing:cubicOut});
$: $mobile = window_width < 800;
$: show_sidebar = $mobile ? show_sidebar : false;
$: $rotate = show_sidebar ? 180 : 0;
$: title = $current_page.title ? $current_page.title + ' — ' + maintitle : maintitle;
$: layout = $current_page.meta.layout ? $current_page.meta.layout : 'default';
</script>
<svelte:window bind:innerWidth={window_width}/>
<svelte:head>
<title>{title}</title>
</svelte:head>
<!-- top bar -->
<header>
<Topbar />
</header>
{#if layout === 'no_sidebar'}
<!-- content -->
<main class="fullscreen" class:mobile={$mobile}>
<Document />
</main>
{/if}
{#if layout === 'default'}
{#if $mobile}
<!-- side bar -->
<button class="showNav" on:click|stopPropagation={()=>show_sidebar=!show_sidebar}>
<img src="assets/burger.svg" alt="Open Menu" style="transform: rotate({$rotate}deg)"/>
</button>
{/if}
{#if !$mobile || show_sidebar}
<nav use:set_active_link use:hide_sidebar transition:slideH>
<Sections />
</nav>
{/if}
<!-- content -->
<main class:mobile={$mobile}>
<Document />
</main>
{/if}
================================================
FILE: packages/themes/default/components/Properties.svelte
================================================
<script>
/* (!) Restart bandler if this file was edited
*
* Properties data structure:
* data = [
* {
* name <string>,
* description <string>,
* attr[
* default<string>,
* types: <string> | [ <string> ]
* ]
* },
* ...
* ]
*/
export let data;
function getTypes(types) {
if(!types) return '';
const typeValue = (type) => {
if(!type) return '';
if(typeof type === 'string') return type;
return type.map(v => `<i>${v}</i>`).join(',');
}
return types.map(type=>`<dfn>${typeValue(type)}</dfn>`).join('');
}
</script>
<dl class="properties">
{#each data as prop}
<dt class:required={!prop.attr.default}>{prop.name}</dt>
<dd>{@html getTypes(prop.attr.types)}</dd>
<dd>{prop.attr.default ? prop.attr.default : ''}</dd>
<dd>{@html prop.description ? prop.description : ''}</dd>
{/each}
</dl>
================================================
FILE: packages/themes/default/components/Sections.svelte
================================================
<script>
import Sidebar from '@INCLUDES/sidebar.md';
</script>
<Sidebar />
================================================
FILE: packages/themes/default/components/Topbar.svelte
================================================
<script>
import Logo from '@INCLUDES/logo.md';
import Topbar from '@INCLUDES/topbar.md';
</script>
<section>
<Logo />
</section>
<section>
<Topbar />
</section>
================================================
FILE: packages/themes/default/info.md
================================================
Theme based on [offical Svelte documentation site](https://svelte.dev/docs).
*by Alexey Schebelev*
## Theme variables
|Variable|Default|Comment|
|--------|-------|-----------|
| `--font` | "Overpass", sans-serif | |
| `--font-mono` | "Fira Mono", monospace | |
| `--primary` | #ff3e00 | |
| `--secondary` | #676778 | |
| `--dark` | #34343d | |
| `--light` | #c0c0d8 | |
| `--white` | #ffffff | |
| `--code` | #f6fafd | |
| `--text` | --dark | |
| `--text-sidebar` | #d4d4d4 | |
| `--text-sidebar-links` | --white | |
| `--topbar-height` | 50px | |
| `--sidebar-width` | 300px | |
| `--example-border` | --light | Border color of the example block |
| `--props-border` | --light | Colors of the properties block |
| `--props-devider` | --code | |
| `--props-types-bg` | --code | |
| `--props-types-border` | --light | |
| `--props-types-text` | --hl-keyword | |
| `--props-oneof-text` | --hl-string | |
| `--props-default-text` | --light | |
| `--hl-background` | --code | Code highlighting colors |
| `--hl-text` | #505050 | |
| `--hl-comment` | #8da4bc | |
| `--hl-keyword` | #3c87b9 | |
| `--hl-string` | #a18851 | |
| `--hl-number` | #76a562 | |
| `--hl-name` | #c36031 | |
| `--hl-attr` | #a18851 | |
| `--hl-builtin` | #505050 | |
## Layouts
|Name |Description|
|--------|-----------|
| `default` | Layout with topbar, sidebar on the left and content|
| `no_sidebar` | Layout without sidebar |
================================================
FILE: packages/themes/default/style.css
================================================
@import "styles/layout.css";
@import "styles/typography.css";
@import "styles/fonts.css";
@import "styles/highlight.css";
:root{
--font: "Overpass", sans-serif;
--font-mono: "Fira Mono", monospace;
--primary: #ff3e00;
--secondary: #676778;
--dark: #34343d;
--light: #c0c0d8;
--white: #ffffff;
--code: #f6fafd;
--text: var(--dark);
--text-sidebar:#d4d4d4;
--text-sidebar-links:var(--white);
--topbar-height: 50px;
--sidebar-width: 300px;
--example-border: var(--light);
--props-border: var(--light);
--props-devider: var(--code);
--props-types-bg: var(--code);
--props-types-border: var(--light);
--props-types-text: var(--hl-keyword);
--props-oneof-text: var(--hl-string);
--props-default-text: var(--light);
--hl-background: var(--code);
--hl-text: #505050;
--hl-comment: #8da4bc;
--hl-keyword: #3c87b9;
--hl-string: #a18851;
--hl-number: #76a562;
--hl-name: #c36031;
--hl-attr: #a18851;
--hl-builtin: #505050;
}
================================================
FILE: packages/themes/default/styles/fonts.css
================================================
/* overpass-300normal */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 300;
font-display: fallback;
src:
local('Overpass Light '),
local('Overpass-Light'),
url('assets/fonts/overpass-300.woff2') format('woff2');
}
/* overpass-400normal */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
font-display: fallback;
src:
local('Overpass Light '),
local('Overpass-Light'),
url('assets/fonts/overpass-400.woff2') format('woff2');
}
/* overpass-600normal */
@font-face {
font-family: 'Overpass';
font-style: normal;
font-weight: 600;
font-display: fallback;
src:
local('Overpass Bold '),
local('Overpass-Bold'),
url('assets/fonts/overpass-600.woff2') format('woff2');
}
/* fira-mono-400normal */
@font-face {
font-family: 'Fira Mono';
font-style: normal;
font-weight: 400;
font-display: fallback;
src:
local('Fira Mono'),
local('Fira-Mono'),
url('assets/fonts/fira-mono-400.woff2') format('woff2');
}
================================================
FILE: packages/themes/default/styles/highlight.css
================================================
/*
* You can just import theme from the higlight.js package:
* Example: @import 'highlight.js/styles/solarized-light.css'
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: var(--hl-background);
color: var(--hl-text);
font-family: var(--font-mono);
line-height: 1;
}
.hljs-comment,
.hljs-quote {
color: var(--hl-comment);
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
color: var(--hl-keyword);
}
.hljs-number{
color: var(--hl-number);
}
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
color: var(--hl-string);
}
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: var(--hl-name);
}
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
color: var(--hl-attr);
}
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
color: var(--hl-string);
}
.hljs-built_in{
color: var(--hl-builtin);
}
.hljs-deletion {
color: #dc322f;
}
.hljs-formula {
background: #eee8d5;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
================================================
FILE: packages/themes/default/styles/layout.css
================================================
html, body {
position: relative;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0px;
box-sizing: border-box;
}
/* Top bar */
header{
position:fixed;
top:0px;
left:0px;
width: 100vw;
height:var(--topbar-height);
line-height:var(--topbar-height);
background-color:var(--white);
box-shadow: 0 0 15px -5px var(--dark);
z-index: 1001;
display: flex;
flex-wrap: wrap;
}
header section{
margin:0px 1em;
flex-grow: 1;
text-align: center;
}
header section:first-child{
text-align: left;
}
header section:last-child{
text-align: right;
}
header section ul{
margin: 0px;
padding: 0px;
}
header section li{
display: inline-block;
margin:0 .5em;
}
header section li:last-child{
margin-right: 0;
}
header section li a{
color: var(--text);
}
header section h1{
font-size: 2rem;
font-weight: 400;
margin:0;
}
header section img{
max-height: var(--topbar-height);
width: auto;
}
header section h1 a{
color: var(--primary);
}
header section h1 a:hover{
text-decoration: none;
}
/* Sidebar navigation */
nav{
position:fixed;
top:var(--topbar-height);
left:0px;
width:var(--sidebar-width);
height:100vh;
background-color:var(--secondary);
box-shadow: 0 0 15px -5px var(--dark);
overflow-x: hidden;
z-index:1000;
color: var(--text-sidebar);
}
nav a{
color: var(--text-sidebar-links);
}
nav ul{
display: block;
padding:0 .5em 0 2em;
text-transform: uppercase;
font-weight: 600;
}
nav ul ul{
display: block;
padding:0 0 .3em 1em;
text-transform: initial;
font-weight: 400;
}
nav ul li{
display: block;
padding: 0;
margin: 0 0 .5em 0;
}
nav ul li li{
margin: 0;
}
nav a:hover, nav a.active{
text-decoration: underline;
}
nav a.active::after {
float:right;
content: 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>');
}
.showNav{
position: fixed;
bottom: 10px;
left: 10px;
width:37px;
height:37px;
z-index: 10101;
border: 1px solid var(--dark);
background-color: var(--white);
cursor:pointer;
}
/* Content */
main{
padding-top:var(--topbar-height);
margin-left:var(--sidebar-width);
background-color:var(--bg-light);
min-height: calc(100vh - var(--topbar-height));
max-width:70em;
}
main.fullscreen{
margin:0 auto;
}
article{
padding:0 4em;
}
article img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
main.mobile{
margin-left:0px;
max-width: 100%;
}
main.mobile article{
padding:0 1em;
}
/* Example block */
.example{
border:1px solid var(--example-border);
margin:25px;
}
/* .example > .result{} */
.example > .code{
border-top:1px solid var(--example-border);
}
/* Properties block */
.properties{
position: relative;
display: block;
border:1px solid var(--props-border);
margin:25px;
padding: .3em;
}
.properties dd, .properties dt{
display: inline-block;
margin:0px;
}
/*name*/
.properties dt{
width: 10em;
font-weight: bold;
padding-top:.5em;
}
.properties dt.required{
text-decoration: underline;
}
/*type*/
.properties dt + dd{
color: var(--props-border);
padding-top:.5em;
}
.properties dfn{
display: inline-block;
padding: 0 .3em;
color: var(--props-types-text);
background: var(--props-types-bg);
border: 1px solid var(--props-types-border);
border-radius: .3em;
margin-right: .3em;
font-style: normal;
font-family: var(--font-mono);
font-size:.8em;
letter-spacing: -.05em;
}
.properties dfn i{
color: var(--props-oneof-text);
}
/*default*/
.properties dt + dd + dd{
width:100%;
color: var(--props-default-text);
padding-top:.3em;
}
/*description*/
.properties dt + dd + dd + dd{
display: block;
border-bottom: 1px solid var(--props-devider);
padding:0 .3em .3em 10em;
margin-top:-1em;
}
.properties dd:last-of-type{
border-bottom: none;
}
================================================
FILE: packages/themes/default/styles/typography.css
================================================
body {
color: var(--text);
font-family: "Overpass", sans-serif;
font-weight: 300;
line-height: 1.6;
}
strong{
font-weight: 600;
}
a {
color: rgb(0,100,200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
input[type="range"] {
height: 0;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
code{
font-family: var(--font-mono);
font-size: .8rem;
background: var(--code);
border: 1px solid var(--light);
color: var(--secondary);
padding: 0 .2em;
border-radius: .2em;
white-space: nowrap;
}
pre {
background-color: var(--code);
font-size: 1em;
padding: 1rem;
overflow-x: auto;
border-radius: .3em;
margin:25px;
}
pre code {
background: none;
border: none;
padding: 0;
white-space: pre;
line-height:.8rem;
}
blockquote {
background-color: var(--code);
padding: 1rem 2rem;
border-left: 3px solid var(--light);
}
================================================
FILE: packages/themes/light/components/Example.svelte
================================================
<div class="example">
<div class="result">
<slot name="result"/>
</div>
<div class="code">
<slot name="code"/>
</div>
</div>
================================================
FILE: packages/themes/light/components/Layout.svelte
================================================
<script>
import { current_page } from '@svelte-docs/get/routes';
import maintitle from '@svelte-docs/get/maintitle';
import Logo from '@INCLUDES/logo.md';
import Topbar from '@INCLUDES/topbar.md';
import Sidebar from '@INCLUDES/sidebar.md';
import { set_active_link, outside_click } from './../../utils';
current_page.subscribe(() => {
window.scrollTo(0,0);
});
let window_width = 0;
let show_sidebar = false;
$: mobile = window_width < 800;
$: show_sidebar = mobile ? show_sidebar : false;
$: title = $current_page.title ? $current_page.title + ' — ' + maintitle : maintitle;
$: nosidebar = $current_page.meta.layout === 'no_sidebar';
</script>
<svelte:head>
<title>{title}</title>
</svelte:head>
<svelte:window bind:innerWidth={window_width}/>
<div class="main" class:nosidebar={nosidebar||mobile}>
<div class="article">
<svelte:component this={$current_page.component} />
</div>
</div>
{#if !nosidebar}
{#if !mobile || (mobile&&show_sidebar)}
<div class="sidebar" use:set_active_link use:outside_click={()=>show_sidebar=false}>
<Sidebar />
</div>
{/if}
{/if}
<div class="topbar">
{#if mobile && !nosidebar}
<button class="show_sidebar" on:click|stopPropagation={()=>show_sidebar=!show_sidebar}>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
</button>
{/if}
<div class="logo"><Logo /></div>
<div><Topbar /></div>
</div>
================================================
FILE: packages/themes/light/components/Properties.svelte
================================================
<script>
/* (!) Restart bandler if this file was edited
*
* Properties data structure:
* data = [
* {
* name <string>,
* description <string>,
* attr[
* default<string>,
* types: <string> | [ <string> ]
* ]
* },
* ...
* ]
*/
export let data;
function getTypes(types) {
if(!types) return '';
const typeValue = (type) => {
if(!type) return '';
if(typeof type === 'string') return type;
return type.map(v => `<span>${v}</span>`).join(',');
}
return types.map(type=>`<span class="typedef">${typeValue(type)}</span>`).join('');
}
</script>
<table class="properties">
{#each data as prop}
<tr>
<td>
<div class="propname" class:required={!prop.attr.default}>{prop.name}</div>
<div class="default">{prop.attr.default ? prop.attr.default : ''}</div>
</td>
<td>
<div class="types">{@html getTypes(prop.attr.types)}</div>
</td>
<td>
<div class="description">{@html prop.description ? prop.description : ''}</div>
</td>
</tr>
{/each}
</table>
================================================
FILE: packages/themes/light/info.md
================================================
Light and clean theme
*by Alexey Schebelev*
## Theme variables
|Variable|Default|Comment|
|--------|-------|-----------|
| `--font` | -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol | |
| `--font-mono` | SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | |
| `--primary` | #5BC9C3 | |
| `--secondary` | #B1B1B3 | |
| `--dark` | #1A202C | |
| `--light` | #E2E8F0 | |
| `--white` | #ffffff | |
| `--code` | #011627 | |
| `--tag` | #FEEBC8 | |
| `--tag-border` | #fdd58a | |
| `--tag-text` | #DD6B20 | |
| `--text` | --dark | |
| `--topbar-height` | 50px | |
| `--sidebar-width` | 250px | |
| `--quote` | --tag | |
| `--quote-side` | --tag-text | |
| `--example-border` | --light | Border color of the example block |
| `--props-border` | --light | Colors of the properties block |
| `--props-devider` | --code | |
| `--props-types-bg` | --tag | |
| `--props-types-border` | --tag-border | |
| `--props-types-text` | --tag-text | |
| `--props-oneof-text` | --hl-builtin | |
| `--props-default-text` | --light | |
| `--hl-background` | --code | Code highlighting colors |
| `--hl-text` | #D6DEEB | |
| `--hl-comment` | #637777 | |
| `--hl-keyword` | #7FDBCA | |
| `--hl-string` | #ADDB67 | |
| `--hl-number` | #F78C6C | |
| `--hl-name` | #FFCB8B | |
| `--hl-attr` | #ADDB67 | |
| `--hl-builtin` | #8B6CAF | |
## Layouts
|Name |Description|
|--------|-----------|
| `default` | Layout with topbar, sidebar on the left and content|
| `no_sidebar` | Layout without sidebar |
================================================
FILE: packages/themes/light/style.css
================================================
@import "styles/layout.css";
@import "styles/typography.css";
@import "styles/highlight.css";
:root{
--font: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,
Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--primary: #5BC9C3;
--secondary: #B1B1B3;
--dark: #1A202C;
--light: #E2E8F0;
--white: #ffffff;
--code: #011627;
--tag: #FEEBC8;
--tag-border:#fdd58a;
--tag-text:#DD6B20;
--text: var(--dark);
--topbar-height: 50px;
--sidebar-width: 250px;
--quote: var(--tag);
--quote-side: var(--tag-text);
--example-border: var(--light);
--props-border: var(--light);
--props-devider: var(--code);
--props-types-bg: var(--tag);
--props-types-border: var(--tag-border);
--props-types-text: var(--tag-text);
--props-oneof-text: var(--hl-builtin);
--props-default-text: var(--light);
--hl-background: var(--code);
--hl-text: #D6DEEB;
--hl-comment: #637777;
--hl-keyword: #7FDBCA;
--hl-string: #ADDB67;
--hl-number: #F78C6C;
--hl-name: #FFCB8B;
--hl-attr: #ADDB67;
--hl-builtin: #8B6CAF;
}
================================================
FILE: packages/themes/light/styles/highlight.css
================================================
/*
* You can just import theme from the higlight.js package:
* Example: @import 'highlight.js/styles/solarized-light.css'
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: var(--hl-background);
color: var(--hl-text);
font-family: var(--font-mono);
}
.hljs-comment,
.hljs-quote {
color: var(--hl-comment);
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
color: var(--hl-keyword);
}
.hljs-number{
color: var(--hl-number);
}
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
color: var(--hl-string);
}
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: var(--hl-name);
}
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
color: var(--hl-attr);
}
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
color: var(--hl-string);
}
.hljs-built_in{
color: var(--hl-builtin);
}
.hljs-deletion {
color: #dc322f;
}
.hljs-formula {
background: #eee8d5;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
================================================
FILE: packages/themes/light/styles/layout.css
================================================
html, body {
position: relative;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0px;
box-sizing: border-box;
}
.topbar{
display:flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
position: fixed;
top:0px;
height: var(--topbar-height);
border-bottom: 1px solid var(--light);
width: 100vw;
line-height: var(--topbar-height);
background-color: var(--white);
}
.logo{
margin-left:1em;
white-space: nowrap;
overflow-x: hidden;
}
.logo h1{
margin: 0px;
padding: 0px;
}
.logo h1 a:hover{
text-decoration: none;
}
.topbar ul{
margin:0px;
padding:0px;
white-space: nowrap;
}
.topbar ul li{
display:inline-block;
margin-right: 1em;
}
.topbar .show_sidebar{
display: block;
background: none;
border: none;
cursor: pointer;
color: var(--primary);
align-self: center;
margin: .2rem
}
.page{
display: flex;
align-content: flex-start;
}
.sidebar{
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
width: var(--sidebar-width);
height: calc(100vh - var(--topbar-height));
margin-top: var(--topbar-height);
border-right: 1px solid var(--light);
padding: 1em;
box-sizing: border-box;
font-size: .9em;
background-color: var(--white);
}
.sidebar ul{
margin: 0;
padding: 0;
}
.sidebar ul li{
display: block;
color: var(--secondary);
font-weight: bolder;
margin: .3em 0;
}
.sidebar ul li a{
display: block;
color: var(--text);
font-weight: normal;
}
.sidebar ul li a:hover{
color: var(--primary);
}
.sidebar ul li a.active{
color: var(--primary);
font-weight: bolder;
}
.sidebar ul ul{
margin-left: 1em;
}
.main{
padding-top: var(--topbar-height);
margin-left: var(--sidebar-width);
}
.main.nosidebar{
margin-left: .5rem;
margin-right: .5rem;
}
.article{
margin: 0 auto 3em auto;
max-width: 46rem;
}
.article img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
table.properties{
margin: 25px;
border-collapse: collapse;
width: 100%;
}
table.properties td{
vertical-align: top;
padding: .7rem;
}
table.properties .propname{
font-weight: bolder;
}
table.properties .propname.required{
text-decoration: underline;
}
table.properties .default{
color: var(--secondary);
}
table.properties tr{
border-bottom: 1px solid var(--light);
}
table.properties tr:last-child{
border-bottom: none;
}
span.typedef{
display: inline-block;
padding: 0 .3em;
color: var(--props-types-text);
background: var(--props-types-bg);
border: 1px solid var(--props-types-border);
border-radius: .3em;
margin-right: .3em;
font-style: normal;
font-family: var(--font-mono);
font-size:.8em;
letter-spacing: -.05em;
}
span.typedef span{
color: var(--props-oneof-text);
}
================================================
FILE: packages/themes/light/styles/typography.css
================================================
body {
color: var(--text);
line-height: 1.6;
font-family: var(--font);
}
a {
color: var(--primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid var(--light);
border-radius: 2px;
}
input:disabled {
color: var(--light);
}
input[type="range"] {
height: 0;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
code{
font-family: var(--font-mono);
font-size: .9rem;
background: var(--tag);
border: 1px solid var(--tag-border);
color: var(--tag-text);
padding: 0 .2em;
border-radius: .2em;
white-space: nowrap;
}
pre {
background-color: var(--code);
padding: 1rem;
overflow-x: auto;
border-radius: .7em;
margin:25px;
}
pre code {
background: none;
border: none;
padding: 0;
white-space: pre;
font-size: .9rem;
line-height: 1rem;
color: var(--hl-text);
}
.example{
border: 1px solid var(--example-border);
border-radius: .7em;
margin:25px;
}
.example pre {
border-top-left-radius : 0;
border-top-right-radius : 0;
}
blockquote {
background-color: var(--quote);
padding: 1rem 2rem;
border-left: 3px solid var(--quote-side);
}
================================================
FILE: packages/themes/package.json
================================================
{
"name": "@svelte-docs/themes",
"version": "1.0.1",
"description": "Themes set for the svelte-docs",
"repository": {
"type": "git",
"url": "git+https://github.com/AlexxNB/svelte-docs.git"
},
"author": "Alexey Schebelev",
"license": "MIT",
"bugs": {
"url": "https://github.com/AlexxNB/svelte-docs/issues"
},
"homepage": "https://alexxnb.github.io/svelte-docs",
"dependencies": {},
"devDependencies": {
"svelte": "^3.15.0"
}
}
================================================
FILE: packages/themes/utils.js
================================================
import { current_page } from '@svelte-docs/get/routes';
export function set_active_link(node){
return {
destroy: current_page.subscribe(page => {
node.querySelectorAll('a').forEach(a => {
if(a.getAttribute('href') === page.url)
a.classList.add('active');
else
a.classList.remove('active')
});
})
}
}
export function outside_click(node,handler){
document.body.addEventListener('click',handler);
return{
destroy(){
document.body.removeEventListener('click',handler);
}
}
}
================================================
FILE: scripts/clean.js
================================================
const fs = require('fs-extra');
const path = require('path');
const subjects = ['node_modules','__DOCS__','__DEV__'];
function cleanDirectory(dir='.') {
fs.readdirSync(dir).forEach(file => {
if(file === 'docs_src') return;
const filepath = path.join(dir,file);
if(subjects.includes(file)) {
console.log(filepath, 'removed');
fs.removeSync(filepath)
}else if(fs.statSync(filepath).isDirectory()){
cleanDirectory(filepath)
}
})
}
fs.removeSync('./template/src/theme');
cleanDirectory();
================================================
FILE: scripts/install.js
================================================
const fs = require('fs-extra');
const path = require('path');
const { pour } = require('std-pour');
const ln = require('symlink-dir')
const PKGDIR = './packages';
const TPLDIR = './template';
const DEVDIR = './__DEV__'
const NMDIR = path.join(DEVDIR,'node_modules','@svelte-docs');
async function run(){
console.log('1. Symlink template to the Dev dir');
ln(TPLDIR,DEVDIR);
console.log('2. Do `npm i` in the Dev dir.');
await npm('install',TPLDIR);
console.log('3. Do `npm i` in all packages and symlinking it in template.');
fs.mkdirpSync(NMDIR);
fs.readdirSync(PKGDIR).forEach(async pkg => {
if(fs.existsSync( path.join(PKGDIR,pkg,'package.json')) ){
await npm('install',path.join(PKGDIR,pkg));
ln(path.join(PKGDIR,pkg),path.join(NMDIR,pkg));
}
})
console.log('Ready!');
}
async function exec(command){
let ar = command.split(' ').map(e => e.trim()).filter(e => e !== '');
try{
await pour(ar.shift(), ar);
}catch(err){
throw new Error(err);
}
}
async function npm(command,dir){
if(dir)
await exec(`npm --prefix ${dir} ${command}`);
else
await exec(`npm ${command}`);
}
run();
================================================
FILE: scripts/link.js
================================================
const fs = require('fs');
const path = require('path');
const ln = require('symlink-dir')
const PKGDIR = './packages';
const TPLDIR = './templates/default';
const NMDIR = path.join(TPLDIR,'node_modules','@svelte-docs');
fs.readdirSync(PKGDIR).forEach(pkg => {
if(fs.existsSync( path.join(PKGDIR,pkg,'package.json')) ){
ln(path.join(PKGDIR,pkg),path.join(NMDIR,pkg));
}
})
================================================
FILE: template/.gitignore
================================================
node_modules
__DOCS__
================================================
FILE: template/package.json
================================================
{
"private": true,
"name": "svelte-docs-template",
"version": "0.3.2",
"dependencies": {
"@svelte-docs/server": "^0.1.6"
},
"devDependencies": {
"@svelte-docs/core": "^0.10.13",
"@svelte-docs/publisher": "^0.2.3",
"@svelte-docs/themes": "^1.0.1",
"npm-run-all": "^4.1.5"
},
"scripts": {
"build": "rollup -c node_modules/@svelte-docs/core/rollup.config.js",
"autobuild": "rollup -c node_modules/@svelte-docs/core/rollup.config.js -w",
"dev": "run-p start:dev start:pagewatch autobuild",
"start": "node node_modules/@svelte-docs/server",
"start:dev": "node node_modules/@svelte-docs/server --dev --single",
"start:pagewatch": "node node_modules/@svelte-docs/core/watcher",
"deploy": "npm run build && node node_modules/@svelte-docs/publisher"
}
}
================================================
FILE: template/src/examples.css
================================================
/* Styling of the examples view */
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a {
color: rgb(0,100,200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0,80,160);
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
input[type="range"] {
height: 0;
}
button {
background-color: #f4f4f4;
outline: none;
}
button:active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
================================================
FILE: template/src/includes/error.md
================================================
---
layout: 'no_sidebar'
---
# Page not found! #
[Go to start page](/)
<style>
h1,p {text-align:center}
h1 {color: var(--primary)}
</style>
================================================
FILE: template/src/includes/logo.md
================================================
# [Svelte<span>Docs</span>](/) #
<style>
span{color:var(--light)}
</style>
================================================
FILE: template/src/includes/sidebar.md
================================================
* [Getting Started](getting-started)
* Components
- [Button](components/button)
* [Github](https://github.com/alexxnb/svelte-docs)
================================================
FILE: template/src/includes/topbar.md
================================================
* [Docs](getting-started)
* [Github](https://github.com/alexxnb/svelte-docs)
================================================
FILE: template/src/pages/components/button.md
================================================
# Button
My button component
## Usage
```example
<button>default</button>
<button disabled>disabled</button>
```
## Properties
```properties
type | Type of the button | 'default','error','success'('default')
disabled | Make button disabled | bool(false)
```
================================================
FILE: template/src/pages/getting-started.md
================================================
# About my component
It is very cool button.
## Installation
Run this command:
```shell
$ npm install -D my-svelte-button
```
Then you can import it in your projects:
```html
<script>
import Button from 'my-svelte-button';
</script>
```
================================================
FILE: template/src/pages/index.md
================================================
---
layout: 'no_sidebar'
title: false
---
# Great Success
You are ready to write documentation for new [Svelte](https://svelte.dev) thing!
Start from editing files in `src/pages` directory.
> For more info visit the [Svelte-Docs Reference](https://alexxnb.github.io/svelte-docs/)
================================================
FILE: template/src/theme.css
================================================
/* Theme tunning: for full list ov variables visit the https://alexxnb.github.io/svelte-docs/theming */
:root{
--somevar: #ff3e00;
}
================================================
FILE: template/svelte-docs.config.js
================================================
module.exports = {
// if you will serve docs in subdirictory use '/subdir/'
basepath: '/',
// theme
theme: 'default',
title: {
// constant part of page title
main: 'Svelte Thing Documentation',
// use first header's content as a part of page's title
// it looks for `# Header` and `## Header` on the current page
header: true,
},
// URL to your favicon
favicon: 'static/favicon.png',
pathes: {
// directory for files, generated in development mode
dev: '__DOCS__/dev',
// directory for builted documentaton
build: '__DOCS__/dist',
},
aliases:{
// Virtual packages
// <virtual_package_name>: <local_path>,
//
// Ex1: './Button.svelte': './../dist/Button.svelte',
// Ex2: 'mylib': './../dist/index.js', (don't miss `index` and `.js` at the end!)
//
// Then you can use:
// import Button from './Button.svelte';
// import { Input } from 'mylib';
},
preprocess: [
// preprocessors for Svelte if needed in Examples
// syntax same as for `preprocess` option in `rollup-plugin-svelte`
// Ex: Import preprocessor at top of the config file:
// import {markdown} from 'svelte-preprocess-markdown';
// Then add it here:
// markdown({filetype: 'svelte'}),
]
}
gitextract_uics36sh/
├── .github/
│ └── workflows/
│ ├── build-docs.yml
│ ├── npm-publish-core.yml
│ ├── npm-publish-create.yml
│ ├── npm-publish-publisher.yml
│ ├── npm-publish-server.yml
│ └── npm-publish-themes.yml
├── .gitignore
├── LICENSE
├── README.md
├── docs_src/
│ ├── .gitignore
│ ├── exlibris/
│ │ ├── Button.svelte
│ │ ├── Counter.svelte
│ │ ├── Input.svelte
│ │ ├── Modal.svelte
│ │ ├── chota.js
│ │ └── spoiler.md
│ ├── package.json
│ ├── src/
│ │ ├── examples.css
│ │ ├── includes/
│ │ │ ├── error.md
│ │ │ ├── github.svelte
│ │ │ ├── logo.md
│ │ │ ├── opengraph.svelte
│ │ │ ├── sidebar.md
│ │ │ └── topbar.md
│ │ ├── pages/
│ │ │ ├── builtins/
│ │ │ │ ├── example.md
│ │ │ │ └── properties.md
│ │ │ ├── config/
│ │ │ │ ├── aliases.md
│ │ │ │ ├── basepath.md
│ │ │ │ ├── file.md
│ │ │ │ ├── pathes.md
│ │ │ │ ├── preprocess.md
│ │ │ │ ├── theme.md
│ │ │ │ └── title.md
│ │ │ ├── getting-started.md
│ │ │ ├── index.md
│ │ │ ├── introduction.md
│ │ │ ├── publishing/
│ │ │ │ └── ghpages.md
│ │ │ ├── theming/
│ │ │ │ ├── custom-theme.md
│ │ │ │ ├── examples.md
│ │ │ │ ├── list/
│ │ │ │ │ ├── default.md
│ │ │ │ │ └── light.md
│ │ │ │ └── theme-tuning.md
│ │ │ ├── theming.md
│ │ │ └── writing/
│ │ │ ├── includes.md
│ │ │ ├── mdsv.md
│ │ │ ├── routing.md
│ │ │ ├── settings.md
│ │ │ ├── static.md
│ │ │ └── structure.md
│ │ └── theme.css
│ └── svelte-docs.config.js
├── package.json
├── packages/
│ ├── core/
│ │ ├── App.svelte
│ │ ├── aliases/
│ │ │ └── rollup_plugin_aliases.js
│ │ ├── builtins/
│ │ │ ├── Example/
│ │ │ │ ├── Example.svelte
│ │ │ │ ├── iframe.js
│ │ │ │ └── replacer.js
│ │ │ ├── Properties/
│ │ │ │ ├── parser.js
│ │ │ │ └── replacer.js
│ │ │ ├── blockparser.js
│ │ │ ├── rollup_plugin_builtins.js
│ │ │ ├── rollup_plugin_examples.js
│ │ │ └── svelte_preprocess_builtins.js
│ │ ├── config.js
│ │ ├── constants.js
│ │ ├── examples.main.js
│ │ ├── fixidents/
│ │ │ └── rollup_plugin_fixidents.js
│ │ ├── highlight.js
│ │ ├── indexer/
│ │ │ └── rollup_plugin_indexer.js
│ │ ├── main.js
│ │ ├── navigation.js
│ │ ├── package.json
│ │ ├── pages/
│ │ │ ├── rollup_plugin_pages.js
│ │ │ └── routes.js
│ │ ├── replacer/
│ │ │ └── rollup_plugin_replacer.js
│ │ ├── rollup.config.js
│ │ ├── stores.js
│ │ ├── syncer/
│ │ │ └── rollup_plugin_syncer.js
│ │ ├── themes.js
│ │ ├── utils.js
│ │ └── watcher.js
│ ├── create/
│ │ ├── cli.js
│ │ └── package.json
│ ├── publisher/
│ │ ├── package.json
│ │ └── publisher.js
│ ├── server/
│ │ ├── package.json
│ │ └── server.js
│ └── themes/
│ ├── default/
│ │ ├── components/
│ │ │ ├── Document.svelte
│ │ │ ├── Example.svelte
│ │ │ ├── Layout.svelte
│ │ │ ├── Properties.svelte
│ │ │ ├── Sections.svelte
│ │ │ └── Topbar.svelte
│ │ ├── info.md
│ │ ├── style.css
│ │ └── styles/
│ │ ├── fonts.css
│ │ ├── highlight.css
│ │ ├── layout.css
│ │ └── typography.css
│ ├── light/
│ │ ├── components/
│ │ │ ├── Example.svelte
│ │ │ ├── Layout.svelte
│ │ │ └── Properties.svelte
│ │ ├── info.md
│ │ ├── style.css
│ │ └── styles/
│ │ ├── highlight.css
│ │ ├── layout.css
│ │ └── typography.css
│ ├── package.json
│ └── utils.js
├── scripts/
│ ├── clean.js
│ ├── install.js
│ └── link.js
└── template/
├── .gitignore
├── package.json
├── src/
│ ├── examples.css
│ ├── includes/
│ │ ├── error.md
│ │ ├── logo.md
│ │ ├── sidebar.md
│ │ └── topbar.md
│ ├── pages/
│ │ ├── components/
│ │ │ └── button.md
│ │ ├── getting-started.md
│ │ └── index.md
│ └── theme.css
└── svelte-docs.config.js
SYMBOL INDEX (84 symbols across 26 files)
FILE: packages/core/aliases/rollup_plugin_aliases.js
method resolveId (line 11) | resolveId(id,importer) {
method load (line 17) | load(id) {
FILE: packages/core/builtins/Example/iframe.js
function getHeight (line 5) | function getHeight(){
FILE: packages/core/builtins/Properties/parser.js
function getInterface (line 3) | function getInterface(source){
function extractScriptTag (line 26) | function extractScriptTag(source){
function parseJS (line 39) | function parseJS(code){
function parseDeclarator (line 72) | function parseDeclarator(dec,kind){
function parseJSDoc (line 86) | function parseJSDoc(code){
function parseTypes (line 102) | function parseTypes(code){
FILE: packages/core/builtins/Properties/replacer.js
function propsExtrator (line 48) | function propsExtrator(source){
FILE: packages/core/builtins/blockparser.js
function getBlocks (line 1) | function getBlocks (text) {
function getProps (line 46) | function getProps(str) {
FILE: packages/core/builtins/rollup_plugin_builtins.js
function getBuiltComponents (line 3) | function getBuiltComponents(pkg) {
function builtins (line 10) | function builtins() {
FILE: packages/core/builtins/rollup_plugin_examples.js
function example_component (line 11) | function example_component() {
function examples_sources (line 23) | function examples_sources() {
function examples_index (line 41) | function examples_index() {
FILE: packages/core/builtins/svelte_preprocess_builtins.js
function builtins (line 10) | function builtins() {
function replaceBuiltins (line 24) | function replaceBuiltins(text,filename){
FILE: packages/core/constants.js
constant CWD (line 5) | const CWD = process.cwd();
constant CORE (line 6) | const CORE = path.resolve(path.join(CWD,'node_modules','@svelte-docs','c...
constant DEVPATH (line 8) | const DEVPATH = path.join(CWD,config.pathes.dev);
constant BUILDPATH (line 9) | const BUILDPATH = path.join(CWD,config.pathes.build);
constant INDEX (line 10) | const INDEX = path.join(CORE,'main.js');
constant SRC (line 12) | const SRC = path.join(CWD,'src');
constant PAGES (line 13) | const PAGES = path.join(SRC,'pages');
constant INCLUDES (line 14) | const INCLUDES = path.join(SRC,'includes');
constant THEME (line 15) | const THEME = getThemePath();
constant STATIC (line 16) | const STATIC = path.join(SRC,'static');
constant STARTPAGE (line 17) | const STARTPAGE = path.join(PAGES,'index.md');
constant ERRORPAGE (line 18) | const ERRORPAGE = path.join(INCLUDES,'error.md');
constant PROPS_CMP (line 20) | const PROPS_CMP = path.join(THEME,'components','Properties.svelte');
constant EX_LAYOUT (line 21) | const EX_LAYOUT = path.join(THEME,'components','Example.svelte');
constant EX_CSS (line 22) | const EX_CSS = path.join(SRC,'examples.css');
constant EX_CMP (line 23) | const EX_CMP = path.join(CORE,'builtins','Example','Example.svelte');
constant EX_IFRAME (line 24) | const EX_IFRAME = path.join(CORE,'builtins','Example','iframe.js');
constant EX_INDEX (line 25) | const EX_INDEX = path.join(CORE,'examples.main.js');
FILE: packages/core/indexer/rollup_plugin_indexer.js
method writeBundle (line 11) | writeBundle(opts) {
function goTree (line 21) | function goTree(dir,slug='') {
function getTemplate (line 37) | function getTemplate(){
FILE: packages/core/navigation.js
function go (line 5) | function go(href){
function initNavigation (line 10) | function initNavigation() {
function gohistory (line 20) | function gohistory(){
function getURL (line 24) | function getURL() {
function click (line 30) | function click (event) {
function cleanURL (line 53) | function cleanURL(url){
function getBasepath (line 61) | function getBasepath(){
FILE: packages/core/pages/rollup_plugin_pages.js
function pages (line 9) | function pages() {
FILE: packages/core/pages/routes.js
function getRoutes (line 42) | function getRoutes(dir,slug='') {
function isDir (line 87) | function isDir(filepath) {
function formatComponentName (line 91) | function formatComponentName(text){
function formatSlug (line 100) | function formatSlug(text){
function retrieveTitleFromHeader (line 104) | function retrieveTitleFromHeader(filename){
FILE: packages/core/replacer/rollup_plugin_replacer.js
method resolveId (line 13) | resolveId(id) {
FILE: packages/core/rollup.config.js
constant DIR (line 27) | const DIR = production ? path.join(BUILDPATH,config.basepath) : path.joi...
FILE: packages/core/stores.js
constant STORES (line 1) | let STORES = {};
function init_store (line 5) | function init_store() {
FILE: packages/core/syncer/rollup_plugin_syncer.js
method generateBundle (line 19) | generateBundle(opts, bundle) {
FILE: packages/core/themes.js
constant CWD (line 5) | const CWD = process.cwd();
function getThemePath (line 7) | function getThemePath(){
FILE: packages/core/utils.js
function ERR (line 6) | function ERR(text,comment) {
function getRealImportedPath (line 12) | function getRealImportedPath(filepath){
FILE: packages/create/cli.js
function npminstall (line 18) | function npminstall (dir) {
FILE: packages/publisher/publisher.js
function run (line 13) | async function run() {
function Err (line 52) | function Err(message){
function publish_ghpages (line 57) | function publish_ghpages(dir,cb){
FILE: packages/server/server.js
constant CWD (line 41) | const CWD = process.cwd();
constant DEV (line 43) | const DEV = cli.flags.dev;
constant CORS (line 44) | const CORS = cli.flags.cors;
constant SINGLE (line 45) | const SINGLE = cli.flags.single;
constant DIR (line 47) | const DIR = DEV ? path.join(CWD,config.pathes.dev) : path.join(CWD,confi...
FILE: packages/themes/utils.js
function set_active_link (line 3) | function set_active_link(node){
function outside_click (line 16) | function outside_click(node,handler){
FILE: scripts/clean.js
function cleanDirectory (line 6) | function cleanDirectory(dir='.') {
FILE: scripts/install.js
constant PKGDIR (line 6) | const PKGDIR = './packages';
constant TPLDIR (line 7) | const TPLDIR = './template';
constant DEVDIR (line 9) | const DEVDIR = './__DEV__'
constant NMDIR (line 11) | const NMDIR = path.join(DEVDIR,'node_modules','@svelte-docs');
function run (line 13) | async function run(){
function exec (line 36) | async function exec(command){
function npm (line 45) | async function npm(command,dir){
FILE: scripts/link.js
constant PKGDIR (line 5) | const PKGDIR = './packages';
constant TPLDIR (line 6) | const TPLDIR = './templates/default';
constant NMDIR (line 7) | const NMDIR = path.join(TPLDIR,'node_modules','@svelte-docs');
Condensed preview — 124 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (129K chars).
[
{
"path": ".github/workflows/build-docs.yml",
"chars": 739,
"preview": "name: Build Documentation\n\non:\n push:\n branches: \n - master \n paths:\n - '.github/workflows/build-doc"
},
{
"path": ".github/workflows/npm-publish-core.yml",
"chars": 736,
"preview": "name: Publish @svelte-docs/core\n\non:\n push:\n branches: \n - master \n paths:\n - '.github/workflows/npm"
},
{
"path": ".github/workflows/npm-publish-create.yml",
"chars": 747,
"preview": "name: Publish create-svelte-docs\n\non:\n push:\n branches: \n - master \n paths:\n - '.github/workflows/np"
},
{
"path": ".github/workflows/npm-publish-publisher.yml",
"chars": 680,
"preview": "name: Publish @svelte-docs/publisher\n\non:\n push:\n branches: \n - master \n paths:\n - '.github/workflow"
},
{
"path": ".github/workflows/npm-publish-server.yml",
"chars": 665,
"preview": "name: Publish @svelte-docs/server\n\non:\n push:\n branches: \n - master \n paths:\n - '.github/workflows/n"
},
{
"path": ".github/workflows/npm-publish-themes.yml",
"chars": 665,
"preview": "name: Publish @svelte-docs/themes\n\non:\n push:\n branches: \n - master \n paths:\n - '.github/workflows/n"
},
{
"path": ".gitignore",
"chars": 58,
"preview": ".DS_Store\nnode_modules\n__DOCS__\ntemplate/src/theme\n__DEV__"
},
{
"path": "LICENSE",
"chars": 1073,
"preview": "MIT License\n\nCopyright (c) 2019 Alexey Schebelev\n\nPermission is hereby granted, free of charge, to any person obtaining "
},
{
"path": "README.md",
"chars": 1434,
"preview": "# Svelte-Docs\n\n<span style=\"color:gold\">**Sorry, but current version of Svelte-Docs will not be developing anymore. I wi"
},
{
"path": "docs_src/.gitignore",
"chars": 21,
"preview": "node_modules\n__DOCS__"
},
{
"path": "docs_src/exlibris/Button.svelte",
"chars": 516,
"preview": "<script>\n export let primary;\n export let error;\n</script>\n\n<button class:primary class:error><slot /></button>\n\n<"
},
{
"path": "docs_src/exlibris/Counter.svelte",
"chars": 543,
"preview": "<script>\nlet count = 0;\n</script>\n\n<span class=\"counter\">\n<span class=\"minus\" on:click={e => count--}>-</span>\n<span cla"
},
{
"path": "docs_src/exlibris/Input.svelte",
"chars": 368,
"preview": "<script>\n /** @type {string} Name of the input */\n export let name;\n /** @type {('text','number','range','date'"
},
{
"path": "docs_src/exlibris/Modal.svelte",
"chars": 720,
"preview": "<script>\n import {fade} from 'svelte/transition';\n export let open = false;\n</script>\n\n{#if open}\n<div class=\"cont"
},
{
"path": "docs_src/exlibris/chota.js",
"chars": 50,
"preview": "export {default as Button} from './Button.svelte';"
},
{
"path": "docs_src/exlibris/spoiler.md",
"chars": 24,
"preview": "> *MDSv is really cool!*"
},
{
"path": "docs_src/package.json",
"chars": 836,
"preview": "{\n \"private\": true,\n \"name\": \"svelte-docs-template\",\n \"version\": \"0.2.0\",\n \"dependencies\": {\n \"@svelte-docs/serve"
},
{
"path": "docs_src/src/examples.css",
"chars": 805,
"preview": "/* Styling of the examples view */\n\nbody {\n\tcolor: #333;\n\tmargin: 0;\n\tpadding: 8px;\n\tbox-sizing: border-box;\n\tfont-famil"
},
{
"path": "docs_src/src/includes/error.md",
"chars": 149,
"preview": "---\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 {co"
},
{
"path": "docs_src/src/includes/github.svelte",
"chars": 2033,
"preview": "<script>\n import { cubicInOut } from 'svelte/easing';\n import { tweened } from 'svelte/motion';\n\n /** @type {st"
},
{
"path": "docs_src/src/includes/logo.md",
"chars": 216,
"preview": "import {current_page} from '@svelte-docs/get/routes';\n\n\n{#if $current_page.url !== ''}\n# [](/) #"
},
{
"path": "docs_src/src/includes/opengraph.svelte",
"chars": 866,
"preview": "<script>\n import {current_page} from '@svelte-docs/get/routes';\n import maintitle from '@svelte-docs/get/maintitle"
},
{
"path": "docs_src/src/includes/sidebar.md",
"chars": 897,
"preview": "* [Introduction](introduction)\n* [Getting Started](getting-started)\n* Writing docs\n - [What is MDSv](writing/mdsv)\n "
},
{
"path": "docs_src/src/includes/topbar.md",
"chars": 190,
"preview": "import Github from './github.svelte';\nimport Opengraph from './opengraph.svelte';\n\n<Opengraph />\n\n* [Docs](getting-start"
},
{
"path": "docs_src/src/pages/builtins/example.md",
"chars": 2595,
"preview": "# Example code block\n\nWhen you document your Svelte component you want show it in action. You can do it with *Example co"
},
{
"path": "docs_src/src/pages/builtins/properties.md",
"chars": 2866,
"preview": "# Properties\n\nUsually all components you want to document have some properties, which should be described. Properties co"
},
{
"path": "docs_src/src/pages/config/aliases.md",
"chars": 1047,
"preview": "# aliases option\n\nOption `aliases` is the list of aliases for you local component's paths.\n\nSuppose you have following s"
},
{
"path": "docs_src/src/pages/config/basepath.md",
"chars": 586,
"preview": "# Basepath option\n\nOption `basepath` is a part of URL to the root documentation site. \n\nBy default `basepath` is equal `"
},
{
"path": "docs_src/src/pages/config/file.md",
"chars": 190,
"preview": "# Configuration\n\nAt the root of the documents sources directory you can find find `svelte-docs.config.js` file. For more"
},
{
"path": "docs_src/src/pages/config/pathes.md",
"chars": 572,
"preview": "# Pathes option\n\nThere are two pathes you can change. \n\n* `pathes.dev` - directory, where builded site is stored in deve"
},
{
"path": "docs_src/src/pages/config/preprocess.md",
"chars": 586,
"preview": "# Preprocess option\n\nYou can use any Svelte preprocessor for your Examples code block. Just install it from NPM, import "
},
{
"path": "docs_src/src/pages/config/theme.md",
"chars": 330,
"preview": "# Theme option\n\nChoose theme for documentation site. List of avialable themes you can find on the sidebar.\n\n```js\n...\nth"
},
{
"path": "docs_src/src/pages/config/title.md",
"chars": 331,
"preview": "# Title option\n\nThere are two properties which can be changed:\n\n* `title.main` - this is constant part of the page's tit"
},
{
"path": "docs_src/src/pages/getting-started.md",
"chars": 1067,
"preview": "# Getting started\n\n### Initialize Svelte-docs\n\nJust run this command in the root directory of your project:\n\n```bash\nnpm"
},
{
"path": "docs_src/src/pages/index.md",
"chars": 1110,
"preview": "---\nlayout: 'no_sidebar'\ntitle: false\n---\n\n<div class=\"hero\">\n <div class=\"banner\">\n\n ![Svelte-Docs Logo](stat"
},
{
"path": "docs_src/src/pages/introduction.md",
"chars": 1413,
"preview": "# Introducing\n\n## Features\n\nSvelte-Docs is a rapid way to write documentation for your [Svelte](https://svelte.dev) comp"
},
{
"path": "docs_src/src/pages/publishing/ghpages.md",
"chars": 581,
"preview": "# Publishing on Github Pages\n\nSvelte-docs has built-in publishing tool to deploy builded documentation into *gh-pages* b"
},
{
"path": "docs_src/src/pages/theming/custom-theme.md",
"chars": 779,
"preview": "# Custom theme\n\nYou can make your own theme and use its directory path as [config.theme](config/theme) value. There are "
},
{
"path": "docs_src/src/pages/theming/examples.md",
"chars": 576,
"preview": "# Examples view CSS\n\nExamples view(where the result shows) use CSS styles which are isolated from theme of the site. The"
},
{
"path": "docs_src/src/pages/theming/list/default.md",
"chars": 79,
"preview": "import Info from '@CWD/../packages/themes/default/info.md';\n\n# Default\n<Info />"
},
{
"path": "docs_src/src/pages/theming/list/light.md",
"chars": 75,
"preview": "import Info from '@CWD/../packages/themes/light/info.md';\n\n# Light\n<Info />"
},
{
"path": "docs_src/src/pages/theming/theme-tuning.md",
"chars": 422,
"preview": "# Theme tuning\n\nEach theme allows to tune some predefined CSS variables which are listed in themes descriptions.\n\nAdd va"
},
{
"path": "docs_src/src/pages/theming.md",
"chars": 887,
"preview": "# Theming\n\nSvelte-docs supports the customizable appearance. All you need for applying changes to almost every visual as"
},
{
"path": "docs_src/src/pages/writing/includes.md",
"chars": 1720,
"preview": "# Includes\n\nIn the `src/includes` directory live little MDSv components which you can include in any page you want. Ther"
},
{
"path": "docs_src/src/pages/writing/mdsv.md",
"chars": 1736,
"preview": "<script>\n import Counter from './../../../exlibris/Counter.svelte';\n import Spoiler from './../../../exlibris/spoi"
},
{
"path": "docs_src/src/pages/writing/routing.md",
"chars": 710,
"preview": "# Routing\n\n*Svelte-Docs* has built-in routing system based on files structure in the `src/pages` directory:\n\n```bash\nsrc"
},
{
"path": "docs_src/src/pages/writing/settings.md",
"chars": 722,
"preview": "# Pages configuration\n\nYou can configure every pages with few parameters in markdown's metatags block at the top of need"
},
{
"path": "docs_src/src/pages/writing/static.md",
"chars": 386,
"preview": "# Static files\n\nAny static files used in documents such as images, icons or files for download are stored in `src/static"
},
{
"path": "docs_src/src/pages/writing/structure.md",
"chars": 708,
"preview": "# Structure\n\nLet's see the structure of the doc's project directory:\n\n```bash\nsrc\n├── includes\n├── pages\n├── static\n├── "
},
{
"path": "docs_src/src/theme.css",
"chars": 104,
"preview": "/* Theme tunning: for full list ov variables visit the https://alexxnb.github.io/svelte-docs/theming */\n"
},
{
"path": "docs_src/svelte-docs.config.js",
"chars": 1871,
"preview": "module.exports = {\n // if you will serve docs in subderictory use '/subdir/'\n basepath: '/svelte-docs/',\n\n them"
},
{
"path": "package.json",
"chars": 556,
"preview": "{\n \"private\": true,\n \"version\": \"0.2.0\",\n \"scripts\": {\n \"postinstall\": \"node scripts/install\",\n \"link\": \"node s"
},
{
"path": "packages/core/App.svelte",
"chars": 287,
"preview": "<script>\n\t// import theme\n\timport '@THEME/style.css';\n\timport '@SRC/theme.css';\n\timport Layout from '@THEME/components/L"
},
{
"path": "packages/core/aliases/rollup_plugin_aliases.js",
"chars": 993,
"preview": "import path from 'path';\nimport fs from 'fs';\nimport { ERR } from './../utils.js';\nimport config from './../config';\n\n//"
},
{
"path": "packages/core/builtins/Example/Example.svelte",
"chars": 1763,
"preview": "<script context=\"module\">\n let uid = 1;\n</script>\n\n<script> \n import ExampleLayout from '@svelte-docs/get/Examp"
},
{
"path": "packages/core/builtins/Example/iframe.js",
"chars": 582,
"preview": "import { addListener } from 'resize-detector';\n\nlet iframe_id = 0;\n\nfunction getHeight(){\n return document.documentEl"
},
{
"path": "packages/core/builtins/Example/replacer.js",
"chars": 610,
"preview": "import highlight from './../../highlight';\nimport { ExamplesStore } from './../../stores';\n\nexport default (content,para"
},
{
"path": "packages/core/builtins/Properties/parser.js",
"chars": 3456,
"preview": "import espree from 'espree';\n\nexport function getInterface(source){\n const code = extractScriptTag(source);\n\n cons"
},
{
"path": "packages/core/builtins/Properties/replacer.js",
"chars": 2257,
"preview": "import marked from 'marked';\nimport fs from 'fs-extra';\nimport { PROPS_CMP } from './../../constants';\nimport { getRealI"
},
{
"path": "packages/core/builtins/blockparser.js",
"chars": 1846,
"preview": "export function getBlocks (text) {\n\n const re = new RegExp('^([\\\\t ]*)```([\\\\w:\\. ]*)[\\\\t ]*$','mg');\n let result;"
},
{
"path": "packages/core/builtins/rollup_plugin_builtins.js",
"chars": 534,
"preview": "import { BUILTIN_PKG, CMP_EXAMPLE} from './../constants';\n\nfunction getBuiltComponents(pkg) {\n\n if(pkg === BUILTIN_PK"
},
{
"path": "packages/core/builtins/rollup_plugin_examples.js",
"chars": 1830,
"preview": "import { EX_CSS,EX_IFRAME,EX_CMP, EX_LAYOUT } from './../constants';\nimport { ExamplesStore } from './../stores';\nimport"
},
{
"path": "packages/core/builtins/svelte_preprocess_builtins.js",
"chars": 1864,
"preview": "import hasha from 'hasha';\nimport touch from 'touch';\nimport { ExamplesStore } from './../stores';\nimport { EX_INDEX } f"
},
{
"path": "packages/core/config.js",
"chars": 113,
"preview": "import importCWD from 'import-cwd';\n\nconst config = importCWD('./svelte-docs.config.js');\n\nexport default config;"
},
{
"path": "packages/core/constants.js",
"chars": 1132,
"preview": "import path from 'path';\nimport config from './config';\nimport {getThemePath} from './themes';\n\nexport const CWD = proce"
},
{
"path": "packages/core/examples.main.js",
"chars": 32,
"preview": "export * from 'examples_src.js';"
},
{
"path": "packages/core/fixidents/rollup_plugin_fixidents.js",
"chars": 557,
"preview": "import path from 'path';\nimport fs from 'fs-extra';\n\n// this will remove idents inside <pre> tags in builted bundle;\nexp"
},
{
"path": "packages/core/highlight.js",
"chars": 492,
"preview": "import hljs from 'highlight.js';\nimport hljs_svelte from 'highlightjs-svelte';\n\nhljs_svelte(hljs);\n\nexport default funct"
},
{
"path": "packages/core/indexer/rollup_plugin_indexer.js",
"chars": 1464,
"preview": "import path from 'path';\nimport fs from 'fs-extra';\nimport { PAGES } from './../constants';\nimport config from './../con"
},
{
"path": "packages/core/main.js",
"chars": 114,
"preview": "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",
"chars": 1446,
"preview": "import {writable} from 'svelte/store';\n\nexport const url = writable(getURL());\n\nexport function go(href){\n history.pu"
},
{
"path": "packages/core/package.json",
"chars": 1130,
"preview": "{\n \"name\": \"@svelte-docs/core\",\n \"version\": \"0.10.13\",\n \"description\": \"Core of Svelte-docs builder\",\n \"dependencies"
},
{
"path": "packages/core/pages/rollup_plugin_pages.js",
"chars": 486,
"preview": "import getRoutes from './routes';\nimport config from './../config';\n\nconst imports = {\n \"@svelte-docs/get/routes\": ge"
},
{
"path": "packages/core/pages/routes.js",
"chars": 3103,
"preview": "import path from 'path';\nimport fs from 'fs';\n\nimport {PAGES,STARTPAGE,ERRORPAGE} from './../constants';\nimport config f"
},
{
"path": "packages/core/replacer/rollup_plugin_replacer.js",
"chars": 431,
"preview": "import {CWD,SRC,INCLUDES,THEME} from './../constants';\n\nconst vars = {\n \"@CWD\": CWD,\n \"@SRC\": SRC,\n \"@INCLUDES\""
},
{
"path": "packages/core/rollup.config.js",
"chars": 2807,
"preview": "import fs from 'fs-extra';\nimport path from 'path';\nimport svelte from 'rollup-plugin-svelte';\nimport resolve from '@rol"
},
{
"path": "packages/core/stores.js",
"chars": 1117,
"preview": "let STORES = {};\n\nexport const ExamplesStore = init_store();\n\nfunction init_store() {\n const id = {};\n STORES[id] "
},
{
"path": "packages/core/syncer/rollup_plugin_syncer.js",
"chars": 709,
"preview": "import path from 'path';\nimport fs from 'fs-extra';\nimport syncFolders from 'sync-folders';\n\nimport {STATIC,THEME} from "
},
{
"path": "packages/core/themes.js",
"chars": 678,
"preview": "import fs from 'fs-extra';\nimport path from 'path';\nimport config from './config';\n\nconst CWD = process.cwd();\n\nexport f"
},
{
"path": "packages/core/utils.js",
"chars": 1167,
"preview": "import chalk from 'chalk';\nimport path from 'path';\nimport fs from 'fs-extra';\nimport config from './config';\n\nexport fu"
},
{
"path": "packages/core/watcher.js",
"chars": 321,
"preview": "const path = require('path');\nconst touch = require('touch');\nconst watch = require('node-watch');\n\nconst watch_path = ["
},
{
"path": "packages/create/cli.js",
"chars": 2604,
"preview": "#!/usr/bin/env node\nconst fs = require('fs-extra')\nconst path = require('path')\nconst meow = require('meow')\nconst promp"
},
{
"path": "packages/create/package.json",
"chars": 719,
"preview": "{\n \"name\": \"create-svelte-docs\",\n \"version\": \"0.3.2\",\n \"description\": \"CLI tool to init docs source directory\",\n \"ma"
},
{
"path": "packages/publisher/package.json",
"chars": 648,
"preview": "{\n \"name\": \"@svelte-docs/publisher\",\n \"version\": \"0.2.3\",\n \"description\": \"Helps to publish Svelte-docs on Github Pag"
},
{
"path": "packages/publisher/publisher.js",
"chars": 1936,
"preview": "const importCWD = require('import-cwd');\nconst exec = require('shelljs.exec');\nconst path = require('path');\nconst creat"
},
{
"path": "packages/server/package.json",
"chars": 637,
"preview": "{\n \"name\": \"@svelte-docs/server\",\n \"version\": \"0.1.6\",\n \"description\": \"HTTP server to run Svelte-docs in development"
},
{
"path": "packages/server/server.js",
"chars": 1955,
"preview": "#!/usr/bin/env node\n\nconst path = require('path');\nconst meow = require('meow');\nconst sirv = require('sirv');\nconst { c"
},
{
"path": "packages/themes/default/components/Document.svelte",
"chars": 231,
"preview": "<script>\n import {current_page} from '@svelte-docs/get/routes';\n\n current_page.subscribe(() => {\n window.sc"
},
{
"path": "packages/themes/default/components/Example.svelte",
"chars": 156,
"preview": "<div class=\"example\">\n <div class=\"result\">\n <slot name=\"result\"/>\n </div>\n <div class=\"code\">\n <"
},
{
"path": "packages/themes/default/components/Layout.svelte",
"chars": 2387,
"preview": "<script>\n\timport { writable } from 'svelte/store';\n\timport { tweened } from 'svelte/motion';\n\timport { current_page } fr"
},
{
"path": "packages/themes/default/components/Properties.svelte",
"chars": 975,
"preview": "<script>\n/* (!) Restart bandler if this file was edited\n* \n* Properties data structure:\n* data = [\n* { \n* "
},
{
"path": "packages/themes/default/components/Sections.svelte",
"chars": 83,
"preview": "<script> \n import Sidebar from '@INCLUDES/sidebar.md';\n</script>\n\n<Sidebar />"
},
{
"path": "packages/themes/default/components/Topbar.svelte",
"chars": 175,
"preview": "<script>\n import Logo from '@INCLUDES/logo.md';\n import Topbar from '@INCLUDES/topbar.md';\n</script>\n\n<section>\n "
},
{
"path": "packages/themes/default/info.md",
"chars": 1673,
"preview": "Theme based on [offical Svelte documentation site](https://svelte.dev/docs).\n\n*by Alexey Schebelev*\n\n## Theme variables\n"
},
{
"path": "packages/themes/default/style.css",
"chars": 1054,
"preview": "@import \"styles/layout.css\";\n@import \"styles/typography.css\";\n@import \"styles/fonts.css\";\n@import \"styles/highlight.css\""
},
{
"path": "packages/themes/default/styles/fonts.css",
"chars": 992,
"preview": "/* overpass-300normal */\n@font-face {\n\tfont-family: 'Overpass';\n\tfont-style: normal;\n\tfont-weight: 300;\n\tfont-display: f"
},
{
"path": "packages/themes/default/styles/highlight.css",
"chars": 1235,
"preview": "/*\n* You can just import theme from the higlight.js package:\n* Example: @import 'highlight.js/styles/solarized-light"
},
{
"path": "packages/themes/default/styles/layout.css",
"chars": 3895,
"preview": "html, body {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tmargin: 0;\n\tpadding: 0px;\n\tbox-sizing: border-"
},
{
"path": "packages/themes/default/styles/typography.css",
"chars": 1223,
"preview": "body {\n\tcolor: var(--text);\n\tfont-family: \"Overpass\", sans-serif;\n\tfont-weight: 300;\n\tline-height: 1.6;\n}\n\nstrong{\n\tfon"
},
{
"path": "packages/themes/light/components/Example.svelte",
"chars": 156,
"preview": "<div class=\"example\">\n <div class=\"result\">\n <slot name=\"result\"/>\n </div>\n <div class=\"code\">\n <"
},
{
"path": "packages/themes/light/components/Layout.svelte",
"chars": 1486,
"preview": "<script>\n\timport { current_page } from '@svelte-docs/get/routes';\n\timport maintitle from '@svelte-docs/get/maintitle';\n\t"
},
{
"path": "packages/themes/light/components/Properties.svelte",
"chars": 1228,
"preview": "<script>\n/* (!) Restart bandler if this file was edited\n* \n* Properties data structure:\n* data = [\n* { \n* "
},
{
"path": "packages/themes/light/info.md",
"chars": 1906,
"preview": "Light and clean theme \n*by Alexey Schebelev*\n\n## Theme variables\n\n|Variable|Default|Comment|\n|--------|-------|---------"
},
{
"path": "packages/themes/light/style.css",
"chars": 1272,
"preview": "@import \"styles/layout.css\";\n@import \"styles/typography.css\";\n@import \"styles/highlight.css\";\n\n:root{\n --font: -apple"
},
{
"path": "packages/themes/light/styles/highlight.css",
"chars": 1218,
"preview": "/*\n* You can just import theme from the higlight.js package:\n* Example: @import 'highlight.js/styles/solarized-light"
},
{
"path": "packages/themes/light/styles/layout.css",
"chars": 2697,
"preview": "html, body {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tmargin: 0;\n\tpadding: 0px;\n\tbox-sizing: border-"
},
{
"path": "packages/themes/light/styles/typography.css",
"chars": 1382,
"preview": "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-decorati"
},
{
"path": "packages/themes/package.json",
"chars": 468,
"preview": "{\n \"name\": \"@svelte-docs/themes\",\n \"version\": \"1.0.1\",\n \"description\": \"Themes set for the svelte-docs\",\n \"repositor"
},
{
"path": "packages/themes/utils.js",
"chars": 616,
"preview": "import { current_page } from '@svelte-docs/get/routes';\n\nexport function set_active_link(node){\n return {\n des"
},
{
"path": "scripts/clean.js",
"chars": 573,
"preview": "const fs = require('fs-extra');\nconst path = require('path');\n\nconst subjects = ['node_modules','__DOCS__','__DEV__'];\n\n"
},
{
"path": "scripts/install.js",
"chars": 1223,
"preview": "const fs = require('fs-extra');\nconst path = require('path');\nconst { pour } = require('std-pour');\nconst ln = require('"
},
{
"path": "scripts/link.js",
"chars": 391,
"preview": "const fs = require('fs');\nconst path = require('path');\nconst ln = require('symlink-dir')\n\nconst PKGDIR = './packages';\n"
},
{
"path": "template/.gitignore",
"chars": 21,
"preview": "node_modules\n__DOCS__"
},
{
"path": "template/package.json",
"chars": 811,
"preview": "{\n \"private\": true,\n \"name\": \"svelte-docs-template\",\n \"version\": \"0.3.2\",\n \"dependencies\": {\n \"@svelte-docs/serve"
},
{
"path": "template/src/examples.css",
"chars": 805,
"preview": "/* Styling of the examples view */\n\nbody {\n\tcolor: #333;\n\tmargin: 0;\n\tpadding: 8px;\n\tbox-sizing: border-box;\n\tfont-famil"
},
{
"path": "template/src/includes/error.md",
"chars": 149,
"preview": "---\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 {co"
},
{
"path": "template/src/includes/logo.md",
"chars": 79,
"preview": "# [Svelte<span>Docs</span>](/) #\n\n<style>\n span{color:var(--light)}\n</style>"
},
{
"path": "template/src/includes/sidebar.md",
"chars": 134,
"preview": "* [Getting Started](getting-started)\n* Components\n - [Button](components/button)\n* [Github](https://github.com/alexxn"
},
{
"path": "template/src/includes/topbar.md",
"chars": 76,
"preview": "* [Docs](getting-started)\n* [Github](https://github.com/alexxnb/svelte-docs)"
},
{
"path": "template/src/pages/components/button.md",
"chars": 261,
"preview": "# Button\n\nMy button component\n\n## Usage\n```example\n<button>default</button>\n<button disabled>disabled</button> \n```\n\n## "
},
{
"path": "template/src/pages/getting-started.md",
"chars": 248,
"preview": "# 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-b"
},
{
"path": "template/src/pages/index.md",
"chars": 342,
"preview": "---\nlayout: 'no_sidebar'\ntitle: false\n---\n# Great Success\n\nYou are ready to write documentation for new [Svelte](https:/"
},
{
"path": "template/src/theme.css",
"chars": 143,
"preview": "/* Theme tunning: for full list ov variables visit the https://alexxnb.github.io/svelte-docs/theming */\n\n:root{\n\n --s"
},
{
"path": "template/svelte-docs.config.js",
"chars": 1449,
"preview": "module.exports = {\n // if you will serve docs in subdirictory use '/subdir/'\n basepath: '/',\n\n // theme \n th"
}
]
About this extraction
This page contains the full source code of the AlexxNB/svelte-docs GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 124 files (112.0 KB), approximately 34.5k tokens, and a symbol index with 84 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.