Extracting Header and Footer Links from source into content

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,13 +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';
+import {
+  sectionListCommunity,
+  sectionListDocs,
+  sectionListFooter,
+} from 'utils/sectionList';
 
 import ossLogoPng from 'images/oss_logo.png';
 
@@ -60,7 +64,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Docs</MetaTitle>
+            <MetaTitle onDark={true}>{sectionListFooter.docs.title}</MetaTitle>
             {sectionListDocs.map(section => {
               const defaultItem = section.items[0];
               return (
@@ -73,52 +77,15 @@ 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}>
+              {sectionListFooter.channels.title}
+            </MetaTitle>
+            <SectionLinks links={sectionListFooter.channels.items} />
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Community</MetaTitle>
+            <MetaTitle onDark={true}>
+              {sectionListFooter.community.title}
+            </MetaTitle>
             {sectionListCommunity.map(section => (
               <FooterLink
                 to={`/community/${section.items[0].id}.html`}
@@ -128,18 +95,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}>{sectionListFooter.more.title}</MetaTitle>
+            <SectionLinks links={sectionListFooter.more.items} />
           </FooterNav>
         </div>
         <section

src/components/LayoutFooter/SectionLinks.js

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

src/components/LayoutHeader/Header.js

@@ -14,6 +14,8 @@ import {version} from 'site-constants';
 import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 import DocSearch from './DocSearch';
 
+import {sectionListHeader} from '../../utils/sectionList';
+
 import logoSvg from 'icons/logo.svg';
 
 const Header = ({location}: {location: Location}) => (
@@ -120,26 +122,13 @@ 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"
-          />
+          {sectionListHeader.items.map(link => (
+            <HeaderLink
+              isActive={location.pathname.includes(link.activeSelector)}
+              title={link.title}
+              to={link.to}
+            />
+          ))}
         </nav>
 
         <DocSearch />

src/utils/sectionList.js

@@ -11,6 +11,10 @@ import navCommunity from '../../content/community/nav.yml';
 import navDocs from '../../content/docs/nav.yml';
 // $FlowExpectedError
 import navTutorial from '../../content/tutorial/nav.yml';
+// $FlowExpectedError
+import navFooter from '../../content/footerNav.yml';
+// $FlowExpectedError
+import navHeader from '../../content/headerNav.yml';
 
 const sectionListDocs = navDocs.map(
   (item: Object): Object => ({
@@ -30,4 +34,6 @@ export {
   sectionListCommunity,
   sectionListDocs,
   navTutorial as sectionListTutorial,
+  navFooter as sectionListFooter,
+  navHeader as sectionListHeader,
 };