gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(links): unify linking to pages internal/external

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2019-02-18 17:13:00 +05:30
committed by Stuart Taylor
parent f28cee5a4d
commit f61efb225f
8 changed files with 135 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/Footer/index.js
View File

@@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import { Link as GatsbyLink } from 'gatsby';
import { Grid, Row, Col } from '@freecodecamp/react-bootstrap'; import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
import Link from '../helpers/Link';
import './footer.css'; import './footer.css';
const propTypes = { const propTypes = {
@@ -22,23 +22,6 @@ const linkPropTypes = {
to: PropTypes.string.isRequired to: PropTypes.string.isRequired
}; };
const Link = ({ children, to, external, ...other }) => {
if (!external && /^\/[^/]?/.test(to)) {
return (
<GatsbyLink to={to} {...other}>
{children}
</GatsbyLink>
);
}
return (
<a href={to} {...other} rel='noopener noreferrer' target='_blank'>
{children}
</a>
);
};
Link.propTypes = linkPropTypes;
function Footer() { function Footer() {
return ( return (
<footer className='footer'> <footer className='footer'>
@@ -70,7 +53,7 @@ function Footer() {
<Link to='/about'>About</Link> <Link to='/about'>About</Link>
<Link to='/donate'>Donate</Link> <Link to='/donate'>Donate</Link>
<Link to='https://shop.freecodecamp.org'>Shop</Link> <Link to='https://shop.freecodecamp.org'>Shop</Link>
<Link to='https://sponsors.freecodecamp.org'>Sponsors</Link> <Link to='/sponsors'>Sponsors</Link>
<Link to='mailto:team@freecodecamp.org'>Email Us</Link> <Link to='mailto:team@freecodecamp.org'>Email Us</Link>
</Col> </Col>
<Col sm={2} xs={6}> <Col sm={2} xs={6}>

2
client/src/components/Supporters.js
View File

@@ -73,7 +73,7 @@ function Supporters({ isDonating, activeDonations }) {
<Button <Button
bsSize='lg' bsSize='lg'
bsStyle='primary' bsStyle='primary'
href='https://donate.freecodecamp.org' href='/donate'
target='_blank' target='_blank'
> >
Click here to become a Supporter Click here to become a Supporter

20
client/src/components/helpers/Link.js Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import { Link as GatsbyLink } from 'gatsby';
const Link = ({ children, to, external, ...other }) => {
if (!external && (/^\/(?!\/)/).test(to)) {
return (
<GatsbyLink to={to} {...other}>
{children}
</GatsbyLink>
);
}
return (
<a href={to} {...other} rel='noopener noreferrer' target='_blank'>
{children}
</a>
);
};
export default Link;

1
client/src/components/helpers/index.js
View File

@@ -4,3 +4,4 @@ export { default as SlimWidthRow } from './SlimWidthRow';
export { default as Loader } from './Loader'; export { default as Loader } from './Loader';
export { default as SkeletonSprite } from './SkeletonSprite'; export { default as SkeletonSprite } from './SkeletonSprite';
export { default as Spacer } from './Spacer'; export { default as Spacer } from './Spacer';
export { default as Link } from './Link';

168
client/src/pages/about.js
View File

@@ -1,7 +1,6 @@
/* eslint-disable max-len */ /* eslint-disable max-len */
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { Link } from 'gatsby';
import { Grid, Col, Row, Table } from '@freecodecamp/react-bootstrap'; import { Grid, Col, Row, Table } from '@freecodecamp/react-bootstrap';
import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { import {
@@ -12,7 +11,6 @@ import {
faMedium, faMedium,
faFacebook faFacebook
} from '@fortawesome/free-brands-svg-icons'; } from '@fortawesome/free-brands-svg-icons';
import { import {
faLock, faLock,
faBalanceScale, faBalanceScale,
@@ -20,7 +18,7 @@ import {
faBook faBook
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
import Spacer from '../components/helpers/Spacer'; import { Link, Spacer } from '../components/helpers';
import './about.css'; import './about.css';
@@ -63,34 +61,31 @@ const AboutPage = () => {
Yes. Every year, thousands of people who join the freeCodeCamp Yes. Every year, thousands of people who join the freeCodeCamp
community get their first software developer job. If you're community get their first software developer job. If you're
curious, you can{' '} curious, you can{' '}
<a <Link
href='https://www.linkedin.com/school/4831032/alumni/' external={true}
rel='noopener noreferrer' to='https://www.linkedin.com/school/4831032/alumni/'
target='_blank'
> >
browse our alumni network on LinkedIn here browse our alumni network on LinkedIn here
</a> </Link>
. .
</p> </p>
<h4>How big is the freeCodeCamp community?</h4> <h4>How big is the freeCodeCamp community?</h4>
<p> <p>
If you add up all the people who use our learning platform, read If you add up all the people who use our learning platform, read
our{' '} our{' '}
<a <Link
href='https://medium.freecodecamp.org' external={true}
rel='noopener noreferrer' to='https://medium.freecodecamp.org'
target='_blank'
> >
Medium publication Medium publication
</a> </Link>
, watch our{' '} , watch our{' '}
<a <Link
href='https://youtube.com/freecodecamp' external={true}
rel='noopener noreferrer' to='https://youtube.com/freecodecamp'
target='_blank'
> >
YouTube channel YouTube channel
</a> </Link>
, and post on <Link to='/forum'>our forum</Link>, each month we , and post on <Link to='/forum'>our forum</Link>, each month we
help millions of people learn about coding and technology. help millions of people learn about coding and technology.
</p> </p>
@@ -99,13 +94,12 @@ const AboutPage = () => {
Yes, we are a 501(c)(3){' '} Yes, we are a 501(c)(3){' '}
<Link to='/donate'>donor-supported public charity</Link>. You <Link to='/donate'>donor-supported public charity</Link>. You
can{' '} can{' '}
<a <Link
href='https://s3.amazonaws.com/freecodecamp/Free+Code+Camp+Inc+IRS+Determination+Letter.pdf' external={true}
rel='noopener noreferrer' to='https://s3.amazonaws.com/freecodecamp/Free+Code+Camp+Inc+IRS+Determination+Letter.pdf'
target='_blank'
> >
download our IRS Determination Letter here download our IRS Determination Letter here
</a> </Link>
. .
</p> </p>
<h4> <h4>
@@ -114,9 +108,9 @@ const AboutPage = () => {
</h4> </h4>
<p> <p>
Yes. Our cryptographically signed wallet details are{' '} Yes. Our cryptographically signed wallet details are{' '}
<a href='https://twitter.com/freeCodeCamp/status/939512108449959936'> <Link to='https://twitter.com/freeCodeCamp/status/939512108449959936'>
here here
</a> </Link>
. .
</p> </p>
<h4> <h4>
@@ -153,13 +147,12 @@ const AboutPage = () => {
</p> </p>
<h4>How did freeCodeCamp get started?</h4> <h4>How did freeCodeCamp get started?</h4>
<p> <p>
<a <Link
href='https://www.twitter.com/ossia' external={true}
rel='noopener noreferrer' to='https://www.twitter.com/ossia'
target='_blank'
> >
Quincy Quincy
</a>{' '} </Link>{' '}
started the freeCodeCamp community in 2014. He is now just one started the freeCodeCamp community in 2014. He is now just one
of thousands of active contributors. of thousands of active contributors.
</p> </p>
@@ -196,40 +189,36 @@ const AboutPage = () => {
<h4>Does freeCodeCamp have a mobile app?</h4> <h4>Does freeCodeCamp have a mobile app?</h4>
<p> <p>
You can learn on the go by listening to the{' '} You can learn on the go by listening to the{' '}
<a <Link
href='https://podcast.freecodecamp.org' external={true}
rel='noopener noreferrer' to='https://podcast.freecodecamp.org'
target='_blank'
> >
freeCodeCamp Podcast freeCodeCamp Podcast
</a>{' '} </Link>{' '}
or watching{' '} or watching{' '}
<a <Link
href='https://youtube.com/freecodecamp' external={true}
rel='noopener noreferrer' to='https://youtube.com/freecodecamp'
target='_blank'
> >
freeCodeCamp's YouTube channel freeCodeCamp's YouTube channel
</a> </Link>
. And if you want a mobile app designed specifically for . And if you want a mobile app designed specifically for
learning to code, we recommend Grasshopper. It's free and learning to code, we recommend Grasshopper. It's free and
designed by a freeCodeCamp contributor and her team. You can designed by a freeCodeCamp contributor and her team. You can
download it on{' '} download it on{' '}
<a <Link
href='https://itunes.apple.com/us/app/id1354133284' external={true}
rel='noopener noreferrer' to='https://itunes.apple.com/us/app/id1354133284'
target='_blank'
> >
iOS iOS
</a>{' '} </Link>{' '}
or{' '} or{' '}
<a <Link
href='https://play.google.com/store/apps/details?id=com.area120.grasshopper&hl=en' external={true}
rel='noopener noreferrer' to='https://play.google.com/store/apps/details?id=com.area120.grasshopper&hl=en'
target='_blank'
> >
Android Android
</a> </Link>
. .
</p> </p>
<h4>Can I get a job at freeCodeCamp?</h4> <h4>Can I get a job at freeCodeCamp?</h4>
@@ -237,13 +226,12 @@ const AboutPage = () => {
We're a small donor-supported nonprofit. We've hired several We're a small donor-supported nonprofit. We've hired several
prominent contributors from within the freeCodeCamp community, prominent contributors from within the freeCodeCamp community,
but you're much more likely to get a job at{' '} but you're much more likely to get a job at{' '}
<a <Link
href='https://www.linkedin.com/school/free-code-camp/alumni/' external={true}
rel='noopener noreferrer' to='https://www.linkedin.com/school/free-code-camp/alumni/'
target='_blank'
> >
one of the hundreds of companies one of the hundreds of companies
</a>{' '} </Link>{' '}
where freeCodeCamp alumni work. where freeCodeCamp alumni work.
</p> </p>
<h4>Can my company advertise on freeCodeCamp?</h4> <h4>Can my company advertise on freeCodeCamp?</h4>
@@ -288,13 +276,12 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faYoutube} /> <FontAwesomeIcon icon={faYoutube} />
</td> </td>
<td> <td>
<a <Link
href='https://youtube.com/freecodecamp' external={true}
rel='noopener noreferrer' to='https://youtube.com/freecodecamp'
target='_blank'
> >
Our YouTube channel Our YouTube channel
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -302,13 +289,12 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faGithub} /> <FontAwesomeIcon icon={faGithub} />
</td> </td>
<td> <td>
<a <Link
href='https://github.com/freecodecamp/' external={true}
rel='noopener noreferrer' to='https://github.com/freecodecamp/'
target='_blank'
> >
Our GitHub organization Our GitHub organization
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -316,13 +302,12 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faLinkedin} /> <FontAwesomeIcon icon={faLinkedin} />
</td> </td>
<td> <td>
<a <Link
href='https://www.linkedin.com/edu/school?id=166029' external={true}
rel='noopener noreferrer' to='https://www.linkedin.com/edu/school?id=166029'
target='_blank'
> >
Our LinkedIn university page Our LinkedIn university page
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -330,13 +315,12 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faMedium} /> <FontAwesomeIcon icon={faMedium} />
</td> </td>
<td> <td>
<a <Link
href='https://medium.freecodecamp.org' external={true}
rel='noopener noreferrer' to='https://medium.freecodecamp.org'
target='_blank'
> >
Our Medium publication Our Medium publication
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -344,13 +328,12 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faTwitter} /> <FontAwesomeIcon icon={faTwitter} />
</td> </td>
<td> <td>
<a <Link
href='https://twitter.com/freecodecamp' external={true}
rel='noopener noreferrer' to='https://twitter.com/freecodecamp'
target='_blank'
> >
Our Twitter feed Our Twitter feed
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -358,13 +341,12 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faFacebook} /> <FontAwesomeIcon icon={faFacebook} />
</td> </td>
<td> <td>
<a <Link
href='https://facebook.com/freecodecamp' external={true}
rel='noopener noreferrer' to='https://facebook.com/freecodecamp'
target='_blank'
> >
Our Facebook page Our Facebook page
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -372,9 +354,9 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faLock} /> <FontAwesomeIcon icon={faLock} />
</td> </td>
<td> <td>
<a href='https://privacy-policy.freecodecamp.org'> <Link to='https://privacy-policy.freecodecamp.org'>
Our privacy policy Our privacy policy
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -382,9 +364,9 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faBalanceScale} /> <FontAwesomeIcon icon={faBalanceScale} />
</td> </td>
<td> <td>
<a href='https://code-of-conduct.freecodecamp.org'> <Link to='https://code-of-conduct.freecodecamp.org'>
Our code of conduct Our code of conduct
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -392,9 +374,9 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faUniversity} /> <FontAwesomeIcon icon={faUniversity} />
</td> </td>
<td> <td>
<a href='https://www.freecodecamp.org/academic-honesty'> <Link to='https://www.freecodecamp.org/academic-honesty'>
Our academic honesty policy Our academic honesty policy
</a> </Link>
</td> </td>
</tr> </tr>
<tr> <tr>
@@ -402,9 +384,9 @@ const AboutPage = () => {
<FontAwesomeIcon icon={faBook} /> <FontAwesomeIcon icon={faBook} />
</td> </td>
<td> <td>
<a href='https://terms-of-service.freecodecamp.org'> <Link to='https://terms-of-service.freecodecamp.org'>
Our terms of service Our terms of service
</a> </Link>
</td> </td>
</tr> </tr>
</tbody> </tbody>

2
client/src/pages/index.js
View File

@@ -229,7 +229,7 @@ const IndexPage = () => (
pay for servers, services, and staff. You can{' '} pay for servers, services, and staff. You can{' '}
<a <a
className='large-p underlined-link' className='large-p underlined-link'
href='https://donate.freecodecamp.org/' href='/donate'
rel='noopener noreferrer' rel='noopener noreferrer'
target='_blank' target='_blank'
> >

2
client/src/pages/learn.js
View File

@@ -50,7 +50,7 @@ const IndexPage = ({
And yes - all of this is 100% free, thanks to the thousands of campers And yes - all of this is 100% free, thanks to the thousands of campers
who{' '} who{' '}
<a <a
href='https://donate.freecodecamp.org' href='/donate'
rel='noopener noreferrer' rel='noopener noreferrer'
target='_blank' target='_blank'
> >

74
client/src/pages/sponsors.js
View File

@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { Grid, Col, Row } from '@freecodecamp/react-bootstrap'; import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
import Spacer from '../components/helpers/Spacer'; import { Link, Spacer } from '../components/helpers';
import './sponsors.css'; import './sponsors.css';
@@ -23,101 +23,93 @@ const SponsorsPage = () => {
</h3> </h3>
<hr /> <hr />
<Row className='sponsor-logos'> <Row className='sponsor-logos'>
<a <Link
href='https://www.class-central.com' external={true}
rel='noopener noreferrer' to='https://www.class-central.com'
target='_blank'
> >
<img <img
alt="Class Central's logo" alt="Class Central's logo"
className='img-responsive sponsor-logo' className='img-responsive sponsor-logo'
src='https://s3.amazonaws.com/freecodecamp/class-central-logo.jpg' src='https://s3.amazonaws.com/freecodecamp/class-central-logo.jpg'
/> />
</a> </Link>
<a <Link
href='https://www.tsugicloud.org' external={true}
rel='noopener noreferrer' to='https://www.tsugicloud.org'
target='_blank'
> >
<img <img
alt="TsugiCloud's logo" alt="TsugiCloud's logo"
className='img-responsive sponsor-logo' className='img-responsive sponsor-logo'
src='https://s3.amazonaws.com/freecodecamp/tsugicloud-logo.png' src='https://s3.amazonaws.com/freecodecamp/tsugicloud-logo.png'
/> />
</a> </Link>
</Row> </Row>
<h2>In-kind sponsors</h2> <h2>In-kind sponsors</h2>
<h3>These companies donate their services to freeCodeCamp.org</h3> <h3>These companies donate their services to freeCodeCamp.org</h3>
<hr /> <hr />
<Row className='sponsor-logos'> <Row className='sponsor-logos'>
<a <Link
href='https://netlify.com' external={true}
rel='noopener noreferrer' to='https://netlify.com'
target='_blank'
> >
<img <img
alt="Netlify's logo" alt="Netlify's logo"
className='img-responsive sponsor-logo' className='img-responsive sponsor-logo'
src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg' src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
/> />
</a> </Link>
<a <Link
href='https://www.mlab.com/' external={true}
rel='noopener noreferrer' to='https://www.mlab.com/'
target='_blank'
> >
<img <img
alt="mLab's logo" alt="mLab's logo"
className='img-responsive sponsor-logo' className='img-responsive sponsor-logo'
src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png' src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
/> />
</a> </Link>
<a <Link
href='https://auth0.com' external={true}
rel='noopener noreferrer' to='https://auth0.com'
target='_blank'
> >
<img <img
alt="Auth0's logo" alt="Auth0's logo"
className='img-responsive sponsor-logo' className='img-responsive sponsor-logo'
src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png' src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
/> />
</a> </Link>
</Row> </Row>
<Row className='sponsor-logos'> <Row className='sponsor-logos'>
<a <Link
href='https://www.discourse.org/' external={true}
rel='noopener noreferrer' to='https://www.discourse.org/'
target='_blank'
> >
<img <img
alt="Discourse's logo" alt="Discourse's logo"
className='img-responsive sponsor-logo' className='img-responsive sponsor-logo'
src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png' src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
/> />
</a> </Link>
<a <Link
href='https://algolia.com' external={true}
rel='noopener noreferrer' to='https://algolia.com'
target='_blank'
> >
<img <img
alt="Algolia's logo" alt="Algolia's logo"
className='img-responsive sponsor-logo' className='img-responsive sponsor-logo'
src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg' src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
/> />
</a> </Link>
<a <Link
href='https://cloudflare.com' external={true}
rel='noopener noreferrer' to='https://cloudflare.com'
target='_blank'
> >
<img <img
alt="Cloudflare's logo" alt="Cloudflare's logo"
className='img-responsive sponsor-logo' className='img-responsive sponsor-logo'
src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg' src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
/> />
</a> </Link>
</Row> </Row>
</Col> </Col>
</Row> </Row>