Improvements in the docs generation

website/core/DocsSidebar.js

@@ -9,7 +9,7 @@ var Metadata = require('Metadata');
 var DocsSidebar = React.createClass({
   getCategories: function() {
     var metadatas = Metadata.files.filter(function(metadata) {
-      return metadata.layout === 'docs';
+      return metadata.layout === 'docs' || metadata.layout === 'autodocs';
     });
 
     // Build a hashmap of article_id -> metadata

website/layout/AutodocsLayout.js

@@ -0,0 +1,57 @@
+/**
+ * @providesModule AutodocsLayout
+ * @jsx React.DOM
+ */
+
+var DocsSidebar = require('DocsSidebar');
+var Header = require('Header');
+var Marked = require('Marked');
+var React = require('React');
+var Site = require('Site');
+
+
+var Autodocs = React.createClass({
+  renderProp: function(name, prop) {
+    return (
+      <div className="prop">
+        <Header level={4} className="propTitle" toSlug={name}>
+          {name}
+          {' '}
+          <span className="propType">{prop.type.name}</span></Header>
+        <Marked>{prop.description}</Marked>
+      </div>
+    );
+  },
+  renderProps: function(props) {
+    var result = Object.keys(props).sort().map((name) =>
+      this.renderProp(name, props[name])
+    );
+
+    return <div className="props">{result}</div>;
+  },
+  render: function() {
+    var metadata = this.props.metadata;
+    var content = JSON.parse(this.props.children);
+    return (
+      <Site section="docs">
+        <section className="content wrap documentationContent">
+          <DocsSidebar metadata={metadata} />
+          <div className="inner-content">
+            <a id="content" />
+            <h1>{metadata.title}</h1>
+            <Marked>
+              {content.description}
+            </Marked>
+            {this.renderProps(content.props)}
+            <div className="docs-prevnext">
+              {metadata.previous && <a className="docs-prev" href={metadata.previous + '.html#content'}>&larr; Prev</a>}
+              {metadata.next && <a className="docs-next" href={metadata.next + '.html#content'}>Next &rarr;</a>}
+            </div>
+          </div>
+        </section>
+      </Site>
+    );
+  }
+});
+
+module.exports = Autodocs;

website/server/convert.js

@@ -30,7 +30,7 @@ function backtickify(str) {
 function execute() {
   var MD_DIR = '../docs/';
 
-  var files = glob.sync('src/react-native/docs/*.*')
+  var files = glob.sync('src/react-native/docs/*.*');
   files.forEach(function(file) {
     try {
       fs.unlinkSync(file);

website/server/extractDocs.js

@@ -18,7 +18,7 @@ function docsToMarkdown(filepath, i) {
       return docs.resolver.findExportedReactCreateClassCall(node, recast) ||
         docs.resolver.findAllReactCreateClassCalls(node, recast)[0];
     }
-  )
+  );
 
   var componentName = getNameFromPath(filepath);
 
@@ -26,18 +26,12 @@ function docsToMarkdown(filepath, i) {
     '---',
     'id: ' + slugify(componentName),
     'title: ' + componentName,
-    'layout: docs',
+    'layout: autodocs',
     'category: Components',
     'permalink: docs/' + slugify(componentName) + '.html',
     components[i + 1] && ('next: ' + slugify(getNameFromPath(components[i + 1]))),
     '---',
-    ' ',
-    json.description,
-    ' ',
-    '# Props',
-    '```',
-    JSON.stringify(json.props, null, 2),
-    '```',
+    JSON.stringify(json, null, 2),
   ].filter(function(line) { return line; }).join('\n');
   return res;
 }
@@ -49,6 +43,7 @@ var components = [
   '../Libraries/Components/Navigation/NavigatorIOS.ios.js',
   '../Libraries/Components/ScrollView/ScrollView.ios.js',
   '../Libraries/Text/Text.js',
+  '../Libraries/Image/Image.ios.js',
   '../Libraries/Components/TextInput/TextInput.ios.js',
   '../Libraries/Components/Touchable/TouchableHighlight.js',
   '../Libraries/Components/Touchable/TouchableWithoutFeedback.js',

website/src/react-native/css/react-native.css

@@ -895,6 +895,29 @@ div[data-twttr-id] iframe {
   text-align: center;
 }
 
+
+.props {
+  background-color: hsl(198, 100%, 96%);
+}
+
+.prop:nth-child(2n) {
+  background-color: hsl(198, 100%, 94%);
+}
+
+.propTitle {
+  font-weight: bold;
+}
+
+.prop {
+  padding: 5px 10px;
+}
+
+.propType {
+  font-weight: normal;
+  font-size: 15px;
+}
+
+
 #content {
   display: none;
 }
@@ -965,3 +988,4 @@ div[data-twttr-id] iframe {
     margin: 0;
   }
 }
+