☂ [Umbrella] gatsby-theme-i18n & child-themes

[LekoArts]

Hello!

If you want to try out gatsby-theme-i18n or its child themes -- this is the place to ask questions, report bugs, suggest ideas, collaborate on improvements, and get notified about updates. Alternatively you can also join the Gatsby Discord server.

---

Quick links:

• Research blog post
• Announcement blog post

[GGrassiant]

Hi!

I am building my portfolio with Gatsby and TypeScript and initially used gatsby-plugin-i18n but gatsby-theme-i18n is an amazing tool that avoids duplicating pages. Plus the utils like the LocalizedLink or to access the locale are super useful. Great job!
I deployed to Heroku the boilerplate and I had. No issue whatsoever, it works perfectly, really amazing theme.

I have 2 questions. Since I am still pretty new to web development, sorry in advance if it's too obvious or not suited for this thread:

• Are there any @defs available for the package or will there be soon? So far I created a i18n.d.ts with declare module 'gatsby-theme-i18n'; in it but was wondering if I could npm install the type definitions instead

• I would like to use Jest and react-testing-library to add code coverage to my CI. Since integrating the theme I have a very common error with Jest
  Jest encountered an unexpected token
  [...]
  node_modules/gatsby-theme-i18n/index.js:1 export { LocaleContext, LocaleProvider } from "./src/context" ^^^^^^

Usually you solve it by tweaking the transformIgnorePatterns section of the config but I could not figure out how to do it. I tried stuff like
transformIgnorePatterns: ['node_modules/(?!(gatsby)/)', 'node_modules/(?!(gatsby-theme-i18n)/)' ], but to no avail.
Do you have any idea how I could do that?

Thanks in advance and again, great job on this theme.

My config:module.exports = {
  transform: {
    '^.+\\.[jt]sx?$': '<rootDir>/jest-preprocess.js',
  },
  moduleNameMapper: {
    '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/file-mock.js',
  },
  testPathIgnorePatterns: [
    'node_modules',
    '\\.cache',
    '<rootDir>.*/public',
    'src/components/__tests__/utils/test-utils.js',
  ],
  transformIgnorePatterns: ['node_modules/(?!(gatsby)/)'],
  globals: {
    __PATH_PREFIX__: '',
  },
  testURL: 'http://localhost',
  setupFiles: ['<rootDir>/loadershim.js'],
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },
};

 "dependencies": {
    "@types/styled-components": "^5.1.1",
    "babel-plugin-styled-components": "^1.10.7",
    "dotenv": "^8.2.0",
    "gatsby": "^2.24.13",
    "gatsby-image": "^2.4.14",
    "gatsby-plugin-i18n": "^1.0.1",
    "gatsby-plugin-manifest": "^2.4.21",
    "gatsby-plugin-offline": "^3.2.21",
    "gatsby-plugin-react-helmet": "^3.3.6",
    "gatsby-plugin-sass": "^2.3.12",
    "gatsby-plugin-sharp": "^2.6.14",
    "gatsby-plugin-styled-components": "^3.3.10",
    "gatsby-theme-i18n-react-intl": "^1.0.2",
    "gatsby-theme-i18n": "^1.0.2",
    "gatsby-source-filesystem": "^2.3.23",
    "gatsby-source-contentful": "^2.3.33",
    "gatsby-transformer-sharp": "^2.5.7",
    "node-sass": "^4.14.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "react-intl": "^5.4.2",
    "styled-components": "^5.1.1",
    "babel-jest": "^26.1.0",
    "@testing-library/jest-dom": "^5.11.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.7.1",
    "@typescript-eslint/parser": "^3.7.1",
    "@testing-library/react": "^10.4.7",
    "babel-eslint": "^10.1.0",
    "babel-preset-gatsby": "^0.5.4",
    "eslint": "^7.5.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.4",
    "gatsby-plugin-eslint": "^2.0.8",
    "husky": "^4.2.5",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.1.0",
    "lint-staged": "^10.2.11",
    "prettier": "2.0.5",
    "react-test-renderer": "^16.13.1",
    "typescript": "^3.9.7",
    "typescript-plugin-css-modules": "^2.4.0"
  },

