i18n implementation

[raquii]

gatsby i18n

tutorial

[raquii]

Added react i18next plugin/package to project.

When creating text for pages, the text should be added to the json files in ./locales/<language abbreviation>/translation.json using the following naming convention:

"PAGE_NAME": { 
    "ELEMENT_NAME_OR_PURPOSE" : "Text to display"
}

It can then be inserted into the element using the useTranslation hook on the page like so:

//the page is index and the element with translated text is a welcome banner

const IndexPage = () => {
  const { t } = useTranslation();

  return (
    <main>
        <h1>{t("INDEX.WELCOME")}</h1>
    </main>
  )
}

Obviously we need to add translations in both the english and spanish files to be able to render something translated. 😉