A Node.js script that parses JSdoc-style comments from any compatible source code, and uses the output to automatically generate:

• Documentation for all components, with syntax-highlighted code samples
• Autocomplete code snippets for all components, for use with Sublime Text 3, Vim, and PhpStorm

Autodoc will parse comments in any language where the following comment syntax is valid:

/**
 *
 * Comment
 *
 */

Autodoc performs a recursive search of all files (with any varying file extensions) in a single specified directory, including all nested directories, and parses any comments found in the following format:

/**
 * This is an example header component. This component is meant to be placed at the top of the page.
 *
 * @name {String} name Header
 *
 * @example {Code}
 *
 * <header class="example__header">
 * ---]<span class="example__span">Example</span>
 * </header>
 *
 * @author {String} author Myles O'Connor
 *
 */

Note: Any tags, prefaced by @, can be added. The JSX markup for the generated documentation view, in /docs/app.js will need to be updated to render any new tags added.

To use Autodoc in your existing project, move the following files and directories into your project's root directory:

    📂  autodocCodeSnippets
        📂  phpstorm
        📂  sublime
        📂  vim
    📂  docs
        📄  app.js
        📄  favicon.ico
        📄  index.html
        📄  logo.png
    📄  autodocCommentParser.js
    📄  autodocSnippetConverter.js
    📄  package.json

After the files above have been moved into the root directory, navigate there and run:

$ npm install

Pass in the directory containing your source code to be scanned:

$ npm run autodoc /scss/theme/

After running the command above, documentation will be generated at /docs/index.html. This file currently requires a webserver to view it.

An example of the generated documentation can be seen at mocon.github.io/autodoc/docs.

Generated code snippets can be viewed in:

• /autodocCodeSnippets/phpstorm
• /autodocCodeSnippets/sublime
• /autodocCodeSnippets/vim

• Add npm clipboard for copy & pasting code
• Confirm syntax highlighting for cpp, java, groovy, python, javascript, html, & css
• Add customized ordering to sections
• Inline CSS for loading animation