Skip to content

Commit da869ab

Browse files
Gasim Gasimzadatesseralis
Gasim Gasimzada
authored and
tesseralis
committed
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
1 parent b0a55fb commit da869ab

File tree

5 files changed

+103
-78
lines changed

5 files changed

+103
-78
lines changed

‎content/footerNav.yml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
community:
2+
title: Community
3+
4+
docs:
5+
title: Docs
6+
7+
more:
8+
title: More
9+
items:
10+
- title: Tutorial
11+
to: /tutorial/tutorial.html
12+
- title: Blog
13+
to: /blog
14+
- title: Acknowledgements
15+
to: /acknowledgements.html
16+
- title: React Native
17+
to: https://facebook.github.io/react-native/
18+
external: true
19+
20+
channels:
21+
title: Channels
22+
items:
23+
- title: Github
24+
to: https://github.com/facebook/react
25+
external: true
26+
- title: Stack Overflow
27+
to: https://stackoverflow.com/questions/tagged/reactjs
28+
external: true
29+
- title: Discussion Forums
30+
to: https://reactjs.org/community/support.html#popular-discussion-forums
31+
external: true
32+
- title: Reactiflux Chat
33+
to: https://discord.gg/0ZcbPKXt5bZjGY5n
34+
external: true
35+
- title: DEV Community
36+
to: https://dev.to/t/react
37+
external: true
38+
- title: Facebook
39+
to: https://www.facebook.com/react
40+
external: true
41+
- title: Twitter
42+
to: https://twitter.com/reactjs
43+
external: true

‎content/headerNav.yml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
items:
2+
- title: Docs
3+
to: /docs/getting-started.html
4+
activeSelector: /docs/
5+
- title: Tutorial
6+
to: /tutorial/tutorial.html
7+
activeSelector: /tutorial
8+
- title: Blog
9+
to: /blog/
10+
activeSelector: /blog
11+
- title: Community
12+
to: /community/support.html
13+
activeSelector: /community

‎src/components/LayoutFooter/Footer.js

Lines changed: 10 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,17 @@
66
*/
77

88
import Container from 'components/Container';
9-
import ExternalFooterLink from './ExternalFooterLink';
109
import FooterLink from './FooterLink';
1110
import FooterNav from './FooterNav';
1211
import MetaTitle from 'templates/components/MetaTitle';
12+
import SectionLinks from './SectionLinks';
1313
import React from 'react';
1414
import {colors, media} from 'theme';
1515
import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
1616

17+
// $FlowFixMe
18+
import navFooter from '../../../content/footerNav.yml';
19+
1720
import ossLogoPng from 'images/oss_logo.png';
1821

