Update Edit on GitHub links to point to master

Summary: We've been getting a lot of documentation PRs opened against `0.29-stable`, `0.30-stable`, and so on, instead of `master`. This is because our doc site is also based on RN release cuts, so clicking on the "Edit on GitHub" links on a document will take you to the markdown source for that release branch instead of the latest doc on `master`. See facebook#9095 for an example of such a PR. In this PR we edit the link to say View on GitHub. Though it may not prevent PRs from being opened against a release branch, removing the "Edit" CTA may help in this regard. Closes facebook#9149 Differential Revision: D3664368 Pulled By: vjeux fbshipit-source-id: 395c0813f736bfbe1be4b4fb1182f9060169365d
HomePass · Aug 24, 2016 · 544cc3f · 544cc3f
1 parent c6ccf30
commit 544cc3f
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 66 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,8 +2,6 @@ Thanks for submitting a pull request! Please provide enough information so that
 
 > **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**
 
-(You can skip this if you're fixing a typo or adding an app to the Showcase.)
-
 Explain the **motivation** for making this change. What existing problem does the pull request solve?
 
 Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -21,7 +21,7 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
 1. Fork the repo and create your branch from `master`.
 2. **Describe your test plan in your commit.** If you've added code that should be tested, add tests!
 3. If you've changed APIs, update the documentation.
-4. If you've updated the docs, verify the website locally and submit screenshots if applicable
+4. If you've updated the docs, verify the website locally and submit screenshots if applicable.
 
     ```
     $ cd website

diff --git a/website/core/Footer.js b/website/core/Footer.js
@@ -0,0 +1,28 @@
+/**
+ * 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 getGitHubPath(path) {
+  return 'https://github.com/facebook/react-native/blob/master/' + path;
+}
+
+var Footer = React.createClass({
+  render: function() {
+    return (
+      <p className="edit-page-block">
+        You can <a target="_blank" href={getGitHubPath(this.props.path)}>edit the content above on GitHub</a> and send us a pull request!
+      </p>
+    );
+  }
+});
+
+module.exports = Footer;
diff --git a/website/core/HeaderWithGithub.js b/website/core/HeaderWithGithub.js
@@ -12,13 +12,8 @@
 var H = require('Header');
 var React = require('React');
 
-function getVersionedGithubPath(path, version) {
-  version = version || 'next';
-  return [
-    'https://github.com/facebook/react-native/blob',
-    version === 'next' ? 'master' : version + '-stable',
-    path
-  ].join('/');
+function getGitHubPath(path) {
+  return  'https://github.com/facebook/react-native/blob/master/' + path;
 }
 
 var HeaderWithGithub = React.createClass({
@@ -40,7 +35,7 @@ var HeaderWithGithub = React.createClass({
             <td style={{textAlign: 'right'}}>
               <a
                 target="_blank"
-                href={getVersionedGithubPath(this.props.path, this.context.version)}>
+                href={getGitHubPath(this.props.path)}>
                 Edit on GitHub
               </a>
             </td>

diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js
@@ -12,9 +12,9 @@
 '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');
@@ -331,7 +331,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] !== '_';
@@ -362,7 +362,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);
@@ -381,7 +381,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)}
@@ -413,7 +413,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] !== '_';
@@ -447,7 +447,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] !== '_';
@@ -508,7 +508,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);
@@ -835,13 +835,11 @@ var Autodocs = React.createClass({
     }
     return (
       <div>
-        <HeaderWithGithub
-          title="Description"
-          path={'docs/' + docs.componentName + '.md'}
-        />
+        <Header level={1}>Description</Header>
         <Marked>
           {docs.fullDescription}
         </Marked>
+        <Footer path={'docs/' + docs.componentName + '.md'} />
       </div>
     );
   },
@@ -876,7 +874,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>
     );
@@ -895,12 +893,9 @@ var Autodocs = React.createClass({
           <DocsSidebar metadata={metadata} />
           <div className="inner-content">
             <a id="content" />
-            <HeaderWithGithub
-              title={metadata.title}
-              level={1}
-              path={metadata.path}
-            />
+            <Header level={1}>{metadata.title}</Header>
             {content}
+            <Footer path={metadata.path} />
             {this.renderFullDescription(docs)}
             {this.renderExamples(docs, metadata)}
             <div className="docs-prevnext">

diff --git a/website/layout/DocsLayout.js b/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,13 @@ 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>

diff --git a/website/src/react-native/css/react-native.css b/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 {
@@ -1580,56 +1580,58 @@ input#algolia-doc-search:focus {
   color: #3B3738;
 }
 
-.params, .props
-{
-    border-spacing: 0;
-    border: 0;
-    border-collapse: collapse;
+.params, .props {
+  border-spacing: 0;
+  border: 0;
+  border-collapse: collapse;
 }
 
 .params .name, .props .name, .name code {
-    color: #4D4E53;
+  color: #4D4E53;
 }
 
-.params td, .params th, .props td, .props th
-{
-    border: 1px solid #ddd;
-    margin: 0px;
-    text-align: left;
-    vertical-align: top;
-    padding: 4px 6px;
-    display: table-cell;
+.params td, .params th, .props td, .props th {
+  border: 1px solid #ddd;
+  margin: 0px;
+  text-align: left;
+  vertical-align: top;
+  padding: 4px 6px;
+  display: table-cell;
 }
 
-.params thead tr, .props thead tr
-{
-    background-color: hsl(198, 75%, 88%);
-    font-weight: bold;
+.params thead tr, .props thead tr {
+  background-color: hsl(198, 75%, 88%);
+  font-weight: bold;
 }
 
-.params .params thead tr, .props .props thead tr
-{
-    background-color: #fff;
-    font-weight: bold;
+.params .params thead tr, .props .props thead tr {
+  background-color: #fff;
+  font-weight: bold;
 }
 
 .params th, .props th { border-right: 1px solid #aaa; }
 .params thead .last, .props thead .last { border-right: 1px solid #ddd; }
 
 .params td.description > div > p:first-child,
-.props td.description > div > p:first-child
-{
-    margin-top: 0;
-    padding-top: 0;
+.props td.description > div > p:first-child {
+  margin-top: 0;
+  padding-top: 0;
 }
 
 .params td.description > p:last-child,
-.props td.description > p:last-child
-{
-    margin-bottom: 0;
-    padding-bottom: 0;
+.props td.description > p:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
 }
 
+.edit-page-block {
+  padding: 5px;
+  margin-bottom: 40px;
+  font-size: 12px;
+  color: #887766;
+  text-align: center;
+  background-color: rgba(5, 165, 209, 0.05);
+}
 
 /** Web player **/