Multilingual website with Gatsby and Contentful - Part 2

{
    resolve: `gatsby-plugin-intl`,
    options: {
        // language JSON resource path
        path: `${__dirname}/src/intl`,
        // supported language
        languages: [`en`, `fr`],
        // language file path
        defaultLanguage: `en`,
        // option to redirect to `/en` when connecting `/`
        redirect: true,
    },
},

// src/intl/en.json
{
    "title": "Gatsby English",
    "description": "Project description",
    "author": "@louisbertin",
    "hello": "Hi people!",
    "welcome": "Welcome to your new Gatsby site.",
    "title_page2": "Page two",
    "hello_page2": "Hi from the second page",
    "go_page2": "Go to page 2",
    "welcome_page2": "Welcome to page 2",
    "go_back": "Go back to the homepage",
    "footer_build": "Built with",
    "notfound": {
        "header": "NOT FOUND",
        "description": "You just hit a route that doesn't exist... the sadness."
    }
}

// src/intl/fr.json
{
    "title": "Gatsby French",
    "description": "Project description",
    "author": "@louisbertin",
    "hello": "Salut les gens!",
    "welcome": "Bienvenue sur votre nouveau site Gatsby",
    "title_page2": "Page deux",
    "hello_page2": "Salut depuis la seconde page",
    "go_page2": "Aller à la page 2",
    "welcome_page2": "Bienvenue sur la page 2",
    "go_back": "Retour à la page d'accueil",
    "footer_build": "Construit avec",
    "notfound": {
        "header": "NOT FOUND",
        "description": "Vous voulez accéder à une route qui n'existe pas..."
    }
}

// pages/index.js
import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

const IndexPage = ({ data, intl }) => (
    <Layout>
        <SEO title={intl.formatMessage({ id: "title" })} />
        <h1>
          <FormattedMessage id="hello" />
        </h1>
        <p>
          <FormattedMessage id="welcome" />
        </p>

        <br />
        <Link to="/page-2">
          <FormattedMessage id="go_page2" />
        </Link>
      </Layout>
)

export const query = graphql `
      query ContentFulPosts($locale: String) {
        allContentfulPost(filter: { node_locale: { eq: $locale } }) {
          nodes {
            contentful_id
            title
            path
          }
        }
      }
`

export default injectIntl(IndexPage)

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"

import { injectIntl, FormattedMessage } from "gatsby-plugin-intl"

const Layout = ({ children, intl }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0px 1.0875rem 1.45rem`,
          paddingTop: 0,
        }}
      >
        <main>{children}</main>
        <footer>
          © {new Date().getFullYear()}, <FormattedMessage id="footer_build" />{" "}
          {` `}
          <a href="https://www.gatsbyjs.org">Gatsby</a>
        </footer>
      </div>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default injectIntl(Layout)

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

const BlogPost = ({ pageContext, data }) => (
    <Layout>
        <h1>{data.contentfulPost.title}</h1>
      </Layout>
)

export const query = graphql `
      query ContentFulPost($slug: String, $locale: String) {
        contentfulPost(path: { eq: $slug }, node_locale: { eq: $locale }) {
          path
          node_locale
          title
        }
      }
    `

export default BlogPost

const path = require(`path`)

// pages locale
exports.onCreatePage = ({ page, actions }) => {
    const { createPage, deletePage } = actions
    deletePage(page)
    // You can access the variable "locale" in your page queries now
    createPage({
        ...page,
        context: {
            ...page.context,
            locale: page.context.intl.language,
        },
    })
}

// blog posts
exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions
    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
    // Query for markdown nodes to use in creating pages.
    // You can query for whatever data you want to create pages for e.g.
    // products, portfolio items, landing pages, etc.
    // Variables can be added as the second function parameter
    return graphql(
        `
          query MyQuery {
            allContentfulPost {
              edges {
                node {
                  path
                }
              }
            }
          }
        `
    ).then(result => {
        if(result.errors) {
            throw result.errors
        }

        // Create blog post pages.
        result.data.allContentfulPost.edges.forEach(edge => {
            const path = edge.node.path

            createPage({
                // Path for this page — required
                path: path,
                component: blogPostTemplate,
                context: {
                    slug: path,
                },
            })
        })
    })
}

export const query = graphql `
      query ContentFulPosts($locale: String) {
        allContentfulPost(filter: { node_locale: { eq: $locale } }) {
          nodes {
            contentful_id
            title
            path
          }
        }
      }

import React from "react"
import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"

const languageName = {
  en: "English",
  fr: "Français",
}

const Language = () => (
  <div>
    <IntlContextConsumer>
      {({ languages, language: currentLocale }) =>
        languages.map(language => (
          <a
            key={language}
            onClick={() => changeLocale(language)}
            style={{
              color: currentLocale === language ? `yellow` : `white`,
              margin: 10,
              textDecoration: `underline`,
              cursor: `pointer`,
            }}
          >
            {languageName[language]}
          </a>
        ))
      }
    </IntlContextConsumer>
  </div>
)

export default Language