1922
const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
@@ -60,7 +63,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
6063
},
6164
}}>
6265
<FooterNav layoutHasSidebar={layoutHasSidebar}>
63-
<MetaTitle onDark={true}>Docs</MetaTitle>
66+
<MetaTitle onDark={true}>{navFooter.docs.title}</MetaTitle>
6467
{sectionListDocs.map(section => {
6568
const defaultItem = section.items[0];
6669
return (
@@ -73,52 +76,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
7376
})}
7477
</FooterNav>
7578
<FooterNav layoutHasSidebar={layoutHasSidebar}>
76-
<MetaTitle onDark={true}>Channels</MetaTitle>
77-
<ExternalFooterLink
78-
href="https://github.com/facebook/react"
79-
target="_blank"
80-
rel="noopener">
81-
GitHub
82-
</ExternalFooterLink>
83-
<ExternalFooterLink
84-
href="https://stackoverflow.com/questions/tagged/reactjs"
85-
target="_blank"
86-
rel="noopener">
87-
Stack Overflow
88-
</ExternalFooterLink>
89-
<ExternalFooterLink
90-
href="https://reactjs.org/community/support.html#popular-discussion-forums"
91-
target="_blank"
92-
rel="noopener">
93-
Discussion Forums
94-
</ExternalFooterLink>
95-
<ExternalFooterLink
96-
href="https://discord.gg/0ZcbPKXt5bZjGY5n"
97-
target="_blank"
98-
rel="noopener">
99-
Reactiflux Chat
100-
</ExternalFooterLink>
101-
<ExternalFooterLink
102-
href="https://dev.to/t/react"
103-
target="_blank"
104-
rel="noopener">
105-
DEV Community
106-
</ExternalFooterLink>
107-
<ExternalFooterLink
108-
href="https://www.facebook.com/react"
109-
target="_blank"
110-
rel="noopener">
111-
Facebook
112-
</ExternalFooterLink>
113-
<ExternalFooterLink
114-
href="https://twitter.com/reactjs"
115-
target="_blank"
116-
rel="noopener">
117-
Twitter
118-
</ExternalFooterLink>
79+
<MetaTitle onDark={true}>{navFooter.channels.title}</MetaTitle>
80+
<SectionLinks links={navFooter.channels.items} />
11981
</FooterNav>
12082
<FooterNav layoutHasSidebar={layoutHasSidebar}>
121-
<MetaTitle onDark={true}>Community</MetaTitle>
83+
<MetaTitle onDark={true}>{navFooter.community.title}</MetaTitle>
12284
{sectionListCommunity.map(section => (
12385
<FooterLink
12486
to={`/community/${section.items[0].id}.html`}
@@ -128,18 +90,8 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
12890
))}
12991
</FooterNav>
13092
<FooterNav layoutHasSidebar={layoutHasSidebar}>
131-
<MetaTitle onDark={true}>More</MetaTitle>
132-
<FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
133-
<FooterLink to="/blog/">Blog</FooterLink>
134-
<FooterLink to="/acknowledgements.html">
135-
Acknowledgements
136-
</FooterLink>
137-
<ExternalFooterLink
138-
href="https://facebook.github.io/react-native/"
139-
target="_blank"
140-
rel="noopener">
141-
React Native
142-
</ExternalFooterLink>
93+
<MetaTitle onDark={true}>{navFooter.more.title}</MetaTitle>
94+
<SectionLinks links={navFooter.more.items} />
14395
</FooterNav>
14496
</div>
14597
<section

‎src/components/LayoutFooter/SectionLinks.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import ExternalFooterLink from './ExternalFooterLink';
3+
import FooterLink from './FooterLink';
4+
5+
const SectionLinks = ({links}: Props) =>
6+
links.map(item => {
7+
if (item.external) {
8+
return (
9+
<ExternalFooterLink
10+
key={item.title}
11+
href={item.to}
12+
target="_blank"
13+
rel="noopener">
14+
{item.title}
15+
</ExternalFooterLink>
16+
);
17+
}
18+
19+
return (
20+
<FooterLink key={item.title} to={item.to}>
21+
{item.title}
22+
</FooterLink>
23+
);
24+
});
25+
26+
export default SectionLinks;

‎src/components/LayoutHeader/Header.js

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ import {version} from 'site-constants';
1414
import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
1515
import DocSearch from './DocSearch';
1616

17+
// $FlowFixMe
18+
import navHeader from '../../../content/headerNav.yml';
19+
1720
import logoSvg from 'icons/logo.svg';
1821

1922
const Header = ({location}: {location: Location}) => (
@@ -120,26 +123,14 @@ const Header = ({location}: {location: Location}) => (
120123
'linear-gradient(to right, transparent, black 20px, black 90%, transparent)',
121124
},
122125
}}>
123-
<HeaderLink
124-
isActive={location.pathname.includes('/docs/')}
125-
title="Docs"
126-
to="/docs/getting-started.html"
127-
/>
128-
<HeaderLink
129-
isActive={location.pathname.includes('/tutorial/')}
130-
title="Tutorial"
131-
to="/tutorial/tutorial.html"
132-
/>
133-
<HeaderLink
134-
isActive={location.pathname.includes('/blog')}
135-
title="Blog"
136-
to="/blog/"
137-
/>
138-
<HeaderLink
139-
isActive={location.pathname.includes('/community/')}
140-
title="Community"
141-
to="/community/support.html"
142-
/>
126+
{navHeader.items.map(link => (
127+
<HeaderLink
128+
key={link.title}
129+
isActive={location.pathname.includes(link.activeSelector)}
130+
title={link.title}
131+
to={link.to}
132+
/>
133+
))}
143134
</nav>
144135

145136
<DocSearch />

0 commit comments

Comments
 (0)