GSoC 2024: Internationalization Implementation for Zimit Frontend

ui/package.json

@@ -17,6 +17,7 @@
     "moment": "^2.29.1",
     "sugar": "^2.0.6",
     "vue": "^2.6.12",
+    "vue-i18n": "^8.0.0",
     "vue-matomo": "^3.14.0-0",
     "vue-router": "^3.4.9",
     "vuex": "^3.5.1"

ui/src/App.vue

@@ -3,9 +3,7 @@
     <NavBar />
     <AlertFeedback />
     <router-view />
-    <footer>
-      Powered by <a target="_blank" href="https://kiwix.org">Kiwix</a> and <a target="_blank" href="https://webrecorder.net">Webrecorder</a>, thanks to a <a target="_blank" href="https://www.mozilla.org/moss/">Mozilla Open-Source Support</a> Award <b-icon icon="heart-fill" style="color: rgb(234, 74, 170);" />
-    </footer>
+    <footer v-html="$t('footer.str')"></footer>
   </div>
 </template>
 
@@ -32,4 +30,15 @@ footer {
   padding-top: 1em;
   padding-bottom: 1em;
 }
+
+/* RTL styles */
+[dir="rtl"] #app {
+  direction: rtl;
+  text-align: right;
+}
+
+[dir="rtl"] footer {
+  direction: rtl;
+  text-align: center; /* Keep footer text centered or change as needed */
+}
 </style>

ui/src/components/Faq.vue

@@ -1,27 +1,30 @@
 <template>
   <div class="faq" role="tablist">
-    <FaqEntry
-      id="what-is-zim"
-      title="What is a Zim file?">
-      The Zim file format stores website content for <a target="_blank" href="https://en.wikipedia.org/wiki/Offline">offline</a> usage. It assembles the normal constituent of a website into a single archive, and compresses it so as to make it easier to save, share, and store.
+    <FaqEntry id="what-is-zim" :title="$t('faq.whatIsZim')">
+      <template v-slot:default>
+        <div v-html="$t('faq.whatIsZimDesc')"></div>
+      </template>
     </FaqEntry>
 
-    <FaqEntry
-      id="how-to-read"
-      title="How do I read my Zim files?">
-      You will need a Zim file reader. This usually means <a target="_blank" href="https://kiwix.org/">Kiwix</a>, which is available on <a target="_blank" href="https://www.kiwix.org/en/download/">desktop computers, mobile devices, and more</a>. Currently only Kiwix-serve and Kiwix-Android can read all Zimit-generated files. If using Kiwix-Desktop for Microsoft Windows and GNU/Linux, then you will need to configure it as a Kiwix-serve instance in the settings. We expect most platforms to be upgraded by the end of 2021.
+    <FaqEntry id="how-to-read" :title="$t('faq.howToRead')">
+      <template v-slot:default>
+        <div v-html="$t('faq.howToReadDesc')"></div>
+      </template>
     </FaqEntry>
 
-    <FaqEntry
-      id="missing-content"
-      title="The Zim file is incomplete or smaller than the original website">
-      Because of the very nature of this tool, we can’t leave it open for unlimited requests towards any website. That could be harmful both for our infrastructure, but also for the target websites. We currently enforce two limits: {{ human_size_limit }} file size and {{ human_time_limit }}.
+    <FaqEntry id="missing-content" :title="$t('faq.missingContent')">
+      <template v-slot:default>
+        {{ $t('faq.missingContentDesc', { 
+          human_size_limit: human_size_limit,
+          human_time_limit: human_time_limit + ' ' + (human_time_limit === 1 ? $t('units.timeLimit.singular') : $t('units.timeLimit.plural'))
+        }) }}
+      </template>
     </FaqEntry>
 
-    <FaqEntry
-      id="got-error"
-      title="I got an error message (no zim) or could not read a zim file">
-      Triple-check the URL you entered, and if it is still not working then open a bug ticket on <a target="_blank" href="https://github.com/openzim/zimit/issues">github</a>. Indicate the target website, the request number (it’s in the email you received), and the device you tried to open your zim file on.
+    <FaqEntry id="got-error" :title="$t('faq.gotError')">
+      <template v-slot:default>
+        <div v-html="$t('faq.gotErrorDesc')"></div>
+      </template>
     </FaqEntry>
   </div>
 </template>
