diff --git a/content/footerNav.yml b/content/footerNav.yml new file mode 100644 index 00000000000..c371ac1a73a --- /dev/null +++ b/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 diff --git a/content/headerNav.yml b/content/headerNav.yml new file mode 100644 index 00000000000..325a95c483d --- /dev/null +++ b/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 diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js index 43b7713fa84..93404e45ab5 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/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}) => ( }, }}> - Docs + {navFooter.docs.title} {sectionListDocs.map(section => { const defaultItem = section.items[0]; return ( @@ -73,52 +76,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( })} - Channels - - GitHub - - - Stack Overflow - - - Discussion Forums - - - Reactiflux Chat - - - DEV Community - - - Facebook - - - Twitter - + {navFooter.channels.title} + - Community + {navFooter.community.title} {sectionListCommunity.map(section => ( ( ))} - More - Tutorial - Blog - - Acknowledgements - - - React Native - + {navFooter.more.title} +
+ links.map(item => { + if (item.external) { + return ( + + {item.title} + + ); + } + + return ( + + {item.title} + + ); + }); + +export default SectionLinks; diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index e0a285e84ff..f12eb5a719a 100644 --- a/src/components/LayoutHeader/Header.js +++ b/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)', }, }}> - - - - + {navHeader.items.map(link => ( + + ))}