Addresses part of #16, (#71)

Integrate gatsby-plugin-intl for internationalization
Replaces static text with `intl.formatMessage` call and Links with `gatsby-plugin-intl` equivalent
Note: `npm install` now requires `--force` to install the latest `gatsby-plugin-intl` as it doesn't explicitly support gatsby3.0
This commit is contained in:
Nat Hillard 2021-05-21 13:05:27 -04:00 committed by GitHub
commit a579cb13bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 2475 additions and 1290 deletions

View file

@ -1,6 +1,6 @@
import React from 'react';
import { Footer } from '@trussworks/react-uswds';
import {Link} from 'gatsby';
import {Link} from 'gatsby-plugin-intl';
const footerLinks = [
<Link to="/">Home</Link>

View file

@ -1,17 +1,21 @@
import React from 'react';
import { GovBanner, Header, Title, PrimaryNav } from '@trussworks/react-uswds';
import { Link } from "gatsby";
import { useIntl, Link } from "gatsby-plugin-intl"
const headerLinks = [
<Link to="/">Home</Link>
];
const J40Header = () => {
const intl = useIntl()
const title = intl.formatMessage({ id: "71L0pp", defaultMessage:"Justice40", description:"Title of the project" });
return (
<>
<GovBanner />
<Header>
<Title>Justice 40</Title>
<Title>
{title}
</Title>
<PrimaryNav items={headerLinks}/>
</Header>
</>

6
client/src/intl/en.json Normal file
View file

@ -0,0 +1,6 @@
{
"71L0pp": {
"defaultMessage": "Justice40",
"description": "Title of the project"
}
}

3
client/src/intl/es.json Normal file
View file

@ -0,0 +1,3 @@
{
"71L0pp": "Justicia40"
}

View file

@ -1,5 +1,5 @@
import * as React from "react"
import { Link } from "gatsby"
import * as React from "react";
import { Link } from "gatsby-plugin-intl";
// styles
const pageStyles = {

View file

@ -1,11 +1,15 @@
import * as React from "react"
import Layout from '../components/layout';
// markup
export default function IndexPage() {
const IndexPage = () => {
return (
<Layout>
<title>Justice40</title>
</Layout>
<Layout>
<main>
<h2>Subheader</h2>
</main>
</Layout>
)
}
}
export default IndexPage;