@@ -32,10 +35,16 @@
 
   export default {
     name: 'Faq',
-    components: {FaqEntry},
+    components: { FaqEntry },
     computed: {
-        human_size_limit() { return `${parseInt(Constants.zimit_size_limit / 1073741824)} GiB`; },
-        human_time_limit() { return `${parseInt(Constants.zimit_time_limit / 3600)} hours`; },
+      human_size_limit() {
+        const sizeInGiB = parseInt(Constants.zimit_size_limit / 1073741824);
+        return `${sizeInGiB} GiB`;
+      },
+      human_time_limit() {
+        const timeInHours = parseInt(Constants.zimit_time_limit / 3600);
+        return timeInHours;
+      },
     }
   }
-</script>
+</script>

ui/src/components/FaqEntry.vue

@@ -33,9 +33,18 @@
     top: .5em;
     right: .3rem;
   }
+
+  /* Adjust for RTL by resetting 'right' and setting 'left' */
+  :root[dir="rtl"] .card-header .plus,
+  :root[dir="rtl"] .card-header .minus {
+    right: auto;
+    left: .3rem;
+  }
+
   .card-header .collapsed .minus {
     display: none;
   }
+
   .card-header .not-collapsed .plus {
     display: none;
   }
@@ -47,11 +56,13 @@
     margin-bottom: 0 !important;
     border-radius: 0;
   }
+
   .faq .card:not(:first-child) {
     border-top: 0;
   }
+
   .card-header {
     background-color: transparent;
     border: 0;
   }
-</style>
+</style>

ui/src/components/Loading.vue

@@ -19,18 +19,18 @@
         return this.$store.getters.loadingStatus.should_display;
       },
       loading_text() {
-        return this.$store.getters.loadingStatus.text;
+        return this.$store.getters.loadingStatus.text || this.$t('loading.loading');
       }
     }
   }
 </script>
 
 <style type="text/css" scoped>
-#main_loader {
-  color: white;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 0.4rem;
-}
+  #main_loader {
+    color: white;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 0.4rem;
+  }
 </style>

ui/src/components/NavBar.vue

@@ -1,8 +1,19 @@
 <template>
+  <div>
     <header>
       <router-link :to="{ name: 'home' }"><img alt="Youzim.it logo" src="../assets/ZIMIT_LOGO_RGB.svg"></router-link>
       <Loading/>
     </header>
+
+    <div class="language-selector-container">
+      <select @change="changeLanguage($event)" class="language-selector">
+        <option value="en">English</option>
+        <option value="fr">Français</option>
+        <option value="fa">فارسی</option>
+        <!-- Add more languages here -->
+      </select>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -11,14 +22,47 @@
   export default {
     name: 'NavBar',
     components: {Loading},
+    methods: {
+      changeLanguage(event) {
+        this.$i18n.locale = event.target.value;
+      }
+    }
   }
 </script>
 
 <style type="text/css" scoped="">
   header {
+    display: inline-flex; 
+    justify-content: center;
+    width: 100%;
     text-align: center;
     padding-top: 2em;
     padding-bottom: 2em;
   }
-  header img { max-width: 80%; width: 400px; }
-</style>
+
+  header img {
+    max-width: 50vw;
+    width: 400px;
+  }
+
+  .language-selector-container {
+    position: absolute;
+    top: 2em;
+    right: 2em;
+    margin-left: auto; 
+  }
+
+  .language-selector {
+    padding: .5rem 1rem;
+    border-radius: .25rem;
+    border: 1px solid #ced4da;
+    appearance: none; 
+    background-color: #fff;
+    background-size: 16px 12px;
+  }
+
+  [dir='rtl'] .language-selector-container {
+    right: auto;
+    left: 2em;
+  }
+</style>

ui/src/components/NewRequest.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="container">
-    <h1>Want an offline version of a website? Just <strong>Zim it</strong>!</h1>
+    <h1 v-html="$t('newRequest.heading')"></h1>
 
     <b-form @submit.prevent="requestZim" v-if="editorReady">
         <b-form-group>
             <b-form-input
                 type="url"
                 id="new_url"
-                placeholder="Full URL of the website to convert"
+                :placeholder="$t('newRequest.urlPlaceholder')"
                 required="required"
                 v-model="form.url" />
         </b-form-group>
@@ -16,23 +16,21 @@
             <b-form-input
                 type="email"
                 id="new_email"
