From 52fbfd06a56b9d617c7ef3887ba5423c93a193a7 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Tue, 20 Aug 2019 14:36:40 +0400 Subject: [PATCH 1/3] Move footer and header links into a YAML file --- content/footerNav.yml | 43 ++++++++++++ content/headerNav.yml | 13 ++++ src/components/LayoutFooter/Footer.js | 75 +++++---------------- src/components/LayoutFooter/SectionLinks.js | 18 +++++ src/components/LayoutHeader/Header.js | 29 +++----- src/utils/sectionList.js | 6 ++ 6 files changed, 105 insertions(+), 79 deletions(-) create mode 100644 content/footerNav.yml create mode 100644 content/headerNav.yml create mode 100644 src/components/LayoutFooter/SectionLinks.js 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..aba4cc0d713 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/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}) => ( }, }}> - Docs + {sectionListFooter.docs.title} {sectionListDocs.map(section => { const defaultItem = section.items[0]; return ( @@ -73,52 +77,15 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( })} - Channels - - GitHub - - - Stack Overflow - - - Discussion Forums - - - Reactiflux Chat - - - DEV Community - - - Facebook - - - Twitter - + + {sectionListFooter.channels.title} + + - Community + + {sectionListFooter.community.title} + {sectionListCommunity.map(section => ( ( ))} - More - Tutorial - Blog - - Acknowledgements - - - React Native - + {sectionListFooter.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..f12621b4e54 100644 --- a/src/components/LayoutHeader/Header.js +++ b/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)', }, }}> - - - - + {sectionListHeader.items.map(link => ( + + ))} diff --git a/src/utils/sectionList.js b/src/utils/sectionList.js index 01983501aa4..815d226ba05 100644 --- a/src/utils/sectionList.js +++ b/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, }; From ce2aade983809c9a9664d5d75ce35ae1c98f15b7 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 21 Aug 2019 11:10:35 +0400 Subject: [PATCH 2/3] Import header and footer nav YAML files directly - Remove them from section list - Add keys to nav array items when mapping --- src/components/LayoutFooter/Footer.js | 24 ++++++++------------- src/components/LayoutFooter/SectionLinks.js | 12 +++++++++-- src/components/LayoutHeader/Header.js | 5 +++-- src/utils/sectionList.js | 6 ------ 4 files changed, 22 insertions(+), 25 deletions(-) diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js index aba4cc0d713..8d29742f22a 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -12,11 +12,9 @@ import MetaTitle from 'templates/components/MetaTitle'; import SectionLinks from './SectionLinks'; import React from 'react'; import {colors, media} from 'theme'; -import { - sectionListCommunity, - sectionListDocs, - sectionListFooter, -} from 'utils/sectionList'; +import {sectionListCommunity, sectionListDocs} from 'utils/sectionList'; + +import navFooter from '../../../content/footerNav.yml'; import ossLogoPng from 'images/oss_logo.png'; @@ -64,7 +62,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( }, }}> - {sectionListFooter.docs.title} + {navFooter.docs.title} {sectionListDocs.map(section => { const defaultItem = section.items[0]; return ( @@ -77,15 +75,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( })} - - {sectionListFooter.channels.title} - - + {navFooter.channels.title} + - - {sectionListFooter.community.title} - + {navFooter.community.title} {sectionListCommunity.map(section => ( ( ))} - {sectionListFooter.more.title} - + {navFooter.more.title} +
links.map(item => { if (item.external) { return ( - + {item.title} ); } - return {item.title}; + return ( + + {item.title} + + ); }); export default SectionLinks; diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index f12621b4e54..6c13aa4f574 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -14,7 +14,7 @@ import {version} from 'site-constants'; import ExternalLinkSvg from 'templates/components/ExternalLinkSvg'; import DocSearch from './DocSearch'; -import {sectionListHeader} from '../../utils/sectionList'; +import navHeader from '../../../content/headerNav.yml'; import logoSvg from 'icons/logo.svg'; @@ -122,8 +122,9 @@ const Header = ({location}: {location: Location}) => ( 'linear-gradient(to right, transparent, black 20px, black 90%, transparent)', }, }}> - {sectionListHeader.items.map(link => ( + {navHeader.items.map(link => ( ({ @@ -34,6 +30,4 @@ export { sectionListCommunity, sectionListDocs, navTutorial as sectionListTutorial, - navFooter as sectionListFooter, - navHeader as sectionListHeader, }; From 8c4800c37c08ea91376e8a0197e0255e7747589b Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Wed, 21 Aug 2019 23:04:40 +0400 Subject: [PATCH 3/3] Add flow error supression for YAML imports --- src/components/LayoutFooter/Footer.js | 1 + src/components/LayoutHeader/Header.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js index 8d29742f22a..93404e45ab5 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -14,6 +14,7 @@ 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'; diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index 6c13aa4f574..f12eb5a719a 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -14,6 +14,7 @@ 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';