Styling

tj · Jun 24, 2010 · 7cdcc73 · 7cdcc73
1 parent 07a7277
commit 7cdcc73
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 43 deletions.
diff --git a/Makefile b/Makefile
@@ -10,7 +10,8 @@ uninstall:
 	rm -fr ~/.node_libraries/dox
 
 examples: uninstall install
-	dox --title "Dox Example" --desc "This is an example using _dox_, how **cool!**" \
+	dox --title "Dox Example" \
-		examples/*.js > examples/index.html && open examples/index.html
+		--desc "This is an example using _dox_, how **cool!**" \
+		examples/*.js > examples/index.html
 
 .PHONY: install uninstall examples
diff --git a/examples/foo.js b/examples/foo.js
@@ -21,23 +21,27 @@ var files = ['foo.js', 'bar.js'];
 /**
  * Output contents of _foo.js_ and _bar.js_.
  *
- * # h1
+ * ## Stuff:
- * ## h2
- * ### h3
- *
- * ## WTF:
  *
  * This is just a stupid random demo, so... here is a list:
  *
- *   - foo.js
+ *   - a
- *   - bar.js
+ *     * b
+ *     * c
+ *       - d
+ *       - e
+ *   - f
  *
  * ## Examples:
  *
  *    require('foo').output();
  *
  * Just a [link](http://github.com/visionmedia/dox) to dox's _source_.
  *
+ * ## HTML
+ *
+ * Is escaped, <script>alert("mwahaha")</script> for example :).
+ *
  * @param {String} nothing a string that does nothing
  * @return {Object} exports for chaining
  * @api public
@@ -46,9 +50,11 @@ var files = ['foo.js', 'bar.js'];
 var output = exports.output = function(nothing){
     for (var i = 0, len = files.length; i < len; ++i) {
         var file = files[i];
+        // Just some stupid comment
         if (file.match(/\.js$/)) {
             fs.readFile(file, function(err, str){
                if (err) {
+                   // lalalalala
                    throw err;
                } else {
                    sys.puts(str); 

diff --git a/examples/index.html b/examples/index.html
@@ -15,7 +15,7 @@
     text-decoration: underline;
     color: #19469D;
 }
-h1 {
+h1, h2, h3 {
     margin: 0;
     padding: 0;
 }
@@ -78,6 +78,7 @@
 table#source tr.filename {
     padding-top: 40px;
     border-top: 1px solid #E5E5EE;
+    text-transform: capitalize;
 }
 table#source tr.filename td:last-child {
     font-size: 12px;
@@ -86,6 +87,27 @@
     margin: 0;
     padding: 0;
 }
+table#source tr.code h1,
+table#source tr.code h2,
+table#source tr.code h3 {
+    margin-top: 30px;
+    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
+    font-size: 18px;
+}
+table#source tr.code h2 {
+    font-size: 16px;
+}
+table#source tr.code h3 {
+    font-size: 14px;
+}
+table#source tr.code ul {
+    margin: 5px 0 5px 35px;
+    padding: 0;
+}
+table#source tr.code ul li {
+    margin: 0;
+    padding: 2px 0;
+}
 code .string { color: #219161; }
 code .regexp { color: #219161; }
 code .keyword { color: #954121; }
@@ -96,69 +118,78 @@
 	</head>
 	<body>
 <ul id="menu"><li><a href="#examples/bar.js">examples/<strong>bar</strong></a></li>
-<li><a href="#examples/foo.js">examples/<strong>foo</strong></a></li></ul><table id="source"><tbody><tr><td><h1>Dox Example</h1>This is an example using _dox_, how **cool!**</td><td></td></tr><tr class="filename"><td><h2 id="examples/bar.js">bar</h2></td><td>examples/bar.js</td></tr><tr>
+<li><a href="#examples/foo.js">examples/<strong>foo</strong></a></li></ul><table id="source"><tbody><tr><td><h1>Dox Example</h1>This is an example using _dox_, how **cool!**</td><td></td></tr><tr class="filename"><td><h2 id="examples/bar.js">bar</h2></td><td>examples/bar.js</td></tr><tr class="code">
 <td class="docs">
-<pre><p>Module dependencies.</p></pre>
+<p>Module dependencies.</p>
 </td>
 <td class="code">
 <pre><code><span class="keyword">var</span> <span class="variable">sys</span> = <span class="variable">require</span>(<span class="string">'sys'</span>);</code></pre>
 </td>
 </tr>
-<tr>
+<tr class="code">
 <td class="docs">
-<pre><p>Output <em>foo</em> and <em>bar</em>, seperated by <code>+</code>.</p>
+<p>Output <em>foo</em> and <em>bar</em>, seperated by <code>+</code>.</p>
+
+<ul>
+<li><strong>param</strong>: <em>String</em>  foo</li>
+<li><strong>param</strong>: <em>String</em>  bar</li>
+<li><strong>api</strong>: <em>public</em></li>
+</ul>
 
-<p><strong>param</strong>: <em>String</em>  foo
-<strong>param</strong>: <em>String</em>  bar
-<strong>api</strong>: <em>public</em></p></pre>
 </td>
 <td class="code">
 <pre><code><span class="keyword">function</span> <span class="variable">bar</span>(<span class="variable">foo</span>, <span class="variable">bar</span>){
     <span class="variable">sys</span>.<span class="variable">puts</span>([<span class="variable">foo</span>, <span class="variable">bar</span>].<span class="variable">join</span>(<span class="string">' + '</span>));
 }</code></pre>
 </td>
 </tr>
-<tr>
+<tr class="code">
 <td class="docs">
-<pre><p>Export bar().</p></pre>
+<p>Export bar().</p>
 </td>
 <td class="code">
 <pre><code><span class="variable">exports</span>.<span class="variable">bar</span> = <span class="variable">bar</span>;</code></pre>
 </td>
-</tr><tr class="filename"><td><h2 id="examples/foo.js">foo</h2></td><td>examples/foo.js</td></tr><tr>
+</tr><tr class="filename"><td><h2 id="examples/foo.js">foo</h2></td><td>examples/foo.js</td></tr><tr class="code">
 <td class="docs">
-<pre><p>Module dependencies.</p></pre>
+<p>Module dependencies.</p>
 </td>
 <td class="code">
 <pre><code><span class="keyword">var</span> <span class="variable">sys</span> = <span class="variable">require</span>(<span class="string">'sys'</span>),
     <span class="variable">fs</span> = <span class="variable">require</span>(<span class="string">'fs'</span>);</code></pre>
 </td>
 </tr>
-<tr>
+<tr class="code">
 <td class="docs">
-<pre><p>Files used by exports.output();</p></pre>
+<p>Files used by exports.output();</p>
 </td>
 <td class="code">
 <pre><code><span class="keyword">var</span> <span class="variable">files</span> = [<span class="string">'foo.js'</span>, <span class="string">'bar.js'</span>];</code></pre>
 </td>
 </tr>
-<tr>
+<tr class="code">
 <td class="docs">
-<pre><p>Output contents of <em>foo.js</em> and <em>bar.js</em>.</p>
+<p>Output contents of <em>foo.js</em> and <em>bar.js</em>.</p>
-
-<h1>h1</h1>
 
-<h2>h2</h2>
+<h2>Stuff:</h2>
 
-<h3>h3</h3>
+<p>This is just a stupid random demo, so&hellip; here is a list:</p>
 
-<h2>WTF:</h2>
+<ul>
+<li>a
 
-<p>This is just a stupid random demo, so&hellip; here is a list:</p>
+<ul>
+<li>b</li>
+<li>c
 
 <ul>
-<li>foo.js</li>
+<li>d</li>
-<li>bar.js</li>
+<li>e</li>
+</ul>
+</li>
+</ul>
+</li>
+<li>f</li>
 </ul>
 
 
@@ -168,17 +199,26 @@ <h2>Examples:</h2>
 
 <p>Just a <a href="http://github.com/visionmedia/dox">link</a> to dox&rsquo;s <em>source</em>.</p>
 
-<p><strong>param</strong>: <em>String</em>  nothing a string that does nothing
+<h2>HTML</h2>
-<strong>return</strong>: <em>Object</em>  exports for chaining
+
-<strong>api</strong>: <em>public</em></p></pre>
+<p>Is escaped, <script>alert(&ldquo;mwahaha&rdquo;)</script> for example :).</p>
+
+<ul>
+<li><strong>param</strong>: <em>String</em>  nothing a string that does nothing</li>
+<li><strong>return</strong>: <em>Object</em>  exports for chaining</li>
+<li><strong>api</strong>: <em>public</em></li>
+</ul>
+
 </td>
 <td class="code">
 <pre><code><span class="keyword">var</span> <span class="variable">output</span> = <span class="variable">exports</span>.<span class="variable">output</span> = <span class="keyword">function</span>(<span class="variable">nothing</span>){
     <span class="keyword">for</span> (<span class="keyword">var</span> <span class="variable">i</span> = <span class="number integer">0</span>, <span class="variable">len</span> = <span class="variable">files</span>.<span class="variable">length</span>; <span class="variable">i</span> < <span class="variable">len</span>; ++<span class="variable">i</span>) {
         <span class="keyword">var</span> <span class="variable">file</span> = <span class="variable">files</span>[<span class="variable">i</span>];
+        <span class="comment">// Just some stupid comment</span>
         <span class="keyword">if</span> (<span class="variable">file</span>.<span class="variable">match</span>(<span class="regexp">/\.js$/</span>)) {
             <span class="variable">fs</span>.<span class="variable">readFile</span>(<span class="variable">file</span>, <span class="keyword">function</span>(<span class="variable">err</span>, <span class="variable">str</span>){
                <span class="keyword">if</span> (<span class="variable">err</span>) {
+                   <span class="comment">// lalalalala</span>
                    <span class="keyword">throw</span> <span class="variable">err</span>;
                } <span class="keyword">else</span> {
                    <span class="variable">sys</span>.<span class="variable">puts</span>(<span class="variable">str</span>); 

diff --git a/lib/index.js b/lib/index.js
@@ -199,10 +199,8 @@ var render = exports.render = function(str){
     var html = [];
     for (var i = 0, len = blocks.length; i < len; ++i) {
         var block = blocks[i];
-        html.push('<tr>');
+        html.push('<tr class="code">');
-        html.push('<td class="docs">', block.comment
+        html.push('<td class="docs">', block.comment || '', '</td>');
-            ? '<pre>' + block.comment + '</pre>'
-            : '', '</td>');
         html.push('<td class="code">', block.code
             ? '<pre><code>' + block.code + '</code></pre>'
             : '', '</td>');
@@ -223,7 +221,7 @@ var render = exports.render = function(str){
 function jsdocToMarkdown(str) {
     return str
         .replace(/^ *@(\w+) *\{([^}]+)\}( *[^\n]+)?/gm, function(_, key, type, desc){
-            return '**' + key + '**: _' + type.split(/ *[|\/] */).join(' | ') + '_ ' + desc;
+            return '- **' + key + '**: _' + type.split(/ *[|\/] */).join(' | ') + '_ ' + desc;
         })
