How to set up apostrophe-workflow/ apostrophe-i18n-static correctly?

[juliageek]

I have a project that uses both apostrophe-i18n-static and apostophe-workflow, because I need certain static parts of the website to be translated on top of the in-editor localization. Now, I am pretty sure I didn't set up something right, or I don't have a detailed understanding of how apostrophe-workflow works behind the scenes, because I am noticing some flaky behavior.

1. On my website, I have a drop-down with the locales so the user can toggle between them. The locale list and the selected locale come from apostrophe-workflow, but I notice that sometimes, when navigating to various pages I created under a locale, the drop-down simply disappears. The code relies on apos.workflow.localizations(), which gets me wondering if sometimes the localizations are not available, and thus the dropdown cannot be rendered anymore.

{% macro render() %}

{% set lang = '' %}
{% set activeLocale = apos.workflow.lang() %}
{% for l in apos.workflow.localizations() %}
{% if l.workflowLocale === activeLocale %}
  {% set lang = l.label %}
{% endif %}
{% endfor %}
<button class="language-button" type="button" data-role="lang-toggle">
  <span class="language-span">{{ lang }}</span>
</button>
<ul data-role="lang-list" class="language-list hidden">
{% for locale in apos.workflow.localizations() %}
  {% if locale.workflowLocale !== activeLocale %}
    <li>
      <a href="{{ locale._url | build({ workflowLocale: locale.workflowLocale }) }}" >{{ locale.label }}</a>
    </li>
  {% endif %}
{% endfor %}
</ul>
{% endmacro %}

2. The json files under the locales folder are being recreated every time the code reloads. Which means that, if I add some translations there, they are overwritten every time, which is quite frustrating. Here is my app.js set-up for apostrophe-i18n-static and apostrophe-workflow:

const locales = [
  {
    value: 'ro',
    label: 'Română'
  },
  {
    value: 'en',
    label: 'United States'
  }
]

const defaultLocale = 'en';

