fix(client): refactor footer and fix internal links (#36726)
This commit is contained in:
Valeriy
mrugesh
@ -2,37 +2,28 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Link from '../helpers/Link';
|
||||
import { footerLinks } from './footerLinks';
|
||||
|
||||
import './footer.css';
|
||||
|
||||
function FooterCol({ colNum, title }) {
|
||||
// if the column number is not applicable return an empty div
|
||||
if (colNum < 1 || colNum > footerLinks + 1) return <div></div>;
|
||||
|
||||
let linksRow = footerLinks[colNum - 1].map(function(item, i) {
|
||||
if (item.interal)
|
||||
return (
|
||||
<Link key={i} to={item.to}>
|
||||
{item.text}
|
||||
</Link>
|
||||
);
|
||||
return (
|
||||
<Link external={true} key={i} to={item.to}>
|
||||
{item.text}
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
function FooterCol({ title, links }) {
|
||||
return (
|
||||
<div className={`footer-col-${colNum}`}>
|
||||
<div className='footer-col'>
|
||||
<div className='col-header'>{title}</div>
|
||||
{linksRow}
|
||||
{links.map(({ to, text, internal }, i) => (
|
||||
<Link external={!internal} key={`link-${i}`} to={to}>
|
||||
{text}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const propTypes = {
|
||||
colNum: PropTypes.number,
|
||||
links: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
to: PropTypes.string.isRequired,
|
||||
text: PropTypes.string,
|
||||
internal: PropTypes.bool
|
||||
})
|
||||
).isRequired,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ exports[`<Footer /> renders to the DOM 1`] = `
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col-1"
|
||||
className="footer-col"
|
||||
>
|
||||
<div
|
||||
className="col-header"
|
||||
@ -47,8 +47,6 @@ exports[`<Footer /> renders to the DOM 1`] = `
|
||||
</a>
|
||||
<a
|
||||
href="/donate"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Donate
|
||||
</a>
|
||||
@ -124,7 +122,7 @@ exports[`<Footer /> renders to the DOM 1`] = `
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col-2"
|
||||
className="footer-col"
|
||||
>
|
||||
<div
|
||||
className="col-header"
|
||||
@ -217,7 +215,7 @@ exports[`<Footer /> renders to the DOM 1`] = `
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col-3"
|
||||
className="footer-col"
|
||||
>
|
||||
<div
|
||||
className="col-header"
|
||||
@ -310,7 +308,7 @@ exports[`<Footer /> renders to the DOM 1`] = `
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="footer-col-4"
|
||||
className="footer-col"
|
||||
>
|
||||
<div
|
||||
className="col-header"
|
||||
|
||||
@ -39,10 +39,7 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-col-1,
|
||||
.footer-col-2,
|
||||
.footer-col-3,
|
||||
.footer-col-4 {
|
||||
.footer-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 100%;
|
||||
@ -52,17 +49,11 @@
|
||||
margin: 0 0 1.45rem;
|
||||
}
|
||||
|
||||
.footer-col-1 a,
|
||||
.footer-col-2 a,
|
||||
.footer-col-3 a,
|
||||
.footer-col-4 a {
|
||||
.footer-col a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-col-1 a:hover,
|
||||
.footer-col-2 a:hover,
|
||||
.footer-col-3 a:hover,
|
||||
.footer-col-4 a:hover {
|
||||
.footer-col a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@ -79,10 +70,7 @@
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.footer-col-1,
|
||||
.footer-col-2,
|
||||
.footer-col-3,
|
||||
.footer-col-4 {
|
||||
.footer-col {
|
||||
flex: 1 0 45%;
|
||||
height: auto;
|
||||
font-size: 16.5;
|
||||
@ -93,15 +81,12 @@
|
||||
.footer-container {
|
||||
width: 750px;
|
||||
}
|
||||
.footer-col-1,
|
||||
.footer-col-2,
|
||||
.footer-col-3,
|
||||
.footer-col-4 {
|
||||
.footer-col {
|
||||
flex: 1 0 100px;
|
||||
height: auto;
|
||||
font-size: 16.5;
|
||||
}
|
||||
.footer-col-4 {
|
||||
.footer-col:last-of-type {
|
||||
flex: 1 0 180px;
|
||||
}
|
||||
}
|
||||
@ -119,12 +104,10 @@
|
||||
.footer-desc-col {
|
||||
flex: 1 0 31%;
|
||||
}
|
||||
.footer-col-1,
|
||||
.footer-col-2,
|
||||
.footer-col-3 {
|
||||
.footer-col {
|
||||
flex: 1 0 120px;
|
||||
}
|
||||
.footer-col-4 {
|
||||
.footer-col:last-of-type {
|
||||
flex: 4 0 100px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,129 +1,149 @@
|
||||
{
|
||||
"footerLinks": [
|
||||
[
|
||||
{ "to": "/news/about/", "text": "About" },
|
||||
{ "to": "/donate", "text": "Donate", "internal": true },
|
||||
{ "to": "/news/shop/", "text": "Shop" },
|
||||
{
|
||||
"to": "https://www.linkedin.com/school/free-code-camp/people/",
|
||||
"text": "Alumni Network"
|
||||
},
|
||||
{ "to": "https://github.com/freeCodeCamp/", "text": "Open Source" },
|
||||
{ "to": "/news/support/", "text": "Support" },
|
||||
{ "to": "/news/sponsors/", "text": "Sponsors" },
|
||||
{ "to": "/news/academic-honesty-policy/", "text": "Academic Honesty" },
|
||||
{ "to": "/news/code-of-conduct/", "text": "Code of Conduct" },
|
||||
{ "to": "/news/privacy-policy/", "text": "Privacy Policy" },
|
||||
{ "to": "/news/terms-of-service/", "text": "Terms of Service" },
|
||||
{ "to": "/news/copyright-policy/", "text": "Copyright Policy" }
|
||||
],
|
||||
{
|
||||
"title": "Our Nonprofit",
|
||||
"links": [
|
||||
{ "to": "/news/about/", "text": "About" },
|
||||
{ "to": "/donate", "text": "Donate", "internal": true },
|
||||
{ "to": "/news/shop/", "text": "Shop" },
|
||||
{
|
||||
"to": "https://www.linkedin.com/school/free-code-camp/people/",
|
||||
"text": "Alumni Network"
|
||||
},
|
||||
{ "to": "https://github.com/freeCodeCamp/", "text": "Open Source" },
|
||||
{ "to": "/news/support/", "text": "Support" },
|
||||
{ "to": "/news/sponsors/", "text": "Sponsors" },
|
||||
{
|
||||
"to": "/news/academic-honesty-policy/",
|
||||
"text": "Academic Honesty"
|
||||
},
|
||||
{ "to": "/news/code-of-conduct/", "text": "Code of Conduct" },
|
||||
{ "to": "/news/privacy-policy/", "text": "Privacy Policy" },
|
||||
{ "to": "/news/terms-of-service/", "text": "Terms of Service" },
|
||||
{ "to": "/news/copyright-policy/", "text": "Copyright Policy" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Best Tutorials",
|
||||
"links": [
|
||||
{ "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
|
||||
{ "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
|
||||
{ "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
|
||||
{
|
||||
"to": "/news/best-javascript-tutorial/",
|
||||
"text": "JavaScript Tutorial"
|
||||
},
|
||||
{
|
||||
"to": "/news/best-react-javascript-tutorial/",
|
||||
"text": "React Tutorial"
|
||||
},
|
||||
{ "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
|
||||
{ "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
|
||||
{ "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
|
||||
{ "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" },
|
||||
{
|
||||
"to": "/news/best-angular-tutorial-angularjs/",
|
||||
"text": "Angular Tutorial"
|
||||
},
|
||||
{
|
||||
"to": "/news/best-wordpress-tutorial/",
|
||||
"text": "WordPress Tutorial"
|
||||
},
|
||||
{
|
||||
"to": "/news/best-bootstrap-tutorial-responsive-web-design/",
|
||||
"text": "Bootstrap Tutorial"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Best Examples",
|
||||
"links": [
|
||||
{ "to": "/news/python-example/", "text": "Python Example" },
|
||||
{ "to": "/news/javascript-example/", "text": "JavaScript Example" },
|
||||
{ "to": "/news/react-examples-reactjs/", "text": "React Example" },
|
||||
{
|
||||
"to": "/news/linux-example-bash-command-line/",
|
||||
"text": "Linux Example"
|
||||
},
|
||||
{ "to": "/news/html-and-html5-example/", "text": "HTML Example" },
|
||||
{ "to": "/news/css-example-css3/", "text": "CSS Example" },
|
||||
{ "to": "/news/sql-example/", "text": "SQL Example" },
|
||||
{ "to": "/news/java-example/", "text": "Java Example" },
|
||||
{
|
||||
"to": "/news/the-best-angular-examples/",
|
||||
"text": "Angular Example"
|
||||
},
|
||||
{ "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
|
||||
{
|
||||
"to": "/news/the-best-bootstrap-examples/",
|
||||
"text": "Bootstrap Example"
|
||||
},
|
||||
{ "to": "/news/the-best-php-examples/", "text": "PHP Example" }
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Trending Reference",
|
||||
"links": [
|
||||
{
|
||||
"to": "/news/2019-web-developer-roadmap/",
|
||||
"text": "2019 Web Developer Roadmap"
|
||||
},
|
||||
|
||||
[
|
||||
{ "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
|
||||
{ "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
|
||||
{ "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
|
||||
{
|
||||
"to": "/news/best-javascript-tutorial/",
|
||||
"text": "JavaScript Tutorial"
|
||||
},
|
||||
{
|
||||
"to": "/news/best-react-javascript-tutorial/",
|
||||
"text": "React Tutorial"
|
||||
},
|
||||
{ "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
|
||||
{ "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
|
||||
{ "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
|
||||
{ "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" },
|
||||
{
|
||||
"to": "/news/best-angular-tutorial-angularjs/",
|
||||
"text": "Angular Tutorial"
|
||||
},
|
||||
{ "to": "/news/best-wordpress-tutorial/", "text": "WordPress Tutorial" },
|
||||
{
|
||||
"to": "/news/best-bootstrap-tutorial-responsive-web-design/",
|
||||
"text": "Bootstrap Tutorial"
|
||||
}
|
||||
],
|
||||
[
|
||||
{ "to": "/news/python-example/", "text": "Python Example" },
|
||||
{ "to": "/news/javascript-example/", "text": "JavaScript Example" },
|
||||
{ "to": "/news/react-examples-reactjs/", "text": "React Example" },
|
||||
{
|
||||
"to": "/news/linux-example-bash-command-line/",
|
||||
"text": "Linux Example"
|
||||
},
|
||||
{ "to": "/news/html-and-html5-example/", "text": "HTML Example" },
|
||||
{ "to": "/news/css-example-css3/", "text": "CSS Example" },
|
||||
{ "to": "/news/sql-example/", "text": "SQL Example" },
|
||||
{ "to": "/news/java-example/", "text": "Java Example" },
|
||||
{ "to": "/news/the-best-angular-examples/", "text": "Angular Example" },
|
||||
{ "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
|
||||
{
|
||||
"to": "/news/the-best-bootstrap-examples/",
|
||||
"text": "Bootstrap Example"
|
||||
},
|
||||
{ "to": "/news/the-best-php-examples/", "text": "PHP Example" }
|
||||
],
|
||||
[
|
||||
{
|
||||
"to": "/news/2019-web-developer-roadmap/",
|
||||
"text": "2019 Web Developer Roadmap"
|
||||
},
|
||||
{
|
||||
"to": "/news/linux-command-line-bash-tutorial/",
|
||||
"text": "Linux Command Line Guide"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/linux-command-line-bash-tutorial/",
|
||||
"text": "Linux Command Line Guide"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-git-reset-and-git-revert/",
|
||||
"text": "Git Reset and Git Revert"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-git-reset-and-git-revert/",
|
||||
"text": "Git Reset and Git Revert"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-git-merge-and-git-rebase/",
|
||||
"text": "Git Merge and Git Rebase"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-git-merge-and-git-rebase/",
|
||||
"text": "Git Merge and Git Rebase"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-javascript-array-methods-map/",
|
||||
"text": "JavaScript Array Map"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-javascript-array-methods-map/",
|
||||
"text": "JavaScript Array Map"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-javascript-array-methods-reduce/",
|
||||
"text": "JavaScript Array Reduce"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-javascript-array-methods-reduce/",
|
||||
"text": "JavaScript Array Reduce"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-javascript-date-and-moment-js/",
|
||||
"text": "JavaScript Date"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-javascript-date-and-moment-js/",
|
||||
"text": "JavaScript Date"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-javascript-string-methods-split/",
|
||||
"text": "JavaScript String Split"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-javascript-string-methods-split/",
|
||||
"text": "JavaScript String Split"
|
||||
},
|
||||
{
|
||||
"to": "/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/",
|
||||
"text": "CSS Flexbox Guide"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/",
|
||||
"text": "CSS Flexbox Guide"
|
||||
},
|
||||
{
|
||||
"to": "/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/",
|
||||
"text": "CSS Grid Guide"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/",
|
||||
"text": "CSS Grid Guide"
|
||||
},
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-linux-creating-a-sudo-user/",
|
||||
"text": "Create a Linux Sudo User"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-linux-creating-a-sudo-user/",
|
||||
"text": "Create a Linux Sudo User"
|
||||
},
|
||||
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/",
|
||||
"text": "How to Set Up SSH Keys"
|
||||
}
|
||||
]
|
||||
{
|
||||
"to": "/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/",
|
||||
"text": "How to Set Up SSH Keys"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -2,8 +2,9 @@ import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Link from '../helpers/Link';
|
||||
import FootCol from './FooterCol';
|
||||
import FooterCol from './FooterCol';
|
||||
|
||||
import { footerLinks } from './footerLinks';
|
||||
import './footer.css';
|
||||
|
||||
const propTypes = {
|
||||
@ -43,10 +44,13 @@ function Footer() {
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<FootCol colNum={1} title={'Our Nonprofit'} />
|
||||
<FootCol colNum={2} title={'Best Tutorials'} />
|
||||
<FootCol colNum={3} title={'Best Examples'} />
|
||||
<FootCol colNum={4} title={'Trending Reference'} />
|
||||
{footerLinks.map(({ title, links }, index) => (
|
||||
<FooterCol
|
||||
key={`footer-col-${index}`}
|
||||
links={links}
|
||||
title={title}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
Reference in New Issue
Block a user