Ensure all external links have consistent behavior (#11012)

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

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>

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>
       );
     }
   }

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={{

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={{

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={{

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}) => {

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,