Different app name depending on access language

[ajmas]

Our app name needs to be localised, due to local regulation and user base. Our site is using SPA and is being served up via Nginx.

While we can dynamically change the site name once the app is running, I am not sure how we would apply this to the index.html

Our config in Nginx is:

    location / {
        root        /usr/share/nginx/html;
        index       index.html index.htm;
        try_files   $uri $uri/ /index.html;
    }

and we have a src/index.template.html with the following lines:

   <title><%= productName %></title>

    <meta charset="utf-8" />
    <meta name="description" content="<%= productDescription %>" />

Right now what I am looking at doing

• Using https://www.nginx.com/resources/wiki/modules/accept_language/
• Seeing if I can do `try_files $uri $uri/ /index.$lang.html /index.html;
• Working out how to tell Quasar to generate multiple index.html file based on language and an i18n key

The last part is where I am needing the help in, in context of Quasar. If anyone can help it would be appreciated.

[TobyMosque]

use the meta plugin, u can make that reactive based on your route params:
https://quasar.dev/quasar-plugins/meta#reactive

[ajmas]

This only helps once the application is live, so if the site gets indexed it will simply default to what ever is the index.html, rather than index.en.html, index.fr.html, etc.

Maybe I'll need to create a plugin for this? How do extended the logic for the generation of the index.html?

[suleimanas]

i haven't tried it with webpack5 (if you use webpack) but this might set you on the right path: https://forum.quasar-framework.org/topic/4139/multiple-entry-points/7

[ajmas]

Thanks. Forgot to mention we were using Vite, so I'll see if I can adapt the recipe.

[ajmas]

What I ended up doing is taking advantage of the afterBuild block in the quasar.conf.js file:

afterBuild: ({ quasarConf }) => {
  const defaultLang = 'en';
  const langs = ['en', 'fr'];
  const distDir = quasarConf.build.distDir;
  const indexContent = readFileSync(path.join(distDir, 'index.html'), 'utf-8');

  function translate (content, key, lang) {
    const messages = translations[lang];
    let message = key;
    if (messages) {
      message = messages[key] || key;
    }
    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return content.replaceAll(key, message);
  }

  for (let i = 0; i < langs.length; i++) {
    const localisedContent = translate(indexContent, '@product.name@', langs[i]);
    writeFileSync(path.join(distDir, `index.${langs[i]}.html`), localisedContent, 'utf-8');

    if (langs[i] === defaultLang) {
      writeFileSync(path.join(distDir, 'index.html'), localisedContent, 'utf-8');
    }
  }
}

added a translation block at the top (maybe in the future pull the translations from src/i18n?

const translations = {
  en: {
    '@product.name@': 'My Application'
  },
  fr: {
    '@product.name@': 'Mon application'
  }
};

In the index.html file I replaced the title block such that:

<title>@product.name@</title>

And the lines in out nginx configuration for the site (we used the alternative recipe, to avoid needing to modify our Docker config):

    # Alternative recipe for getting header language, taken from
    # https://www.nginx.com/resources/wiki/modules/accept_language/#alternative
    set $first_language $http_accept_language;
    if ($http_accept_language ~* '^(.+?),') {
        set $first_language $1;
    }

    set $language_suffix 'en';
    if ($first_language ~* 'fr') {
        set $language_suffix 'fr';
    }

    location / {
        root        /usr/share/nginx/html;
        index       index.html index.htm;
        try_files   $uri $uri/ /index.$language_suffix.html /index.html;
    }

Treat this as a working prototype, which so far is good enough for our needs. I'll look to improve this over time, but sharing this if anyone wants to borrow or improve on this.