Extracting Header and Footer Links from source into content (#2270)

* Move footer and header links into a YAML file

* Import header and footer nav YAML files directly

- Remove them from section list
- Add keys to nav array items when mapping

* Add flow error supression for YAML imports

content/footerNav.yml

@@ -0,0 +1,43 @@
+community:
+  title: Community
+
+docs:
+  title: Docs
+
+more:
+  title: More
+  items:
+    - title: Tutorial
+      to: /tutorial/tutorial.html
+    - title: Blog
+      to: /blog
+    - title: Acknowledgements
+      to: /acknowledgements.html
+    - title: React Native
+      to: https://facebook.github.io/react-native/
+      external: true
+
+channels:
+  title: Channels
+  items:
+    - title: Github
+      to: https://github.com/facebook/react
+      external: true
+    - title: Stack Overflow
+      to: https://stackoverflow.com/questions/tagged/reactjs
+      external: true
+    - title: Discussion Forums
+      to: https://reactjs.org/community/support.html#popular-discussion-forums
+      external: true
+    - title: Reactiflux Chat
+      to: https://discord.gg/0ZcbPKXt5bZjGY5n
+      external: true
+    - title: DEV Community
+      to: https://dev.to/t/react
+      external: true
+    - title: Facebook
+      to: https://www.facebook.com/react
+      external: true
+    - title: Twitter
+      to: https://twitter.com/reactjs
+      external: true

content/headerNav.yml

@@ -0,0 +1,13 @@
+items:
+  - title: Docs
+    to: /docs/getting-started.html
+    activeSelector: /docs/
+  - title: Tutorial
+    to: /tutorial/tutorial.html
+    activeSelector: /tutorial
+  - title: Blog
+    to: /blog/
+    activeSelector: /blog
+  - title: Community
+    to: /community/support.html
+    activeSelector: /community

src/components/LayoutFooter/Footer.js

@@ -6,14 +6,17 @@
  */
 
 import Container from 'components/Container';
-import ExternalFooterLink from './ExternalFooterLink';
 import FooterLink from './FooterLink';
 import FooterNav from './FooterNav';
 import MetaTitle from 'templates/components/MetaTitle';
+import SectionLinks from './SectionLinks';
 import React from 'react';
 import {colors, media} from 'theme';
 import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
 
+// $FlowFixMe
+import navFooter from '../../../content/footerNav.yml';
+
 import ossLogoPng from 'images/oss_logo.png';
 
 const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
@@ -60,7 +63,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Docs</MetaTitle>
+            <MetaTitle onDark={true}>{navFooter.docs.title}</MetaTitle>
             {sectionListDocs.map(section => {
               const defaultItem = section.items[0];
               return (
@@ -73,52 +76,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             })}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Channels</MetaTitle>
-            <ExternalFooterLink
-              href="https://github.com/facebook/react"
-              target="_blank"
-              rel="noopener">
-              GitHub
-            </ExternalFooterLink>
-            <ExternalFooterLink
-              href="https://stackoverflow.com/questions/tagged/reactjs"
-              target="_blank"
-              rel="noopener">
-              Stack Overflow
-            </ExternalFooterLink>
-            <ExternalFooterLink
-              href="https://reactjs.org/community/support.html#popular-discussion-forums"
-              target="_blank"
-              rel="noopener">
-              Discussion Forums
-            </ExternalFooterLink>
-            <ExternalFooterLink
-              href="https://discord.gg/0ZcbPKXt5bZjGY5n"
-              target="_blank"
-              rel="noopener">
-              Reactiflux Chat
-            </ExternalFooterLink>
-            <ExternalFooterLink
-              href="https://dev.to/t/react"
-              target="_blank"
-              rel="noopener">
-              DEV Community
-            </ExternalFooterLink>
-            <ExternalFooterLink
-              href="https://www.facebook.com/react"
-              target="_blank"
-              rel="noopener">
-              Facebook
-            </ExternalFooterLink>
-            <ExternalFooterLink
-              href="https://twitter.com/reactjs"
-              target="_blank"
-              rel="noopener">
-              Twitter
-            </ExternalFooterLink>
+            <MetaTitle onDark={true}>{navFooter.channels.title}</MetaTitle>
+            <SectionLinks links={navFooter.channels.items} />
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Community</MetaTitle>
+            <MetaTitle onDark={true}>{navFooter.community.title}</MetaTitle>
             {sectionListCommunity.map(section => (
               <FooterLink
                 to={`/community/${section.items[0].id}.html`}
@@ -128,18 +90,8 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             ))}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>More</MetaTitle>
-            <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
-            <FooterLink to="/blog/">Blog</FooterLink>
-            <FooterLink to="/acknowledgements.html">
-              Acknowledgements
-            </FooterLink>
-            <ExternalFooterLink
-              href="https://facebook.github.io/react-native/"
-              target="_blank"
-              rel="noopener">
-              React Native
-            </ExternalFooterLink>
+            <MetaTitle onDark={true}>{navFooter.more.title}</MetaTitle>
+            <SectionLinks links={navFooter.more.items} />
           </FooterNav>
         </div>
         <section

src/components/LayoutFooter/SectionLinks.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import ExternalFooterLink from './ExternalFooterLink';
+import FooterLink from './FooterLink';
+
+const SectionLinks = ({links}: Props) =>
+  links.map(item => {
+    if (item.external) {
+      return (
+        <ExternalFooterLink
+          key={item.title}
+          href={item.to}
+          target="_blank"
+          rel="noopener">
+          {item.title}
+        </ExternalFooterLink>
+      );
+    }
+
+    return (
+      <FooterLink key={item.title} to={item.to}>
+        {item.title}
+      </FooterLink>
+    );
+  });
+
+export default SectionLinks;

src/components/LayoutHeader/Header.js

@@ -14,6 +14,9 @@ import {version} from 'site-constants';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 import DocSearch from './DocSearch';
 
+// $FlowFixMe
+import navHeader from '../../../content/headerNav.yml';
+
 import logoSvg from 'icons/logo.svg';
 
 const Header = ({location}: {location: Location}) => (
@@ -120,26 +123,14 @@ const Header = ({location}: {location: Location}) => (
                 'linear-gradient(to right, transparent, black 20px, black 90%, transparent)',
             },
           }}>
-          <HeaderLink
-            isActive={location.pathname.includes('/docs/')}
-            title="Docs"
-            to="/docs/getting-started.html"
-          />
-          <HeaderLink
-            isActive={location.pathname.includes('/tutorial/')}
-            title="Tutorial"
-            to="/tutorial/tutorial.html"
-          />
-          <HeaderLink
-            isActive={location.pathname.includes('/blog')}
-            title="Blog"
-            to="/blog/"
-          />
-          <HeaderLink
-            isActive={location.pathname.includes('/community/')}
-            title="Community"
-            to="/community/support.html"
-          />
+          {navHeader.items.map(link => (
+            <HeaderLink
+              key={link.title}
+              isActive={location.pathname.includes(link.activeSelector)}
+              title={link.title}
+              to={link.to}
+            />
+          ))}
         </nav>
 
         <DocSearch />