fix all anchor links in docs

Summary: Closes https://github.com/facebook/react-native/pull/6213

Differential Revision: D2989119

Pulled By: vjeux

fb-gh-sync-id: 3a069dcebbf8dec40702a7bab5268ce4a82db731
shipit-source-id: 3a069dcebbf8dec40702a7bab5268ce4a82db731

website/core/Header.js

@@ -13,18 +13,19 @@ var React = require('React');
 var slugify = require('slugify');
 
 var Header = React.createClass({
-  getDefaultProps: function() {
-    return {permalink: ''};
+  contextTypes: {
+    permalink: React.PropTypes.string
   },
 
   render: function() {
     var slug = slugify(this.props.toSlug || this.props.children);
     var H = 'h' + this.props.level;
+    var base = this.context.permalink || '';
     return (
       <H {...this.props}>
         <a className="anchor" name={slug}></a>
         {this.props.children}
-        {' '}<a className="hash-link" href={this.props.permalink + '#' + slug}>#</a>
+        {' '}<a className="hash-link" href={base + '#' + slug}>#</a>
       </H>
     );
   }

website/layout/AutodocsLayout.js

@@ -110,7 +110,7 @@ var ComponentDoc = React.createClass({
   renderProp: function(name, prop) {
     return (
       <div className="prop" key={name}>
-        <Header level={4} className="propTitle" toSlug={name} permalink={this.props.permalink}>
+        <Header level={4} className="propTitle" toSlug={name}>
           {prop.platforms && prop.platforms.map(platform =>
             <span className="platform">{platform}</span>
           )}
@@ -448,6 +448,14 @@ var Modal = React.createClass({
 });
 
 var Autodocs = React.createClass({
+  childContextTypes: {
+    permalink: React.PropTypes.string
+  },
+
+  getChildContext: function() {
+    return {permalink: this.props.metadata.permalink};
+  },
+
   renderFullDescription: function(docs) {
     if (!docs.fullDescription) {
       return;
@@ -488,7 +496,7 @@ var Autodocs = React.createClass({
     var metadata = this.props.metadata;
     var docs = JSON.parse(this.props.children);
     var content  = docs.type === 'component' || docs.type === 'style' ?
-      <ComponentDoc content={docs} permalink={metadata.permalink}/> :
+      <ComponentDoc content={docs} /> :
       <APIDoc content={docs} apiName={metadata.title} />;
 
     return (

website/layout/DocsLayout.js

@@ -16,6 +16,14 @@ var React = require('React');
 var Site = require('Site');
 
 var DocsLayout = React.createClass({
+  childContextTypes: {
+    permalink: React.PropTypes.string
+  },
+
+  getChildContext: function() {
+    return {permalink: this.props.metadata.permalink};
+  },
+
   render: function() {
     var metadata = this.props.metadata;
     var content = this.props.children;

website/layout/PageLayout.js

@@ -14,6 +14,14 @@ var Site = require('Site');
 var Marked = require('Marked');
 
 var support = React.createClass({
+  childContextTypes: {
+    permalink: React.PropTypes.string
+  },
+
+  getChildContext: function() {
+    return {permalink: this.props.metadata.permalink};
+  },
+
   render: function() {
     var metadata = this.props.metadata;
     var content = this.props.children;

website/src/react-native/support.js

@@ -13,6 +13,13 @@ var center = require('center');
 var H2 = require('H2');
 
 var support = React.createClass({
+  childContextTypes: {
+    permalink: React.PropTypes.string
+  },
+
+  getChildContext: function() {
+    return {permalink: 'support.html'};
+  },
   render: function() {
     return (
       <Site section="support" title="Support">