search

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
16.67k stars 484 forks source link

i18n | Issue with the page.lang variable on some pages. #3352

Open Paszki opened 3 weeks ago

Paszki commented 3 weeks ago

Operating system

Windows 11

Eleventy

2.0.1

Describe the bug

When using the i18n plugin, any file that starts with “om-” will replace the default page.lang variable set in the 11ty config with the file name/slug. The plugin works as expected for other files.

From my testing, you can write any text after "om-." Typing numbers seems to work sometimes, but filenames like "om-ddd," "om-meg," and "om-dqdiqwhdqodh" will not work and will replace the page.lang variable.

Reproduction steps

  1. Create a new project, install 11ty
    • npm init -y
    • npm install @11ty/eleventy
  2. Create "eleventy.config.js" and add: 
    
const { EleventyI18nPlugin } =  require("@11ty/eleventy");

module.exports = function(eleventyConfig) {

// i18n
eleventyConfig.addPlugin(EleventyI18nPlugin, {
    defaultLanguage:  "no",
    errorMode:  "allow-fallback",
});

return {
    templateFormats: ["md", "njk", "html"],
    pathPrefix:  "/",
}

};

to the config file.

3. Create "index.njk" , "om-meg.njk" and add some basic html and the page.lang variable: 
``` nunjucks
<!DOCTYPE html>
<html lang="{{page.lang}}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
  1. Serve the files with npx @11ty/eleventy --serve and inspect the pages.
    • index.njk <html lang="no">
    • om-meg.njk <html lang="om-meg">

Expected behavior

Expected behavior: All pages should have the default language set in the HTML unless it is overridden by a data file.

Reproduction URL

No response

Screenshots

No response

Paszki commented 2 weeks ago

My knowledge of programming is limited, but I have been trying to solve this issue without any luck.

I might be doing something wrong, but this is how I structured my project initially. The default language for my website is Norwegian

src
├───en
│   ├───en.11tydata.js
│   ├───index.njk
│   ├───about.njk
│   └───blog
│       ├───blog.11tydata.js
│       └───3000-01-01-Test
│
├───index.njk
├───about.njk           <-- permalink: /om-meg/index.html
└───blog                <-- permalink: /blogg/index.html
    ├───blog.11tydata.js
    └───3000-01-01-Test

I was thinking that if I place all of my Norwegian files in the root directory so that the default language would be served from / and the english from /en/. If this makes sense.

Then, I tried moving the Norwegian portion of the website to its own language folder. Without changing the permalinks, this would produce the correct page.lang. But after changing the permalinks to the Norwegian URLs, the same problem would occur.

src
├───en
|   ├───en.11tydata.js
│   ├───index.njk
│   ├───about.njk
│   └───blog
│       ├───blog.11tydata.js
│       └───3000-01-01-Test
└───no
    ├───no.11tydata.js
    ├───index.njk
    ├───about.njk           <-- permalink: /om-meg/index.html
    └───blog                <-- permalink: /blogg/<post-title>/index.html
        ├───blog.11tydata.js
        └───3000-01-01-Test

Even the the locale_url would "break" on the "om-meg" page: <a href="{{ "/" | locale_url}}">. The URL would be replaced with "om-meg" only on that page.

It seems like any file that begins with a language code in the root directory breaks, even though that is not my intention. I just want to be able to have Norwegian URLs. Permalinks like: de-kan-ikke (which means "they cannot" in Norwegian) in the root folder would change the page.lang and breake the filter.

I would love some ideas on how to solve this.