atool-doc
v0.9.2
Published
Static demo site generator based on atool-build & dora.
Downloads
26
Readme
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 [email protected]: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 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
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 filewrite 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