empreinte-digitale / orejime

An easy to use consent manager that focuses on accessibility.
https://orejime.empreintedigitale.fr/
Other
155 stars 26 forks source link

Improving translation system #64

Open felixgirault opened 3 years ago

felixgirault commented 3 years ago

I think the translation system is not ideal, mainly because of those two points:

Bundle size

When using Orejime as a standalone script (for example from a CDN), translated strings for all supported languages are bundled with it, whether they're used or not.

A solution to that could be to extract translations for each language into separate js files that could be required individually.

Consistency

There is an overlap in the way translated strings are provided. Some are set in the configuration (like app or category titles and descriptions), while the rest comes from the translations object. In some instances, those two ways are mixed together:

var config = {
  apps: [
    {
      name: "ad-tracker",
      title: "Ad tracker"
    }
  ],
  translations: {
    fr: {
      'ad-tracker': {
        title: 'Tracker publicitaire'
      }
    }
  }
}

A cleaner solution could be to systematize the use of translated strings:

var config = {
  apps: [
    {
      name: "ad-tracker",
-     title: "Ad tracker"
    }
  ],
  translations: {
+   en: {
+     'ad-tracker': {
+       title: 'Ad tracker'
+     }
+   },
    fr: {
      'ad-tracker': {
        title: 'Tracker publicitaire'
      }
    }
  }
}

While being more consistent, it would be a little more convoluted.

gaby44541 commented 3 years ago

I agree with the solution : I think we could remove all title or description in apps array and use only the property name to reference a translation. We could also use this technique for the categories. Here is an example of the categories array could be : categories: [ { name: 'cookies_essentiels_cat', apps: ['cookies_essentiels'] } ]

Instead of categories: [ { title: 'Cookies essentiels', apps: ['cookies_essentiels'] } ]

And the translate array will be : translations: { fr: { "cookies_essentiels_cat": { title: "Cookies essentiels et fonctionnels", description: "...", } }

felixgirault commented 3 years ago

Glad you agree! Yes exactly, to be done right this should apply to all translatable strings. I'll try to gather feedback from more people to ensure it wouldn't cause unexpected problems.

Maybe a good strategy would be to release a minor version allowing every string to be translated, while still allowing the current configuration but showing deprecation notices in the console. Then, we could remove the "old" configuration in the next major version.