forked from mbrevoort/docco-husky
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
187 lines (164 loc) · 39.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html> <html> <head> <title>docco.coffee</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="resources/docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> docco.coffee </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <p><strong>Docco</strong> is a quick-and-dirty, hundred-line-long, literate-programming-style
documentation generator. It produces HTML that displays your comments
alongside your code. Comments are passed through
<a href="http://daringfireball.net/projects/markdown/syntax">Markdown</a>, and code is
passed through <a href="http://pygments.org/">Pygments</a> syntax highlighting.
This page is the result of running Docco against its own source file.</p>
<p>If you install Docco, you can run it from the command-line:</p>
<pre><code>docco src/*.coffee
</code></pre>
<p>...will generate an HTML documentation page for each of the named source files,
with a menu linking to the other pages, saving it into a <code>docs</code> folder.</p>
<p>The <a href="http://github.com/jashkenas/docco">source for Docco</a> is available on GitHub,
and released under the MIT license.</p>
<p>To install Docco, first make sure you have <a href="http://nodejs.org/">Node.js</a>,
<a href="http://pygments.org/">Pygments</a> (install the latest dev version of Pygments
from <a href="http://dev.pocoo.org/hg/pygments-main">its Mercurial repo</a>), and
<a href="http://coffeescript.org/">CoffeeScript</a>. Then, with NPM:</p>
<pre><code>sudo npm install docco
</code></pre>
<h3>Partners in Crime:</h3>
<ul>
<li><p>If <strong>Node.js</strong> doesn't run on your platform, or you'd prefer a more convenient
package, get <a href="http://github.com/rtomayko">Ryan Tomayko</a>'s
<a href="http://rtomayko.github.com/rocco/">Rocco</a>, the Ruby port that's available as a gem. </p></li>
<li><p>If you're writing shell scripts, try
<a href="http://rtomayko.github.com/shocco/">Shocco</a>, a port for the <strong>POSIX shell</strong>,
also by Mr. Tomayko.</p></li>
<li><p>If Python's more your speed, take a look at
<a href="http://github.com/fitzgen">Nick Fitzgerald</a>'s <a href="http://fitzgen.github.com/pycco/">Pycco</a>. </p></li>
<li><p>For <strong>Clojure</strong> fans, <a href="http://blog.fogus.me/">Fogus</a>'s
<a href="http://fogus.me/fun/marginalia/">Marginalia</a> is a bit of a departure from
"quick-and-dirty", but it'll get the job done.</p></li>
<li><p><strong>Lua</strong> enthusiasts can get their fix with
<a href="https://github.com/rgieseke">Robert Gieseke</a>'s <a href="http://rgieseke.github.com/locco/">Locco</a>.</p></li>
<li><p>And if you happen to be a <strong>.NET</strong>
aficionado, check out <a href="https://github.com/dontangg">Don Wilson</a>'s
<a href="http://dontangg.github.com/nocco/">Nocco</a>.</p></li>
</ul> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h3>Main Documentation Generation Functions</h3> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Generate the documentation for a source file by reading it in, splitting it
up into comment/code sections, highlighting them for the appropriate language,
and merging them into an HTML template.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">generate_documentation = </span><span class="nf">(source, context, callback) -></span>
<span class="nx">fs</span><span class="p">.</span><span class="nx">readFile</span> <span class="nx">source</span><span class="p">,</span> <span class="s2">"utf-8"</span><span class="p">,</span> <span class="nf">(error, code) -></span>
<span class="k">throw</span> <span class="nx">error</span> <span class="k">if</span> <span class="nx">error</span>
<span class="nv">sections = </span><span class="nx">parse</span> <span class="nx">source</span><span class="p">,</span> <span class="nx">code</span>
<span class="nx">highlight</span> <span class="nx">source</span><span class="p">,</span> <span class="nx">sections</span><span class="p">,</span> <span class="o">-></span>
<span class="nx">generate_html</span> <span class="nx">source</span><span class="p">,</span> <span class="nx">context</span><span class="p">,</span> <span class="nx">sections</span>
<span class="nx">callback</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Given a string of source code, parse out each comment and the code that
follows it, and create an individual <strong>section</strong> for it.
Sections take the form:</p>
<pre><code>{
docs_text: ...
docs_html: ...
code_text: ...
code_html: ...
}
</code></pre> </td> <td class="code"> <div class="highlight"><pre><span class="nv">parse = </span><span class="nf">(source, code) -></span>
<span class="nv">lines = </span><span class="nx">code</span><span class="p">.</span><span class="nx">split</span> <span class="s1">'\n'</span>
<span class="nv">sections = </span><span class="p">[]</span>
<span class="nv">language = </span><span class="nx">get_language</span> <span class="nx">source</span>
<span class="nv">has_code = docs_text = code_text = </span><span class="s1">''</span>
<span class="nv">save = </span><span class="nf">(docs, code) -></span>
<span class="nx">sections</span><span class="p">.</span><span class="nx">push</span> <span class="nv">docs_text: </span><span class="nx">docs</span><span class="p">,</span> <span class="nv">code_text: </span><span class="nx">code</span>
<span class="k">for</span> <span class="nx">line</span> <span class="k">in</span> <span class="nx">lines</span>
<span class="k">if</span> <span class="nx">line</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">language</span><span class="p">.</span><span class="nx">comment_matcher</span><span class="p">)</span> <span class="o">and</span> <span class="o">not</span> <span class="nx">line</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="nx">language</span><span class="p">.</span><span class="nx">comment_filter</span><span class="p">)</span>
<span class="k">if</span> <span class="nx">has_code</span>
<span class="nx">save</span> <span class="nx">docs_text</span><span class="p">,</span> <span class="nx">code_text</span>
<span class="nv">has_code = docs_text = code_text = </span><span class="s1">''</span>
<span class="nx">docs_text</span> <span class="o">+=</span> <span class="nx">line</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">language</span><span class="p">.</span><span class="nx">comment_matcher</span><span class="p">,</span> <span class="s1">''</span><span class="p">)</span> <span class="o">+</span> <span class="s1">'\n'</span>
<span class="k">else</span>
<span class="nv">has_code = </span><span class="kc">yes</span>
<span class="nx">code_text</span> <span class="o">+=</span> <span class="nx">line</span> <span class="o">+</span> <span class="s1">'\n'</span>
<span class="nx">save</span> <span class="nx">docs_text</span><span class="p">,</span> <span class="nx">code_text</span>
<span class="nx">sections</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Highlights a single chunk of CoffeeScript code, using <strong>Pygments</strong> over stdio,
and runs the text of its corresponding comment through <strong>Markdown</strong>, using the
<strong>Github-flavored-Markdown</strong> modification of <a href="http://attacklab.net/showdown/">Showdown.js</a>.</p>
<p>We process the entire file in a single call to Pygments by inserting little
marker comments between each section and then splitting the result string
wherever our markers occur.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">highlight = </span><span class="nf">(source, sections, callback) -></span>
<span class="nv">language = </span><span class="nx">get_language</span> <span class="nx">source</span>
<span class="nv">pygments = </span><span class="nx">spawn</span> <span class="s1">'pygmentize'</span><span class="p">,</span> <span class="p">[</span><span class="s1">'-l'</span><span class="p">,</span> <span class="nx">language</span><span class="p">.</span><span class="nx">name</span><span class="p">,</span> <span class="s1">'-f'</span><span class="p">,</span> <span class="s1">'html'</span><span class="p">,</span> <span class="s1">'-O'</span><span class="p">,</span> <span class="s1">'encoding=utf-8'</span><span class="p">]</span>
<span class="nv">output = </span><span class="s1">''</span>
<span class="nx">pygments</span><span class="p">.</span><span class="nx">stderr</span><span class="p">.</span><span class="nx">addListener</span> <span class="s1">'data'</span><span class="p">,</span> <span class="nf">(error) -></span>
<span class="nx">console</span><span class="p">.</span><span class="nx">error</span> <span class="nx">error</span> <span class="k">if</span> <span class="nx">error</span>
<span class="nx">pygments</span><span class="p">.</span><span class="nx">stdout</span><span class="p">.</span><span class="nx">addListener</span> <span class="s1">'data'</span><span class="p">,</span> <span class="nf">(result) -></span>
<span class="nx">output</span> <span class="o">+=</span> <span class="nx">result</span> <span class="k">if</span> <span class="nx">result</span>
<span class="nx">pygments</span><span class="p">.</span><span class="nx">addListener</span> <span class="s1">'exit'</span><span class="p">,</span> <span class="o">-></span>
<span class="nv">output = </span><span class="nx">output</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">highlight_start</span><span class="p">,</span> <span class="s1">''</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="nx">highlight_end</span><span class="p">,</span> <span class="s1">''</span><span class="p">)</span>
<span class="nv">fragments = </span><span class="nx">output</span><span class="p">.</span><span class="nx">split</span> <span class="nx">language</span><span class="p">.</span><span class="nx">divider_html</span>
<span class="k">for</span> <span class="nx">section</span><span class="p">,</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">sections</span>
<span class="nv">section.code_html = </span><span class="nx">highlight_start</span> <span class="o">+</span> <span class="nx">fragments</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+</span> <span class="nx">highlight_end</span>
<span class="nv">section.docs_html = </span><span class="nx">showdown</span><span class="p">.</span><span class="nx">makeHtml</span> <span class="nx">section</span><span class="p">.</span><span class="nx">docs_text</span>
<span class="nx">callback</span><span class="p">()</span>
<span class="nx">pygments</span><span class="p">.</span><span class="nx">stdin</span><span class="p">.</span><span class="nx">write</span><span class="p">((</span><span class="nx">section</span><span class="p">.</span><span class="nx">code_text</span> <span class="k">for</span> <span class="nx">section</span> <span class="k">in</span> <span class="nx">sections</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="nx">language</span><span class="p">.</span><span class="nx">divider_text</span><span class="p">))</span>
<span class="nx">pygments</span><span class="p">.</span><span class="nx">stdin</span><span class="p">.</span><span class="nx">end</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Once all of the code is finished highlighting, we can generate the HTML file
and write out the documentation. Pass the completed sections into the template
found in <code>resources/docco.jst</code></p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">generate_html = </span><span class="nf">(source, context, sections) -></span>
<span class="nv">title = </span><span class="nx">path</span><span class="p">.</span><span class="nx">basename</span> <span class="nx">source</span>
<span class="nv">dest = </span><span class="nx">destination</span> <span class="nx">source</span><span class="p">,</span> <span class="nx">context</span>
<span class="nv">html = </span><span class="nx">docco_template</span> <span class="p">{</span>
<span class="nv">title: </span><span class="nx">title</span><span class="p">,</span> <span class="nv">file_path: </span><span class="nx">source</span><span class="p">,</span> <span class="nv">sections: </span><span class="nx">sections</span><span class="p">,</span> <span class="nv">context: </span><span class="nx">context</span><span class="p">,</span> <span class="nv">path: </span><span class="nx">path</span><span class="p">,</span> <span class="nv">relative_base: </span><span class="nx">relative_base</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Generate the file's base dir as required</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">target_dir = </span><span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">dest</span><span class="p">)</span>
<span class="nv">write_func = </span><span class="o">-></span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span> <span class="s2">"docco: #{source} -> #{dest}"</span>
<span class="nx">fs</span><span class="p">.</span><span class="nx">writeFile</span> <span class="nx">dest</span><span class="p">,</span> <span class="nx">html</span><span class="p">,</span> <span class="nf">(err) -></span> <span class="k">throw</span> <span class="nx">err</span> <span class="k">if</span> <span class="nx">err</span>
<span class="nx">fs</span><span class="p">.</span><span class="nx">stat</span> <span class="nx">target_dir</span><span class="p">,</span> <span class="nf">(err, stats) -></span>
<span class="k">throw</span> <span class="nx">err</span> <span class="k">if</span> <span class="nx">err</span> <span class="o">and</span> <span class="nx">err</span><span class="p">.</span><span class="nx">code</span> <span class="o">!=</span> <span class="s1">'ENOENT'</span>
<span class="k">return</span> <span class="nx">write_func</span><span class="p">()</span> <span class="nx">unless</span> <span class="nx">err</span>
<span class="k">if</span> <span class="nx">err</span>
<span class="nx">exec</span> <span class="s2">"mkdir -p #{target_dir}"</span><span class="p">,</span> <span class="nf">(err) -></span>
<span class="k">throw</span> <span class="nx">err</span> <span class="k">if</span> <span class="nx">err</span>
<span class="nx">write_func</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h3>Helpers & Setup</h3> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Require our external dependencies, including <strong>Showdown.js</strong>
(the JavaScript implementation of Markdown).</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">fs = </span><span class="nx">require</span> <span class="s1">'fs'</span>
<span class="nv">path = </span><span class="nx">require</span> <span class="s1">'path'</span>
<span class="nv">showdown = </span><span class="nx">require</span><span class="p">(</span><span class="s1">'./../vendor/showdown'</span><span class="p">).</span><span class="nx">Showdown</span>
<span class="p">{</span><span class="nx">spawn</span><span class="p">,</span> <span class="nx">exec</span><span class="p">}</span> <span class="o">=</span> <span class="nx">require</span> <span class="s1">'child_process'</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>A list of the languages that Docco supports, mapping the file extension to
the name of the Pygments lexer and the symbol that indicates a comment. To
add another language to Docco's repertoire, add it here.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">languages =</span>
<span class="s1">'.coffee'</span><span class="o">:</span>
<span class="nv">name: </span><span class="s1">'coffee-script'</span><span class="p">,</span> <span class="nv">symbol: </span><span class="s1">'#'</span>
<span class="s1">'.js'</span><span class="o">:</span>
<span class="nv">name: </span><span class="s1">'javascript'</span><span class="p">,</span> <span class="nv">symbol: </span><span class="s1">'//'</span>
<span class="s1">'.rb'</span><span class="o">:</span>
<span class="nv">name: </span><span class="s1">'ruby'</span><span class="p">,</span> <span class="nv">symbol: </span><span class="s1">'#'</span>
<span class="s1">'.py'</span><span class="o">:</span>
<span class="nv">name: </span><span class="s1">'python'</span><span class="p">,</span> <span class="nv">symbol: </span><span class="s1">'#'</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Build out the appropriate matchers and delimiters for each language.</p> </td> <td class="code"> <div class="highlight"><pre><span class="k">for</span> <span class="nx">ext</span><span class="p">,</span> <span class="nx">l</span> <span class="k">of</span> <span class="nx">languages</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Does the line begin with a comment?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">l.comment_matcher = </span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">'^\\s*'</span> <span class="o">+</span> <span class="nx">l</span><span class="p">.</span><span class="nx">symbol</span> <span class="o">+</span> <span class="s1">'\\s?'</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Ignore <a href="http://en.wikipedia.org/wiki/Shebang_(Unix">hashbangs</a>)
and interpolations...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">l.comment_filter = </span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">'(^#![/]|^\\s*#\\{)'</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>The dividing token we feed into Pygments, to delimit the boundaries between
sections.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">l.divider_text = </span><span class="s1">'\n'</span> <span class="o">+</span> <span class="nx">l</span><span class="p">.</span><span class="nx">symbol</span> <span class="o">+</span> <span class="s1">'DIVIDER\n'</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>The mirror of <code>divider_text</code> that we expect Pygments to return. We can split
on this to recover the original sections.
Note: the class is "c" for Python and "c1" for the other languages</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">l.divider_html = </span><span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s1">'\\n*<span class="c1?">'</span> <span class="o">+</span> <span class="nx">l</span><span class="p">.</span><span class="nx">symbol</span> <span class="o">+</span> <span class="s1">'DIVIDER<\\/span>\\n*'</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Get the current language we're documenting, based on the extension.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">get_language = </span><span class="nf">(source) -></span> <span class="nx">languages</span><span class="p">[</span><span class="nx">path</span><span class="p">.</span><span class="nx">extname</span><span class="p">(</span><span class="nx">source</span><span class="p">)]</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Compute the path of a source file relative to the docs folder</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">relative_base = </span><span class="nf">(filepath, context) -></span>
<span class="nv">result = </span><span class="k">if</span> <span class="nx">context</span><span class="p">.</span><span class="nx">relative_root</span> <span class="k">then</span> <span class="nx">path</span><span class="p">.</span><span class="nx">dirname</span><span class="p">(</span><span class="nx">filepath</span><span class="p">)[</span><span class="nx">context</span><span class="p">.</span><span class="nx">relative_root</span><span class="p">.</span><span class="nx">length</span><span class="p">..]</span> <span class="o">+</span> <span class="s1">'/'</span> <span class="k">else</span> <span class="s1">''</span>
<span class="k">if</span> <span class="nx">result</span> <span class="o">==</span> <span class="s1">'/'</span> <span class="k">then</span> <span class="s1">''</span> <span class="k">else</span> <span class="nx">result</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Compute the destination HTML path for an input source file path. If the source
is <code>lib/example.coffee</code>, the HTML will be at <code>docs/example.html</code>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">destination = </span><span class="nf">(filepath, context) -></span>
<span class="nv">base_path = </span><span class="nx">relative_base</span> <span class="nx">filepath</span><span class="p">,</span> <span class="nx">context</span>
<span class="s1">'docs/'</span> <span class="o">+</span> <span class="nx">base_path</span> <span class="o">+</span> <span class="nx">path</span><span class="p">.</span><span class="nx">basename</span><span class="p">(</span><span class="nx">filepath</span><span class="p">,</span> <span class="nx">path</span><span class="p">.</span><span class="nx">extname</span><span class="p">(</span><span class="nx">filepath</span><span class="p">))</span> <span class="o">+</span> <span class="s1">'.html'</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>Ensure that the destination directory exists.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">ensure_directory = </span><span class="nf">(dir, callback) -></span>
<span class="nx">exec</span> <span class="s2">"mkdir -p #{dir}"</span><span class="p">,</span> <span class="o">-></span> <span class="nx">callback</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>Micro-templating, originally by John Resig, borrowed by way of
<a href="http://documentcloud.github.com/underscore/">Underscore.js</a>.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">template = </span><span class="nf">(str) -></span>
<span class="k">new</span> <span class="nb">Function</span> <span class="s1">'obj'</span><span class="p">,</span>
<span class="s1">'var p=[],print=function(){p.push.apply(p,arguments);};'</span> <span class="o">+</span>
<span class="s1">'with(obj){p.push(\''</span> <span class="o">+</span>
<span class="nx">str</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/[\r\t\n]/g</span><span class="p">,</span> <span class="s2">" "</span><span class="p">)</span>
<span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/'(?=[^<]*%>)/g</span><span class="p">,</span><span class="s2">"\t"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">"'"</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s2">"\\'"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">"\t"</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s2">"'"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/<%=(.+?)%>/g</span><span class="p">,</span> <span class="s2">"',$1,'"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'<%'</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s2">"');"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">'%>'</span><span class="p">).</span><span class="nx">join</span><span class="p">(</span><span class="s2">"p.push('"</span><span class="p">)</span> <span class="o">+</span>
<span class="s2">"');}return p.join('');"</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Create the template that we will use to generate the Docco HTML page.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">docco_template = </span><span class="nx">template</span> <span class="nx">fs</span><span class="p">.</span><span class="nx">readFileSync</span><span class="p">(</span><span class="nx">__dirname</span> <span class="o">+</span> <span class="s1">'/../resources/docco.jst'</span><span class="p">).</span><span class="nx">toString</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>The CSS styles we'd like to apply to the documentation.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">docco_styles = </span><span class="nx">fs</span><span class="p">.</span><span class="nx">readFileSync</span><span class="p">(</span><span class="nx">__dirname</span> <span class="o">+</span> <span class="s1">'/../resources/resources/docco.css'</span><span class="p">).</span><span class="nx">toString</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>The start of each Pygments highlight block.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">highlight_start = </span><span class="s1">'<div class="highlight"><pre>'</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>The end of each Pygments highlight block.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">highlight_end = </span><span class="s1">'</pre></div>'</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>Process our arguments, passing an array of sources to generate docs for,
and an optional relative root.</p> </td> <td class="code"> <div class="highlight"><pre><span class="nv">parse_args = </span><span class="nf">(callback) -></span>
<span class="nv">args = </span><span class="nx">process</span><span class="p">.</span><span class="nx">ARGV</span><span class="p">.</span><span class="nx">sort</span><span class="p">()</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Preserving past behavior: if no args are given, we do nothing (eventually
display help?)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="nx">unless</span> <span class="nx">args</span><span class="p">.</span><span class="nx">length</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>The traditional way of running docco is to just pass a globed list of files
to build docs for.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">unless</span> <span class="nx">args</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">1</span> <span class="o">and</span> <span class="nx">fs</span><span class="p">.</span><span class="nx">statSync</span><span class="p">(</span><span class="nx">args</span><span class="p">[</span><span class="mi">0</span><span class="p">]).</span><span class="nx">isDirectory</span><span class="p">()</span>
<span class="k">return</span> <span class="nx">callback</span><span class="p">(</span><span class="nx">args</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>If we are given a single directory, treat this as a relative root and
recursively build docs that mirror its file and subdirectory structure.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">relative_root = </span><span class="nx">args</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/\/+$/</span><span class="p">,</span> <span class="s1">''</span><span class="p">)</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <p>Rather than deal with building a recursive tree walker via the fs module,
let's save ourselves typing and testing and drop to the shell</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">exec</span> <span class="s2">"find #{relative_root} -type f"</span><span class="p">,</span> <span class="nf">(err, stdout) -></span>
<span class="k">throw</span> <span class="nx">err</span> <span class="k">if</span> <span class="nx">err</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <p>Don't include hidden files, either</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">sources = </span><span class="nx">stdout</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">"\n"</span><span class="p">).</span><span class="nx">filter</span> <span class="nf">(file) -></span> <span class="nx">file</span> <span class="o">!=</span> <span class="s1">''</span> <span class="o">and</span> <span class="nx">path</span><span class="p">.</span><span class="nx">basename</span><span class="p">(</span><span class="nx">file</span><span class="p">)[</span><span class="mi">0</span><span class="p">]</span> <span class="o">!=</span> <span class="s1">'.'</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span> <span class="s2">"docco: Recursively generating docs underneath #{relative_root}/"</span>
<span class="nx">callback</span><span class="p">(</span><span class="nx">sources</span><span class="p">,</span> <span class="nx">relative_root</span> <span class="o">+</span> <span class="s1">'/'</span><span class="p">)</span>
<span class="nx">parse_args</span> <span class="nf">(sources, relative_root) -></span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p>Rather than relying on globals, let's pass around a context w/ misc info
that we require down the line.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nv">context = sources: </span><span class="nx">sources</span><span class="p">,</span> <span class="nv">relative_root: </span><span class="nx">relative_root</span>
<span class="nx">ensure_directory</span> <span class="s1">'docs'</span><span class="p">,</span> <span class="o">-></span>
<span class="nx">fs</span><span class="p">.</span><span class="nx">writeFile</span> <span class="s1">'docs/resources/docco.css'</span><span class="p">,</span> <span class="nx">docco_styles</span>
<span class="nv">files = </span><span class="nx">sources</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
<span class="nv">next_file = </span><span class="o">-></span> <span class="nx">generate_documentation</span> <span class="nx">files</span><span class="p">.</span><span class="nx">shift</span><span class="p">(),</span> <span class="nx">context</span><span class="p">,</span> <span class="nx">next_file</span> <span class="k">if</span> <span class="nx">files</span><span class="p">.</span><span class="nx">length</span>
<span class="nx">next_file</span><span class="p">()</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>