[GGrassiant]

FYI if someone has a similar issue, I sorta made it work by doing transformIgnorePatterns: ['node_modules/(?!(gatsby-theme-i18n)/)']
but still have an issue with Jest as I mentioned here

[LekoArts]

Hi Guillaume, glad to hear that the theme itself works well for you!
No worries, feel free to ask those questions here, I'll do my best to answer them.

1. Type definitions would definitely be a nice touch, would be interested on working on those?
2. You'll need to mock the response from the useStaticQuery of the useLocalization hook. Here's a good short article: https://florian.ec/blog/mock-gatsby-usestaticquery-jest/
   (Or SO issue: https://stackoverflow.com/questions/60873405/how-to-test-a-gatsby-page-containing-components-with-multiple-static-queries)

This way the themeI18N will return something then.

[GGrassiant]

This is awesome! Thanks a lot, it worked! :)
I documented the solution in the stack overflow thread is anybody has the same issue.

For the Type definitions, I would be very interested in participating but I am pretty new to TypeScript and have never done that (i usually just install them for Typescript to be happy ah ah 😄 ) so I am not sure exactly how to contribute.

[msallent]

Hi! Thanks for these themes, they are really great. I have an issue though, or maybe a question, but how does localization work on the 404 page? I built and served my project but after going to a non existing route under a language I still get the english (default locale) text.

const NotFound: FunctionComponent = () => {
  const { t } = useTranslation('404');

  return <div>Error 404 - {t('notFound')}</div>;
};

Going to http://localhost:9000/es/testing which does not exist, shows "Error 404 - Page not Found", which is the value for the english translation.

Is this intended? How should it work? Thank you.

[LekoArts]

For the Type definitions, I would be very interested in participating but I am pretty new to TypeScript and have never done that (i usually just install them for Typescript to be happy ah ah 😄 ) so I am not sure exactly how to contribute.

This would be a index.d.ts file at the root of https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n, like we have in our main Gatsby repository: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/index.d.ts

---

Hi @msallent 👋
I think this doc might help you: https://www.gatsbyjs.org/docs/creating-prefixed-404-pages-for-different-languages/

Until I have time to add that to the theme itself this should unblock you :) (Or feel free to send in a PR yourself which would be much appreciated!)

[GGrassiant]

This would be a index.d.ts file at the root of https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-i18n, like we have in our main Gatsby repository: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/index.d.ts

Thanks @LekoArts ! Awesome I will give it a try :)

[tmskrtsz]

Hey, is there an option to prefix the default language in the path? I.e. /en/
EDIT: I added a step in gatsby-node.js to find all english pages and prepend them with the url.

[LekoArts]

Hey! 👋 I'm currently on vacation for two weeks, I'll get back to any questions after that 😊

[wirths]

Hey, is there an option to prefix the default language in the path? I.e. /en/
EDIT: I added a step in gatsby-node.js to find all english pages and prepend them with the url.

Hi @tmskrtsz, would you mind to post or DM the mentioned code snippet? Very much appreciated. @LekoArts Are you planning to add an option to allow a prefix for the default language? Thank you

[tmskrtsz]

@wirths sure thing, the gist of it is this:

exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions

  if (page.context.locale === 'en') {
    deletePage(page)
    createPage({
      ...page,
      path: `/en${ page.path }`
   })
  }
}

[wirths]

@tmskrtsz Thank you!

[philschonholzer]

Sorry, have just seen this umbrella issue.

If the default locale would also be prefixed using navigate from gatsby would be easy:

navigate(`/${locale}/page-3`)

But because the default is not prefixed:

navigate(`/${locale === defaultLang ? `` : `${locale}/`}page-3`)

Is there a better way? Can you maybe provide a helper for this?

[philschonholzer]

Is it possible that a redirect based on the browser locale is not supported? In my tests I was never redirected to the matching route.

[philschonholzer]

I'm now also trying to get prefixed for the default language, because it make a lot of things easier, but @tmskrtsz @wirths what did you you do about LocalizedLink? Are you just using Link and add locale manually?

