atool-doc@0.9.2

EXAMPLES

README.md

atool-doc

NPM version Build Status Coverage Status NPM downloads Dependency Status

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 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:

image

  • js

Without customizing dom, you can also work with the hook dom div#__exampleDom, placeholder in default template file, eg:

image

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

HISTORY.md

0.9.2

2018-03-21

  • [fix]: parse filename user loaderUtils

0.9.1

2018-01-03

  • [fix]: user webpack.config.resolve.alias first

0.9.0

2017-07-14

  • [break]: resolve packageName to real main file(pkg.main || index.js), if use babel to compile into main file, babel -s to open sourcemap is very useful for debug

0.8.2

2017-06-06

  • fix: not load common.js if no webpack.optimize.CommonsChunkPlugin in loaders

0.8.1

2017-04-28

  • refactor: not replace webpackConfig.plugins any more, all user to customize

0.7.3

2017-03-28

  • fix: modify output.path only, revert output.publicPath

0.7.3

2017-03-10

  • fix: correct display in mobile for viewport

0.7.2

2017-03-06

  • fix: add output.publicPath of '/'

0.7.1

2017-01-06

  • chore: remove peerDeps of webpack

0.7.0

2016-09-18

  • refactor: inline loader and utils
  • feat: support customize file title in *.md files
  • refine: template style

0.6.0

2016-08-31

  • feat: open doraPlugins to bin, using by --doraPlugins proxy?port=9999

0.5.2

2016-08-15

  • fix: compatibility for npm@4

0.5.0

2016-08-03

  • feat: refactor htmlPlugin with index-webpack-plugin
  • feat: dynamic load package.json README.md HISTORY.md

0.4.0

2016-06-06

  • feat: add watching for adding、unlinking files, restart automatically
  • update: dep of atool-build, to ~0.7.0
  • fix: webpackConfig.module.loaders[].loader is undefined
  • fix: menu style problem in element.ejs

0.3.0

2016-04-25

  • change inline-source-map to inline-cheap-module-source-map
  • add atool-monitor
  • support specify template name, default is github
  • change webpackConfig.tplSource to webpackConfig.demoSource
  • add resource to context of file
  • refine element.ejs

0.2.0

2016-04-13

  • change postLoader to preLoader, fix #6
  • support directory demo files, #5
  • suppoer customizing port of dora
  • support customizing title of each demo file
  • add catalog in each element demo file
  • add meta to context of file
Fork me on GitHub