What would be the best way to manage multiple languages website with MAVO? #822

GalinhaLX · 2022-02-07T11:59:47Z

GalinhaLX
Feb 7, 2022

Hi,

In your experience, what would be the best way to manage a multi-language site with MAVO?

Mavo already provide some nice and cool ways for localization )

But I'm not sure that using for example for a large site is the best way to manage it: could be quiclky a big pain.

1/ The first idea that came to my mind was to manage several JSON files in source (1 for each language), and change the source trought a drop-down selector.

But I thought that it would be quite difficult to manage on the backend, all files side by side for a translator:

An English file as a reference, then search for the same reference in another file to finally translate it, that requires necessarily the construction of an interface: in case of lot of properties, this could become a real pain

2/ Second idea that came to me was to play with "text" & "localization", maybe I can extend that file, but then, I would be with a huge file, and return to case 1, where I would have to open multiple files. By the way, I'm not sure about documentation on how to do it (is there any exemple somewhere, if this is the right solution?)

3/ Then I remembered that a few long years ago, a simple table, with one column per language was the "humanly" manageable way :
So would it be possible to tell MAVO to take all the fields in a specific column to build the site?

What is your experience on the subject, for large web sites, and what advice would you give?

DmitrySharabin · 2022-02-08T14:40:25Z

DmitrySharabin
Feb 8, 2022
Maintainer

Unfortunately, I've never built big multilingual sites with Mavo. So the following thoughts are only my vision and not the best practice as we understand it.

For site content (blog posts, articles, advertisements, etc.), I would stick to separate JSON files for every supported language. The dynamic nature of Mavo backends is for the rescue—they are “live” so we can use expressions inside the corresponding attributes. A while ago I built a pen to illustrate this: https://codepen.io/dmitrysharabin/pen/OeajoX. It seems to me, your first option is exactly about that.

For UI elements, I would use either a <datalist> element or localization plugins (either all of them inside one JS file or every language in a separate file) in conjunction with the phrase() function. I'm leaning towards the second variant (the separate plugins) since there might be a lot of localization strings and I am personally not a huge fan of the idea of storing them in an HTML file.

Suppose we have a couple of localization plugins:

en.js

Mavo.Locale.register("en", {
	file: "File",
	edit: "Edit"
});

ru.js

Mavo.Locale.register("ru", {
	file: "Файл",
	edit: "Правка"
});

fr.js

Mavo.Locale.register("fr", {
	file: "Fichier",
	edit: "Modifier"
});

We need to include them in our page:

<head>
    ...
    <script src="en.js"></script>
    <script src="ru.js"></script>
    <script src="fr.js"></script>
    ...
</head>

And then we can use them like so:

<body>
    ...
    <select property="language">
        <option value="en">🇺🇸 English</option>
        <option value="fr">🇫🇷 Français</option>
        <option value="ru">🇷🇺 Русский</option>
    </select>
    ...
    <nav lang="[language]">
	<ul>
            <li>[phrase("file", language)]</li>
            <li>[phrase("edit", language)]</li>
        </ul>
    </nav>
    ...
</body>