[tmskrtsz]

I extended LocalizedLink in a new component where I check for the defaultLang locale and add the proper strings to the path.

[LekoArts]

Hi! Getting back up to speed again and will look into these things :)

[tmskrtsz]

Once feature that is stuck in PR in gatsby-plugin-intl is localized slugs. I had an ugly workaround set up with one website I made using it but it was not elegant. It would be great to have that information in the context of a page or some other similar solution that makes pages "aware" of other versions.

[LekoArts]

Ok, so a bit of an update:

• With gatsby-theme-i18n@1.0.3 I merged feat(gatsby-theme-i18n): Support localized 404 pages #55
• With gatsby-theme-i18n@1.0.4 I merged feat(gatsby-theme-i18n): Localized matchPath & LocalizedRouter #64

Next thing on my list:

• Add option to also prefix with the default language

This should help with the page creation, navigate() and <LocalizedLink />

[LekoArts]

@wirths @philschonholzer @tmskrtsz Please have a look at #75 and try out the canary release 1.0.5-defaultprefix :)

[pzerelles]

Is there a way to translate the whole page url when creating localized pages?

[jaworek]

I'm trying to build a language selector that is working on every subpage but is reused in the menu. It is quite easy to switch from default language (English) to other language (Polish). Setting it up the other way seems to be a bit tricky.
Does anyone have an idea how to simplify it? I feel like I'm trying to make it too complex.

[jaworek]

I noticed that useLocalization() hook is missing description and use of fields and function it returns. LocalizedLink is also missing description of props it accepts.
It would be useful to have it in the documentation.

[jaworek]

I found solution to language switcher on Discord channel about this theme.
https://discord.com/channels/484383807575687178/727457650480119880/738325988194254870

[jaworek]

Is it possible to use language detector with this theme or is it not implemented yet?
https://github.com/i18next/i18next-browser-languageDetector

[onurtahmaz]

Hey,

I've come across this problem while implementing gatsby-theme-i18 to a website I've been working on:

I use particles.js library in the layout component and the default locale is English. However, when I switch to Turkish, the particles component vanishes. When I switch back to English, I see the particles component again. I cannot make it work for the other language. I even couldn't find a connection between particles.js and gatsby-theme-i18.

Any help would be much obliged!

Here is the part including the particles component:

[onurtahmaz]

Is this theme still maintained?

[nikobenho]

Once feature that is stuck in PR in gatsby-plugin-intl is localized slugs. I had an ugly workaround set up with one website I made using it but it was not elegant. It would be great to have that information in the context of a page or some other similar solution that makes pages "aware" of other versions.

Same case for me, I ended up implementing a hacky fix for my specific use-case (translate slugs both for mdx/blog posts & regular pages...). It would be awesome if a solution for translation of urls could be implemented in this theme at some point, since that other library is not maintained anymore.

[eneax]

Hi everyone!

I'm working on translating a corporate website, and I'm using gatsby-theme-i18n with the child theme gatsby-theme-i18n-react-intl. Both of these themes are working well so far, and I have been able to translate all MDX content.

However, I was wondering if there is a way to have per-component translations.
Instead of two files like de.json and en.json, which can get very large, is it possible to have multiple JSON files, like navbar.json, footer.json and so on?

Thanks in advance and congrats on the incredible work on this theme.

[olivier-lacroix]

Hello!

@LekoArts , I have created 4 issues & associated PRs for gatsby-theme-i18n fixing 1 bug and adding some features (useful to me):

• fix incorrect alternate links generated when prefixDefault is true (PR Prefix alternate links based on theme option #127 )
• add the locale and isDefault fields to MarkdownRemark nodes as well, and set isDefault to true also when the filename contains the default lang code (PR Set isDefault to true when defaultLang is in filename #132 , PR Add locale fields to MardownRemark nodes #130 )
• allow limiting the generation of localized pages to a subset of pages based on RegExps, with automatic fallback to defaultLang in localizedPath (PR feat(theme-i18n) Allow localization of a subset of pages for individual locales #133 )

I hope this could be useful to others as well, and am keen to get your eyes on these. And hopefully get these PR merged :-)