Vue Localization Fixes (#963)

* add additional string for vue to localization:
- update babel config to be compatible with latest jinja
- add .vue extractor (babel-vue-extractor) to i18n requirements
- update .vue files to render localizable attributes with localization
- update vue_loc.html to include additional runtime strings to be looked up server-side
- fixes #875

* tests: fix tests to use example-com.webrecorder.net

Author: ikreymer

babel.ini

@@ -1,2 +1,7 @@
 [jinja2: pywb/templates/**.html]
-extensions=jinja2.ext.i18n,jinja2.ext.autoescape,jinja2.ext.with_
+extensions=jinja2.ext.i18n
+encoding=utf-8
+
+[babelvueextractor.extract.extract_vue: pywb/vueui/src/**.vue]
+[babelvueextractor.extract.extract_vue: pywb/vueui/src/components/**.vue]
+encoding=utf-8

extra_requirements.txt

@@ -7,3 +7,4 @@ pysocks
 lxml
 babel
 translate_toolkit
+babel-vue-extractor

pywb/apps/test/test_rewriter.py

@@ -23,18 +23,18 @@ def setup_class(cls):
                                                   config_file=None))
 
     def test_replay(self):
-        resp = self.testapp.get('/live/mp_/http://example.com/')
+        resp = self.testapp.get('/live/mp_/https://example-com.webrecorder.net/')
         resp.charset = 'utf-8'
 
         assert '"http://localhost:80/live/mp_/https://www.iana.org/domains/example"' in resp.text
 
-        assert '"http://example.com/"'
+        assert '"https://example-com.webrecorder.net/"' in resp.text
 
     def test_top_frame(self):
-        resp = self.testapp.get('/live/http://example.com/')
+        resp = self.testapp.get('/live/https://example-com.webrecorder.net/')
         resp.charset = 'utf-8'
 
-        assert '"http://example.com/"' in resp.text
+        assert '"https://example-com.webrecorder.net/"' in resp.text
 
     #def test_cookie_track_1(self):
     #    resp = self.testapp.get('/live/mp_/https://twitter.com/')

pywb/static/vue/vueui.js

@@ -61,8 +61,15 @@
         "Current Capture": "{{ _Q('Current Capture') }}",
         "capture": "{{ _Q('capture') }}",
         "captures": "{{ _Q('captures') }}",
+        "{count} capture": "{{ _Q('{count} capture') }}",
+        "View capture on {date}": "{{ _Q('View capture on {date}') }}",
         "from {hour1} to {hour2}": "{{ _Q('from {hour1} to {hour2}') }}",
         "no captures": "{{ _Q('no captures') }}",
-        "Archived Page: ": "{{ _Q('Archived Page: ') }}"
+        "Archived Page: ": "{{ _Q('Archived Page: ') }}",
+        "Zoom out to {id} ({count} captures)": "{{ _Q('Zoom out to {id} ({count} captures)') }}",
+        "Language:": "{{ _Q('Language') }}",
+        "Search for archival capture of URL": "{{ _Q('Search for archival capture of URL') }}",
+        "Toggle navigation": "{{ _Q('Toggle navigation') }}",
+        "Logo": "{{ _Q('Logo') }}",
       }
 </script>

pywb/templates/vue_loc.html

@@ -1,4 +1,4 @@
-__version__ = '2.9.1'
+__version__ = '2.10.0b0'
 
 if __name__ == '__main__':
     print(__version__)

pywb/version.py

@@ -5,10 +5,10 @@
       class="navbar navbar-light navbar-expand-lg fixed-top top-navbar justify-content-center"
       :style="navbarStyle">
       <a class="navbar-brand flex-grow-1 my-1" :href="config.logoHomeUrl" v-if="config.logoHomeUrl">
-        <img :src="config.logoImg" id="logo-img" alt="_('pywb logo')">
+        <img :src="config.logoImg" id="logo-img" :alt="_('Logo')">
       </a>
       <div class="navbar-brand flex-grow-1 my-1" v-else>
-        <img :src="config.logoImg" id="logo-img" alt="_('pywb logo')">
+        <img :src="config.logoImg" id="logo-img" :alt="_('Logo')">
       </div>
       <div class="flex-grow-1 d-flex" id="searchdiv">
         <form
@@ -20,8 +20,8 @@
             type="text"
             :value="config.url"
             height="31"
-            aria-label="_('Search for archival capture of URL')"
-            title="_('Search for archival capture of URL')"></input>
+            :aria-label="_('Search for archival capture of URL')"
+            :title="_('Search for archival capture of URL')"></input>
         </form>
       </div>
       <button
@@ -32,7 +32,7 @@
         data-target="#navbarCollapse"
         aria-controls="navbarCollapse"
         aria-expanded="false"
-        aria-label="_('Toggle navigation')">
+        :aria-label="_('Toggle navigation')">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse ml-auto" id="navbarCollapse">
@@ -98,7 +98,7 @@
               aria-haspopup="true"
               aria-expanded="false"
               :title="_('Select language')">
-              <i class="fas fa-globe-africa" :title="_('Language')"></i>
+              <i class="fas fa-globe-africa" :title="_('Language:')"></i>
             </button>
             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="locale-dropdown">
               <a

pywb/vueui/src/App.vue

@@ -31,6 +31,8 @@
 </template>
 
 <script>
+import {PywbI18N} from "../i18n";
+
 export default {
   props: {
     period: {
@@ -44,7 +46,7 @@ export default {
   },
   methods: {
     getPeriodZoomOutText(period) {
-      return 'Zoom out to '+period.getReadableId(true)+ ' ('+period.snapshotCount+' captures)';
+      return PywbI18N.instance._("Zoom out to {id} ({count} captures)", {id: period.getReadableId(true), count: period.snapshotCount});
     },
     changePeriod(period) {
       if (period.snapshotCount) {

pywb/vueui/src/components/TimelineBreadcrumbs.vue

@@ -123,7 +123,8 @@ def get_package_data():
     extras_require={
         "i18n":  [
             "babel",
-            "translate_toolkit"
+            "translate_toolkit",
+            "babel-vue-extractor"
         ],
     },
     python_requires='>=3.7,<3.13',