From 5e8d124754a75da57ccd2b39041918650afbb370 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Tue, 3 Oct 2017 00:52:39 +0800
Subject: [PATCH] Ensure all external links have consistent behavior (#11012)

---
 docs/_data/nav_community.yml                  |  6 ++---
 docs/index.md                                 |  2 +-
 .../components/ErrorDecoder/ErrorDecoder.js   |  4 +++-
 .../LayoutFooter/ExternalFooterLink.js        |  5 ++--
 www/src/components/LayoutFooter/Footer.js     | 11 ++++++---
 www/src/components/LayoutHeader/Header.js     |  8 +++++--
 www/src/utils/createLink.js                   | 13 +++++-----
 www/src/utils/sectionList.js                  | 24 +++++++++----------
 8 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/docs/_data/nav_community.yml b/docs/_data/nav_community.yml
index 3740d3af7e..776730fb60 100644
--- a/docs/_data/nav_community.yml
+++ b/docs/_data/nav_community.yml
@@ -6,9 +6,9 @@
       title: Conferences
     - id: videos
       title: Videos
-    - id: complementary-tools
-      title: Complementary Tools
-      href: https://github.com/facebook/react/wiki/Complementary-Tools
     - id: examples
       title: Examples
       href: https://github.com/facebook/react/wiki/Examples
+    - id: complementary-tools
+      title: Complementary Tools
+      href: https://github.com/facebook/react/wiki/Complementary-Tools
diff --git a/docs/index.md b/docs/index.md
index b1e58a6682..2eddf27cb3 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -67,7 +67,7 @@ id: home
       <h3>A Component Using External Plugins</h3>
       <p>
         React is flexible and provides hooks that allow you to interface with
-        other libraries and frameworks. This example uses **remarkable**, an
+        other libraries and frameworks. This example uses <strong>remarkable</strong>, an
         external Markdown library, to convert the textarea's value in real time.
       </p>
       <div id="markdownExample"></div>
diff --git a/www/src/components/ErrorDecoder/ErrorDecoder.js b/www/src/components/ErrorDecoder/ErrorDecoder.js
index d3d07e5e83..632d20b7e5 100644
--- a/www/src/components/ErrorDecoder/ErrorDecoder.js
+++ b/www/src/components/ErrorDecoder/ErrorDecoder.js
@@ -29,7 +29,9 @@ function urlify(str) {
   for (let i = 0; i < segments.length; i++) {
     if (i % 2 === 1) {
       segments[i] = (
-        <a key={i} target="_blank" href={segments[i]}>{segments[i]}</a>
+        <a key={i} target="_blank" rel="noopener" href={segments[i]}>
+          {segments[i]}
+        </a>
       );
     }
   }
diff --git a/www/src/components/LayoutFooter/ExternalFooterLink.js b/www/src/components/LayoutFooter/ExternalFooterLink.js
index 5d19e3969c..25e627e782 100644
--- a/www/src/components/LayoutFooter/ExternalFooterLink.js
+++ b/www/src/components/LayoutFooter/ExternalFooterLink.js
@@ -13,7 +13,7 @@ import React from 'react';
 import {colors} from 'theme';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 
-const ExternalFooterLink = ({children, href, target}) => (
+const ExternalFooterLink = ({children, href, target, rel}) => (
   <a
     css={{
       lineHeight: 2,
@@ -22,7 +22,8 @@ const ExternalFooterLink = ({children, href, target}) => (
       },
     }}
     href={href}
-    target={target}>
+    target={target}
+    rel={rel}>
     {children}
     <ExternalLinkSvg
       cssProps={{
diff --git a/www/src/components/LayoutFooter/Footer.js b/www/src/components/LayoutFooter/Footer.js
index 9aacdcc0a8..637352b93b 100644
--- a/www/src/components/LayoutFooter/Footer.js
+++ b/www/src/components/LayoutFooter/Footer.js
@@ -130,12 +130,14 @@ const Footer = ({layoutHasSidebar = false}) => (
             <FooterLink to="/blog/">Blog</FooterLink>
             <ExternalFooterLink
               href="https://github.com/facebook/react"
-              target="_blank">
+              target="_blank"
+              rel="noopener">
               GitHub
             </ExternalFooterLink>
             <ExternalFooterLink
               href="http://facebook.github.io/react-native/"
-              target="_blank">
+              target="_blank"
+              rel="noopener">
               React Native
             </ExternalFooterLink>
             <FooterLink to="/acknowledgements.html">
@@ -162,7 +164,10 @@ const Footer = ({layoutHasSidebar = false}) => (
               paddingTop: 40,
             },
           }}>
-          <a href="https://code.facebook.com/projects/" target="_blank">
+          <a
+            href="https://code.facebook.com/projects/"
+            target="_blank"
+            rel="noopener">
             <img
               alt="Facebook Open Source"
               css={{
diff --git a/www/src/components/LayoutHeader/Header.js b/www/src/components/LayoutHeader/Header.js
index 40a58665fe..30858c3bf0 100644
--- a/www/src/components/LayoutHeader/Header.js
+++ b/www/src/components/LayoutHeader/Header.js
@@ -217,7 +217,9 @@ const Header = ({location}) => (
               whiteSpace: 'nowrap',
               ...fonts.small,
             }}
-            href="https://github.com/facebook/react/releases">
+            href="https://github.com/facebook/react/releases"
+            target="_blank"
+            rel="noopener">
             v{version}
           </a>
           <a
@@ -230,7 +232,9 @@ const Header = ({location}) => (
                 color: colors.brand,
               },
             }}
-            href="https://github.com/facebook/react/">
+            href="https://github.com/facebook/react/"
+            target="_blank"
+            rel="noopener">
             GitHub
             <ExternalLinkSvg
               cssProps={{
diff --git a/www/src/utils/createLink.js b/www/src/utils/createLink.js
index f68cd5e112..77b6732302 100644
--- a/www/src/utils/createLink.js
+++ b/www/src/utils/createLink.js
@@ -32,7 +32,7 @@ const createLinkBlog = ({item, location, section}) => {
 const createLinkCommunity = ({item, location, section}) => {
   if (item.href) {
     return (
-      <a css={[linkCss]} href={item.href}>
+      <a css={[linkCss]} href={item.href} target="_blank" rel="noopener">
         {item.title}
         <ExternalLinkSvg
           cssProps={{
@@ -44,13 +44,12 @@ const createLinkCommunity = ({item, location, section}) => {
         />
       </a>
     );
-  } else {
-    return createLinkDocs({
-      item,
-      location,
-      section,
-    });
   }
+  return createLinkDocs({
+    item,
+    location,
+    section,
+  });
 };
 
 const createLinkDocs = ({item, location, section}) => {
diff --git a/www/src/utils/sectionList.js b/www/src/utils/sectionList.js
index b38df6dbb3..f2cba5ee1f 100644
--- a/www/src/utils/sectionList.js
+++ b/www/src/utils/sectionList.js
@@ -17,21 +17,21 @@ import navDocs from '../../../docs/_data/nav_docs.yml';
 import navTutorial from '../../../docs/_data/nav_tutorial.yml';
 
 const sectionListDocs = navDocs
-  .map(item => {
-    item.directory = 'docs';
-    return item;
-  })
+  .map(item => ({
+    ...item,
+    directory: 'docs',
+  }))
   .concat(
-    navContributing.map(item => {
-      item.directory = 'contributing';
-      return item;
-    }),
+    navContributing.map(item => ({
+      ...item,
+      directory: 'contributing',
+    })),
   );
 
-const sectionListCommunity = navCommunity.map(item => {
-  item.directory = 'community';
-  return item;
-});
+const sectionListCommunity = navCommunity.map(item => ({
+  ...item,
+  directory: 'community',
+}));
 
 export {
   sectionListCommunity,