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
Visit https://ant-tool.github.io/atool-doc/
$ 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/
$ npm i atool-doc -g
atool-doc start server at http://127.0.0.1:8002 for demo
atool-doc [options]
-h, --help output usage information
-v, --version output the version number
--dest <dir> config path of output dir, default __site
--source <dir> config path of demo files dir, default examples
--asset <dir> config path of static resource, default statics
--tpl <path> config path or name of tpl file
--config <path> config path of webpack.config, default webpack.config.js
--port <number> specify dora server port, default 8002
--doraPlugins <name|file> defines the plugins which should used with dora server, default proxy
--build only build
-w, --watch using with --build, watch mode
Use .js
or .md
files to write demo under the directory specified in source
.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:
Without customizing dom, you can also work with the hook dom div#__exampleDom
, placeholder in default template file, eg:
atool-doc support several template file for different scenes:
- github: github theme, default one
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