Add examples at the end of the doc pages

facebook · Mar 31, 2015 · a4a551c · a4a551c
1 parent c8c4b41
commit a4a551c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
@@ -13,6 +13,7 @@ var DocsSidebar = require('DocsSidebar');
 var H = require('Header');
 var Header = require('Header');
 var Marked = require('Marked');
+var Prism = require('Prism');
 var React = require('React');
 var Site = require('Site');
 var slugify = require('slugify');
@@ -285,6 +286,24 @@ var Autodocs = React.createClass({
     );
   },
 
+  renderExample: function(docs) {
+    if (!docs.example) {
+      return;
+    }
+
+    return (
+      <div>
+        <HeaderWithGithub
+          title="Examples"
+          path={docs.example.path}
+        />
+        <Prism>
+          {docs.example.content.replace(/^[\s\S]*\*\//, '').trim()}
+        </Prism>
+      </div>
+    );
+  },
+
   render: function() {
     var metadata = this.props.metadata;
     var docs = JSON.parse(this.props.children);
@@ -301,6 +320,7 @@ var Autodocs = React.createClass({
             <h1>{metadata.title}</h1>
             {content}
             {this.renderFullDescription(docs)}
+            {this.renderExample(docs)}
             <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>}

diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js
@@ -25,6 +25,17 @@ function getNameFromPath(filepath) {
   return filepath;
 }
 
+function getExample(componentName) {
+  var path = '../Examples/UIExplorer/' + componentName + 'Example.js';
+  if (!fs.existsSync(path)) {
+    return;
+  }
+  return {
+    path: path,
+    content: fs.readFileSync(path).toString(),
+  };
+}
+
 function componentsToMarkdown(type, json, filepath, i, styles) {
   var componentName = getNameFromPath(filepath);
 
@@ -38,6 +49,7 @@ function componentsToMarkdown(type, json, filepath, i, styles) {
   if (styles) {
     json.styles = styles;
   }
+  json.example = getExample(componentName);
 
   var res = [
     '---',