Allow translation of URLS

[kuus]

Hi @wiziple, thanks for this nice plugin. I was wondering if you plan to add url slug's translations too, which is a feature I haven't seen yet in the various gatsby i18n plugins.
So, to make it more clear, I mean if you plan to allow this:

en/about
it/chi-siamo (instead of it/about)

same page with two different slugs.
I guess is not easy to manage the link routing, but I think it's possible to build a sort of routes map during the createPages step and pass it to the pages inside the intl context. The link component can then use the to prop as a key that would match this routes map.
Some super pseudo code:

in src/pages/about/index.en.md

url: /about

in src/pages/about/index.it.md

url: /chi-siamo

Then we would have a routes map in page contexts like:

intl = {
  ...,
  routes: {
    'about': {
      en: '/about',
      it: '/chi-siamo'
    }
  }
}

And the Link component would do

intl => (
  Link = ({ to, ... }) => {
    const toRoute = intl.routes[to][intl.language]
  }

I am curious to see what you think of this approach or if you have any other idea in this regard.
Let me know if all this is a bit unclear!

[flocbit]

I'd be very happy to see this feature implemented! Thanks @kuus for your suggestion :)

[mattez]

I'm noob in Gatsby world. I don't understand how the entire Gatsby community can live without robust standardized way to localize their webapps.
There are many competitive Gatsby Plugins which trying to solve i18n / l10n. And every have some limitations. In this case is no clear way, how to translate slugs.

I'd be also very happy to see this feature implemented!

[jdahdah]

Has anyone figured out a working implementation of this feature yet, by any chance?

[rekuenkdr]

Any news on this matter? all the SEO marketing from Gatsby means nothing if your URLs look the same in different languages.

I hope this feature will be taken into consideration too.

[Jno21]

I let you guys check the solution and give me feedback :)

[kije]

It would also be great if there is some way to define the localized urls for dynmically/programatically generated pages (E.g. when creating pages via the createPages() hook with actions.createPage() in gatsby-node.js).

This is useful, if you don't have the content of your pages stored as local files (.md, etc...), but generate pages from another data source, for example a cms, that already manages the URLs of the pages.

Here a small example how this could look

/// gatsby-node.js
// ...
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    query DynamicPages {
      someQuery {
        pages {
          id
          urls {
            en
            de
            it
          }
        }
      }
    }
  `);

  result.someQuery.pages.forEach((page) => {
    createPage({
      path: page.urls.en, // e.g. "/about"
      component: path.resolve(`./src/templates/page.jsx`),
      context: {
        intlLocalizedUrls: {
          en: page.urls.en, // e.g. "/about"
          de: page.urls.de, // e.g. "/ueber-uns"
          it: page.urls.it, // e.g. "/chi-siamo"
        }
      },
    });
  });
};
// ...

If possible, it would also be great then if the to prop of the <Link /> component could handle the default page path (e.g. <Link to="/about" />) as well as the localized paths (e.g. <Link to="/ueber-uns" />)

[rekuenkdr]

I let you guys check the solution and give me feedback :)

Hi @Jno21, I've tested your solution and is working great, apart from the missing trailing slash on the translated url and the few points you already have covered in the to-dos.

Thanks.

[GenisDiaz]

@Jno21 your code looks pretty well! I'm really excited to have it in my project!

[sdegetaus]

I am also looking forward having this in the official plugin!

[Jno21]

Hello guys ! Thank you for the support.

I am currently trying to make a wrapper that will automatically add the <link rel="alternate" hreflang="lang_code"... > in every page for SEO purpose.

I did a PoC, outside the plugin that seems to work. I will try to add it directly in the plugin as soon as possible and it will be done :)

[Jno21]

Hi guys, some news, so I didn't have time to make a proper implementation of the <link rel="alternate" hreflang="lang_code"... > but I know how you can make it work for your pages.

Somebody asked if they could use my version directly instead of this plugin (because the PR is not merged), so what I am going to do is to edit the README in my code too to make it easier to explain how to do the alternate link and how to make it work with slugs.

(For those interested I also implemented a solution, for this plugin, if you have a CMS that include translated page already, like wordpress)

[gregoryforel]

Hi @Jno21 ,
Thanks very much for taking the time to improve this plugin. I tried to use your branch but I could not make it work so far. Could you please tell me if I'm doing something wrong? Thanks in advance.

I installed your branch: yarn add -D git://github.com/Jno21/gatsby-plugin-intl.git#4cac8ce
en.json looks like this:

{
    "header": {       
        "pricing": {
            "label": "Pricing",
            "slug": "pricing"
        }
    }
}

es.json:

{
    "header": {       
        "pricing": {
            "label": "Precios",
            "slug": "precios"
        }
    }
}

and in my code:

<Link
    to={`/${intl.formatMessage({
        id: 'header.pricing.slug',
    })}`}
>
    Pricing
</Link>

I have also tried with id: 'header.pricing as per your example here

[Jno21]

Hi ! Thanks for trying my feature @gregoryforel.

So the problem come from the implementation behind, I do not support multiple level in json.

If your page is pricing.js and you want to be able to use slug on it you need to do this:

en.json:

{
  "pricing": {
    "label": "Pricing",
    "slug": "pricing" 
}

es.json:

{
  "pricing": {
    "label": "Precios",
    "slug": "precios" 
}

In the code you need to let the normal link to the page (for example if your page is name pricing.js):

<Link
    to=/pricing
>
   Pricing
</Link>

I hope that solve your problem, if I am not clear do not hesitate to ask any other question :)

[adiusz]

@Jno21 it works perfectly <3 thank you very much!