var apos = require('apostrophe')({
  shortName: 'my-project',
  modules: {
    'apostrophe-i18n-static': {
      defaultLocale,
      locales,
      namespaces: true,
      ignoreNamespaces: [ 'apostrophe' ]
    },
    'apostrophe-workflow': {
      alias: 'workflow',
      locales: [{
        name: 'default',
        label: 'Default',
        private: true,
        children: locales.map(locale => ({ label: locale.label, name: locale.value }))
      }],
      replicateAcrossLocales: false
     }
     ...
})

Looking over Stack Overflow issues, I saw people routing to a subroute for every locale, for example http://localhost:3000/en/blog, but I didn't really catch from the documentation whether this is necessary or not.

[boutell]

If you want to edit your JSON files by hand, do not use apostrophe-i18n-static. The purpose of that module is to give you a UI to manage the static phrases, and so the JSON files are overwritten by the content of those pieces. This is the purpose of the module.

…

On Tue, Feb 23, 2021 at 9:02 AM juli4g33k ***@***.***> wrote: I have a project that uses both apostrophe-i18n-static and apostophe-workflow, because I need certain static parts of the website to be translated on top of the in-editor localization. Now, I am pretty sure I didn't set up something right, or I don't have a detailed understanding of how apostrophe-workflow works behind the scenes, because I am noticing some flaky behavior. 1. On my website, I have a drop-down with the locales so the user can toggle between them. The locales come from apostrophe-workflow, but I notice that sometimes, when navigating to various pages I created under a locale, the drop-down simply disappears. The code relies on apos.workflow.localizations(), which gets me wondering if sometimes the localizations are not available, and thus the dropdown cannot be rendered anymore. {% macro render() %} {% set lang = '' %} {% set activeLocale = apos.workflow.lang() %} {% for l in apos.workflow.localizations() %} {% if l.workflowLocale === activeLocale %} {% set lang = l.label %} {% endif %} {% endfor %} <button class="language-button" type="button" data-role="lang-toggle"> <span class="language-span">{{ lang }}</span> </button> <ul data-role="lang-list" class="language-list hidden"> {% for locale in apos.workflow.localizations() %} {% if locale.workflowLocale !== activeLocale %} <li> <a href="{{ locale._url | build({ workflowLocale: locale.workflowLocale }) }}" >{{ locale.label }}</a> </li> {% endif %} {% endfor %} </ul> {% endmacro %} 1. The json files under the locales folder are being recreated every time the code reloads. Which means that, if I add some translations there, they are overwritten every time, which is quite frustrating. Here is my app.js set-up for apostrophe-i18n-static and apostrophe-workflow: const locales = [ { value: 'ro', label: 'Română' }, { value: 'en', label: 'United States' } ] const defaultLocale = 'en'; var apos = require('apostrophe')({ shortName: 'my-project', modules: { 'apostrophe-i18n-static': { defaultLocale, locales, namespaces: true, ignoreNamespaces: [ 'apostrophe' ] }, 'apostrophe-workflow': { alias: 'workflow', locales: [{ name: 'default', label: 'Default', private: true, children: locales.map(locale => ({ label: locale.label, name: locale.value })) }], replicateAcrossLocales: false } ... }) Looking over Stack Overflow issues, I saw people routing to a subroute for every locale, for example http://localhost:3000/en/blog, but I didn't really catch from the documentation whether this is necessary or not. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2752>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAH27LOXJ6CGOQER6XEOYLTAOYOXANCNFSM4YCRIYHA> .

-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[juliageek]

Actually, I don't really care where I edit the static phrases as long as they are translated by some means. I honestly missed the UI completely. I will start using the UI, although from what I can see, the phrases shown in the UI are the ones in the locales folder. I also re-read the Readme file of the package one more time and I noticed there are various useful tags to this package, like generateAtStartup or autoReload that can be used to control when the locale files are generated.

[boutell]

I am not sure about the other issue though. I have not seen it. Can you provide a simple github project with steps to reproduce it?

…

On Tue, Feb 23, 2021 at 9:05 AM Tom Boutell ***@***.***> wrote: If you want to edit your JSON files by hand, do not use apostrophe-i18n-static. The purpose of that module is to give you a UI to manage the static phrases, and so the JSON files are overwritten by the content of those pieces. This is the purpose of the module. On Tue, Feb 23, 2021 at 9:02 AM juli4g33k ***@***.***> wrote: > I have a project that uses both apostrophe-i18n-static and > apostophe-workflow, because I need certain static parts of the website > to be translated on top of the in-editor localization. Now, I am pretty > sure I didn't set up something right, or I don't have a detailed > understanding of how apostrophe-workflow works behind the scenes, > because I am noticing some flaky behavior. > > 1. On my website, I have a drop-down with the locales so the user can > toggle between them. The locales come from apostrophe-workflow, but I > notice that sometimes, when navigating to various pages I created under a > locale, the drop-down simply disappears. The code relies on > apos.workflow.localizations(), which gets me wondering if sometimes > the localizations are not available, and thus the dropdown cannot be > rendered anymore. > > {% macro render() %} > > > > {% set lang = '' %} > > {% set activeLocale = apos.workflow.lang() %} > > {% for l in apos.workflow.localizations() %} > > {% if l.workflowLocale === activeLocale %} > > {% set lang = l.label %} > > {% endif %} > > {% endfor %} > > <button class="language-button" type="button" data-role="lang-toggle"> > > <span class="language-span">{{ lang }}</span> > > </button> > > <ul data-role="lang-list" class="language-list hidden"> > > {% for locale in apos.workflow.localizations() %} > > {% if locale.workflowLocale !== activeLocale %} > > <li> > > <a href="{{ locale._url | build({ workflowLocale: locale.workflowLocale }) }}" >{{ locale.label }}</a> > > </li> > > {% endif %} > > {% endfor %} > > </ul> > > {% endmacro %} > > > > 1. The json files under the locales folder are being recreated every > time the code reloads. Which means that, if I add some translations there, > they are overwritten every time, which is quite frustrating. Here is my > app.js set-up for apostrophe-i18n-static and apostrophe-workflow: > > const locales = [ > > { > > value: 'ro', > > label: 'Română' > > }, > > { > > value: 'en', > > label: 'United States' > > } > > ] > > > > const defaultLocale = 'en'; > > > > var apos = require('apostrophe')({ > > shortName: 'my-project', > > modules: { > > 'apostrophe-i18n-static': { > > defaultLocale, > > locales, > > namespaces: true, > > ignoreNamespaces: [ 'apostrophe' ] > > }, > > 'apostrophe-workflow': { > > alias: 'workflow', > > locales: [{ > > name: 'default', > > label: 'Default', > > private: true, > > children: locales.map(locale => ({ label: locale.label, name: locale.value })) > > }], > > replicateAcrossLocales: false > > } > > ... > > }) > > > Looking over Stack Overflow issues, I saw people routing to a subroute > for every locale, for example http://localhost:3000/en/blog, but I > didn't really catch from the documentation whether this is necessary or not. > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > <#2752>, or > unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAAH27LOXJ6CGOQER6XEOYLTAOYOXANCNFSM4YCRIYHA> > . > -- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[juliageek]

Here you go: https://github.com/juliageek/language-picker-sandbox

[juliageek]

@boutell After some more digging through the source code, I managed to narrow the issue down to the method self.getLocalizations in api.js in apostrophe-workflow. It seems like self.apos.docs.find(req, criteria, self.getContextProjection()).workflowLocale(null).published(null).addUrls(false) on line 1125 returns 0 docs for the case where the page is not a child of the home page. This means that the localizations object will remain empty. I guess I need to set the context of the document somehow?

[boutell]

The strings are added to both the json files and the UI as they are first encountered in use (automatic discovery). But do not edit the JSON files if you are using that module. Just be sure to pick one of the two solutions (editing the JSON files, or installing apostrophe-i18n-static).

…

On Tue, Feb 23, 2021 at 12:09 PM juli4g33k ***@***.***> wrote: Actually, I don't really care where I edit the static phrases as long as they are translated by some means. I honestly missed the UI completely. I will start using the UI, although from what I can see, the phrases shown in the UI are the ones in the locales folder. I also re-read the Readme file of the package one more time and I noticed there are various useful tags to this package, like generateAtStartup or autoReload that can be used to control when the locale files are generated. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2752 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAH27IYZDKYV6J3HEW565TTAPOLVANCNFSM4YCRIYHA> .

-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his