Allow translation of URLS about gatsby-plugin-intl

[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!

[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)

[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]

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 :)

[flocbit]

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

[jdahdah]

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

[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!

[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

[adiusz]

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