Cleanup Edit with GitHub

Summary:
- Now using a table layout. While having the link inside of the header worked well in the browser, the search API would put "Edit in GitHub" as part of the title -_-
- Instead of putting the link inside of every section like Props, put it on the page header. This makes it less repetetitive and also works on API pages where the link was absent before
- Remove "Run this example" link as there's a giant Run this example sidebar already.
Closes https://github.com/facebook/react-native/pull/5643

Reviewed By: svcscm

Differential Revision: D2883989

Pulled By: vjeux

fb-gh-sync-id: e810e1677d5130692997dd301d6d59cfe04b948f

website/core/HeaderWithGithub.js

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule HeaderWithGithub
+ */
+
+var H = require('Header');
+var React = require('React');
+
+var HeaderWithGithub = React.createClass({
+  render: function() {
+    return (
+      <table width="100%">
+        <tbody>
+          <tr>
+            <td>
+              <H level={this.props.level || 3} toSlug={this.props.title}>
+                {this.props.title}
+              </H>
+            </td>
+            <td style={{textAlign: 'right'}}>
+              <a
+                target="_blank"
+                href={'https://github.com/facebook/react-native/blob/master/' + this.props.path}>
+                Edit on GitHub
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+});
+
+module.exports = HeaderWithGithub;

website/layout/AutodocsLayout.js

@@ -12,6 +12,7 @@
 var DocsSidebar = require('DocsSidebar');
 var H = require('Header');
 var Header = require('Header');
+var HeaderWithGithub = require('HeaderWithGithub');
 var Marked = require('Marked');
 var Prism = require('Prism');
 var React = require('React');
@@ -233,10 +234,7 @@ var ComponentDoc = React.createClass({
         <Marked>
           {content.description}
         </Marked>
-        <HeaderWithGithub
+        <H level={3}>Props</H>
-          title="Props"
-          path={content.filepath}
-        />
         {this.renderProps(content.props, content.composes)}
       </div>
     );
@@ -406,32 +404,45 @@ var APIDoc = React.createClass({
   }
 });
 
-var HeaderWithGithub = React.createClass({
+var EmbeddedSimulator = React.createClass({
-
-  renderRunnableLink: function() {
-    if (this.props.metadata && this.props.metadata.runnable) {
-      return (
-        <a
-          className="run-example"
-          target="_blank"
-          href={'https://rnplay.org/apps/l3Zi2g?route='+this.props.metadata.title+'&file=' + this.props.metadata.title+ "Example.js"}>
-          Run this example
-        </a>
-      );
-    }
-  },
-
   render: function() {
+    if (!this.props.shouldRender) {
+      return null;
+    }
+
+    var metadata = this.props.metadata;
+
     return (
-      <H level={3} toSlug={this.props.title}>
+      <div className="column-left">
-        <a
+        <p><a className="modal-button-open"><strong>Run this example</strong></a></p>
-          className="edit-github"
+        <div className="modal-button-open modal-button-open-img">
-          href={'https://github.com/facebook/react-native/blob/master/' + this.props.path}>
+          <img alt="Run example in simulator" width="170" height="358" src="/react-native/img/alertIOS.png" />
-          Edit on GitHub
+        </div>
-        </a>
+        <Modal />
-        {this.renderRunnableLink()}
+      </div>
-        {this.props.title}
+    );
-      </H>
+  }
+});
+
+var Modal = React.createClass({
+  render: function() {
+    var appParams = {route: 'AlertIOS'};
+    var encodedParams = encodeURIComponent(JSON.stringify(appParams));
+    var url = `https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&scale=70&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`;
+
+    return (
+      <div>
+        <div className="modal">
+          <div className="modal-content">
+            <button className="modal-button-close">&times;</button>
+            <div className="center">
+              <iframe className="simulator" src={url} width="256" height="550" frameborder="0" scrolling="no"></iframe>
+              <p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p>
+            </div>
+          </div>
+        </div>
+        <div className="modal-backdrop" />
+      </div>
     );
   }
 });
@@ -486,7 +497,11 @@ var Autodocs = React.createClass({
           <DocsSidebar metadata={metadata} />
           <div className="inner-content">
             <a id="content" />
-            <h1>{metadata.title}</h1>
+            <HeaderWithGithub
+              title={metadata.title}
+              level={1}
+              path={metadata.path}
+            />
             {content}
             {this.renderFullDescription(docs)}
             {this.renderExample(docs, metadata)}
@@ -504,47 +519,4 @@ var Autodocs = React.createClass({
   }
 });
 
-var EmbeddedSimulator = React.createClass({
-  render: function() {
-    if (!this.props.shouldRender) {
-      return null;
-    }
-
-    var metadata = this.props.metadata;
-
-    return (
-      <div className="column-left">
-        <p><a className="modal-button-open"><strong>Run this example</strong></a></p>
-        <div className="modal-button-open modal-button-open-img">
-          <img alt="Run example in simulator" width="170" height="358" src="/react-native/img/alertIOS.png" />
-        </div>
-        <Modal />
-      </div>
-    );
-  }
-});
-
-var Modal = React.createClass({
-  render: function() {
-    var appParams = {route: 'AlertIOS'};
-    var encodedParams = encodeURIComponent(JSON.stringify(appParams));
-    var url = `https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&scale=70&autoplay=false&orientation=portrait&deviceColor=white&params=${encodedParams}`;
-
-    return (
-      <div>
-        <div className="modal">
-          <div className="modal-content">
-            <button className="modal-button-close">&times;</button>
-            <div className="center">
-              <iframe className="simulator" src={url} width="256" height="550" frameborder="0" scrolling="no"></iframe>
-              <p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p>
-            </div>
-          </div>
-        </div>
-        <div className="modal-backdrop" />
-      </div>
-    );
-  }
-});
-
 module.exports = Autodocs;

website/layout/DocsLayout.js

@@ -9,10 +9,12 @@
  * @providesModule DocsLayout
  */
 
+var DocsSidebar = require('DocsSidebar');
+var HeaderWithGithub = require('HeaderWithGithub');
+var Marked = require('Marked');
 var React = require('React');
 var Site = require('Site');
-var Marked = require('Marked');
+
-var DocsSidebar = require('DocsSidebar');
 var DocsLayout = React.createClass({
   render: function() {
     var metadata = this.props.metadata;
@@ -23,14 +25,11 @@ var DocsLayout = React.createClass({
           <DocsSidebar metadata={metadata} />
           <div className="inner-content">
             <a id="content" />
-            <h1>
+            <HeaderWithGithub
-              {metadata.title}
+              title={metadata.title}
-              <a
+              level={1}
-                className="edit-github"
+              path={'docs/' + metadata.filename}
-                href={'https://github.com/facebook/react-native/blob/master/docs/' + metadata.filename}>
+            />
-                Edit on GitHub
-              </a>
-            </h1>
             <Marked>{content}</Marked>
             <div className="docs-prevnext">
               {metadata.previous && <a className="docs-prev" href={metadata.previous + '.html#content'}>&larr; Prev</a>}

website/server/extractDocs.js

@@ -137,6 +137,7 @@ function componentsToMarkdown(type, json, filepath, i, styles) {
     'next: ' + next,
     'sidebar: ' + shouldDisplayInSidebar(componentName),
     'runnable:' + isRunnable(componentName),
+    'path:' + json.filepath,
     '---',
     JSON.stringify(json, null, 2),
   ].filter(function(line) { return line; }).join('\n');

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

@@ -1118,18 +1118,6 @@ div[data-twttr-id] iframe {
   margin-left: 26px;
 }
 
-.edit-github {
-  font-size: 15px;
-  font-weight: normal;
-  float: right;
-}
-
-.run-example {
-  font-size: 15px;
-  float: right;
-  margin-right: 20px;
-}
-
 #content {
   display: none;
 }