GSoC 2024: Internationalization Implementation for Zimit Frontend

ui/src/App.vue

@@ -3,14 +3,7 @@
     <NavBar />
     <AlertFeedback />
     <router-view />
-    <footer>
-      {{ $t('app.poweredBy') }} 
-      <a target="_blank" :href="$t('app.kiwixLink')">{{ $t('app.kiwix') }}</a>
-      {{ $t('app.and') }} 
-      <a target="_blank" :href="$t('app.webrecorderLink')">{{ $t('app.webrecorder') }}</a>, 
-      <span v-html="$t('app.thanksToMozilla')"></span>
-      <b-icon icon="heart-fill" style="color: rgb(234, 74, 170);" />
-    </footer>
+    <footer v-html="$t('footer.str')"></footer>
   </div>
 </template>
 

ui/src/components/Faq.vue

@@ -2,19 +2,13 @@
   <div class="faq" role="tablist">
     <FaqEntry id="what-is-zim" :title="$t('faq.whatIsZim')">
       <template v-slot:default>
-        {{ $t('faq.whatIsZimDesc1') }}
-        <a target="_blank" href="https://en.wikipedia.org/wiki/Offline">{{ $t('faq.offline') }}</a>
-        {{ $t('faq.whatIsZimDesc2') }}
+        <div v-html="$t('faq.whatIsZimDesc')"></div>
       </template>
     </FaqEntry>
 
     <FaqEntry id="how-to-read" :title="$t('faq.howToRead')">
       <template v-slot:default>
-        {{ $t('faq.howToReadDesc1') }}
-        <a target="_blank" href="https://kiwix.org/">Kiwix</a>,
-        {{ $t('faq.howToReadDesc2') }}
-        <a target="_blank" href="https://www.kiwix.org/en/download/">{{ $t('faq.desktopMobileAndMore') }}</a>.
-        {{ $t('faq.howToReadDesc3') }}
+        <div v-html="$t('faq.howToReadDesc')"></div>
       </template>
     </FaqEntry>
 
@@ -29,9 +23,7 @@
 
     <FaqEntry id="got-error" :title="$t('faq.gotError')">
       <template v-slot:default>
-        {{ $t('faq.gotErrorDesc1') }}
-        <a target="_blank" href="https://github.com/openzim/zimit/issues">github</a>
-        {{ $t('faq.gotErrorDesc2') }}
+        <div v-html="$t('faq.gotErrorDesc')"></div>
       </template>
     </FaqEntry>
   </div>

ui/src/components/FaqEntry.vue

@@ -1,41 +1,54 @@
 <template>
-    <b-card no-body class="mb-1">
-      <b-card-header header-tag="header" class="p-1" role="tab">
-        <b-button block v-b-toggle="[id]" variant="neutral">{{ title }}
-          <b-icon icon="plus" class="plus" font-scale="1.5"></b-icon>
-          <b-icon icon="dash" class="minus" font-scale="1.5"></b-icon></b-button>
-      </b-card-header>
-      <b-collapse :id="id" accordion="faq-accordion" role="tabpanel">
-        <b-card-body>
-          <b-card-text><slot></slot></b-card-text>
-        </b-card-body>
-      </b-collapse>
-    </b-card>
+  <b-card no-body class="mb-1">
+    <b-card-header header-tag="header" class="p-1" role="tab">
+      <b-button block v-b-toggle="[id]" variant="neutral">{{ title }}
+        <b-icon icon="plus" class="plus" font-scale="1.5"></b-icon>
+        <b-icon icon="dash" class="minus" font-scale="1.5"></b-icon></b-button>
+    </b-card-header>
+    <b-collapse :id="id" accordion="faq-accordion" role="tabpanel">
+      <b-card-body>
+        <b-card-text><slot></slot></b-card-text>
+      </b-card-body>
+    </b-collapse>
+  </b-card>
 </template>
 
 <script type="text/javascript">
-  export default {
-    name: 'FaqEntry',
-    props: {
-        id: String,
-        title: String,
-    },
-  }
+export default {
+  name: 'FaqEntry',
+  props: {
+      id: String,
+      title: String,
+  },
+}
 </script>
 
 <style type="text/css" scoped>
   .card-header .btn {
-    text-align: left;
+    text-align: start;
   }
 
   .card-header .plus, .card-header .minus {
     position: absolute;
     top: .5em;
+  }
+
+  /* LTR specific styles */
+  :root[dir="ltr"] .card-header .plus,
+  :root[dir="ltr"] .card-header .minus {
     right: .3rem;
   }
+
+  /* RTL specific styles */
+  :root[dir="rtl"] .card-header .plus,
+  :root[dir="rtl"] .card-header .minus {
+    left: .3rem;
+  }
+
   .card-header .collapsed .minus {
     display: none;
   }
