DocStrap

DocStrap is Bootstrap based template for JSDoc3. In addition, it includes all of the themes from Bootswatch giving you a great deal of look and feel options for your documentation, along with a simple search. Additionally, it adds some options to the conf.json file that gives you even more flexibility to tweak the template to your needs. It will also make your teeth whiter.

New

0.5.2 Major update. Amazing help from tswaters to solve a bunch of little problems and a to bring the codebase up to Bootstrap3. Make sure you are running the latest version of JSDoc before using this build.

Again huge, huge thanks to tswaters. Make sure you send him thanks or a tip!!!!!

Features

Right side TOC for navigation in pages, with quick search
Themed
Customizable

What It Looks Like

Here are examples of this template with the different Bootswatch themes (you can find more on the bootswatch web site):

To change your theme, just change it in the conf.json file. See below for details.

Ooooh, I want it! How do I get it?##

If you manage your own version of jsdoc:

{@lang bash}
npm install ink-docstrap

When using grunt, please look at grunt-jsdoc which includes docstrap

{@lang bash}
npm install grunt-jsdoc

Configuring the template

DocStrap ships with a conf.json file in the template/ directory. It is just a regular old JSDoc configuration file, but with the following new options:

{@lang javascript}
"templates": {
	"systemName"            : "{string}",
	"footer"                : "{string}",
	"copyright"             :  "{string}",
	"navType"               : "{vertical|inline}",
	"theme"                 : "{theme}",
	"linenums"              : "{boolean}",
	"collapseSymbols"       : "{boolean}",
	"inverseNav"            : "{boolean}",
	"outputSourceFiles"     : "{boolean}" ,
	"outputSourcePath"      : "{boolean}",
	"dateFormat"            : "{string}",
	"highlightTutorialCode" : "{boolean}",
	"syntaxTheme"           : "{string}"
}

Options

systemName The name of the system being documented. This will appear in the page title for each page
footer Any markup want to appear in the footer of each page. This is not processed at all, just printed exactly as you enter it
copyright You can add a copyright message below the footer and above the JSDoc timestamp at the bottom of the page
navType The template uses top level navigation with dropdowns for the contents of each category. On large systems these dropdowns can get large enough to expand beyond the page. To make the dropdowns render wider and stack the entries vertically, set this option to "inline". Otherwise set it to "vertical" to make them regular stacked dropdowns.
theme This is the name of the them you want to use in all lowercase. The valid options are
- cerulean
- cosmo
- cyborg
- darkly
- flatly
- journal
- lumen
- paper
- readable
- sandstone
- simplex
- slate
- spacelab
- superhero
- united
- yeti
linenums When true, line numbers will appear in the source code listing. If you have also turned that on.
collapseSymbols If your pages have a large number of symbols, it can be easy to get lost in all the text. If you turn this to true all of the symbols in the page will roll their contents up so that you just get a list of symbols that can be expanded and collapsed.
analytics Add a Google Analytics code to the template output e.g. "analytics":{"ua":"UA-XXXXX-XXX", "domain":"XXXX"}
- ua The google agent (see Google Analytics help for details)
- domain The domain being served. (see Google Analytics help for details)
inverseNav Bootstrap navbars come in two flavors, regular and inverse where inverse is generally higher contrast. Set this to true to use the inverse header.
outputSourceFiles When true, the system will produce source pretty printed file listings with a link from the documentation.
outputSourcePath When outputSourceFiles is false, you may still want to name the file even without a link to the pretty printed output. Set this to true when outputSourceFiles is false. outputSourceFiles when true takes precedence over this setting.
dateFormat The date format to use when printing dates. It accepts any format string understood by moment.js
highlightTutorialCode Boolean used to determine whether to treat code blocks in "tutorial" markdown as examples and highlight them
syntaxTheme String that determines the theme used for code blocks. Default value is "default". It can be any value supported at sunlight themes which right now consists of...uh..."default" and "dark", but at least you have it if you need it.

