Permalink from parsed fileSlug

[madsem]

I'm using the Netlify CMS in i18n mode.

The problem is when trying to manage a multi-lingual homepage, the files are saved as <slug>.<locale>.<ext>
To not have these ugly homepage links and also to enable Netlify redirects for homepage I want to create predictable slugs for my homepage language versions.

I save everything under site/home in the above format and would now like to use permalinks that are build from only the <locale> part....

How can I do this in my home.11tydata.js file?

module.exports = {
  seo: {
    robots: "all",
    include_sitemap: true,
  },
  layout: "landing",
  permalink: "{{ slug or page.fileSlug }}/",
};

I guess the permalink: needs a function that handles this, but my Node knowledge here ain't enough ;)

[madsem]

Actually, this was super easy once I wrapped my head around the eleventyComputed... :)

module.exports = {
  seo: {
    robots: "all",
    include_sitemap: true,
  },
  layout: "landing",
  eleventyComputed: {
    permalink(data) {

      // remove the title/slug from file name for homepage, 
      // leave only locale.html for cleaner permalinks
      return `${data.page.fileSlug.split(".")[1]}.html`;
    },
  },
};

[pdehaan]

If I'm understanding correctly this will create files like en.html and ru.html for the homepage instead of home.en.html and home.ru.html. It might also be interesting to add console.log(data) in your permalink() method to see if there is anything setting a locale property or something so you don't need to try doing a string .split().

I really like your eleventyComputed approach. You could also add an if statement in there to check the locale and conditionally have the /index.html show your default/preferred locale and then the translated pages be /ru.html and /de.html, or whatever.

And I don't think either of these options is any better than what you have now with .split(".")[1]:

const [_slug, locale, ext] = data.page.fileSlug.split(".");
console.log(`a: ${locale}.${ext}`); // "ru.html"

const [_slug, ...rest] = data.page.fileSlug.split(".");
console.log(`b: ${rest.join(".")}`); // "ru.html"


const [_input, localeExt] = data.page.fileSlug.match(/^.*?\.(.*)$/);
console.log(`c: ${localeExt}`); // "ru.html"

[madsem]

thanks @pdehaan i love the suggestion to use index.html for my default language!

That will make everything cleaner and I also have the cms admin under /admin not /en/admin, and I also won't have to use a netlify redirect...

[madsem]

I leave that here for someone else, I've changed the locales to actual country names because this is a requirement for the project I am working on (One page per country, not per language).

But it works the same with locales like en or en-GB etc.
Also I hardcoded the default locale but that could easily be made dynamic. :)

eleventyComputed: {
    permalink(data) {
      // change homepage file slugs from <slug>.<locale>.<ext>,
      // to leave only locale so we have clean homepage permalinks like: germany/, spain/ etc.
      // Default country (usa) is changed to index.html so homepage will be "/".

      const [_slug, locale, ext] = data.page.fileSlug.split(".");
      const new_slug = locale === "usa" ? "/" : locale + "/";

      return new_slug;
    },