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

client/README.md

@@ -1,54 +1,34 @@
-<p align="center">
+# Justice40 Client
-  <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
-    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
-  </a>
-</p>
-<h1 align="center">
-  Gatsby minimal starter
-</h1>
 
-## 🚀 Quick start
+## Localization
 
-1.  **Create a Gatsby site.**
+### About
 
-    Use the Gatsby CLI to create a new site, specifying the minimal starter.
+This project uses [Gatsby Plugin Intl](https://www.gatsbyjs.com/plugins/gatsby-plugin-intl/?=intl) to manage internationalization and localization.
 
-    ```shell
+There are a number of components to this, but for the purposes of localization, this utizes the popular `react-intl` package from [FormatJS](https://github.com/formatjs/formatjs).
-    # create a new Gatsby site using the minimal starter
-    npm init gatsby
-    ```
 
-2.  **Start developing.**
+This works by directing users to a locale-appropriate version of the page they wish to visit based on their browser settings, populated automatically at build time by the contents of `json` files in the `src/intl` directory.
 
-    Navigate into your new site’s directory and start it up.
+### Writing
 
-    ```shell
+For this library to work optimally, the following principles should be obeyed (see [here](https://formatjs.io/docs/getting-started/message-extraction) for more detail):
-    cd my-gatsby-site/
-    npm run develop
-    ```
 
-3.  **Open the code and start customizing!**
+- All user-visible strings should be wrapped with the `intl.formatMessage` function or the `<FormattedMessage>` tag, with a `description` and `defaultMessage` set. Do not yet set the "id" tag, it will be generated for you. To generate files for localization, run `npm run intl:extract` to update the file at `src/intl/en.json` with the extracted contents of all `FormattedMessage` components.
+- Take note of the `id` in this file, and add this back as a parameter of your function/prop for your component (this is done to avoid naming collisions as detailed [here](https://formatjs.io/docs/getting-started/message-extraction))
+- All `Link` components should be imported from `gatsby-plugin-intl` instead to get the locale-appropriate link
+- All pages should import and use `useIntl` from `gatsby-plugin-intl`
 
-    Your site is now running at http://localhost:8000!
+We will later add integration with Github Actions to ensure that all messages have been formatted as a condition/check for committed code.
 
-    Edit `src/pages/index.js` to see your site update in real-time!
+### Translating
 
-4.  **Learn more**
+From there, send `src/intl/en.json` to translators. (Depending on the TMS (Translation Management System) in use, we may need a different format, so we can alter the settings in `package.json` if needbe). When they return with the other language file, e.g. `es.json`, place this in `src/intl/` as a sibling to `en.json`.
 
-    - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+### Consuming
 
-    - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+`React-Intl` works according to Google SEO [best practices](https://developers.google.com/search/docs/advanced/crawling/managing-multi-regional-sites#use-different-urls-for-different-language-versions) by creating locale-specific URLs.
 
-    - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+To access a translated version of a page, e.g. `pages/index.js`, add the locale as a portion of the URL path, as follows:
 
-    - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+- English: `localhost:8000/en/`, or `localhost:8000/` (the default fallback is English)
-
-    - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-    - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
-
-## 🚀 Quick start (Gatsby Cloud)
-
-Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
-
-[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal)

client/gatsby-config.js

@@ -12,7 +12,8 @@ module.exports = {
   siteMetadata: {
     title: "Justice40",
   },
-  plugins: [{
+  plugins: [
+    {
       resolve: 'gatsby-plugin-sass',
       options: {
         cssLoaderOptions: {
@@ -21,5 +22,19 @@ module.exports = {
           }
         }
       }
-},],
+    },
+    {
+        resolve: `gatsby-plugin-intl`,
+        options: {
+          // language JSON resource path
+          path: `${__dirname}/src/intl`,
+          // supported language
+          languages: [`en`, `es`],
+          // language file path
+          defaultLanguage: `en`,
+          // option to redirect to `/en` when connecting `/`
+          redirect: true,
+        },
+    },
+  ],
 };

client/package.json

@@ -12,13 +12,17 @@
     "start": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
-    "clean": "gatsby clean"
+    "clean": "gatsby clean",
+    "intl:extract": "formatjs extract 'src/(pages|components)/*.tsx' --out-file src/intl/en.json",
+    "intl:compile": "formatjs compile src/intl/en.json --ast --out-file compiled-lang/en.json"
   },
   "devDependencies": {
+    "@formatjs/cli": "^4.2.15",
     "@types/node": "^15.3.1",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",
     "gatsby-cli": "^3.5.0",
+    "gatsby-plugin-intl": "^0.3.3",
     "gatsby-plugin-sass": "^4.5.0",
     "sass": "^1.33.0",
     "sass-loader": "^11.1.1"

client/src/components/J40footer.tsx

@@ -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>

client/src/components/J40header.tsx

@@ -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>
         </>

client/src/intl/en.json

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

client/src/intl/es.json

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

client/src/pages/404.tsx

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

client/src/pages/index.tsx

@@ -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>
+      <main>
+        <h2>Subheader</h2>
+      </main>
     </Layout>
   )
 }
+
+export default IndexPage;