Can a single template be output as multiple files for i18n?

[bkjohnson]

I've seen that the recommended way of having an 11ty site with i18n support is to have a directory structure like this:

.
└── src
    ├── de
    │   └── about.liquid
    ├── en
    │   └── about.liquid
    └── es
        └── about.liquid

And then you end up with a build output like this:

dist
├── de
│   └── about
│       └── index.html
├── en
│   └── about
│       └── index.html
└── es
    └── about
        └── index.html

But if I have a site where the page structure between languages is all the same and only the text content differs, keeping multiple files in sync seems like it could be a chore. With currently available configuration options or a custom plugin, would it be possible to have source like the following that creates the same build output as above? In other words, generate multiple localized output files from a single template?

.
└── src
    └── about.liquid

about.liquid

---
languages:
  - en
  - es
  - de
---

<h1>{{ 'about_page_heading' | i18n }}</h1>

<div>{{ 'about_page_content' | i18n }}</div>

.eleventy.js

module.exports = function(eleventyConfig) {
  eleventyConfig.addAsyncFilter("i18n", async function(value) {
    // Fetch translated value from data file using key and page.lang
  });
};

[bkjohnson]

I've figured out a workaround for this by using eleventy's before hook. I may end up putting together a starter template that's more refined, but here is the gist of what my configuration looks like:

const { EleventyI18nPlugin } = require("@11ty/eleventy");
const fs = require('fs-extra');
const glob = require('glob');

module.exports = function(eleventyConfig) {
  // Add src/es/**/*.html to .gitignore since they are copies
  // Make sure eleventy still uses them in build
  eleventyConfig.setUseGitIgnore(false);
  eleventyConfig.addPlugin(EleventyI18nPlugin, {
    defaultLanguage: "en",
  });

  eleventyConfig.on('eleventy.before',
    async () => {
      // Find all templates from the "main" language directory
      glob("src/en/**/*.html", null, (err, files) => {
        files.forEach(filename => {
          // Copy each of them into template directories for other languages
          fs.copy(filename, filename.replace('en', 'es'))
        })
      })
    }
  );

  return {
    dir: {
      input: 'src',
      output: 'dist'
    },
  };
};

It assumes that your templates are already using keys that get passed to a filter which does the actual translation.