mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-28 14:11:17 -07:00
End-to-end working localization (#336)
* End-to-end localization working * Update package.json * fix FormattedMessage confusion by using the `FormattedMessage` from `gatsby-plugin-intl` NOT `react-intl` * TODO: `client/src/intl/es.json` should be generated from a translation tool. * Update package-lock.json
This commit is contained in:
TomNUSDS
GitHub
parent
3cd6e06115
commit
cfce0dc826
8 changed files with 523 additions and 162 deletions
|
|
@ -1,24 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import Layout from '../components/layout';
|
||||
|
||||
|
||||
// this section seems too verbose? must be a more readable way to do this.
|
||||
// this inlines the svg as data:image/svg+xml For larger images this
|
||||
// can cause page bloat, but it should be fine here.
|
||||
// @ts-ignore
|
||||
import ecoIcon from '/node_modules/uswds/dist/img/usa-icons/eco.svg';
|
||||
// @ts-ignore
|
||||
import busIcon from '/node_modules/uswds/dist/img/usa-icons/directions_bus.svg';
|
||||
// @ts-ignore
|
||||
import homeIcon from '/node_modules/uswds/dist/img/usa-icons/home.svg';
|
||||
// @ts-ignore
|
||||
import groupsIcon from '/node_modules/uswds/dist/img/usa-icons/groups.svg';
|
||||
import pollutionIcon // @ts-ignore
|
||||
from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg';
|
||||
// @ts-ignore
|
||||
import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg';
|
||||
// @ts-ignore
|
||||
import publicIcon from '/node_modules/uswds/dist/img/usa-icons/public.svg';
|
||||
import AreasOfFocusList from '../components/areasOfFocusList';
|
||||
import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
interface IndexPageProps {
|
||||
location: Location;
|
||||
|
|
@ -26,118 +10,163 @@ interface IndexPageProps {
|
|||
|
||||
// markup
|
||||
const IndexPage = ({location}: IndexPageProps) => {
|
||||
const readMoreList: (any | string)[][] = [
|
||||
[publicIcon, 'Climate change'],
|
||||
[ecoIcon, 'Clean energy and energy efficiency'],
|
||||
[busIcon, 'Clean transit'],
|
||||
[homeIcon, 'Affordable and sustainable housing'],
|
||||
[groupsIcon, 'Training and workforce development'],
|
||||
[pollutionIcon, 'Remediation of legacy pollution'],
|
||||
[washIcon, 'Clean water infrastructure'],
|
||||
];
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
aboutHeader: {
|
||||
id: 'index.aboutContent.header',
|
||||
defaultMessage: 'About Justice40',
|
||||
description: 'h1 header on About page',
|
||||
},
|
||||
presidentalLinkUri: {
|
||||
id: 'index.presidentalLinkUri',
|
||||
defaultMessage: 'https://www.whitehouse.gov/briefing-room/' +
|
||||
'presidential-actions/2021/01/27/' +
|
||||
'executive-order-on-tackling-the-climate-' +
|
||||
'crisis-at-home-and-abroad/',
|
||||
description: 'Link url to presidential actions executive order. Part of paragraph 3',
|
||||
},
|
||||
presidentalLinkLabel: {
|
||||
id: 'index.presidentalLinkLabel',
|
||||
defaultMessage: 'Executive Order on Tackling the Climate Crisis at Home and Abroad.',
|
||||
description: 'Link url to presidential actions executive order. Part of paragraph 3',
|
||||
},
|
||||
transparentLabel: {
|
||||
id: 'index.section3.transparentLabel',
|
||||
defaultMessage: 'Transparent:',
|
||||
description: 'Italic label for 1st paragraph of section 3 on index page',
|
||||
},
|
||||
inclusiveLabel: {
|
||||
id: 'index.section3.inclusiveLabel',
|
||||
defaultMessage: 'Inclusive:',
|
||||
description: 'Italic label for 2nd paragraph of section 3 on index page',
|
||||
},
|
||||
iterativeLabel: {
|
||||
id: 'index.section3.iterativeLabel',
|
||||
defaultMessage: 'Iterative:',
|
||||
description: 'Italic label for 3rd paragraph of section 3 on index page',
|
||||
},
|
||||
});
|
||||
|
||||
return (<Layout location={location}>
|
||||
<section className={'usa-prose'}>
|
||||
<h1>About Justice40</h1>
|
||||
<p>
|
||||
In an effort to address historical environmental injustices,
|
||||
President Biden created the Justice40 Initiative on January
|
||||
27, 2021. The Justice40 Initiative directs 40% of the
|
||||
benefits from federal investments in seven key areas to
|
||||
overburdened and underserved communities.
|
||||
</p>
|
||||
<h1>{intl.formatMessage(messages.aboutHeader)}</h1>
|
||||
|
||||
<p>
|
||||
Federal agencies will prioritize benefits using a new
|
||||
climate and economic justice screening tool. This screening
|
||||
tool will be a map that visualizes data to compare the
|
||||
cumulative impacts of environmental, climate, and economic
|
||||
factors. It is being developed by the Council on
|
||||
Environmental Quality (CEQ) with guidance from environmental
|
||||
justice leaders and communities affected by environmental
|
||||
injustices. The first version of the screening tool will be
|
||||
released in July 2021. However, the screening tool and data
|
||||
being used will be continuously updated to better reflect
|
||||
<p><FormattedMessage
|
||||
id={'index.aboutContent.p1'}
|
||||
description={'paragraph 1 of main content on index page'}
|
||||
defaultMessage={`
|
||||
In an effort to address historical environmental injustices,
|
||||
President Biden created the Justice40 Initiative on January
|
||||
27, 2021. The Justice40 Initiative directs 40% of the
|
||||
benefits from federal investments in seven key areas to
|
||||
overburdened and underserved communities.
|
||||
`}/></p>
|
||||
|
||||
<p><FormattedMessage
|
||||
id='index.aboutContent.p2'
|
||||
description={'paragraph 2 of main content on index page'}
|
||||
defaultMessage={`
|
||||
Federal agencies will prioritize benefits using a new
|
||||
climate and economic justice screening tool. This screening
|
||||
tool will be a map that visualizes data to compare the
|
||||
cumulative impacts of environmental, climate, and economic
|
||||
factors. It is being developed by the Council on
|
||||
Environmental Quality (CEQ) with guidance from environmental
|
||||
justice leaders and communities affected by environmental
|
||||
injustices. The first version of the screening tool will be
|
||||
released in July 2021. However, the screening tool and data
|
||||
being used will be continuously updated to better reflect
|
||||
the lived experiences of community members.
|
||||
`}/></p>
|
||||
|
||||
<p><FormattedMessage
|
||||
id={'index.aboutContent.p3'}
|
||||
description={'paragraph 3 of main content on index page'}
|
||||
defaultMessage={`
|
||||
Read more about the Justice40 Initiative in President Biden’s
|
||||
{presidentLink}
|
||||
`}
|
||||
values={{presidentLink:
|
||||
<a href={intl.formatMessage(messages.presidentalLinkUri)}
|
||||
target='_blank'
|
||||
rel='noreferrer'>{intl.formatMessage(messages.presidentalLinkLabel)}
|
||||
</a>}}/>
|
||||
</p>
|
||||
|
||||
<h2><FormattedMessage
|
||||
id={'index.section2.header'}
|
||||
description={'section 2 header'}
|
||||
defaultMessage={'Areas of Focus'}/></h2>
|
||||
|
||||
<AreasOfFocusList />
|
||||
|
||||
<h2><FormattedMessage
|
||||
id={'index.section3.header'}
|
||||
description={'section 3 header'}
|
||||
defaultMessage={'A Transparent, Community-First Approach'}/></h2>
|
||||
|
||||
<p><FormattedMessage
|
||||
id={'index.section3.intro'}
|
||||
description={'section 3 content paragraph 1 intro'}
|
||||
defaultMessage={`
|
||||
Successful initiatives are guided by direct input from the
|
||||
communities they are serving. CEQ commits to transparency,
|
||||
inclusivity, and iteration in building this screening tool.`}/>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Read more about the Justice40 Initiative in President
|
||||
Biden’s <a
|
||||
href={'https://www.whitehouse.gov/briefing-room/' +
|
||||
'presidential-actions/2021/01/27/' +
|
||||
'executive-order-on-tackling-the-climate-' +
|
||||
'crisis-at-home-and-abroad/'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}>
|
||||
Executive Order on Tackling the Climate Crisis at Home and
|
||||
Abroad.</a>
|
||||
</p>
|
||||
|
||||
<h2>Areas of Focus</h2>
|
||||
<div className={'grid-row grid-gap'}>
|
||||
<div className={'j40-two-column-confine'}>
|
||||
<ul className={'usa-icon-list j40-two-column'}>
|
||||
{readMoreList.map((item, index) => {
|
||||
return (
|
||||
<li
|
||||
key={`readmore_li_${index}`}
|
||||
className={'usa-icon-list__item'}>
|
||||
<div className={'usa-icon-list__icon'}>
|
||||
<img
|
||||
className={'j40-two-column-icons-spacing'}
|
||||
key={`readmore_img_${index}`}
|
||||
src={item[0]} alt={item[1] + ' icon'}/>
|
||||
</div>
|
||||
<div
|
||||
className={'usa-icon-list__content'}> {item[1]} </div>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>A Transparent, Community-First Approach</h2>
|
||||
|
||||
<p>
|
||||
Successful initiatives are guided by direct input from the
|
||||
communities they are serving. CEQ commits to transparency,
|
||||
inclusivity, and iteration in building this screening tool.
|
||||
<FormattedMessage
|
||||
id={'index.section3.transparent'}
|
||||
description={'section 3 content transparent'}
|
||||
defaultMessage={`
|
||||
{inlineHeader} The code and data behind the screening
|
||||
tool are open source, meaning it is available for the public
|
||||
to review and contribute to. This tool is being developed
|
||||
publicly so that communities, academic experts, and anyone
|
||||
who’s interested can be involved in the tool-building
|
||||
process.`}
|
||||
values={{
|
||||
inlineHeader: <i>{intl.formatMessage(messages.transparentLabel)}</i>,
|
||||
}}/>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i>Transparent:</i> The code and data behind the screening
|
||||
tool are open source, meaning it is available for the public
|
||||
to review and contribute to. This tool is being developed
|
||||
publicly so that communities, academic experts, and anyone
|
||||
who’s interested can be involved in the tool-building
|
||||
process.
|
||||
<FormattedMessage
|
||||
id={'index.section3.inclusive'}
|
||||
description={'section 3 content inclusive'}
|
||||
defaultMessage={`
|
||||
{inlineHeader} Many areas which lack investments also
|
||||
lack environmental data and would be overlooked using
|
||||
available environmental data. CEQ is actively reaching out
|
||||
to groups that have historically been excluded from
|
||||
decision-making, such as groups in rural and tribal areas,
|
||||
to understand their needs and ask for their input.
|
||||
`}
|
||||
values={{
|
||||
inlineHeader: <i>{intl.formatMessage(messages.inclusiveLabel)}</i>,
|
||||
}}/>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i>Inclusive:</i> Many areas which lack investments also
|
||||
lack environmental data and would be overlooked using
|
||||
available environmental data. CEQ is actively reaching out
|
||||
to groups that have historically been excluded from
|
||||
decision-making, such as groups in rural and tribal areas,
|
||||
to understand their needs and ask for their input.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i>Iterative:</i> The initial community prioritization list
|
||||
provided by the screening tool is the beginning of a
|
||||
collaborative process in score refinement, rather than a
|
||||
final answer. CEQ has received recommendations on data sets
|
||||
from community interviews, the White House Environmental
|
||||
Justice Advisory Council, and through public comment, but
|
||||
establishing a score that is truly representative will be a
|
||||
long-term, ongoing process. As communities submit feedback
|
||||
and recommendations, CEQ will continue to improve the tools
|
||||
being built and the processes for stakeholder and public
|
||||
engagement.
|
||||
<FormattedMessage
|
||||
id={'index.section3.iterative'}
|
||||
description={'section 3 content iterative'}
|
||||
defaultMessage={`
|
||||
{inlineHeader} The initial community prioritization list
|
||||
provided by the screening tool is the beginning of a
|
||||
collaborative process in score refinement, rather than a
|
||||
final answer. CEQ has received recommendations on data sets
|
||||
from community interviews, the White House Environmental
|
||||
Justice Advisory Council, and through public comment, but
|
||||
establishing a score that is truly representative will be a
|
||||
long-term, ongoing process. As communities submit feedback
|
||||
and recommendations, CEQ will continue to improve the tools
|
||||
being built and the processes for stakeholder and public
|
||||
engagement.
|
||||
`}
|
||||
values={{
|
||||
inlineHeader: <i>{intl.formatMessage(messages.iterativeLabel)}</i>,
|
||||
}}/>
|
||||
</p>
|
||||
</section>
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue