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 = [
'---',