Skip to content

Commit 52fbfd0

Browse files
author
Gasim Gasimzada
committed
Move footer and header links into a YAML file
1 parent de497e2 commit 52fbfd0

File tree

6 files changed

+105
-79
lines changed

6 files changed

+105
-79
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: 16 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +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';
15-
import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
15+
import {
16+
sectionListCommunity,
17+
sectionListDocs,
18+
sectionListFooter,
19+
} from 'utils/sectionList';
1620

1721
import ossLogoPng from 'images/oss_logo.png';
1822

@@ -60,7 +64,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
6064
},
6165
}}>
6266
<FooterNav layoutHasSidebar={layoutHasSidebar}>
63-
<MetaTitle onDark={true}>Docs</MetaTitle>
67+
<MetaTitle onDark={true}>{sectionListFooter.docs.title}</MetaTitle>
6468
{sectionListDocs.map(section => {
6569
const defaultItem = section.items[0];
6670
return (
@@ -73,52 +77,15 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
7377
})}
7478
</FooterNav>
7579
<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>
80+
<MetaTitle onDark={true}>
81+
{sectionListFooter.channels.title}
82+
</MetaTitle>
83+
<SectionLinks links={sectionListFooter.channels.items} />
11984
</FooterNav>
12085
<FooterNav layoutHasSidebar={layoutHasSidebar}>
121-
<MetaTitle onDark={true}>Community</MetaTitle>
86+
<MetaTitle onDark={true}>
87+
{sectionListFooter.community.title}
88+
</MetaTitle>
12289
{sectionListCommunity.map(section => (
12390
<FooterLink
12491
to={`/community/${section.items[0].id}.html`}
@@ -128,18 +95,8 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
12895
))}
12996
</FooterNav>
13097
<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>
98+
<MetaTitle onDark={true}>{sectionListFooter.more.title}</MetaTitle>
99+
<SectionLinks links={sectionListFooter.more.items} />
143100
</FooterNav>
144101
</div>
145102
<section

‎src/components/LayoutFooter/SectionLinks.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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 href={item.to} target="_blank" rel="noopener">
10+
{item.title}
11+
</ExternalFooterLink>
12+
);
13+
}
14+
15+
return <FooterLink to={item.to}>{item.title}</FooterLink>;
16+
});
17+
18+
export default SectionLinks;

‎src/components/LayoutHeader/Header.js

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

17+
import {sectionListHeader} from '../../utils/sectionList';
18+
1719
import logoSvg from 'icons/logo.svg';
1820

1921
const Header = ({location}: {location: Location}) => (
@@ -120,26 +122,13 @@ const Header = ({location}: {location: Location}) => (
120122
'linear-gradient(to right, transparent, black 20px, black 90%, transparent)',
121123
},
122124
}}>
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-
/>
125+
{sectionListHeader.items.map(link => (
126+
<HeaderLink
127+
isActive={location.pathname.includes(link.activeSelector)}
128+
title={link.title}
129+
to={link.to}
130+
/>
131+
))}
143132
</nav>
144133

145134
<DocSearch />

‎src/utils/sectionList.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ import navCommunity from '../../content/community/nav.yml';
1111
import navDocs from '../../content/docs/nav.yml';
1212
// $FlowExpectedError
1313
import navTutorial from '../../content/tutorial/nav.yml';
14+
// $FlowExpectedError
15+
import navFooter from '../../content/footerNav.yml';
16+
// $FlowExpectedError
17+
import navHeader from '../../content/headerNav.yml';
1418

1519
const sectionListDocs = navDocs.map(
1620
(item: Object): Object => ({
@@ -30,4 +34,6 @@ export {
3034
sectionListCommunity,
3135
sectionListDocs,
3236
navTutorial as sectionListTutorial,
37+
navFooter as sectionListFooter,
38+
navHeader as sectionListHeader,
3339
};

0 commit comments

Comments
 (0)