Further i8n thoughts (on localized URLs)

[Wolfr]

So... what if we had real i8n support?

If you use the following code in a template you'll get all entries in the pages object back, powered by directory-tree.

    .c-content
      div(style="display: flex;")
        pre #{JSON.stringify(pages[0], null, 1)}
        pre #{JSON.stringify(pages[1], null, 1)}

In the project I took the screenshot from we are using the i8n solution as described in https://bedrockapp.org/2021/06/17/implementing-multi-language-prototypes-in-bedrock/ .

Now I am thinking of taking this a step further.

What if instead of 2 folders en and nl, we have a folder called [lang]. The first folder [lang] is a special one.

The pug compiller will read a file called active-languages.js:

const activeLanguages = ['nl','en'];

module.exports = activeLanguages;

The content in content/[lang] will be generated for every entry in activeLanguages. A variable activeLanguage will be exposed to be used (e.g. for language switchers).

Then every subfolder below [lang] that has a brackets notation, will serve as the reference for localized URLs.

E.g. imagine [lang]/[about]/index.pug to be your setup. English is your base language.

Now in another file we cross-reference about to over-ons:

const localizedURLs = [
  {
    name: 'about',
    localisations: [
       'nl': 'over-ons'
    ]
  }
]

module.exports = localizedURLs

An intermediate script will be necessary to generate a 2nd temporary folder with the non-base language(s), so that pug can use all those file to eventually render out the HTML.

The script would turn the one folder with [lang]/[about] into two folders (because of 2 activeLanguages) and cross reference any localized URLSs by looping over the entries.

For string translation, a similar method as was described in the blog post can still be used.

Piece one of the puzzle is to have a dynamic path in a URL that can be transformed within the gulp workflow. We are already ignoring folders with an _. Can we somehow insert a dynamic variable into a pathname?

Current function to render content (shortened for brevity)

    content() {
      const templateFilter = filter(function (file) {
        const folderNameInTemplates = file.path.replace(process.cwd(), '').replace('/content/templates/', '');
        return path.parse(folderNameInTemplates).dir.charAt(0) !== '_';
      });
      return gulp.src(paths.content.templates.all)
        .pipe(templateFilter)
        .pipe(data(function (file) {
          return Object.assign({}, getDefaultLocals(), {
            filename: path.basename(file.path).replace('pug', 'html'),
            pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.pug', ''),
          });
        }))
        .pipe(gulpPug(config.pug))
        .on('error', function (err) {
          ...
        })
        .pipe(prettify(config.prettify))
        .pipe(gulp.dest(paths.dist.path));
    }

🧠 ⚙️ 💯