-        .replace(/^ *@(\w+) *(\w+)/gm, '**$1**: _$2_');
+        .replace(/^ *@(\w+) *(\w+)/gm, '- **$1**: _$2_');
 }
diff --git a/lib/styles/default/style.css b/lib/styles/default/style.css
@@ -12,7 +12,7 @@ a:hover {
     text-decoration: underline;
     color: #19469D;
 }
-h1 {
+h1, h2, h3 {
     margin: 0;
     padding: 0;
 }
@@ -75,6 +75,7 @@ table#source tr {
 table#source tr.filename {
     padding-top: 40px;
     border-top: 1px solid #E5E5EE;
+    text-transform: capitalize;
 }
 table#source tr.filename td:last-child {
     font-size: 12px;
@@ -83,6 +84,27 @@ table#source tr.filename h2 {
     margin: 0;
     padding: 0;
 }
+table#source tr.code h1,
+table#source tr.code h2,
+table#source tr.code h3 {
+    margin-top: 30px;
+    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
+    font-size: 18px;
+}
+table#source tr.code h2 {
+    font-size: 16px;
+}
+table#source tr.code h3 {
+    font-size: 14px;
+}
+table#source tr.code ul {
+    margin: 5px 0 5px 35px;
+    padding: 0;
+}
+table#source tr.code ul li {
+    margin: 0;
+    padding: 2px 0;
+}
 code .string { color: #219161; }
 code .regexp { color: #219161; }
 code .keyword { color: #954121; }