ink-docstrap

Version:

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 optio

github.com/terryweiss/docstrap

terryweiss/docstrap

452 lines (353 loc) • 18.4 kB

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>DocStrap Index</title>  <link type="text/css" rel="stylesheet" href="styles/sunlight.default.css"> <link type="text/css" rel="stylesheet" href="styles/site.cerulean.css"> </head> <body> <div class="container-fluid"> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <a class="brand" href="index.html">DocStrap</a> <ul class="nav"> <li class="dropdown"> <a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="teams.html">teams</a> </li> </ul> </li> <li class="dropdown"> <a href="modules.list.html" class="dropdown-toggle" data-toggle="dropdown">Modules<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="car.html">docstrap/car</a> </li> <li> <a href="person.html">docstrap/person</a> </li> </ul> </li> <li class="dropdown"> <a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="car.Car.html">Car</a> </li> <li> <a href="person.Person.html">Person</a> </li> </ul> </li> <li class="dropdown"> <a href="mixins.list.html" class="dropdown-toggle" data-toggle="dropdown">Mixins<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="insanity.html">insanity</a> </li> </ul> </li> <li class="dropdown"> <a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="person.Person.html#event:sneeze">sneeze</a> </li> </ul> </li> <li class="dropdown"> <a href="tutorials.list.html" class="dropdown-toggle" data-toggle="dropdown">Tutorials<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="tutorial-Teeth.html">Brush Teeth</a> </li> <li> <a href="tutorial-Car_.html">Drive Car</a> </li> <li> <a href="tutorial-Test.html">Fence Test</a> </li> </ul> </li> <li class="dropdown"> <a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="global.html#brakeBias">brakeBias</a> </li> <li> <a href="global.html#drift">drift</a> </li> <li> <a href="global.html#start">start</a> </li> <li> <a href="global.html#trailBrake">trailBrake</a> </li> </ul> </li> </ul> </div> </div> <div class="row-fluid"> <div class="span8"> <div id="main"> <span class="page-title">Index</span> <section> <article><h1>DocStrap</h1><p>DocStrap is <a href="http://twitter.github.io/bootstrap/index.html">Bootstrap</a> based template for <a href="http://usejsdoc.org/">JSDoc3</a>. In addition, it includes all of the themes from <a href="http://bootswatch.com/">Bootswatch</a> 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.</p> <h2>New</h2><ul> <li>As of version 0.4.0, DocStrap only supports the node version of JSDoc and will no longer support the Java version of JSDoc</li> <li>New options in <code>jsdoc.conf.json</code> to provide greater control over the output of source files. See <code>outputSourceFiles</code> and <code>sourceRootPath</code></li> <li>Several updated components for the development environment</li> </ul> <h2>Features</h2><ul> <li>Right side TOC for navigation in pages, with quick search</li> <li>Themed</li> <li>Customizable</li> </ul> <h3>What It Looks Like</h3><p>Here are examples of this template with the different Bootswatch themes:</p> <ul> <li><a href="http://terryweiss.github.io/docstrap/themes/amelia">Amelia</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/cerulean">Cerulean</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/cosmo">Cosmo</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/cyborg">Cyborg</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/flatly">Flatly</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/journal">Journal</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/readable">Readable</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/simplex">Simplex</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/slate">Slate</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/spacelab">Spacelab</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/spruce">Spruce</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/superhero">Superhero</a></li> <li><a href="http://terryweiss.github.io/docstrap/themes/united">United</a></li> </ul> <p>To change your theme, just change it in the <code>conf.json</code> file. See below for details.</p> <h2>Ooooh, I want it! How do I get it?</h2><p>If you manage your own version of jsdoc:</p> <pre><code>npm install ink-docstrap </code></pre><p>When using <a href="http://gruntjs.com/">grunt</a>, this plugin manages jsdoc and docstrap for you:</p> <pre><code>npm install grunt-jsdoc // follow the instructions on the [project home page](https://github.com/krampstudio/grunt-jsdoc). </code></pre><h2>Configuring the template</h2><p>DocStrap ships with a <code>conf.json</code> file in the template/ directory. It is just a regular old <a href="http://usejsdoc.org/about-configuring-jsdoc.html">JSDoc configuration file</a>, but with the following new options:</p> <pre><code>"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}" } </code></pre><h3>Options</h3><ul> <li><strong>systemName</strong> The name of the system being documented. This will appear in the page title for each page</li> <li><strong>footer</strong> Any markup want to appear in the footer of each page. This is not processed at all, just printed exactly as you enter it</li> <li><strong>copyright</strong> You can add a copyright message below the footer and above the JSDoc timestamp at the bottom of the page</li> <li><strong>navType</strong> 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 <code>"inline"</code>. Otherwise set it to <code>"vertical"</code> to make them regular stacked dropdowns.</li> <li><strong>theme</strong> This is the name of the them you want to use <strong>in all lowercase</strong>. The valid options are<ul> <li><code>amelia</code></li> <li><code>cerulean</code></li> <li><code>cosmo</code></li> <li><code>cyborg</code></li> <li><code>flatly</code></li> <li><code>journal</code></li> <li><code>readable</code></li> <li><code>simplex</code></li> <li><code>slate</code></li> <li><code>spacelab</code></li> <li><code>spruce</code></li> <li><code>superhero</code></li> <li><code>united</code></li> </ul> </li> <li><strong>linenums</strong> When true, line numbers will appear in the source code listing. If you have <a href="http://usejsdoc.org/about-configuring-jsdoc.html">also turned that on</a>.</li> <li><strong>collapseSymbols</strong> 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 <code>true</code> 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.</li> <li><strong>inverseNav</strong> Bootstrap navbars come in two flavors, regular and inverse where inverse is generally higher contrast. Set this to <code>true</code> to use the inverse header.</li> <li><strong>outputSourceFiles</strong> When true, the system will produce source pretty printed file listings with a link from the documentation.</li> <li><strong>outputSourcePath</strong> When <code>outputSourceFiles</code> is <code>false</code>, you may still want to name the file even without a link to the pretty printed output. Set this to <code>true</code> when <code>outputSourceFiles</code> is <code>false</code>. <code>outputSourceFiles</code> when <code>true</code> takes precedence over this setting.</li> <li><strong>dateFormat</strong> The date format to use when printing dates. It accepts any format string understood by <a href="http://momentjs.com/docs/#/displaying/format/">moment.js</a></li> <li><strong>highlightTutorialCode</strong> When using markdown in your README or tutorial files, you can have the contents of fenced code blocks (```) render with syntax highlighting. When this happens, the system can't suss out what language to hightlight, so it defaults to</li> </ul> <h2>Customizing DocStrap</h2><p>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 <a href="https://github.com/bower/bower">bower</a> and <a href="https://github.com/gruntjs/grunt-cli">grunt-cli</a> installed. Fetch the source using <code>git</code> or grab the <a href="https://github.com/terryweiss/docstrap/archive/master.zip">zip file from github.</a> and unzip it somewhere. Everything that follows happens in the unzip directory.</p> <p>Next, prepare the environment:</p> <pre><code>bower install </code></pre><p>and</p> <pre><code>npm install </code></pre><p>When that is done, you have all of the tools to start modifying the template. The template, like Bootstrap, uses <a href="http://lesscss.org/">less</a>. The way it works is that <code>./styles/main.less</code> 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, <code>variables.less</code>, <code>bootswatch.less</code>. 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 <code>main.less</code> file.</p> <p>To compile your changes to <code>main.less</code> and any other files it loads up,</p> <pre><code>grunt less </code></pre><p>The output is will be put in <code>./template/static/styles/site.<theme-name>.css</code>. The next time you create your documentation, it will have the new css file included.</p> <p>To apply a different template to the <code>styles</code> directory to modify, open up the <code>conf.json</code> in the template directory and change the <code>theme</code> option to the theme you want. Then</p> <pre><code>grunt apply </code></pre><p>And the new theme will be in <code>variables.less</code>, <code>bootswatch.less</code>. Don't forget to compile your changes using <code>grunt apply</code> to get that change into the template.</p> <p><strong>NOTE</strong> 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!</p> <h2>Contributing</h2><p>Yes! Contribute! Test! Share your ideas! Report Bugs!</p> <h3>Contributers</h3><p><em>Huge</em> thanks to all contributers. If your name should be here, but isn't, please let me know</p> <ul> <li><a href="https://github.com/marklagendijk">marklagendijk</a></li> <li><a href="https://github.com/michaelward82">michaelward82</a></li> <li><a href="https://github.com/kaustavdm">kaustavdm</a></li> <li><a href="https://github.com/vmeurisse">vmeurisse</a></li> <li><a href="https://github.com/bmathern">bmathern</a></li> <li><a href="https://github.com/jrkim123us">jrkim123us</a></li> <li><a href="https://github.com/shawke">shawke</a></li> <li><a href="https://github.com/mar10">mar10</a></li> <li><a href="https://github.com/mwcz">mwcz</a></li> </ul> <h2>Roadmap</h2><ul> <li>Make plain old bootstrap an option (doh!)</li> <li><del>Jump to source line numbers</del></li> <li>Document publish.js</li> </ul> <h2>History</h2><h3>v0.4.1-1</h3><ul> <li>Issue #44</li> <li>Update documentation</li> <li>Issue #43</li> <li>Issue #42</li> <li>Issue #34</li> </ul> <h3>v0.4.0</h3><ul> <li>Issue #41</li> <li>Issue #40</li> <li>Issue #39</li> <li>Issue #36</li> <li>Issue #32</li> </ul> <h3>v0.3.0</h3><ul> <li>Fixed navigation at page top</li> <li>Adds -d switch to example jsdoc command.</li> <li>Fixed typo in readme</li> <li>Improve search box positioning and styles</li> <li>Add dynamic quick search in TOC</li> <li>Fix for line numbers styling issue</li> </ul> <h3>v0.2.0</h3><ul> <li>Added jump to source linenumers - still a problem scrolling with fixed header</li> <li>changed syntax highlighter to <a href="http://sunlightjs.com/">sunlight</a></li> <li>Modify incoming bootswatch files to make font calls without protocol.</li> </ul> <h3>v0.1.0</h3><p>Initial release</p> <h2>Notices</h2><p>If you like DocStrap, be sure and check out these excellent projects and support them!</p> <p><a href="https://github.com/jsdoc3/jsdoc/blob/master/LICENSE.md">JSDoc3 is licensed under the Apache License</a></p> <p><a href="https://github.com/twitter/bootstrap/blob/master/LICENSE">So is Bootstrap</a></p> <p><a href="https://github.com/thomaspark/bootswatch/blob/gh-pages/LICENSE">And Bootswatch</a></p> <p><a href="https://github.com/jgallen23/toc/blob/master/LICENSE">TOC is licensed under MIT</a></p> <p><a href="https://github.com/gruntjs/grunt-cli/blob/master/LICENSE-MIT">Grunt is also MIT</a></p> <p>DocStrap <a href="https://github.com/terryweiss/docstrap/blob/master/LICENSE.md">is licensed under the MIT license.</a></p> <p><a href="http://sunlightjs.com/">Sunlight uses the WTFPL</a></p> <h2>License</h2><p>DocStrap Copyright (c) 2012-2014 Terry Weiss. All rights reserved.</p> <p>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:</p> <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p> <p>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.</p></article> </section> </div> <div class="clearfix"></div> <footer> <span class="copyright"> DocStrap Copyright © 2012-2013 The contributors to the JSDoc3 and DocStrap projects. </span> <br /> <span class="jsdoc-message"> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha5</a> on Mon May 26th 2014 using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>. </span> </footer> </div> <div class="span3"> <div id="toc"></div> </div> <br clear="both"> </div> </div> <script src="scripts/sunlight.js"></script> <script src="scripts/sunlight.xml.js"></script> <script src="scripts/sunlight.javascript.js"></script> <script src="scripts/sunlight-plugin.doclinks.js"></script> <script src="scripts/sunlight-plugin.linenumbers.js"></script> <script src="scripts/sunlight-plugin.menu.js"></script> <script src="scripts/jquery.min.js"></script> <script src="scripts/jquery.scrollTo.js"></script> <script src="scripts/jquery.localScroll.js"></script> <script src="scripts/bootstrap-dropdown.js"></script> <script src="scripts/toc.js"></script> <script> $( function () { $( "#toc" ).toc( { anchorName : function(i, heading, prefix) { return $(heading).attr("id") || ( prefix + i ); }, selectors : "h1,h2,h3,h4", showAndHide : false, scrollTo : 60 } ); $( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" ); $( "#main span[id^='toc']" ).addClass( "toc-shim" ); $(".tutorial-section pre" ).addClass("sunlight-highlight-javascript" ).addClass("linenums"); Sunlight.highlightAll({lineNumbers: true, showMenu: true, enableDoclinks: true}); } ); </script> </body> </html>