Translation functionality in Twig templates

[miguelvaara]

Implements translation functionaities centrally in JavaScript on the front end.

The implementation avoids using the vue-i18n library, aiming to reduce dependencies by relying on vanilla JavaScript. This is the first workin version, which can be improved in future iterations. Cypress tests were also added for the tables on the landing page.

Reasons for creating this PR

Translations also need to work on the frontend side and Vue components

Link to relevant issue(s), if any

• Closes Bring translations managed by Symfony into use in Vue templates #1656

Description of the changes in this PR

• Created a translation service component
• The translation service is invoked and used in two components (vocab-counts.js / term-counts.js) so far
• Code has been modified towards the use of anonymous functions

Known problems or uncertainties in this PR

Checklist

• [ x] phpUnit tests pass locally with my changes
• [ x] I have added tests that show that the new code works, or tests are not relevant for this PR (e.g. only HTML/CSS changes)
• [ x] The PR doesn't reduce accessibility of the front-end code (e.g. tab focus, scaling to different resolutions, use of .sr-only class, color contrast)
• [ x] The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

[osma]

Doing the initialization of Vue components like this is a somewhat invasive change, but I'll defer the discussion about this.

However, I think it's problematic that each component has to call createI18nInstance separately. This means that the i18n service is initialized several times and also the messages will be loaded many times, as shown here in the Network view:

I think it would be better to initialize the service just once per page and make it available to all Vue components, without each component having to initialize it on its own.

[miguelvaara]

Now there is an implementation where both statistics (vocab-counts & term-counts) on the vocabulary homepage are displayed at the same time, but the translation initialization is only done once (see image). It was a long and frustrating process where only one of the Vue apps would load at a time 😅. The issue is that I had to build a separate timing function since Vue now relies on the translation service. The timing conflict is now resolved with a separate timing function 🫣. The setup works, but generally speaking, when using frameworks, it feels a bit unsophisticated. I will not commit yet - I eill clean up the code first and make sure I fully understand what "spaghetti" have appearead through my own hands! 😂

[UnniKohonen]

This solution works and seems fine for now. In the future, we can think about using the vue-i18n library if it adds any value. It would eliminate the need to check the availability of the $t function, but there would be some blinking with the component texts. Also, it might be worth investigating if promises could be used instead of setTimeout when checking for $t and starting Vue components. Though, based on my brief testing and googling it seems that setTimeout is the most straightforward way to wait for the function to be available.

[sonarcloud]

Quality Gate failed

Failed conditions
58.1% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud

[osma]

LGTM, we can continue from here later