Controlling Syntax Highlighting

Of course this is intended to document JS. But JS often interacts with other languages, most commonly HTML, but also any language on the server including PHP, C# and other C-like languages. The point is that when you write examples, you may want to include other languages to make your examples as expressive as possible. So, DocStrap introduces a new documentation tag which can appear inside any example block in source code, or in any fenced code block in markdown: {@lang languageName}, where language can be any of the languages supported by Sunlight

Look at this: For an example of this thing in action this )__

The syntax for adding the tag is as follows. When in markdown, add the tag on the line just after the ``` fence like so:

```

{@lang language}

This is my code

```

When in a doclet add the tag just after the @example tag like this:

@example {@lang xml}

<div>This is the most interesting web site ever</div>

These are the supported languages.

ActionScript
bash
C/C++
C♯
CSS
Diff
DOS batch
Erlang
Haskell
httpd (Apache)
Java
JavaScript
Lisp
Lua
MySQL
nginx
Objective-C
Perl
PHP
PowerShell
Python
Ruby
Scala
T-SQL
VB.NET
XML (HTML)

Customizing DocStrap

No template can meet every need and customizing templates is a favorite pastime of....well, no-one, but you may need to anyway. First make sure you have bower and grunt-cli installed. Fetch the source using git or grab the zip file from github. and unzip it somewhere. Everything that follows happens in the unzip directory.

Next, prepare the environment:

bower install

and

npm install

When that is done, you have all of the tools to start modifying the template. The template, like Bootstrap, uses less. The way it works is that ./styles/main.less pulls in the bootstrap files uncompiled so that you have access to all of bootstraps mixins, colors, etc, that you would want. There are two more files in that directory, variables.less, bootswatch.less. These are the theme files and you can modify them, but keep in mind that if you apply a new theme (see below) those files will be overwritten. It is best to keep your changes to the main.less file.

To compile your changes to main.less and any other files it loads up,

grunt less

The output is will be put in ./template/static/styles/site.<theme-name>.css. The next time you create your documentation, it will have the new css file included.

To apply a different template to the styles directory to modify, open up the conf.json in the template directory and change the theme option to the theme you want. Then

grunt apply

And the new theme will be in variables.less, bootswatch.less. Don't forget to compile your changes using grunt apply to get that change into the template.

NOTE that these steps are not necessary to just change the theme, this is only to modify the theme. If all you want to do is change the theme, just update conf.json with the new theme and build your docs!

Contributing

Yes! Contribute! Test! Share your ideas! Report Bugs!

Contributers

Huge thanks to all contributors. If your name should be here, but isn't, please let me know

History

v0.4.15

PR Issue #76
PR Issue #77

v0.4.14

Issue #69

v0.4.13

Issue #68

v0.4.11

Pull Request #59

v0.4.8

Issue #58

v0.4.7

Issue #57

v0.4.5

Issue #55
Issue #54
Issue #52
Issue #51
Issue #50
Issue #45
Issue #44

v0.4.3

Issue #46
Issue #46
Issue #47

v0.4.1-1###

Issue #44
Update documentation
Issue #43
Issue #42
Issue #34

v0.4.0

Issue #41
Issue #40
Issue #39
Issue #36
Issue #32

v0.3.0

Fixed navigation at page top
Adds -d switch to example jsdoc command.
Fixed typo in readme
Improve search box positioning and styles
Add dynamic quick search in TOC
Fix for line numbers styling issue

v0.2.0

Added jump to source linenumers - still a problem scrolling with fixed header
changed syntax highlighter to sunlight
Modify incoming bootswatch files to make font calls without protocol.

v0.1.0

Initial release

Notices

If you like DocStrap, be sure and check out these excellent projects and support them!

JSDoc3 is licensed under the Apache License

So is Bootstrap

And Bootswatch

TOC is licensed under MIT

Grunt is also MIT

DocStrap is licensed under the MIT license.

Sunlight uses the WTFPL

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

TimOgilvy/docstrap