pywb icon indicating copy to clipboard operation
pywb copied to clipboard

Strings not translatable in VueUI by default

Open Quirinus opened this issue 1 year ago • 0 comments

Describe the bug

When using VueUI, there are a bunch of strings that are not translated or are displaying as code, and some are hardcoded.

Steps to reproduce the bug

Open up pywb with a translation that isn't English. Open up the timeline. Here are three different examples:

  • When you zoom in to a period, and hover your mouse over the translation of "All-time", it says "Zoom out to [...]", instead of being allowed to be translated. This string is hardcoded in the code.
  • If you hover over the icon of the globe in the top right it says "Language" - not translated; note that the button itself (which contains the icon) has a translated title, though. Seems like this string is not added to messages.csv when generating translations. It's of the type :title=\"_('Language')\" in the code.
  • Strings that are like alt=\"_('pywb logo')\" produce alt="_('pywb logo')" instead of showing the translation string - that is, they don't even get processed internally, unlike the one from the previous point (plus like the one from the previous point, they're not generated in messages.csv when generating translations).

Expected behavior

I expect that all front-end VueUI strings are translatable and not display as code, and appear in the messages.csv when generating the list of strings for translation.

Screenshots

image Notice the string in the red rectangle isn't translated. (Ignore the missing image, that's another issue.)

Environment

  • Version: pywb 2.7.4

Additional context

I digged a bit, and it seems it should be fixable fairly simply:

  • https://github.com/webrecorder/pywb/blob/main/pywb/templates/vue_loc.html:
    • add strings/translations here
    • I guess this is used when generating the translation messages.csv. maybe there's a way to include vueui.js in the generation, or should all strings that are to be translated put in here?
  • https://github.com/webrecorder/pywb/blob/main/pywb/static/vue/vueui.js:
    • find the hardcoded strings and replace them with translations
    • fix the translations of the type alt=\"_('pywb logo')\" not getting even processed, and getting displayed as code
    • they have to also be replaced in the injected code (e.g. also in "vue_inject_styles$5")... not sure if thats some automatic tool that does that or can it be done manually
    • regenerate the source map with some tool

I might give fixing/improving this a shot when I get some time.

Quirinus avatar Nov 22 '23 10:11 Quirinus