diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js index e273a4ec82d4e3..f77f8af9e9f339 100644 --- 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 ( +
+ + + {docs.example.content.replace(/^[\s\S]*\*\//, '').trim()} + +
+ ); + }, + render: function() { var metadata = this.props.metadata; var docs = JSON.parse(this.props.children); @@ -301,6 +320,7 @@ var Autodocs = React.createClass({

{metadata.title}

{content} {this.renderFullDescription(docs)} + {this.renderExample(docs)}
{metadata.previous && ← Prev} {metadata.next && Next →} diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js index 5fd1f11950f512..b341734ac6218d 100644 --- 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 = [ '---',