Move Edit on GitHub link to footer.

website/core/Footer.js

@@ -0,0 +1,31 @@
+/**
+ * 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 Footer
+ */
+
+var React = require('React');
+
+function getVersionedGitHubPath(path) {
+  return [
+    'https://github.com/facebook/react-native/blob/master',
+    path
+  ].join('/');
+}
+
+var Footer = React.createClass({
+  render: function() {
+    return (
+      <p className="edit-page-block">
+        You can <a target="_blank" href={getVersionedGitHubPath(this.props.path)} >edit this page on GitHub</a> and send us a pull request!
+      </p>
+    );
+  }
+});
+
+module.exports = Footer;

website/layout/AutodocsLayout.js

@@ -12,9 +12,8 @@
 'use strict';
 
 var DocsSidebar = require('DocsSidebar');
-var H = require('Header');
 var Header = require('Header');
-var HeaderWithGithub = require('HeaderWithGithub');
+var Footer = require('Footer');
 var Marked = require('Marked');
 var Prism = require('Prism');
 var React = require('React');
@@ -327,7 +326,7 @@ var ComponentDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Methods</H>
+        <Header level={3}>Methods</Header>
         <div className="props">
           {methods.filter((method) => {
             return method.name[0] !== '_';
@@ -358,7 +357,7 @@ var ComponentDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Type Definitions</H>
+        <Header level={3}>Type Definitions</Header>
         <div className="props">
           {typedefs.map((typedef) => {
             return this.renderTypeDef(typedef, namedTypes);
@@ -377,7 +376,7 @@ var ComponentDoc = React.createClass({
         <Marked>
           {content.description}
         </Marked>
-        <H level={3}>Props</H>
+        <Header level={3}>Props</Header>
         {this.renderProps(content.props, content.composes)}
         {this.renderMethods(content.methods, namedTypes)}
         {this.renderTypeDefs(content.typedef, namedTypes)}
@@ -409,7 +408,7 @@ var APIDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Methods</H>
+        <Header level={3}>Methods</Header>
         <div className="props">
           {methods.filter((method) => {
             return method.name[0] !== '_';
@@ -443,7 +442,7 @@ var APIDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Properties</H>
+        <Header level={3}>Properties</Header>
         <div className="props">
           {properties.filter((property) => {
             return property.name[0] !== '_';
@@ -504,7 +503,7 @@ var APIDoc = React.createClass({
     }
     return (
       <span>
-        <H level={3}>Type Definitions</H>
+        <Header level={3}>Type Definitions</Header>
         <div className="props">
           {typedefs.map((typedef) => {
             return this.renderTypeDef(typedef, namedTypes);
@@ -831,10 +830,11 @@ var Autodocs = React.createClass({
     }
     return (
       <div>
-        <HeaderWithGithub
-          title="Description"
-          path={'docs/' + docs.componentName + '.md'}
-        />
+        <Header
+          toSlug='Description'
+        >
+          Description
+        </Header>
         <Marked>
           {docs.fullDescription}
         </Marked>
@@ -849,12 +849,13 @@ var Autodocs = React.createClass({
 
     return (
       <div>
-        <HeaderWithGithub
-          title={example.title || 'Examples'}
+        <Header
           level={example.title ? 4 : 3}
           path={example.path}
           metadata={metadata}
-        />
+        >
+          {example.title || 'Examples'}
+        </Header>
         <div className="example-container">
           <Prism>
            {example.content.replace(/^[\s\S]*?\*\//, '').trim()}
@@ -872,7 +873,7 @@ var Autodocs = React.createClass({
 
     return (
       <div>
-        {(docs.examples.length > 1) ? <H level={3}>Examples</H> : null}
+        {(docs.examples.length > 1) ? <Header level={3}>Examples</Header> : null}
         {docs.examples.map(example => this.renderExample(example, metadata))}
       </div>
     );
@@ -891,11 +892,11 @@ var Autodocs = React.createClass({
           <DocsSidebar metadata={metadata} />
           <div className="inner-content">
             <a id="content" />
-            <HeaderWithGithub
-              title={metadata.title}
+            <Header
               level={1}
-              path={metadata.path}
-            />
+            >
+              {metadata.title}
+            </Header>
             {content}
             {this.renderFullDescription(docs)}
             {this.renderExamples(docs, metadata)}
@@ -903,6 +904,7 @@ var Autodocs = React.createClass({
               {metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
               {metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
             </div>
+            <Footer path={metadata.path} />
           </div>
         </section>
       </Site>

website/layout/DocsLayout.js

@@ -10,7 +10,8 @@
  */
 
 var DocsSidebar = require('DocsSidebar');
-var HeaderWithGithub = require('HeaderWithGithub');
+var Header = require('Header');
+var Footer = require('Footer');
 var Marked = require('Marked');
 var React = require('React');
 var Site = require('Site');
@@ -38,16 +39,15 @@ var DocsLayout = React.createClass({
           <DocsSidebar metadata={metadata} />
           <div className="inner-content">
             <a id="content" />
-            <HeaderWithGithub
-              title={metadata.title}
-              level={1}
-              path={'docs/' + metadata.filename}
-            />
+            <Header level={1} >
+              {metadata.title}
+            </Header>
             <Marked>{content}</Marked>
             <div className="docs-prevnext">
               {metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
               {metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
             </div>
+            <Footer path={'docs/' + metadata.filename} />
             <div className="survey">
               <div className="survey-image" />
               <p>

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

@@ -834,8 +834,8 @@ h2 {
 }
 
 .docs-prevnext {
-  padding-top: 40px;
-  padding-bottom: 40px;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .button {
@@ -1630,6 +1630,13 @@ input#algolia-doc-search:focus {
     padding-bottom: 0;
 }
 
+.edit-page-block {
+    padding: 5px;
+    font-size: 12px;
+    color: #887766;
+    text-align: center;
+    background-color: rgba(5, 165, 209, 0.05);
+}
 
 /** Web player **/