+
   .card-header .not-collapsed .plus {
     display: none;
   }
@@ -47,9 +60,11 @@
     margin-bottom: 0 !important;
     border-radius: 0;
   }
+
   .faq .card:not(:first-child) {
     border-top: 0;
   }
+
   .card-header {
     background-color: transparent;
     border: 0;

ui/src/components/Request.vue

@@ -115,11 +115,17 @@ export default {
                   !(key === "time_limit" && val >= Constants.zimit_time_limit))
           .reduce((obj, [key, val]) => ({ ...obj, [key]: val }), {});
       },
-      human_size_limit() { 
-          return this.$t('request.humanSizeLimit', { size: `${parseInt(Constants.zimit_size_limit / 1073741824)}` }); 
+      human_size_limit() {
+          const sizeInGiB = parseInt(Constants.zimit_size_limit / 1073741824);
+          return this.$t('request.humanSizeLimit', { size: sizeInGiB });
       },
-      human_time_limit() { 
-          return this.$t('request.humanTimeLimit', { hours: `${parseInt(Constants.zimit_time_limit / 3600)}` }); 
+      human_time_limit() {
+          const timeInHours = parseInt(Constants.zimit_time_limit / 3600);
+          const unitKey = `units.timeLimit.${timeInHours === 1 ? 'hour' : 'hours'}`;
+          return this.$t('request.humanTimeLimit', {
+            hours: timeInHours, 
+            unit: this.$t(unitKey)
+        });
       },
       limit_hit() { 
           return this.task.container && this.task.container.progress && this.task.container.progress.limit && this.task.container.progress.limit.hit;

ui/src/locales/en.json

@@ -1,79 +1,73 @@
 {
-    "faq": 
-    {
+    "faq": {
         "whatIsZim": "What is a Zim file?",
-        "whatIsZimDesc1": "The Zim file format stores website content for ",
-        "whatIsZimDesc2": " 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.",
+        "whatIsZimDesc": "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.",
         "howToRead": "How do I read my Zim files?",
-        "howToReadDesc1": "You will need a Zim file reader. This usually means ",
-        "howToReadDesc2": ", which is available on ",
-        "howToReadDesc3": "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.",
+        "howToReadDesc": "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.",
         "missingContent": "The Zim file is incomplete or smaller than the original website",
         "missingContentDesc": "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}.",
         "gotError": "I got an error message (no zim) or could not read a zim file",
-        "gotErrorDesc1": "Triple-check the URL you entered, and if it is still not working then open a bug ticket on",
-        "gotErrorDesc2": ". 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.",
-        "desktopMobileAndMore": "desktop computers, mobile devices, and more",
-        "offline": "offline"
-    },   
-    "errorMessages": 
-    {
+        "gotErrorDesc": "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."
+    },    
+    "errorMessages": {
         "unableToRequestZIMCreation": "Unable to request ZIM creation:"
     },
-    "units": 
-    {
-        "timeLimit": 
-        {
+    "units": {
+        "timeLimit":{
           "singular": "hour",
           "plural": "hours"
         }
     },
-    "app": 
-    {
-        "poweredBy": "Powered by",
-        "kiwix": "Kiwix",
-        "kiwixLink": "https://kiwix.org",
-        "and": "and",
-        "webrecorder": "Webrecorder",
-        "webrecorderLink": "https://webrecorder.net",
-        "thanksToMozilla": "thanks to a <a target='_blank' href='https://www.mozilla.org/moss/'>Mozilla Open-Source Support Award </a>"
+    "footer": {
+        "str": "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 ❤️"
     }, 
-    "loading": 
-    {
+    "loading": { 
         "loading": "Loading…"
     },
-    "navbar": 
-    {
+    "navbar": {
         "logoAlt": "Youzim.it logo"
     },
-    "newRequest": 
-    {
+    "newRequest": {
         "heading": "Want an offline version of a website? Just",
         "boldZim": "Zim it",
         "urlPlaceholder": "Full URL of the website to convert",
         "emailPlaceholder": "Your e-mail to receive a download link. Address not kept",
         "submit": "Let's Zim it!",
-        "advancedOptions": "advanced options"
+        "advancedOptions": "advanced options",
+        "notSet": "Not set",
+        "fetchingDefinition": "fetching definition…",
+        "standardHTTPError": "Unable to request ZIM creation:<br />%{error}",
+        "creatingSchedule": "Creating schedule…",
+        "noTaskIdReceived": "Didn't receive task_id",
+        "unableToRequestZIM": "Unable to request ZIM creation:<br />%{error}"
     },
-    "notFound": 
-    {
+    "notFound": {
         "heading": "Not Found",
         "description": "Sorry, this content was not found. Maybe you'd like to go back."
     },
-    "request": 
-    {
-        "requestingSlot": "Requesting slot",
+    "request": {
         "zimingOf": "Ziming of ",
+        "requestingSlot": "Requesting slot",
         "requestRecorded": "Your request has been recorded and is awaiting a slot on our infrastructure to run.",
         "requestFailed": "Your request has failed! We are sorry about that.",
         "failureReasons": "A number of reasons can lead to a ziming failure. Most of the time, it's an inadequate URL… Please triple check it and create a new request. If that doesn't work, open a ticket in github.",
+        "openTicket": "open a ticket in github",
         "success": "Success!",
         "linkExpires": "The link below will expire and the file will be deleted after a week.",
         "download": "Download",
         "limitHit": "You have reached the maximum file size or duration allowed for free crawling. Contact us to help us purchase additional server space for you.",
         "beingProcessed": "Your request is being processed",
-        "serverConverting": "One of our servers is currently converting that URL into a nice ZIM file. Depending on the number of pages and resources available, it can be a matter of minutes, hours or even days! Please be patient.",
-        "emailNotification": "You can close this window. You will get an email notification when the task is completed."
+        "serverConverting": "One of our servers is currently converting that URL into a nice ZIM file. Depending on the number of pages and resources available, it can be a matter of minutes, hours, or even days! Please be patient.",
+        "emailNotification": "You can close this window. You will get an email notification when the task is completed.",
+        "pending": "pending",
+        "inProgress": "in progress",
+        "humanSizeLimit": "You have reached the maximum file size of {size} GiB.",
+        "humanTimeLimit": "You have reached the maximum duration of {hours} {unit}.",
+        "loadingTask": "Retrieving task…",
+        "noDataReceived": "Didn't receive task data.",
+        "taskNotFound": "No task found with this ID. It probably has expired.",
+        "taskRetrieveError": "Unable to retrieve task: {error}",
+        "title": "Settings"
     }
 }
 

ui/src/locales/fa.json

@@ -1,6 +1,5 @@
 {
-    "faq": 
-    {
+    "faq":{
         "whatIsZim": "فایل زیم چیست؟",
         "whatIsZimDesc1": "فرمت فایل زیم محتوای وب‌سایت را برای ",
         "whatIsZimDesc2": "استفاده ذخیره می‌کند. این فرمت اجزای اصلی یک وب‌سایت را در یک آرشیو واحد جمع‌آوری و فشرده‌سازی می‌کند تا ذخیره‌سازی، به اشتراک‌گذاری، و نگهداری آن آسان‌تر شود.",
@@ -16,20 +15,16 @@
         "desktopMobileAndMore": "رایانه‌های دسکتاپ، دستگاه‌های موبایل و بیشتر",
         "offline": "آفلاین"
     },
-    "errorMessages": 
-    {
+    "errorMessages":{
         "unableToRequestZIMCreation": "درخواست ایجاد ZIM ممکن نیست:"
     },
-    "units": 
-    {
-        "timeLimit": 
-        {
+    "units":{
+        "timeLimit":{
           "singular": "ساعت",
           "plural": "ساعت"
         }
     },
-    "app": 
-    {
+    "app":{
         "poweredBy": "به قدرت از",
         "kiwix": "کیویکس",
         "kiwixLink": "https://kiwix.org",
@@ -38,30 +33,25 @@
         "webrecorderLink": "https://webrecorder.net",
         "thanksToMozilla": "با تشکر از <a target='_blank' href='https://www.mozilla.org/moss/'>جایزه پشتیبانی منبع‌باز موزیلا</a> "
     },
-    "loading": 
-    {
+    "loading":{
         "loading": "در حال بارگذاری..."
     },
-    "navbar": 
-    {
+    "navbar":{
         "logoAlt": "لوگوی Youzim.it"
     },
-    "newRequest": 
-    {
+    "newRequest":{
         "heading": "می‌خواهید یک نسخه آفلاین از یک وب‌سایت داشته باشید؟ فقط",
         "boldZim": "زیم کنید",
         "urlPlaceholder": "آدرس URL کامل وب‌سایت برای تبدیل",
         "emailPlaceholder": "آدرس ایمیل خود را برای دریافت لینک دانلود وارد کنید. آدرس نگه دارده نمی‌شود",
         "submit": "بیایید آن را زیم کنیم!",
         "advancedOptions": "گزینه‌های پیشرفته"
     },
-    "notFound": 
-    {
+    "notFound":{
         "heading": "یافت نشد",
         "description": "متاسفیم، این محتوا پیدا نشد. شاید دوست داشته باشید به عقب بروید."
     },
-    "request": 
-    {
+    "request":{
         "requestingSlot": "درخواست اسلات",
         "zimingOf": "تبدیل شدن به فایل زیم از ",
         "requestRecorded": "درخواست شما ثبت شده است و منتظر یک اسلات در زیرساخت ما برای اجرا می‌باشد.",