diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js index b9bef328c..bd6ccfb55 100644 --- a/website/layout/AutodocsLayout.js +++ b/website/layout/AutodocsLayout.js @@ -264,6 +264,20 @@ var APIDoc = React.createClass({ }); var HeaderWithGithub = React.createClass({ + + renderRunnableLink: function() { + if (this.props.metadata && this.props.metadata.runnable) { + return ( + + Run this example + + ); + } + }, + render: function() { return ( @@ -272,6 +286,7 @@ var HeaderWithGithub = React.createClass({ href={'https://github.com/facebook/react-native/blob/master/' + this.props.path}> Edit on GitHub + {this.renderRunnableLink()} {this.props.title} ); @@ -296,7 +311,7 @@ var Autodocs = React.createClass({ ); }, - renderExample: function(docs) { + renderExample: function(docs, metadata) { if (!docs.example) { return; } @@ -306,6 +321,7 @@ var Autodocs = React.createClass({ {docs.example.content.replace(/^[\s\S]*?\*\//, '').trim()} @@ -330,7 +346,7 @@ var Autodocs = React.createClass({

{metadata.title}

{content} {this.renderFullDescription(docs)} - {this.renderExample(docs)} + {this.renderExample(docs, metadata)}
{metadata.previous && ← Prev} {metadata.next && Next →} diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js index 45cd16fbb..57ea2c6a7 100644 --- a/website/server/extractDocs.js +++ b/website/server/extractDocs.js @@ -44,6 +44,16 @@ function getExample(componentName) { }; } +// Determines whether a component should have a link to a runnable example + +function isRunnable(componentName) { + if (componentName === 'AlertIOS') { + return true; + } + + return false; +} + // Hide a component from the sidebar by making it return false from // this function function shouldDisplayInSidebar(componentName) { @@ -99,6 +109,7 @@ function componentsToMarkdown(type, json, filepath, i, styles) { 'permalink: docs/' + slugify(componentName) + '.html', 'next: ' + next, 'sidebar: ' + shouldDisplayInSidebar(componentName), + 'runnable:' + isRunnable(componentName), '---', JSON.stringify(json, null, 2), ].filter(function(line) { return line; }).join('\n'); diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 8fd1797f7..902d2a4a4 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -973,6 +973,12 @@ div[data-twttr-id] iframe { float: right; } +.run-example { + font-size: 15px; + float: right; + margin-right: 20px; +} + #content { display: none; } @@ -1043,4 +1049,3 @@ div[data-twttr-id] iframe { margin: 0; } } -