[![NPM](https://nodei.co/npm/ink-docstrap.png?downloads=true)](https://nodei.co/npm/ink-docstrap/) # DocStrap [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/) # DocStrap is [Bootstrap](http://twitter.github.io/bootstrap/index.html) based template for [JSDoc3](http://usejsdoc.org/). In addition, it includes all of the themes from [Bootswatch](http://bootswatch.com/) 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 ## * Courtesy [whitelynx](https://github.com/whitelynx), you can now also select [sunlight themes](https://github.com/tmont/sunlight/tree/master/src/themes) for code blocks. * Read about Google Analytics (tip of the hat to [pocesar](https://github.com/pocesar)) support and major syntax highlight changes. * As of version 0.4.0, DocStrap only supports the node version of JSDoc and will no longer support the Java version of JSDoc * New options in `jsdoc.conf.json` to provide greater control over the output of source files. See `outputSourceFiles` and `sourceRootPath` * Several updated components for the development environment ## 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: + [Amelia](http://terryweiss.github.io/docstrap/themes/amelia) + [Cerulean](http://terryweiss.github.io/docstrap/themes/cerulean) + [Cosmo](http://terryweiss.github.io/docstrap/themes/cosmo) + [Cyborg](http://terryweiss.github.io/docstrap/themes/cyborg) + [Flatly](http://terryweiss.github.io/docstrap/themes/flatly) + [Journal](http://terryweiss.github.io/docstrap/themes/journal) + [Readable](http://terryweiss.github.io/docstrap/themes/readable) + [Simplex](http://terryweiss.github.io/docstrap/themes/simplex) + [Slate](http://terryweiss.github.io/docstrap/themes/slate) + [Spacelab](http://terryweiss.github.io/docstrap/themes/spacelab) + [Spruce](http://terryweiss.github.io/docstrap/themes/spruce) + [Superhero](http://terryweiss.github.io/docstrap/themes/superhero) + [United](http://terryweiss.github.io/docstrap/themes/united) 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](http://gruntjs.com/), please look at [grunt-jsdoc](https://github.com/krampstudio/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](http://usejsdoc.org/about-configuring-jsdoc.html), 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 + `amelia` + `cerulean` + `cosmo` + `cyborg` + `flatly` + `journal` + `readable` + `simplex` + `slate` + `spacelab` + `spruce` + `superhero` + `united` * __linenums__ When true, line numbers will appear in the source code listing. If you have [also turned that on](http://usejsdoc.org/about-configuring-jsdoc.html). * __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](http://www.google.com/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](http://momentjs.com/docs/#/displaying/format/) * __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](https://github.com/tmont/sunlight/tree/master/src/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](http://sunlightjs.com/) Look at this: For an example of this thing in action [this](http://terryweiss.github.io/docstrap/themes/readable/#toc7) )__ 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}` `