I made a pen to illustrate it and found out that we have a regression: the phrase() function doesn't work since version 0.2.2. 😔 I'll file an issue and bisect it. But the pen is working (I'm using version 0.2.1 there).

UPDATE: The bug is fixed. 🥳

3/ Then I remembered that a few long years ago, a simple table, with one column per language was the "humanly" manageable way:
So would it be possible to tell MAVO to take all the fields in a specific column to build the site?

I didn't quite get it. Could you please elaborate a bit?

2 replies

GalinhaLX Feb 9, 2022
Author

Hi

Thanks for your kind answer.
That's the type of options I was talking about, and I remember it could become a mess to manage :)

my 3rd option, was about using for exemple a spreadsheet (or better a database), something like

                         columns:
rows:                  mavo_property_id               / english         / french         / russian
  1                       hello                       /Hello             /Bonjour         / Здравствуйте
  2                       drink                      /Drink Kvas         / Buvez du Kvas   / пить квас

Then I would like to link content on html template with "mavo_property_id"

and depending on a select dropdown option [language] (on top of webpage) user, could switch from "english", "french", "russian"
=> I would like to pass a value to tell mavo to change the column to take the right translation to build the page

if [language]="english"
Drink Kvas

or if [language]="french"
 Buvez du Kvas

or if [language]="russian"
 пить квас

Note: (I'm not sure about my mavo syntax on this post)

For the backend, it becomes super easy to manage all translations in one spreadsheet

Unfortunately, I don't see the trick to tell mavo to go search in the right column of a 2 dimensional table

но, возможно, это отличное решение, просто потому что я производитель кваса.

GalinhaLX Feb 10, 2022
Author

re-Thinking about this solution again, and after your smart idea of using Google Spreadsheet below:

I think I'll have a main interface (google spreadsheet) with all languages in same table
I'll ask google to generate seperate Json files depending on language

From mavo side, I'll use a "mv-if" depending on language settings, it will reload page with targeted language JSON file

I just have to ensure data is saved somewhere, just before reloading page

Should work :)

GalinhaLX · 2022-02-09T12:23:37Z

GalinhaLX
Feb 9, 2022
Author

This could work in a 'flat' data source file, like 1 row database, or json source, but I would have 1 row per language

"drink-english" : "Drink Kvas";
"drink-french" : "Buvez du Kvas";
"drink-russian" : "пить квас"

But it's not the kind of humanly readable file, that's why I'm looking for a 2 dimensional table and wondering if there’s a way to do it with mavo

0 replies

DmitrySharabin · 2022-02-09T17:26:25Z

DmitrySharabin
Feb 9, 2022
Maintainer

I believe I could find a way to help you. It's based on using the Google Sheets plugin.

First of all, we need to create a table with all the localization strings in every supported language. Something like this one:

Then, with the help of the QUERY function, we can extract all the localization strings for every language in a separate range. And since formulas are reactive, every change in the source table (e.g., adding a new localization string) will be picked up automatically.

Then, we can give each of these ranges a name, corresponding to the value of a property you use in your app to track the language chosen by a user.

N.B. I would recommend giving names to half-opened ranges. For example, when I gave a name to a range with the localization strings in English, I used this range: G2:H. This would let us use all the possible rows Google Sheets can give us.

And since Mavo supports expressions in storage attributes and the Google Sheets plugin supports named ranges, we can easily switch languages.

I put it all together in this pen: https://codepen.io/dmitrysharabin/pen/podexaX.

The source table I work with is here: https://docs.google.com/spreadsheets/d/14bzCuziKutrA3iESarKoj2o56dhraR8pzuFAuwTIo-g/edit?usp=sharing

Is that what you need?

1 reply

troycura Jul 27, 2022

We should create a server for Translation, I hope github will do this open source

GalinhaLX · 2022-02-09T20:30:31Z

GalinhaLX
Feb 9, 2022
Author

That's a smart approach, using range source

I guess it could be the same as selecting a view for a database (in case you're not using Google data source)

But then trying to integrate user content like:
Phone: +44 123123

where:
"Phone" label => Comes from googlesheets translation file
"+44 123123" user editable content => Comes from a different source

How to separate "translation" data, from "content" data?

Is there a way to declare multiple data sources?
Nested apps? ( I tried here) with some strange effects)
or other approach?

0 replies

GalinhaLX · 2022-02-09T23:35:25Z

GalinhaLX
Feb 9, 2022
Author

Looking at your amazing memory game https://dmitrysharabin.github.io/mavo-memory-game/

I found a way to get a value from one app to another one, and made this codepen:

But I can't figure in this case, how to display previous "language" data

Is there a way to ask mavo to display something like:

if "english" language selected
=> Phone : +44 123123

if "french" language selected
=> Telephone: +44 123123

0 replies

DmitrySharabin · 2022-02-10T14:18:40Z

DmitrySharabin
Feb 10, 2022
Maintainer

That's exactly the approach I was going to suggest to you: divide data between two apps.

I updated the pen to reflect my proposal: https://codepen.io/dmitrysharabin/pen/podexaX.

The main downside I see in this approach is that in one app we must specify all the properties we are going to use in another one. It might be I'm simply not aware of another (native for Mavo) way to use one app's data in another app without JS.

@LeaVerou do you have any hints for us? I was trying to use these hooks. However, it didn't work—the corresponding expressions are not being updated. I definitely miss something.

Mavo.hooks.add("render-start", async function (env) {
	if (this.id !== "main") {
		return;
	}

	await Mavo.all["i18n"].dataLoaded;

	env.data.i18n = Mavo.all["i18n"].getData()?.[0];
});

Mavo.hooks.add("getdata-end", function (env) {
	// Make sure we're in the right Mavo app
	if (this.id !== "main") {
		return;
	}

	// Undo env.data transformation before saving
	delete env.data.i18n;
});

Here is the pen with my experiments: https://codepen.io/dmitrysharabin/pen/oNoWoOa.

0 replies

DmitrySharabin · 2022-02-10T14:21:51Z

DmitrySharabin
Feb 10, 2022
Maintainer

Is there a way to declare multiple data sources?
Nested apps? ( I tried here) with some strange effects)

AFAIK, there is no way to do it in Mavo. Yet. :)

1 reply

GalinhaLX Feb 10, 2022
Author

maybe for future:

the same way browser can load a new CSS file on the fly, and instantly apply styles to html,

I don't know if it would be possible to load a json source file, and apply its data to a mavo app.... 🥇 ?

troycura · 2022-07-27T16:48:30Z

troycura
Jul 27, 2022

We should create a server for Translation, I hope GitHub will do this, open source. not just by excel file.

1 reply

GalinhaLX Jul 27, 2022
Author

What do you mean? that it should bemanaged Server Side?
before sending information to mavo?

What do you propose?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

What would be the best way to manage multiple languages website with MAVO? #822

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments 5 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

What would be the best way to manage multiple languages website with MAVO? #822

GalinhaLX Feb 7, 2022

Replies: 8 comments · 5 replies

DmitrySharabin Feb 8, 2022 Maintainer

GalinhaLX Feb 9, 2022 Author

GalinhaLX Feb 10, 2022 Author

GalinhaLX Feb 9, 2022 Author

DmitrySharabin Feb 9, 2022 Maintainer

troycura Jul 27, 2022

GalinhaLX Feb 9, 2022 Author

GalinhaLX Feb 9, 2022 Author

DmitrySharabin Feb 10, 2022 Maintainer

DmitrySharabin Feb 10, 2022 Maintainer

GalinhaLX Feb 10, 2022 Author

troycura Jul 27, 2022

GalinhaLX Jul 27, 2022 Author

GalinhaLX
Feb 7, 2022

Replies: 8 comments 5 replies

DmitrySharabin
Feb 8, 2022
Maintainer

GalinhaLX Feb 9, 2022
Author

GalinhaLX Feb 10, 2022
Author

GalinhaLX
Feb 9, 2022
Author

DmitrySharabin
Feb 9, 2022
Maintainer

GalinhaLX
Feb 9, 2022
Author

GalinhaLX
Feb 9, 2022
Author

DmitrySharabin
Feb 10, 2022
Maintainer

DmitrySharabin
Feb 10, 2022
Maintainer

GalinhaLX Feb 10, 2022
Author

troycura
Jul 27, 2022

GalinhaLX Jul 27, 2022
Author