minidocs
build a minimalist site for your documentation
This module generates a documentation site from two simple components:
- A collection of markdown documents
- A hierarchical object specifying your table of contents
This module is intentionally simpler and more opinionated than something like Jekyll or Sphinx. Depending on what you're looking for, that might be good, because it's easier to reason about, or bad, because it's less flexible! It'll probably be most useful if your documentation already consists entirely of markdown files, and it composes well with any tools that generate markdown, for example ecosystem-docs, which pulls README files from a collection of GitHub repositories.
Sites can be built using a command-line tool, or using the library as a module with browserify. There are options for specifying a project logo, custom css, and other basic formatting. Support for themes coming soon! PRs welcome!
Here is a simple example site built with minidocs
install
command-line
Install as a command-line tool
npm install -g minidocs
library
Add to your project with
npm install --save minidocs
examples
using minidocs on the command-line
Just specify the location of your markdown files, the table of contents, the output location, and build the site
minidocs docs/ --contents contents.json --output site/
The folder site will now contain the html, js, and css for your site.
Have a images or other files you'd like to include? You can copy a directory into the build of your site with the --assets option:
minidocs docs/ --contents contents.json --output site/ --assets images
Want to change the styles? Use the --css option to include a custom stylesheet.
minidocs docs/ --contents contents.json --output site/ --css style.css
using minidocs as a JS module
Create a table of contents in a file named contents.json:
{
"overview": {
"about": "about.md"
},
"animals": {
"furry": {
"sheep": "sheep.md"
},
"pink": {
"pig": "pig.md"
}
}
}Then build the site and add it to the page with
var minidocs = require('minidocs')
var app = minidocs({
contents: './contents.json',
markdown: './markdown',,
logo: './logo.svg'
})
var tree = app.start()
document.body.appendChild(tree)This assumes you have the files about.md, sheep.md, and pig.md inside a local folder markdown.
To run this in the browser you'll need to use the minidocs transform with browserify or budo:
browserify example:
browserify index.js -t minidocs/transform > bundle.js
budo example:
budo index.js:bundle.js -P -- -t minidocs/transform
You can also add transforms to your project by adding a browserify field to the package.json file with a transform array:
"browserify": {
"transform": [
"minidocs/transform"
]
}about the minidocs transform
Packaged with minidocs is a transform that takes care of reading the contents file, the markdown files, highlighting code in the markdown, and bundling the JS and CSS.
The minidocs transform is only necessary when using minidocs as a JS module, not when using the minidocs cli tool.
run the example
To run a full example, clone this repository, go into the folder example then call
npm install
npm start
usage
command-line
Usage:
minidocs {sourceDir} -c {contents.json} -o {buildDir}
Options:
* --contents, -c JSON file that defines the table of contents
* --output, -o Directory for built site [site]
* --title, -t Project name [name of current directory]
* --logo, -l Project logo
* --css, -s Optional stylesheet
* --assets, -a Directory of assets to be copied to the built site
* --initial, -i Page to use for root url
* --pushstate, -p Create a 200.html file for hosting services like surge.sh
* --basedir, -b Base directory of the site
* --full-html, -f Create HTML files for all routes. Useful for GitHub Pages. [false]
* --help, -h Show this help message
library
var minidocs = require('minidocs')
var app = minidocs(opts)
Where opts is an object that can specify the following options
contentsthe path to a JSON file or JS module with the table of contents, requiredmarkdownthe path to the directory of markdown filesstylesa stylesheet, if not required will only use base styleslogorelative file path to a logo file, if unspecified will not include a logoinitialwhich document to show on load, if unspecified will load the first documentroota DOM node to append to, if unspecified will append todocument.bodybasedirthe base route of the minidocs app (useful if published as a project on github pages)
var tree = app.start(rootId?, opts)
The start method accepts the same options as choo's start method.
This generates the html tree of the application that can be added to the DOM like this:
var tree = app.start()
document.body.appendChild(tree)var html = app.toString(route, state)
The toString method accepts the same options as choo's toString method
We use this in the command-line tool to generate the static files of the site.
deploying minidocs
surge.sh
surge.sh supports HTML5 pushstate if you have a 200.html file in your built site. You can either create that file yourself when using minidocs as a JS module, or you can build the site with the minidocs cli tool and the --pushstate option:
minidocs docs/ -c contents.json --pushstate -o site/Deploy with the surge command
You can use the surge module to push the built site to the surge.sh service.
Install surge:
npm install --save-dev surgeCreate a deploy npm script:
"scripts": {
"deploy": "surge dist"
}Publish your site:
npm run deploygithub pages
GitHub Pages doesn't support HTML5 pushstate, so you have two options:
1. Generate the site with the minidocs cli
Build a minidocs site with the cli and the --full-html option:
minidocs path/to/docs/dir -c contents.json -o site --full-htmlThis creates an HTML file for each route of the site, so that on initial page load all content is sent from the server, and once the JS is loaded the minidocs app takes over all routing.
2. Use hash routing with the JS module
To use hash routing, start the app with the { hash: true } option in the minidocs.start method:
var tree = app.start({ hash: true })
document.body.appendChild(tree)Deploy with the gh-pages command
You can use the gh-pages module to push the built site to the gh-pages branch of your repo.
Note: if you're deploying a project at a basedir like username.github.io/project-name, you'll want to use the
--basedir /project-nameoption
Install gh-pages:
npm install --save-dev gh-pagesCreate a deploy npm script:
"scripts": {
"deploy": "gh-pages -d dist"
}Publish your site:
npm run deploy
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent