i18n support

[xplosionmind]

I personally do not use Eleventy’s 18n plugin, but anyway it would be nice if this plugin could give the possibility to choose to display the navigation bar in a different language, according to the page’s language. Of course, nav URLs should change accordingly.

[sguter90]

I just wanted to share my solution for finding the active element in navigation.
Via config file called "site" I set the available languages.
For generating translated content I'm using the pagination feature to iterate over all languages.
This will create one file per language with the permalink /<lang>/<page-name> e.g. en-US/page.
By adding the custom property baseUrl I can detect if I should show the current navigation element as "active".

With the help of this plugin I'm setting the translated content:
https://github.com/adamduncan/eleventy-plugin-i18n

This way I don't need to specify an extra page per language and still be able to use the features provided by eleventy i18n integration.

If someone found a better solution to achive something like this, it would be awesome to know 👍

My page front matter looks like this:
page.njk

---
layout: layout/onepage.njk
eleventyNavigation:
    key: Page
    order: 3
    baseUrl: "/page"
pagination:
    data: site.languages
    size: 1
    resolve: values
    alias: lang
    addAllPagesToCollections: false
permalink: '{{ lang.code }}/page/'
eleventyComputed:
    title: '{{ "page_title" | i18n }}'
    description: '{{ "page_description" | i18n }}'
---

The navigation part looks like this:

                <ul>
                        {% set navPages = collections.all | eleventyNavigation %}
                        {%- for entry in navPages %}
                            {% set isCurrentPage = entry.url == page.url or entry.baseUrl in page.url %}
                            <li class="{% if isCurrentPage %}active{% endif %}">
                                <a 
                                       href="{{ entry.url | url }}"
                                        {% if isCurrentPage %}
                                            aria-current="page"
                                        {% endif %}
                                >{{ entry.title }}</a>
                            </li>
                        {%- endfor %}
                    </ul>

[rzelnik]

I think that i18n will be much more easily implemented after accepting this pull request:

Include page data in navigation entry

Currently it is impossible to filter the navigation entries by language because eleventyNavigation doesn't include the "lang" attribute.

[fugidev]

I added a custom filter to get only the pages with the same lang as the current page:

eleventyConfig.addFilter("pageLang", function(value) {
  return value.filter(item => item.page.lang === this.page.lang)
});

It's used like this:

{{ collections.all | pageLang | eleventyNavigation | ... }}