An opiniated frontend documentation builder cli tool.
npm install -g docui
You'll probably need sudo
To start a new project, create an empty folder and run the scaffolder command
mkdir my-projectcd my-projectdocui --init
It will copy an empty skeleton and make it easy to start. See below to understand what is created.
If you want to git you project, run
git init, add and commit everything before starting coding.
In your project folder, run
docui --watch. It will build the documentation, watch your source folders and update on any change. Start editing the less, html, markdown files located in the
A small web server will start on port 8182. You can provide a different port with
docui --watch 8888 for example.
Once the server is started, you can reach:
Any other previous published version are available on localhost:8182/documentation/1.0.0/ and localhost:8182/release/1.0.0/ (1.0.0 is the version number).
Once you're happy with your documentation version, run
docui --release major|minor\patch. It will build the new version, commit it if your are in a git repo, and increase the package version.
You're now free to push on your shared repository.
You can easily publish the latest versions on Github Pages. Run
docui --publish: your dist folder (previous version) will be push on your gh-pages branch. So, you'll get your documentation alive on https://YOURNAME.github.io/YOUR-REPO/documentation/1.0.0/ (1.0.0 and every other versions you have previously publish).
The older documentation are not modify, so it brings you a good history versioning.
In you project, you'll get the folders:
The documentation is a one-page template. You can edit design options and content in the docui.json file (color, cover, main texts).
The main menu is built over html dom (h1/h2/h3) and not customizable.
Statics markdown pages are converted into html sections. The section title are build from the markdown filename, after stripping non alnum chars and any prefix matching ^\d*- . Thus, you can order your section by naming them with prefix:
One component = one folder.
Each component has it own folder, and at least a html file with its preview.
You can add a markdown file to provide more information or other usecase sample.
Other files are not manged by the documentation but you can add what you want.
Markdown-to-html converter follows standard rule. A little improvement for the documentation is done regarding blockcode.
Any blockcode will be converted and render:
Thus, you can put inline style for the documentation that will be rendered as demo, but not shared to the user in the documentation.
The current design is powered by