atool-doc
Static demo generator based on atool-build and dora
before
./
├── README.md
├── examples
│ ├── a.js
│ ├── a.html
│ └── b.md
└── statics
└── data.json
after
./
├── README.md
├── __site
│ ├── common.js
│ ├── examples
│ │ ├── a.html
│ │ ├── a.js
│ │ ├── b.html
│ │ ├── b.js
│ ├── index.html
│ └── statics
│ └── data.json
└── examples
├── a.js
├── a.html
└── b.md
Demos
Online Demos
Visit https://ant-tool.github.io/atool-doc/
Local Demos
$ git clone git@github.com:ant-tool/atool-doc.git$ cd atool-doc && npm i$ npm run doc
Then, visit http://127.0.0.1:8989/
Usage
Setup
$ npm i atool-doc -g
command
atool-doc start server at http://127.0.0.1:8002
How to write demo file
Use .js
or .md
files to write demo under the directory specified in source
- ###
md
.md
is more powerful
Write the code of demo with a section of ## code
, using language of js/jsx/javascript
, css
and html
to customize css and dom
And then write other things you want at other sections, eg:
- ###
js
Without customizing dom, you can also work with the hook dom div#__exampleDom
, placeholder in default template file, eg:
Template
supported templates
atool-doc support several template file for different scenes:
- github: github theme, default one
customize template
If the templates above can not meet your needs, just try writing a new one!
-
use
atool-doc --tpl somewhere
to specify your template file -
write your template file with following variables available on the context of
file
param | decription | format |
---|---|---|
meta | meta info of each example file | { name: 'something', someKey: 'someValue' } |
link | link of all demo files | { demoName: 'demoPath' } |
title | file-path relative to source dir |
basic |
filePath | string of file-path | examples/basic |
resource | kinds of path for resourceFile | { name: 'basicNameAndExt', relativeToCwd: 'relativePathToCwd' } |
script | array of script-path need to insert into the html file | ['../common.js', './basic.js'] |
html | string of html element | <div></div> |
style | string of style by css | body { color: red; } |
desc | code of demo and other things written by markdown | <h2>code</h2><div class="highlight"></div> |
alias | alias of each file, generating by meta.title | see meta config |
The template file only support syntax of ejs
currently