Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Further i8n thoughts (on localized URLs) #385

Wolfr opened this issue Jun 24, 2021 · 0 comments

Further i8n thoughts (on localized URLs) #385

Wolfr opened this issue Jun 24, 2021 · 0 comments


Copy link

Wolfr commented Jun 24, 2021

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.

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

Screen Shot 2021-06-24 at 19 17 46

In the project I took the screenshot from we are using the i8n solution as described in .

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(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', ''),
        .on('error', function (err) {

🧠 ⚙️ 💯

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

1 participant