Use 'proper' url structure

[MartinConde]

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.

[mccrodp]

Hey @MartinConde, thanks for using this starter. There sure is, you just create a "Slug" field in Contentful and use that in your gatsby.node.js file. This starter just uses the contentful_id as I do not have access to the source CMS 😄 It uses the same one as the regular Contentful demo for consistency.

Hope this helps: https://github.com/ahimsayogajp/ahimsayoga-gatsby/blob/master/gatsby-node.js#L49

[MartinConde]

Hi thank you for creating the starter ;)

That's what I did but forgot that I had localized the slug field as well that's why the language switcher didn't work.

Hope you don't mind me throwing in my "feature wishes" for this starter in here. Really only one thing that would make it perfect for me:

Localized urls and if possible even localized slugs although I guess the latter one will be quite tricky. Will play around with https://www.gatsbyjs.org/packages/gatsby-plugin-intl-url/ a bit see if I can get something working but I'm pretty sure your solution would be more robust than mine haha.

EDIT
Tried integrating the gatsby-plugin-intl-url package but it's beyond my knowledge as there is duplicate functionality and I end up with routes having double locales like site.com/en/en/about.

However I found a way which I am sure is not very elegant but seems to create the correct routes:

I have a content type Animal, to which I added a textfield "route" and enabled localization on it.
Then in gatsby-node.js I just added it to the path

...
const animalroute = edge.node.route
...
path: /${edge.node.node_locale}/${animalroute}/${edge.node.slug},
...

When I check allSitePage in the GraphiQl it does indeed generate the correct routes :) Now I only gotta figure out how to make a different lang switcher for those pages.

[mccrodp]

Ahh, interesting use case. That's one for upstream and not for this starter though. I suggest you open a ticket on how to achieve slug localisation in https://github.com/angeloocana/gatsby-plugin-i18n and see if you can get any insights there. All the best. Closing this but feel free to reopen if there's anything specific remaining on this starter.