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

LekoArts · 2020-07-24T09:01:43Z

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:

The text was updated successfully, but these errors were encountered:

GGrassiant · 2020-07-30T01:21:37Z

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 · 2020-07-30T22:05:15Z

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 · 2020-07-31T07:39:58Z

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.

Type definitions would definitely be a nice touch, would be interested on working on those?
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 · 2020-07-31T15:54:12Z

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 · 2020-08-03T21:45:21Z

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 · 2020-08-04T07:17:37Z

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 · 2020-08-04T12:16:32Z

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 · 2020-08-12T08:18:41Z

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 · 2020-08-13T07:11:18Z

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

wirths · 2020-08-13T07:37:14Z

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 · 2020-08-13T09:33:55Z

@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 · 2020-08-13T12:36:59Z

@tmskrtsz Thank you!

philschonholzer · 2020-09-02T18:02:33Z

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 · 2020-09-02T18:19:16Z

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 · 2020-09-02T18:26:51Z

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 · 2020-09-03T07:08:07Z

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

LekoArts · 2020-09-03T07:46:38Z

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

tmskrtsz · 2020-09-11T10:53:22Z

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 · 2020-09-14T12:55:56Z

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 · 2020-09-15T10:41:17Z

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

pzerelles · 2020-10-01T11:26:34Z

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

jaworek · 2020-11-19T23:32:17Z

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 · 2020-11-20T09:42:48Z

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 · 2020-11-20T21:53:05Z

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

jaworek · 2020-11-20T21:55:09Z

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

onurtahmaz · 2020-11-28T10:45:53Z

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 · 2020-12-02T14:30:50Z

Is this theme still maintained?

nikobenho · 2020-12-10T18:56:09Z

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 · 2021-01-26T16:23:30Z

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.

msallent mentioned this issue Aug 4, 2020

feat(gatsby-theme-i18n): Support localized 404 pages #55

Merged

LekoArts mentioned this issue Sep 3, 2020

How to use navigate from gatsby with i18n? #66

Closed

LekoArts mentioned this issue Sep 15, 2020

Blank or 404 page for urls prefixed with default locale #63

Closed

LekoArts closed this as completed Apr 20, 2021

gatsbyjs locked and limited conversation to collaborators Apr 20, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

This issue was moved to a discussion.

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

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

LekoArts commented Jul 24, 2020 •

edited

Loading

GGrassiant commented Jul 30, 2020 •

edited

Loading

GGrassiant commented Jul 30, 2020

LekoArts commented Jul 31, 2020

GGrassiant commented Jul 31, 2020

msallent commented Aug 3, 2020

LekoArts commented Aug 4, 2020

GGrassiant commented Aug 4, 2020

tmskrtsz commented Aug 12, 2020 •

edited

Loading

LekoArts commented Aug 13, 2020

wirths commented Aug 13, 2020

tmskrtsz commented Aug 13, 2020

wirths commented Aug 13, 2020

philschonholzer commented Sep 2, 2020

philschonholzer commented Sep 2, 2020

philschonholzer commented Sep 2, 2020 •

edited

Loading

tmskrtsz commented Sep 3, 2020

LekoArts commented Sep 3, 2020

tmskrtsz commented Sep 11, 2020

LekoArts commented Sep 14, 2020 •

edited

Loading

LekoArts commented Sep 15, 2020

pzerelles commented Oct 1, 2020

jaworek commented Nov 19, 2020

jaworek commented Nov 20, 2020

jaworek commented Nov 20, 2020

jaworek commented Nov 20, 2020

onurtahmaz commented Nov 28, 2020 •

edited

Loading

onurtahmaz commented Dec 2, 2020

nikobenho commented Dec 10, 2020

eneax commented Jan 26, 2021

This issue was moved to a discussion.

This issue was moved to a discussion.

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

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

Comments

LekoArts commented Jul 24, 2020 • edited Loading

GGrassiant commented Jul 30, 2020 • edited Loading

GGrassiant commented Jul 30, 2020

LekoArts commented Jul 31, 2020

GGrassiant commented Jul 31, 2020

msallent commented Aug 3, 2020

LekoArts commented Aug 4, 2020

GGrassiant commented Aug 4, 2020

tmskrtsz commented Aug 12, 2020 • edited Loading

LekoArts commented Aug 13, 2020

wirths commented Aug 13, 2020

tmskrtsz commented Aug 13, 2020

wirths commented Aug 13, 2020

philschonholzer commented Sep 2, 2020

philschonholzer commented Sep 2, 2020

philschonholzer commented Sep 2, 2020 • edited Loading

tmskrtsz commented Sep 3, 2020

LekoArts commented Sep 3, 2020

tmskrtsz commented Sep 11, 2020

LekoArts commented Sep 14, 2020 • edited Loading

LekoArts commented Sep 15, 2020

pzerelles commented Oct 1, 2020

jaworek commented Nov 19, 2020

jaworek commented Nov 20, 2020

jaworek commented Nov 20, 2020

jaworek commented Nov 20, 2020

onurtahmaz commented Nov 28, 2020 • edited Loading

onurtahmaz commented Dec 2, 2020

nikobenho commented Dec 10, 2020

eneax commented Jan 26, 2021

This issue was moved to a discussion.

LekoArts commented Jul 24, 2020 •

edited

Loading

GGrassiant commented Jul 30, 2020 •

edited

Loading

tmskrtsz commented Aug 12, 2020 •

edited

Loading

philschonholzer commented Sep 2, 2020 •

edited

Loading

LekoArts commented Sep 14, 2020 •

edited

Loading

onurtahmaz commented Nov 28, 2020 •

edited

Loading