I'm modal.
{@html code.trim()} tags in builted bundle;
export default function () {
const ident_remover = function(text) {
return text.replace(/(]+>)\\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=''/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 `
${config.title.main}
${config.favicon ? `` : ''}
`
}
================================================
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}(?!#)|)((.+)(\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
================================================
================================================
FILE: packages/themes/default/components/Example.svelte
================================================
{title}
{#if layout === 'no_sidebar'}
{/if}
{#if layout === 'default'}
{#if $mobile}
{/if}
{#if !$mobile || show_sidebar}
{/if}
{/if}
================================================
FILE: packages/themes/default/components/Properties.svelte
================================================
{#each data as prop}
- {prop.name}
- {@html getTypes(prop.attr.types)}
- {prop.attr.default ? prop.attr.default : ''}
- {@html prop.description ? prop.description : ''}
{/each}
================================================
FILE: packages/themes/default/components/Sections.svelte
================================================
================================================
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,');
}
.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
================================================
{title}
{#each data as prop}
{prop.name}
{prop.attr.default ? prop.attr.default : ''}
{@html getTypes(prop.attr.types)}
{@html prop.description ? prop.description : ''}
{/each}
================================================
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](/)
================================================
FILE: template/src/includes/logo.md
================================================
# [SvelteDocs](/) #
================================================
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
```
## 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
```
================================================
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
// : ,
//
// 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'}),
]
}