mccrodp/gatsby-starter-contentful-i18n

i18n support and language switcher for Contentful starter repo

gatsby-starter-contentful-i18n's Issues

Update README to include how to install and run

Include standard commands via npm and the gatsby related commands.

gatsby new contentful-i18n https://github.com/mccrodp/gatsby-starter-contentful-i18n

Add "Deploy to Netlify" button

https://www.netlify.com/docs/deploy-button/

Use 'proper' url structure

Was wondering if you might have an idea on how to use slugs for the urls instead of the contentful_id. The contentful_id is the common thing between two posts in different languages but the urls are rather ugly and not very SEO friendly. Is there any way to translate the slugs yet keep them "connected" using the contentful_id? I've seen a few approaches in other repos but nothing that really solves it. Mostly it's just having a json file with all the translated paths which may work for a small site but not really for site where content is added frequently.

Node ID is currently used in slug, so is split to be common over both languages

This repo currently splits the node.id string in a few locations: gatsby.node.js and the layouts / templates so that we have a common slug for the paths for both languages:

const commonId = edge.node.id.substr(0, 23)

Eg:

1. /en-US/categories/c7LAnCobuuWYSqks6wAwY2a
2. /de/categories/c7LAnCobuuWYSqks6wAwY2a

So, until a better / more unique string such as a slug comes up as available, we'll use this.

Investigate Converting TemplateWrapper to Component that extends React.Component

From Gatsby i18n plugin I've brought over the TemplateWrapper to this repo from here.

Whereas the "Using Contentful" repo uses a React.Component as shown here.

I've used the TemplateWrapper from the i18n plugin as I need to pass those arguments for the i18n strings. There's probably a way I can do this with the Component method?

Also, this method has issue as it's designed to work with the static pages, not dynamic content from a CMS that uses templates, so in that way, our dynamic content: Products and Categories that use templates do not pass the i18n strings, so I need to do a hack for them here: https://github.com/mccrodp/gatsby-contentful-i18n/blob/master/src/layouts/index.js#L21

if (i18nMessages === undefined) {
    if (langKey === 'de') {
      i18nMessages = messagesDe
    } else {
      i18nMessages = messagesEn
    }
  }

Add ui-string handling via contentful

I would love to see if it is possible to handle ui-strings translation via contenful as well, and if yes how to do so.

Content on dynamic pages reverts to id on built versions

Noticing a strange error exclusively on built/hosted versions that seems to be related to earlier issues with dynamic pages from Contentful -

To reproduce:

1. Navigate directly to the page in question, i.e.
   https://gatsby-starter-contentful-i18n.netlify.com/de/products/c5ksdbwsexy6qegucyaoacs/

2. The necessary content ("Wählen Sie Ihre Sprache") will display briefly before reverting to "selectLanguage"

The messages are getting appropriately sent to IntlProvider, but children components that have injectIntl wrappers don't seem to be getting the appropriately set locale.

Make the choice of language persistent across pages

What is happening now

When I select 'de' the content on this page changes. However, when I navigate to a different oage via the link, my language setting isn't persistent, ie I have to select what language I want for every single page.

What should happen

I should be able to select the language once and have this stay the same for me across teh entire website.

Question: Do I have to copy two versions of every page?

I see that there's an index.de.js and index.en-US.js here. The only difference seems to be in the query associated with each file (as was the original).

Just wondering if there was a way to consolidate into one file and minimizing the need to copy/paste across two files.

Installation problems

I have installed with
"gatsby new project https://github.com/mccrodp/gatsby-starter-contentful-i18n.git"
but it runs in to problems:

UNMET PEER DEPENDENCY for:

react@^16.4.2
react-dom@^16.4.2

and warnings:

[email protected] requires a peer of react@^0.14.0 || ^15.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@^16.4.2 but none was installed.
npm WARN [email protected] requires a peer of react-dom@^16.4.2 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.9 || ^15.0.0 || ^16.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none was installed.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 || ^16.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@^15.0.0 || ^16.0.0 but none was installed.
npm WARN @reach/[email protected] requires a peer of [email protected] || 16.x || 16.4.0-alpha.0911da3 but none was installed.
npm WARN @reach/[email protected] requires a peer of [email protected] || 16.x || 16.4.0-alpha.0911da3 but none was installed.
npm WARN [email protected] requires a peer of react@^0.14.0 || ^15.0.0 || ^16.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@>=15.0.0 but none was installed.
npm WARN [email protected] requires a peer of react@^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0 but none was installed.

do we have to install everything one by one? Is there a quick way to solve this?

Thanks for help.