Adding gatsby-plugin-intl integration for localization

client/README.md

@@ -1,54 +1,33 @@
-<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:
-    cd my-gatsby-site/
-    npm run develop
-    ```
 
-3.  **Open the code and start customizing!**
+- All user-visible strings should be wrapped with the `<FormattedMessage>` tag, with a `description` and `defaultMessage` set. 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.
+- 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

@@ -6,6 +6,19 @@ module.exports = {
     },
   },
   plugins: [
-    "gatsby-plugin-sass"
+    "gatsby-plugin-sass",
+    {
+      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/lang.json

@@ -0,0 +1,5 @@
+{
+  "title_label": {
+    "defaultMessage": "Justice40"
+  }
+}

client/package.json

@@ -12,15 +12,19 @@
     "start": "gatsby develop",
     "build": "gatsby build",
     "serve": "gatsby serve",
-    "clean": "gatsby clean"
+    "clean": "gatsby clean",
+    "intl:extract": "formatjs extract 'src/(pages|components)/*.{ts,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.14",
     "gatsby-cli": "^3.5.0",
     "gatsby-plugin-sass": "^4.5.0"
   },
   "dependencies": {
     "@trussworks/react-uswds": "^1.17.0",
-    "gatsby": "^3.4.1",
+    "gatsby": "^3.5.0",
+    "gatsby-plugin-intl": "^0.3.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

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,6 @@
+{
+    "71L0pp": {
+      "defaultMessage": "Justicia40",
+      "description": "Title of the project"
+    }
+}

client/src/pages/index.tsx

@@ -1,13 +1,19 @@
 import * as React from "react"
 import Layout from '../components/layout';
-
+import { useIntl, FormattedMessage } from "gatsby-plugin-intl"
 // markup
 const IndexPage = () => {
+  const intl = useIntl()
   return (
     <Layout>
       <main>
         <title>Justice40</title>
-        <h1>Justice40</h1>
+        <h1>
+          <FormattedMessage
+            defaultMessage="Justice40"
+            description="Title of the project"
+          />
+        </h1>
       </main>
     </Layout>
   )