-                placeholder="Your e-mail to receive a download link. Address not kept"
+                :placeholder="$t('newRequest.emailPlaceholder')"
                 v-model="form.email" />
         </b-form-group>
 
-
         <b-form-group>
           <b-button
             pill
             type="submit"
             :disabled="!editorReady || !payload.url || busy"
-            variant="grey">
-            Let's Zim it!</b-button>
+            variant="grey">{{$t('newRequest.submit')}}</b-button>
           <b-button
             pill
             size="sm"
             :pressed.sync="showAdvanced"
-            variant="link-grey">advanced options</b-button>
+            variant="link-grey">{{$t('newRequest.advancedOptions')}}</b-button>
         </b-form-group>
 
         <div v-if="showAdvanced">
@@ -80,7 +78,7 @@
                 type="submit"
                 :disabled="!editorReady || !payload.url || busy"
                 variant="grey">
-                Let's Zim it!</b-button>
+                {{$t('newRequest.submit')}}</b-button>
             </b-form-group>
 
         </div>
@@ -156,14 +154,14 @@
 
               if (field.type == "boolean") {
                 component = "switchbutton";
-                options = [{text: "True", value: true}, {text: "Not set", value: undefined}];
+                options = [{text: this.$t('newRequest.true'), value: true}, {text: this.$t('newRequest.notSet'), value: undefined}];
               }
 
               if (field.type == "string-enum") {
                 component = "b-form-select";
-                options = field.choices.map(function (option) { return {text: option, value: option}; });
+                options = field.choices.map(option => ({text: option, value: option}));
                 if (field.required != true) {
-                  options.push({text: "Not set", value: undefined});
+                  options.push({text: this.$t('newRequest.notSet'), value: undefined});
                 }
               }
 
@@ -177,7 +175,7 @@
                 data_key: field.data_key,
                 required: field.required,
                 description: field.description,
-                placeholder: "Not set",  //field.placeholder,
+                placeholder: this.$t('newRequest.notSet'),  //field.placeholder,
 
                 component: component,
                 component_type: component_type,
@@ -202,7 +200,7 @@
 
             let parent = this;
             console.debug("fetching definition…");
-            parent.toggleLoader("fetching definition…");
+            parent.toggleLoader(this.$t('newRequest.fetchingDefinition'));
             parent.queryAPI('get', Constants.zimfarm_webapi + '/offliners/zimit')
               .then(function (response) {
                   let definition = response.data.filter(field => Constants.zimit_fields.indexOf(field.key) > -1);
@@ -211,7 +209,7 @@
                   if (on_success) { on_success(); }
               })
               .catch(function (error) {
-                if (on_error) { on_error(Constants.standardHTTPError(error.response)); }
+                if (on_error) { on_error(parent.$t('newRequest.standardHTTPError', { error: Constants.standardHTTPError(error.response) })); }
               })
               .then(function () {
                   parent.toggleLoader(false);
@@ -224,17 +222,17 @@
             this.payload.flags = Object.filter(this.payload.flags, item => item!==""); 
             parent.busy = true;
             let task_id = null;
-            parent.toggleLoader("Creating schedule…");
+            parent.toggleLoader(this.$t('newRequest.creatingSchedule'));
             parent.queryAPI('post', Constants.zimitui_api + '/requests/', this.payload)
               .then(function (response) {
                 if (response.data && response.data.id) {
                   task_id = response.data.id;
                   parent.redirectTo('request', {task_id: task_id});
                 } else
-                  throw "Didn't receive task_id";
+                  throw new Error(parent.$t('newRequest.noTaskIdReceived'));
               })
               .catch(function (error) {
-                parent.alertError("Unable to request ZIM creation:<br />" + Constants.standardHTTPError(error.response));
+                parent.alertError(parent.$t('newRequest.unableToRequestZIM', { error: Constants.standardHTTPError(error.response) }));
               })
               .then(function () {
                 parent.toggleLoader(false);

ui/src/components/NotFound.vue

@@ -2,8 +2,8 @@
 
 <template>
   <div class="container">
-    <h1>Not Found</h1>
-    <p>Sorry, this content was not found. Maybe you'd like to go back.</p>
+    <h1>{{ $t('notFound.heading') }}</h1>
+    <p>{{ $t('notFound.description') }}</p>
   </div>
 </template>