Multi-language support

[Carlgo11]

trafficstars

One of the first suggestions for the site was multi-language support. Back before GitHub Workflows it wasn't even possible to generate per-region versions of the site but now there are several ways we could implement multi-language support.

Option 1: Regions.rb / Jekyll

Using the regions.rb script along with _data/regions.yml it would be possible to create a language array for each region and based on that, generate regional sites with different languages. That would, however, require changing the url schema for the site as 2fa.directory/ch/ now would be split into 2fa.directory/ch/de, 2fa.directory/ch/fr/, 2fa.directory/ch/it/.

Normal Liquid/Jekyll tags could be used instead of any hardcoded strings. _includes/html/desktop-table:

...
{% if website.contact.twitter %}
    <div class="twitter-button social-button btn">
        <i class="fab fa-twitter"></i>
        {{ language.tweet_btn }}
    </div>
{% endif %}
...

_data/languages.yml:

  en:
    tweet_btn: On Twitter

A problem with this approach is that it would increase the build time even more.

Option 2: JavaScript

While I'm far from a JS-genius like some other people here, I think it would be possible to create a JavaScript file that read the DOM and changed elements with predefined strings from a JSON file.

Based on my limited knowledge, it could work like this:

_includes/html/desktop-table:

...
{% if website.contact.twitter %}
    <div class="twitter-button social-button btn" data-lang-string="tweet_btn">
        <i class="fab fa-twitter"></i>
    </div>
{% endif %}
...

_data/languages.yml:

  en:
    tweet_btn: On Twitter

The language change could either be triggered by a dropdown menu like the regions menu, or by reading the Accept-Language request header and choosing the language based on that.

Option 3: CSS / Jekyll

As suggested by @phallobst, option 1 could be adjusted so that only a CSS file differs between the languages. This would only increase the build time by a bit and would allow for multi-language support to be used on the noscript versions as well as the normal index.html pages.

_includes/html/desktop-table:

...
{% if website.contact.twitter %}
    <div class="twitter-button social-button btn">
        <i class="fab fa-twitter"></i>
    </div>
    <p id="lang-tweet-btn"></p>
{% endif %}
...

_data/languages.yml:

  en:
    tweet_btn: On Twitter

css/language.css:

#lang-tweet-btn: {
  content: {{ language.tweet_btn }}
}

Any thoughts on this? Is it worth building? Which option is better?

[phallobst]

The basic question is: Do we want to support any combination of region and language, e.g. 2fa.directory/ch/pt/? This might increase the number of generated pages quite significantly.

Setting the translated strings might work with CSS as well. The CSS file could be generated from a JSON or YML source.

I'd go with a JavaScript approach instead of generating hundreds of static pages.

(To be honest, I'd like to see this for the region selection as well - but that's another story.)

[Carlgo11]

Doing it through CSS sounds interesting. Are you suggesting the CSS file would be generated with Jekyll like in option 1?

I forgot to mention that through JS it would be possible to read the user's preferred language and dynamically select the language :sparkles: automagically :sparkles:, allowing us to keep the current path structure.

[phallobst]

I'm not quite sure how to do it, to be honest. CSS hates me, and that feeling is mutual.

The category order should ideally be based on the translation as well (except for Other at the end). This would be way easier if the whole page would be created dynamically.