Change output dir for Collections based on their i18n dir name?

[madsem]

I'm integrating Netlify CMS with 11ty atm and saw that when an i18n setup is used, 11ty will build everything in the output dir as expected but for the default language of a website this then results in urls that have the locale appended/prefixed.

Is it possible to hook into the build process and change the output folder for content based on in which locale folder they are?
So for example if my _site dir contains one collection named Posts:

posts:
     - de
        - cool-post.md
     - en
        - cool-post.md

I would like everything that is in en folders to be built right into the dist folder, like so:

dist:
     - cool-post.md
     - de
        - cool-post.md

That way all urls in default language would not contain any locale, and only translations would have their respective locale.
How would I go about that?

[pdehaan]

OK, I think this might work…

I have the following file structure (where src/ are my input files, and www/ are my output files):

tree . -aI node_modules         
.
├── .eleventy.js
├── package-lock.json
├── package.json
├── src/
│   └── pages/
│       ├── de/
│       │   ├── one.md
│       │   └── three.md
│       └── en/
│           ├── en.11tydata.json
│           ├── one.md
│           ├── three.md
│           └── two.md
└── www/
    └── pages/
        ├── de/
        │   ├── one/
        │   │   └── index.html
        │   └── three/
        │       └── index.html
        ├── one/
        │   └── index.html
        ├── three/
        │   └── index.html
        └── two/
            └── index.html

12 directories, 14 files

// .eleventy.js
module.exports = (eleventyConfig) => {
  // Probably not needed, and I think this will be the new default in 11ty v1.
  eleventyConfig.setDataDeepMerge(true);

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

So really, the only interesting file is the ./src/pages/en/en.11tydata.json directory data file:

{
  "eleventyComputed": {
    "permalink": "{{ page.filePathStem | replace: '/en/', '/' }}/"
  }
}

I think the above "works" because liquidjs is the default processor, so we're actually using the LiquidJS replace filter. You would need to tweak the syntax slightly if you were using Nunjucks. I think that's controlled by dataTemplateEngine, but I could be wrong. 🤷

Or, if you want a bit more flexability, I'd probably rename it to "en.11tydata.js" (JavaScript instead of JSON w/ template strings), and do something like this:

// ./src/pages/en/en.11tydata.js
module.exports = {
  eleventyComputed: {
    permalink(data) {
      return `${data.page.filePathStem.replace("/en/", "/")}/`;
    }
  }
}

As always, could be a lot of edge cases and other issues to work around (what if you explicitly set permalink: false in a template, or something else); but it might be enough to get you started.

[pdehaan]

Poked a bit more at this, and turns out it was more complex than I expected when you start mixing permalink: false, or a specific permalink, or have a file name "index.md".

module.exports = {
  eleventyComputed: {
    permalink(data) {
      // If the page `permalink` is not defined…
      if (data.permalink === "") {
        // Remove the `/en/` path.
        const stem = data.page.filePathStem.replace("/en/", "/");
        let suffix = "/index";
        // If the current file path stem ends with "/index" (an "index.md" file, for example), set 
        // the suffix to an empty string.
        if (stem.endsWith(suffix)) suffix = "";
        return `${stem + suffix}.html`;
      }
      return data.permalink;
    },
  },
};

[madsem]

@pdehaan I've been trying this and other methods all day.
Thanks for all the effort you have been putting into helping me out here, I really appreciate that :)

In the end, I again went the default 11ty route, I realized it is possible to redirect the output just by using permalinks.
(11ty is so cool)

So all I had to do was this:

Add the language data files like _site/pages/en/en.json

With this content:
en.json

{
  "dir": "ltr",
  "locale": "en"
}

In the _sites/pages/ directory, I'll add this data file:
pages.json

{
  "layout": "layouts/page.njk",
  "permalink": "{{ locale }}/{{ page.fileSlug }}/"
}

With this content:
en.json

{
  "dir": "ltr",
  "locale": "en"
}

index.md files of locale versions get

permalink: "/{{ locale }}/"

And the index.md file in the default language (Which was the initial reason for my post, I did not want an /en appended to my home page url when it already was english and my default language).

permalink: /

11ty then builds everything into dist/<locale>/<collection> directories, the default language's index.html is located directly in the root of /dist, and the homepages of intl. versions are at the root of their locale folder.

This way I can now have the directory structure that Netlify CMS supports for i18n websites, and it's then in the build step where the site is built into the structure 11ty recommends :)