Skip to content
This repository has been archived by the owner on Sep 18, 2020. It is now read-only.

Simple question #2

Open
rogorido opened this issue Dec 11, 2019 · 7 comments
Open

Simple question #2

rogorido opened this issue Dec 11, 2019 · 7 comments

Comments

@rogorido
Copy link

Thank you for your example. I am a beginner and I'm trying to also have the pages in src/pages in several languages.
If I try your solution, gatsby-mdx (BTW: is deprecated in favor of gatsby-plugin-mdx) converts all mdx files into pages (and there is as far as I see no way to prevent this) so that I get an error about 'page about/ already exists, etc'.

Which method would you recommend?

@kalinchernev
Copy link
Owner

kalinchernev commented Dec 11, 2019 via email

@rogorido
Copy link
Author

thanks for your answer.

I think (as a complete beginner with react, etc.) I understand the general approach of your solution of using createPage, etc. I think I have more problems with the general framework: using context, i18next, etc. That means, I'm trying to understand your code in withI18next, etc.

Above all because I want to get rid of gatsby-plugin-layout, but I do not know how to do it, preserving the instantiation of i18next, etc. But, as I said, it is more a general problem of my understanding of react components as with your code.

@kalinchernev
Copy link
Owner

kalinchernev commented Dec 12, 2019

withI18next is so called higher order component (HOC) In the sample project here, as well as other community projects, the idea is to have a place where i18next framework is setup (instantiated).

I also had some difficulties wrapping my head around i18next, it's a big project by itself. it's worth spending some time with the documentation though - it's a solid project with good conventions and the time investment won't be lost if you decide to use it in other frameworks.

If you remove gatsby-plugin-layout you will switch to "vanilla" Gatsby.js. Here are the documentation pages: https://www.gatsbyjs.org/docs/layout-components/

In most generic way of thinking:

  • think about a place where you instantiate i18next
  • think about the way you want to feed translations resources (there are ways to do it server-side with plugins, but it's not super easy)
  • think about binding the event of switching a language to changing the language context in terms of i18next.changeLanguage()

There are many examples of using i18next with client-only translations which are easier to setup.

@rogorido
Copy link
Author

perfect! Thanks a lot for your comments (and for the idea in the article). I managed to have my about pagese in src/pages using md files (not mdx) and using your approach. I will try to understand the idea behind i18next (I'm not a developer, just a historian...). But thanks again!

@rogorido
Copy link
Author

Sorry for asking again, but what is the reason you do not use in your code?

import { initReactI18next } from 'react-i18next';

As far as I see, it seems to be important?
https://react.i18next.com/latest/using-with-hooks

@kalinchernev
Copy link
Owner

kalinchernev commented Dec 12, 2019 via email

@rogorido
Copy link
Author

ok, thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants