feat(react-intl): introduce better react-intl support that isn't hacky

Author: ovflowd

firebase.json

@@ -2,7 +2,52 @@
   "hosting": {
     "target": "nodejs-dev",
     "public": "public",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
   },
-  "redirects": []
-}
+  "redirects": [
+    {
+      "source": "/en/get-involved/",
+      "destination": "/community/",
+      "type": "301"
+    },
+    {
+      "source": "/get-involved/",
+      "destination": "/community/",
+      "type": "301"
+    },
+    {
+      "source": "/governance/",
+      "destination": "/about/governance/",
+      "type": "301"
+    },
+    {
+      "source": "/working-groups/",
+      "destination": "/about/working-groups/",
+      "type": "301"
+    },
+    {
+      "source": "/releases/",
+      "destination": "/about/releases/",
+      "type": "301"
+    },
+    {
+      "source": "/trademark/",
+      "destination": "/about/trademark/",
+      "type": "301"
+    },
+    {
+      "source": "/privacy/",
+      "destination": "/about/privacy/",
+      "type": "301"
+    },
+    {
+      "source": "/security/",
+      "destination": "/about/security/",
+      "type": "301"
+    }
+  ]
+}

gatsby-browser.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import ReactIntlProvider from './src/containers/ReactIntl';
+import type { WrapPageElementBrowser } from './src/types';
+
+declare global {
+  interface Window {
+    locations: string[];
+    previousPath: string;
+  }
+}
+
+export const onRouteUpdate = () => {
+  window.locations = window.locations || [document.referrer];
+  window.locations.push(window.location.href);
+  window.previousPath = window.locations[window.locations.length - 1];
+};
+
+export const wrapPageElement: WrapPageElementBrowser = ({ element, props }) => {
+  const { locale, intlMessages } = props.pageContext;
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return (
+    <ReactIntlProvider locale={locale} messages={intlMessages}>
+      {element}
+    </ReactIntlProvider>
+  );
+};

gatsby-browser.tsx

@@ -167,12 +167,5 @@ module.exports = {
         locales: localesAsString,
       },
     },
-    // @see https://www.gatsbyjs.com/plugins/gatsby-theme-i18n-react-intl/
-    {
-      resolve: `gatsby-theme-i18n-react-intl`,
-      options: {
-        defaultLocale: `./src/i18n/locales/${defaultLanguage}.json`,
-      },
-    },
   ],
 };

gatsby-config.js

@@ -10,13 +10,29 @@ const createPagesQuery = require('./util-node/createPagesQuery');
 const createLearnQuery = require('./util-node/createLearnQuery');
 const createMarkdownPages = require('./util-node/createMarkdownPages');
 const redirects = require('./util-node/redirects');
+const nodeLocales = require('./util-node/locales');
 
 const BLOG_POST_FILENAME_REGEX = /([0-9]+)-([0-9]+)-([0-9]+)-(.+)\.md$/;
 
 const learnYamlNavigationData = yaml.parse(
   fs.readFileSync('./src/data/learn.yaml', 'utf8')
 );
 
+// This creates a map of all the locale JSONs that are enabled in the config.json file
+const intlMessages = nodeLocales.locales.reduce((acc, locale) => {
+  const filePath = require.resolve(`./src/i18n/locales/${locale.code}.json`);
+  acc[locale.code] = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+  return acc;
+}, {});
+
+const getMessagesForLocale = locale => {
+  if (locale && locale in intlMessages) {
+    return intlMessages[locale];
+  }
+
+  return intlMessages[nodeLocales.defaultLanguage];
+};
+
 exports.onCreateWebpackConfig = ({ plugins, actions }) => {
   actions.setWebpackConfig({
     plugins: [
@@ -108,6 +124,25 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   });
 };
 
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+
+  // Deletes the same page that is created by the createPage action
+  deletePage(page);
+
+  // Recreates the page with the messages that ReactIntl needs
+  // This will be passed to the ReactIntlProvider Component
+  // Used within gatsby-browser.js and gatsby-ssr.js
+  createPage({
+    ...page,
+    context: {
+      ...page.context,
+      intlMessages: getMessagesForLocale(page.context.locale),
+      locale: page.context.locale || nodeLocales.defaultLanguage,
+    },
+  });
+};
+
 exports.onCreateNode = ({ node, actions, getNode }) => {
   if (node.internal.type === 'Mdx') {
     const { createNodeField } = actions;

gatsby-node.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import ReactIntlProvider from './src/containers/ReactIntl';
+import type { WrapPageElementSSR } from './src/types';
+
+// eslint-disable-next-line import/prefer-default-export
+export const wrapPageElement: WrapPageElementSSR = ({ element, props }) => {
+  const { locale, intlMessages } = props.pageContext;
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return (
+    <ReactIntlProvider locale={locale} messages={intlMessages}>
+      {element}
+    </ReactIntlProvider>
+  );
+};