Merge pull request #166 from gdams/gatsby5

add support for Gatsby 5.x

Author: jimmyn

README.md

@@ -72,7 +72,6 @@ plugins: [
       localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
       languages: [`en`, `es`, `de`],
       defaultLanguage: `en`,
-      // if you are using Helmet, you must include siteUrl, and make sure you add http:https
       siteUrl: `https://example.com`,
       // if you are using trailingSlash gatsby config include it here, as well (the default is 'always')
       trailingSlash: 'always',
@@ -108,8 +107,8 @@ This example is not using semantic keys instead the entire message will be used
 
 For example,
 
-| language resource files                                              | language |
-| -------------------------------------------------------------------- | -------- |
+| language resource files                                                                                                      | language |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------- |
 | [/locales/en/index.json](https://github.com/microapps/gatsby-plugin-react-i18next/blob/master/example/locales/en/index.json) | English  |
 | [/locales/es/index.json](https://github.com/microapps/gatsby-plugin-react-i18next/blob/master/example/locales/es/index.json) | Spanish  |
 | [/locales/de/index.json](https://github.com/microapps/gatsby-plugin-react-i18next/blob/master/example/locales/de/index.json) | German   |
@@ -140,7 +139,7 @@ Use react i18next [`useTranslation`](https://react.i18next.com/latest/usetransla
 Replace [Gatsby `Link`](https://www.gatsbyjs.org/docs/gatsby-link) component with the `Link` component exported from `gatsby-plugin-react-i18next`
 
 ```javascript
-import { graphql } from "gatsby"
+import {graphql} from 'gatsby';
 import React from 'react';
 import {Link, Trans, useTranslation} from 'gatsby-plugin-react-i18next';
 import Layout from '../components/layout';
@@ -319,12 +318,6 @@ const SpanishAboutLink = () => (
 );
 ```
 
-### `Helmet`
-
-`Helmet` component is identical to [`gatsby-plugin-react-helmet`](https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet) component but also provides language related metatags (alternative and canonical links)
-
-**Note!** To use it you need to have `react-helmet` dependency installed. You also need to provide `siteUrl` in plugin options for it to work properly.
-
 ### `I18nextContext`
 
 Use this react context to access language information about the page
@@ -385,13 +378,13 @@ In this example the plugin will automatically generate language pages for all la
 
 Omit `excludeLanguages` to get all the languages form the path. Make sure that you have pages for all the languages that you specify in the plugin, otherwise you might have broken links.
 
-You may also need to add a pages config for the 404 page, if it uses the same path pattern as your excluded pages. Note that the order of these rules is important. 
+You may also need to add a pages config for the 404 page, if it uses the same path pattern as your excluded pages. Note that the order of these rules is important.
 
 ```js
 pages: [
   {
     matchPath: '/:lang?/404',
-    getLanguageFromPath: false,
+    getLanguageFromPath: false
   },
   {
     matchPath: '/:lang?/:uid',
@@ -518,6 +511,7 @@ By default this plugin is setup to fallback on the entire **message string**, th
 In order to use **semantic keys**, so the fallback message string is the default's language value (instead of the key), it is possible to do the following;
 
 In `/gatsby-config.js`, setup the plugin as usual, and add the key `options.i18nextOptions.fallbackLng` (i18next documentation, [configuration options](https://www.i18next.com/overview/configuration-options#languages-namespaces-resources), and [fallback options](https://www.i18next.com/principles/fallback#fallback));
+
 ```
 {
     resolve: `gatsby-plugin-react-i18next`,
@@ -663,8 +657,8 @@ module.exports = {
 
 ## Mentions
 
-- [Best internationalization for Gatsby](https://dev.to/adrai/best-internationalization-for-gatsby-mkf) by 
-Adriano Raiano
+- [Best internationalization for Gatsby](https://dev.to/adrai/best-internationalization-for-gatsby-mkf) by
+  Adriano Raiano
 
 ## Credits
 

example/gatsby-config.js

@@ -8,7 +8,6 @@ module.exports = {
     siteUrl: 'https://kind-lichterman-5edcb4.netlify.app'
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-source-filesystem`,
@@ -66,7 +65,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-sitemap',
       options: {
-        exclude: ['/**/404', '/**/404.html'],
+        excludes: ['/**/404', '/**/404.html'],
         query: `
           {
             site {

example/package.json

@@ -5,31 +5,29 @@
   "version": "0.1.0",
   "author": "Dmitriy Nevzorov <dmitriy.nevzorov@microapps.com>",
   "dependencies": {
-    "gatsby": "^4.20.0",
-    "gatsby-plugin-image": "^2.20.0",
-    "gatsby-plugin-manifest": "^4.20.0",
-    "gatsby-plugin-offline": "^5.20.0",
-    "gatsby-plugin-react-helmet": "^5.20.0",
-    "gatsby-plugin-react-i18next": "^2.0.4",
-    "gatsby-plugin-sharp": "^4.20.0",
-    "gatsby-plugin-sitemap": "^5.20.0",
-    "gatsby-source-filesystem": "^4.20.0",
-    "gatsby-transformer-sharp": "^4.20.0",
-    "i18next": "^21.9.0",
+    "gatsby": "^5.2.0",
+    "gatsby-plugin-image": "^3.2.0",
+    "gatsby-plugin-manifest": "^5.2.0",
+    "gatsby-plugin-offline": "^6.2.0",
+    "gatsby-plugin-react-i18next": "^2.0.5",
+    "gatsby-plugin-sharp": "^5.2.0",
+    "gatsby-plugin-sitemap": "^6.2.0",
+    "gatsby-source-filesystem": "^5.2.0",
+    "gatsby-transformer-sharp": "^5.2.0",
+    "i18next": "^22.0.6",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-i18next": "^11.18.3"
+    "react-i18next": "^12.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.10",
-    "@babel/core": "^7.18.10",
-    "aws-sdk": "^2.1190.0",
-    "babel-plugin-i18next-extract": "^0.9.0-rc",
-    "babel-preset-gatsby": "^2.20.0",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.5",
+    "aws-sdk": "^2.1266.0",
+    "babel-plugin-i18next-extract": "^0.9.0",
+    "babel-preset-gatsby": "^3.2.0",
     "mkdirp": "^1.0.4",
-    "prettier": "2.7.1"
+    "prettier": "^2.8.0"
   },
   "keywords": [
     "gatsby"

example/src/components/seo.js

@@ -7,10 +7,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Helmet} from 'gatsby-plugin-react-i18next';
 import {useStaticQuery, graphql} from 'gatsby';
 
-function SEO({description, meta, title}) {
+function Seo({description, title}) {
   const {site} = useStaticQuery(
     graphql`
       query {
@@ -28,57 +27,28 @@ function SEO({description, meta, title}) {
   const metaDescription = description || site.siteMetadata.description;
 
   return (
-    <Helmet
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={[
-        {
-          name: `description`,
-          content: metaDescription
-        },
-        {
-          property: `og:title`,
-          content: title
-        },
-        {
-          property: `og:description`,
-          content: metaDescription
-        },
-        {
-          property: `og:type`,
-          content: `website`
-        },
-        {
-          name: `twitter:card`,
-          content: `summary`
-        },
-        {
-          name: `twitter:creator`,
-          content: site.siteMetadata.author
-        },
-        {
-          name: `twitter:title`,
-          content: title
-        },
-        {
-          name: `twitter:description`,
-          content: metaDescription
-        }
-      ].concat(meta)}
-    />
+    <>
+      <title>{title}</title>
+      <meta name="description" content={metaDescription} />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={metaDescription} />
+      <meta property="og:type" content="website" />
+      <meta property="twitter:card" content="summary" />
+      <meta property="twitter:creator" content={site.siteMetadata.author} />
+      <meta property="twitter:title" content={title} />
+      <meta property="twitter:description" content={metaDescription} />
+    </>
   );
 }
 
-SEO.defaultProps = {
-  meta: [],
+Seo.defaultProps = {
   description: ``
 };
 
-SEO.propTypes = {
+Seo.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
-  meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired
 };
 
-export default SEO;
+export default Seo;

example/src/pages/404.js

@@ -4,13 +4,11 @@ import {graphql} from 'gatsby';
 import React from 'react';
 import {useTranslation, Trans} from 'gatsby-plugin-react-i18next';
 import Layout from '../components/layout';
-import SEO from '../components/seo';
+import Seo from '../components/seo';
 
 const NotFoundPage = () => {
-  const {t} = useTranslation();
   return (
     <Layout>
-      <SEO title={t('404: Not found')} />
       <h1>
         <Trans>NOT FOUND</Trans>
       </h1>
@@ -21,6 +19,11 @@ const NotFoundPage = () => {
   );
 };
 
+export const Head = () => {
+  const {t} = useTranslation();
+  return <Seo title={t('404: Not found')} />;
+};
+
 export default NotFoundPage;
 
 export const query = graphql`

example/src/pages/ignored-page.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import Layout from '../components/layout';
-import SEO from '../components/seo';
+import Seo from '../components/seo';
 import {Link} from 'gatsby-plugin-react-i18next';
 
 const IgnoredPage = (props) => {
   return (
     <Layout>
-      <SEO title="Ignored page" />
       <h1>Ignored page</h1>
       <p>This page does not have language prefix</p>
       <Link to="/">Go back to the homepage</Link>
     </Layout>
   );
 };
 
+export const Head = () => <Seo title="Ignored page" />;
+
 export default IgnoredPage;

example/src/pages/index.js

@@ -5,13 +5,11 @@ import {Link, Trans, useTranslation} from 'gatsby-plugin-react-i18next';
 import {graphql, Link as GatsbyLink} from 'gatsby';
 import {StaticImage} from 'gatsby-plugin-image';
 import Layout from '../components/layout';
-import SEO from '../components/seo';
+import Seo from '../components/seo';
 
 const IndexPage = () => {
-  const {t} = useTranslation();
   return (
     <Layout>
-      <SEO title={t('Home')} />
       <h1>
         <Trans>Hi people</Trans>
       </h1>
@@ -44,6 +42,11 @@ const IndexPage = () => {
   );
 };
 
+export const Head = () => {
+  const {t} = useTranslation();
+  return <Seo title={t('Home')} />;
+};
+
 export default IndexPage;
 
 export const query = graphql`

example/src/pages/page-2.js

@@ -3,14 +3,12 @@
 import {graphql} from 'gatsby';
 import React from 'react';
 import Layout from '../components/layout';
-import SEO from '../components/seo';
+import Seo from '../components/seo';
 import {Link, useTranslation, Trans} from 'gatsby-plugin-react-i18next';
 
 const SecondPage = (props) => {
-  const {t} = useTranslation();
   return (
     <Layout>
-      <SEO title={t('Page two')} />
       <h1>
         <Trans>Page two</Trans>
       </h1>
@@ -24,6 +22,11 @@ const SecondPage = (props) => {
   );
 };
 
+export const Head = () => {
+  const {t} = useTranslation();
+  return <Seo title={t('Page two')} />;
+};
+
 export default SecondPage;
 
 export const query = graphql`