mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-10-01 00:43:17 -07:00
Add Spanish to site (#1541)
* Add script to un-nest the translated es.json file * Update unit tests * Update i18n IDs to conformity * Update READMEs * Make ordinal values in sidepanel i18n compliant * remove redudant IDs in en.json * Add oridinal i18n to IndicatorValue sub-text * Update plurals in sidepanel - Disadvantaged in 1 category - Disadvantaged in 5 categories - At or above 1 threshold - At or above 10 thresholds * Add en.json link to GHA * Enable FormatJS linter rules to catch i18n issues * Testing if commit hash will render in PR message * Testing if commit hash will render in PR message * Enable allow repeats * Try to add run command * remove attempts to link to en.json * Define COMMIT HASH env variable * Move commit hash to deploy job
This commit is contained in:
Vim
GitHub
parent
181b6f4919
commit
ce6f7974fb
22 changed files with 1821 additions and 506 deletions
|
|
@ -1,5 +1,21 @@
|
|||
# How to i18n copy for J40
|
||||
|
||||
1. Note that description fields can not have line feed or carriage returns or they will render a /n in the en.json file.
|
||||
2. Use bold, italic function in common.tsx
|
||||
3. Use <FormattedNumber> and <FormattedDate> for these data types.
|
||||
We are using the following two libraries to achieve internationalization (i18n):
|
||||
|
||||
- react-intl
|
||||
- gatsby-plugin-intl
|
||||
|
||||
Some common functions used by these libraries are:
|
||||
|
||||
```
|
||||
import {defineMessages} from 'react-intl';
|
||||
import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-intl';
|
||||
```
|
||||
|
||||
When we are using a place text function with no links, or rich-text formatting, it is suggested to use `defineMessages`.
|
||||
|
||||
When we do have to apply rich-text formatting, we can achieve this with `FormattedDate`.
|
||||
|
||||
When havin to add Dates or Numbers, we can can use `FormattedDate` and `FormattedNumber` respectively.
|
||||
|
||||
More examples can be found [here](https://github.com/formatjs/formatjs/blob/main/packages/react-intl/examples/Messages.tsx)
|
||||
|
|
@ -195,7 +195,7 @@ export const FOOTER = defineMessages({
|
|||
description: 'Navigate to the about page. This is Footer github link text',
|
||||
},
|
||||
GITHUB_LINK: {
|
||||
id: 'common.pages.footer.findcontact.link',
|
||||
id: 'common.pages.footer.gatsby.link',
|
||||
defaultMessage: 'https://github.com/usds/justice40-tool',
|
||||
description: 'Navigate to the about page. This is Footer find contact link text',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export const CENSUS_TRACT_FEEDBACK = {
|
|||
};
|
||||
|
||||
export const CONTACT_VIA_EMAIL = {
|
||||
ID: 'contact.general',
|
||||
ID: 'contact.page.general',
|
||||
DESCRIPTION: 'Contact page body text',
|
||||
DEFAULT_MESSAGE: `For general feedback, email {general_email_address}.`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ export const PAGE_INTRO = defineMessages({
|
|||
description: 'Navigate to the the Downloads page, this will be the page heading2 text',
|
||||
},
|
||||
PAGE_DESCRIPTION1: {
|
||||
id: 'downloads.page.heading1.text',
|
||||
id: 'downloads.page.description1.text',
|
||||
defaultMessage: 'The dataset used in the tool, along with a data dictionary and information about how to use the list of communities (.pdf) are available in the following file formats:',
|
||||
description: 'Navigate to the the Downloads page, this will be the page heading1 text',
|
||||
description: 'Navigate to the the Downloads page, this will be the page description1 text',
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -302,19 +302,19 @@ export const COMMUNITY = {
|
|||
|
||||
export const numberOfCategoriesExceeded = (categoryCount:number) => <FormattedMessage
|
||||
id={'explore.tool.page.side.panel.num.categories.exceeded'}
|
||||
defaultMessage={`Disadvantaged in {numberOfDisCategories} categories`}
|
||||
defaultMessage={`Disadvantaged in {numberOfDisCategories, plural, one {# category} other {# categories}}`}
|
||||
description={`Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show how many categories are exceeded`}
|
||||
values={{
|
||||
numberOfDisCategories: <FormattedNumber value={categoryCount} />,
|
||||
numberOfDisCategories: categoryCount,
|
||||
}}
|
||||
/>;
|
||||
|
||||
export const numberOfThresholdsExceeded = (thresholds:number) => <FormattedMessage
|
||||
id={'explore.tool.page.side.panel.num.thresholds.exceeded'}
|
||||
defaultMessage={`At or above {numberOfThresholdExceed} thresholds`}
|
||||
defaultMessage={`At or above {numberOfThresholdExceed, plural, one {# threshold} other {# thresholds}}`}
|
||||
description={`Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show how many thresholds are exceeded`}
|
||||
values={{
|
||||
numberOfThresholdExceed: <FormattedNumber value={thresholds} />,
|
||||
numberOfThresholdExceed: thresholds,
|
||||
}}
|
||||
/>;
|
||||
|
||||
|
|
@ -524,44 +524,44 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
|
|||
|
||||
export const SIDE_PANEL_VALUES = {
|
||||
ABOVE: <FormattedMessage
|
||||
id={'explore.page.side.panel.indicator.value.subtext.above'}
|
||||
id={'explore.tool.page.side.panel.indicator.value.subtext.above'}
|
||||
description={'indicating above threshold'}
|
||||
defaultMessage={`above `}
|
||||
/>,
|
||||
BELOW: <FormattedMessage
|
||||
id={'explore.page.side.panel.indicator.value.subtext.below'}
|
||||
id={'explore.tool.page.side.panel.indicator.value.subtext.below'}
|
||||
description={'indicating below threshold'}
|
||||
defaultMessage={`below `}
|
||||
/>,
|
||||
PERCENT: <FormattedMessage
|
||||
id={'explore.page.side.panel.indicator.value.subtext.percent'}
|
||||
id={'explore.tool.page.side.panel.indicator.value.subtext.percent'}
|
||||
description={'indicating percent units'}
|
||||
defaultMessage={`percent`}
|
||||
/>,
|
||||
PERCENTILE: <FormattedMessage
|
||||
id={'explore.page.side.panel.indicator.value.subtext.percentile'}
|
||||
id={'explore.tool.page.side.panel.indicator.value.subtext.percentile'}
|
||||
description={'indicating percentile units'}
|
||||
defaultMessage={`percentile`}
|
||||
/>,
|
||||
IMG_ALT_TEXT: defineMessages({
|
||||
ARROW_UP: {
|
||||
id: 'explore.page.side.panel.indicator.value.arrow.up.alt.text',
|
||||
id: 'explore.tool.page.side.panel.indicator.value.arrow.up.alt.text',
|
||||
description: 'image alt text for the up arrow',
|
||||
defaultMessage: `an icon for the up arrow`,
|
||||
},
|
||||
ARROW_DOWN: {
|
||||
id: 'explore.page.side.panel.indicator.value.arrow.down.alt.text',
|
||||
id: 'explore.tool.page.side.panel.indicator.value.arrow.down.alt.text',
|
||||
description: 'image alt text for the down arrow',
|
||||
defaultMessage: `an icon for the down arrow`,
|
||||
},
|
||||
UNAVAILABLE: {
|
||||
id: 'explore.page.side.panel.indicator.value.unavailable.alt.text',
|
||||
id: 'explore.tool.page.side.panel.indicator.value.unavailable.alt.text',
|
||||
description: 'image alt text for unavailable icon',
|
||||
defaultMessage: `an icon to represent data is unavailable`,
|
||||
},
|
||||
}),
|
||||
UNAVAILBLE_MSG: <FormattedMessage
|
||||
id={'explore.page.side.panel.indicator.value.subtext.unavailable'}
|
||||
id={'explore.tool.page.side.panel.indicator.value.subtext.unavailable'}
|
||||
description={'subtext for indicator when data is N/A'}
|
||||
defaultMessage={`data is not available`}
|
||||
/>,
|
||||
|
|
@ -733,27 +733,27 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
|
|||
|
||||
export const SIDE_PANEL_SPACERS = {
|
||||
EXCEED_ONE_OR_MORE: <FormattedMessage
|
||||
id={'explore.page.side.panel.at.or.above.at.least.one'}
|
||||
id={'explore.tool.page.side.panel.at.or.above.at.least.one'}
|
||||
defaultMessage={`At or above at least one threshold?`}
|
||||
description={`Navigate to the explore the tool page. When the map is in view, click on the map. Click on a category to expand. This is the first question text around thresholds.`}
|
||||
/>,
|
||||
EXCEED_BOTH_SOCIO: <FormattedMessage
|
||||
id={'explore.page.side.panel.at.or.above.both.thresholds'}
|
||||
id={'explore.tool.page.side.panel.at.or.above.both.thresholds'}
|
||||
defaultMessage={`At or above both associated thresholds?`}
|
||||
description={`Navigate to the explore the tool page. When the map is in view, click on the map. Click on a category to expand. This is the second question text around thresholds.`}
|
||||
/>,
|
||||
YES: <FormattedMessage
|
||||
id={'explore.page.side.panel.exceed.burden.answer.yes'}
|
||||
id={'explore.tool.page.side.panel.exceed.burden.answer.yes'}
|
||||
defaultMessage={`Yes`}
|
||||
description={'Navigate to the explore the tool page. When the map is in view, click on the map. This will display YES if the census tract is disadvantaged'}
|
||||
/>,
|
||||
NO: <FormattedMessage
|
||||
id={'explore.page.side.panel.exceed.burden.answer.no'}
|
||||
id={'explore.tool.page.side.panel.exceed.burden.answer.no'}
|
||||
defaultMessage={`No`}
|
||||
description={'Navigate to the explore the tool page. When the map is in view, click on the map. This will display NO if the census tract is disadvantaged'}
|
||||
/>,
|
||||
AND: <FormattedMessage
|
||||
id={'explore.page.side.panel.spacer.and'}
|
||||
id={'explore.tool.page.side.panel.spacer.and'}
|
||||
defaultMessage={`AND`}
|
||||
description={'Navigate to the explore the tool page. When the map is in view, click on the map. Click on a category to expand. This is the AND spacer around thresholds.'}
|
||||
/>,
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ export const EVENTS = [
|
|||
EXPIRED_IMG: mar31Exp,
|
||||
FIELDS: defineMessages({
|
||||
INFO: {
|
||||
id: 'public.eng.page.whejac.meeting.day.1.info',
|
||||
id: 'public.eng.page.whejac.meeting.day.2.info',
|
||||
defaultMessage: `March 31th (3:00 - 7:30 PM EST)`,
|
||||
description: 'public engagement page event WHEJAC',
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue