WIP feat: Implement slug solution

[Jno21]

feat: Implement slug solution to rename your URLs depending of the language

This feature will allow users to be able to change the url name depending of the language use.

Example:

• /en/about
• /fr/a-propos

How to use it ?

Imagine some pages:

pages/
  - index.js
  - features.js
  - about.js

Create or modify your language ressource file example: src/int/fr.json

{
  "features": {
    "slug": "fonctionnalites" 
  },
  "about": {
    "slug": "a-propos"
  }
}

And use your link like usual:

import { Link } from "gatsby-plugin-intl"

const MyLinks = () => (
          <Link to="/features">
          <Link to="/about">
);

export default MyLinks

What's missing

The Object slugs containing all the differents slug by language on the current page is not accesible via useIntl().

It should be accesible via context tho.

TODO

In another PR I will try to see if I can modify the wrapper to inject directly in the

the good alternate link for SEO purpose.

So this is a WIP, it needs to be tested correctly.

So test it, and come back to me if there is a bug / problem related to this implementation, when everything is validated that would be a great feature to this product !

[Jno21]

#33

[rekuenkdr]

Hi, I've tested and so far it works great, something I've noticed is that on the translated url the last trailing slash is missing while in the original remains. Thanks!

[adiusz]

hey @Jno21, good job! Since the creator of the plugins seems to be permanent offline, have you considered creating your own version of this plugin with this slug functionality? It would be really awesome to easily implement this feature!

[Jno21]

Hi,

Well you can technically use my branch as plugin. I am going to do a README.md when I have a little time to explain how to do everything :)

[adiusz]

I could, but I'm little confused how to implement it, so it would be awesome if you put some informations in README.md :) Please let us know when you do it :D

[gregoryforel]

Hi, I've tested and so far it works great, something I've noticed is that on the translated url the last trailing slash is missing while in the original remains. Thanks!

Would you mind sharing how you implemented it? I'm struggling so far. Thank you!

[Jno21]

Hey, sorry didn't have much time so far. I will try to update my branch as soon as I can with everything.

Here a fast explanation on how to install it: https://gist.github.com/Jno21/0c641cd2e009b2f994823598b77e0366

Keep me update if it is good for you.

[gregoryforel]

Thanks @Jno21

It works perfectly. I had not realized that I also had to create a "pricing": { "slug": "precios" } in my es.json file.

Thanks again!

[KajBialas]

@Jno21 - your solution isn't working for nested routes, eg: /about/teams :)

[Jno21]

Hi ! It has been a while and I am currently not working anymore on this project. For those who still want to use this feature I published it to make things easier: https://www.gatsbyjs.com/plugins/@jno21/gatsby-plugin-intl/?=@jno21/gatsby-plugin-intl

For the nested routes, I have no clue since it has been 2 years. Unfortunately I don't think I will have time to patch this and it seems that this project has not been active since a while.

Is there other alternative nowadays ?