Add proper links to cards and guides instead of hard coding them.

This commit is contained in:
picklesrus 2018-12-13 14:10:47 -05:00
parent 1ce8ef5b0d
commit 43db3c12e5
2 changed files with 30 additions and 5 deletions

View file

@ -0,0 +1,4 @@
{
"cards.scratch-cards-allLink": "https://resources.scratch.mit.edu/www/cards/en/scratch-cards-all.pdf",
"guides.EducatorGuidesAllLink": "https://resources.scratch.mit.edu/www/guides/en/EducatorGuidesAll.pdf"
}

View file

@ -1,5 +1,8 @@
const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage; const FormattedHTMLMessage = require('react-intl').FormattedHTMLMessage;
const FormattedMessage = require('react-intl').FormattedMessage; const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const React = require('react'); const React = require('react');
const FlexRow = require('../../../components/flex-row/flex-row.jsx'); const FlexRow = require('../../../components/flex-row/flex-row.jsx');
@ -11,7 +14,8 @@ const render = require('../../../lib/render.jsx');
require('./landing.scss'); require('./landing.scss');
const Landing = () => ( const Landing = props => (
<div className="educators"> <div className="educators">
<TitleBanner className="masthead"> <TitleBanner className="masthead">
<div className="inner"> <div className="inner">
@ -73,7 +77,11 @@ const Landing = () => (
id="teacherlanding.educatorGuides" id="teacherlanding.educatorGuides"
values={{ values={{
educatorLink: ( educatorLink: (
<a href="https://resources.scratch.mit.edu/www/guides/en/EducatorGuidesAll.pdf"> <a
href={props.intl.formatMessage({
id: 'guides.EducatorGuidesAllLink'
})}
>
<FormattedMessage id="teacherlanding.educatorGuideLinkText" /> <FormattedMessage id="teacherlanding.educatorGuideLinkText" />
</a> </a>
) )
@ -122,7 +130,11 @@ const Landing = () => (
</p> </p>
</div> </div>
<div> <div>
<a href="/www/cards/en/ScratchCardsAll.pdf"> <a
href={props.intl.formatMessage({
id: 'cards.scratch-cards-allLink'
})}
>
<img <img
alt="cards icon" alt="cards icon"
src="/svgs/teachers/coding-cards-icon.svg" src="/svgs/teachers/coding-cards-icon.svg"
@ -133,7 +145,11 @@ const Landing = () => (
id="teacherlanding.codingCardResources" id="teacherlanding.codingCardResources"
values={{ values={{
codingCardLink: ( codingCardLink: (
<a href="https://resources.scratch.mit.edu/www/cards/en/ScratchCardsAll.pdf"> <a
href={props.intl.formatMessage({
id: 'cards.scratch-cards-allLink'
})}
>
<FormattedMessage id="teacherlanding.codingCardLink" /> <FormattedMessage id="teacherlanding.codingCardLink" />
</a> </a>
) )
@ -304,4 +320,9 @@ const Landing = () => (
</div> </div>
); );
render(<Page><Landing /></Page>, document.getElementById('app')); Landing.propTypes = {
intl: intlShape
};
const WrappedLanding = injectIntl(Landing);
render(<Page><WrappedLanding /></Page>, document.getElementById('app'));