Add ESLint rule to cap the length of translation strings (#3725)

* Add ESLint rule to cap the length of translation strings * Fix repeated space stripping from translation comments * Fix typo in rule message * Split too-long translation strings * Add utility for generating test locales * Update playwright tests for new strings * Replace `pt` with `ru` for translation banners Signed-off-by: Olga Bulat <[email protected]> * Put back placeholders in lots of strings --------- Signed-off-by: Olga Bulat <[email protected]> Co-authored-by: Olga Bulat <[email protected]>
WordPress · Mar 26, 2024 · 6b49eed · 6b49eed
1 parent b81df4a
commit 6b49eed
Show file tree

Hide file tree

Showing 62 changed files with 3,314 additions and 1,334 deletions.
diff --git a/documentation/frontend/reference/i18n.md b/documentation/frontend/reference/i18n.md
@@ -74,3 +74,52 @@ processed and loaded into Nuxt via the Nuxt i18n module.
 - Pass the fallback locale mappings to the underlying Vue i18n plugin. This is
   configured in the plugin configuration file,
   `frontend/src/plugins/vue-i18n.ts`.
+
+## Test locales
+
+Three locales are maintained in the code base (as opposed to downloaded from
+Glotpress) for use in testing, alongside the default English locale. These
+locales are **not** meant to be representative of actual final translations.
+They are merely used to approximate length and language features that help
+identify potential layout issues in the application.
+
+The following languages are used:
+
+- Arabic (`ar`)
+- Russian (`ru`)
+- Spanish (`es`)
+
+The JSON files for these test locales are located in `frontend/test/locales`.
+
+In the past, Openverse maintainers updated these locales by hand when new
+strings were introduced or changed. That is no longer necessary. Instead, use
+the `generate_test_locales` utility, which relies on Argos Translate to generate
+new testing translations on your local machine. It only translates strings for
+keys that are not already present in the test locales. This means you can freely
+make manual changes to the generated strings if you feel there is a better way
+to represent features of a particular string in the test locale languages (for
+example, if you speak any of these languages and happen to know a generated
+translation is badly inaccurate).
+
+To use the script:
+
+```shell
+# Install python dependencies
+just utilities/generate_test_locales/install
+
+# Run the script
+just utilities/generate_test_locales/run
+```
+
+The script caches Argos translation packages on your local machine. The first
+time you run the script, it will take a little longer while it updates the
+package repository and downloads the necessary translation models. Subsequent
+runs will start much faster, unless there are updates to the language packages,
+in which case they will be downloaded.
+
+Due to the nature of how the script traverses the locales, some runs may reorder
+keys. The order of keys in the JSON file is meaningless, but can create noise in
+diffs. If it is too noisy for a particular change, you can generate a patch of
+just the new or changed strings, revert the overall changes, and then apply the
+patch of new strings (either manually or using git and then resolving
+conflicts).
diff --git a/frontend/package.json b/frontend/package.json
@@ -124,7 +124,6 @@
     "chokidar": "^3.5.3",
     "comment-json": "^4.2.3",
     "css-loader": "^5.2.7",
-    "eslint-plugin-jsonc": "^2.8.0",
     "jest": "^26.6.3",
     "jest-fail-on-console": "^3.1.1",
     "jest-transform-stub": "^2.0.0",

diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
diff --git a/frontend/src/locales/scripts/read-i18n.js b/frontend/src/locales/scripts/read-i18n.js
@@ -132,7 +132,7 @@ const parseComment = (commentNode) => {
     case "CommentBlock": {
       return commentNode.value
         .replace(/\n|\*+/g, "")
-        .replace(/\s+/, " ")
+        .replace(/\s+/g, " ")
         .trim()
     }
   }

diff --git a/frontend/src/pages/about.vue b/frontend/src/pages/about.vue
@@ -7,58 +7,70 @@
       {{ $t("about.description.content", { openverse: "Openverse" }) }}
     </p>
 
-    <i18n path="about.collection.content" tag="p">
-      <template #openverse>Openverse</template>
-      <template #commonCrawl>
-        <VLink href="https://commoncrawl.org/">Common Crawl</VLink>
-      </template>
-    </i18n>
+    <p>
+      <i18n path="about.collection.content.a" tag="span">
+        <template #openverse>Openverse</template>
+        <template #commonCrawl>
+          <VLink href="https://commoncrawl.org/">Common Crawl</VLink>
+        </template>
+      </i18n>
+      {{ $t("about.collection.content.b") }}
+    </p>
 
-    <i18n path="about.planning.content" tag="p">
-      <template #openverse>Openverse</template>
-      <template #repository>
-        <VLink href="https://github.com/wordpress/openverse">{{
-          $t("about.planning.repository", {
-            openverse: "Openverse",
-            github: "GitHub",
-          })
-        }}</VLink>
-      </template>
-      <template #community>
-        <VLink href="https://docs.openverse.org/general/contributing">{{
-          $t("about.planning.community")
-        }}</VLink>
-      </template>
-      <template #working>
-        <VLink href="https://github.com/orgs/WordPress/projects/75">{{
-          $t("about.planning.working")
-        }}</VLink>
-      </template>
-    </i18n>
+    <p>
+      {{ $t("about.planning.content.a", { openverse: "Openverse" }) }}
+      {{ $t("about.planning.content.b") }}
+      <i18n path="about.planning.content.c" tag="span">
+        <template #openverse>Openverse</template>
+        <template #repository>
+          <VLink href="https://github.com/wordpress/openverse">{{
+            $t("about.planning.repository", {
+              openverse: "Openverse",
+              github: "GitHub",
+            })
+          }}</VLink>
+        </template>
+        <template #community>
+          <VLink href="https://make.wordpress.org/openverse/">{{
+            $t("about.planning.community")
+          }}</VLink>
+        </template>
+        <template #working>
+          <VLink href="https://github.com/orgs/WordPress/projects/3">{{
+            $t("about.planning.working")
+          }}</VLink>
+        </template>
+      </i18n>
+    </p>
 
-    <i18n path="about.transfer.content" tag="p">
-      <template #openverse>Openverse</template>
-      <template #creativeCommons>
-        <VLink
-          href="https://creativecommons.org/2021/05/03/cc-search-to-join-wordpress/"
-          >Creative Commons</VLink
-        >
-      </template>
-      <template #wordpress>
-        <VLink href="https://ma.tt/2021/04/cc-search-to-join-wordpress-org/"
-          >WordPress</VLink
-        >
-      </template>
-    </i18n>
+    <p>
+      {{ $t("about.transfer.content.a", { openverse: "Openverse" }) }}
+      <i18n path="about.transfer.content.b" tag="span">
+        <template #creativeCommons>
+          <VLink
+            href="https://creativecommons.org/2021/05/03/cc-search-to-join-wordpress/"
+            >Creative Commons</VLink
+          >
+        </template>
+        <template #wordpress>
+          <VLink href="https://ma.tt/2021/04/cc-search-to-join-wordpress-org/"
+            >WordPress</VLink
+          >
+        </template>
+      </i18n>
+      {{ $t("about.transfer.content.c") }}
+    </p>
 
-    <i18n path="about.declaration.content" tag="p">
-      <template #openverse>Openverse</template>
-      <template #terms>
-        <VLink href="https://creativecommons.org/terms/">{{
-          $t("about.declaration.terms", { openverse: "Openverse" })
-        }}</VLink>
-      </template>
-    </i18n>
+    <p>
+      {{ $t("about.declaration.content.a", { openverse: "Openverse" }) }}
+      <i18n path="about.declaration.content.b" tag="span">
+        <template #terms>
+          <VLink href="https://creativecommons.org/terms/">{{
+            $t("about.declaration.terms", { openverse: "Openverse" })
+          }}</VLink>
+        </template>
+      </i18n>
+    </p>
 
     <h2 id="external-sources">
       {{ $t("externalSourcesPage.title") }}
@@ -70,18 +82,30 @@
         <VLink href="/sources">{{ $t("externalSourcesPage.link") }}</VLink>
       </template>
     </i18n>
+
     <p>
-      {{ $t("externalSourcesPage.license", { openverse: "Openverse" }) }}
+      {{ $t("externalSourcesPage.license.a", { openverse: "Openverse" }) }}
+      {{ $t("externalSourcesPage.license.b", { openverse: "Openverse" }) }}
+      {{ $t("externalSourcesPage.license.c") }}
     </p>
+
     <p>
       {{ $t("externalSourcesPage.explanation", { openverse: "Openverse" }) }}
     </p>
+
     <p>
-      {{ $t("externalSourcesPage.relationships", { openverse: "Openverse" }) }}
+      {{
+        $t("externalSourcesPage.relationships.a", { openverse: "Openverse" })
+      }}
+      {{
+        $t("externalSourcesPage.relationships.b", { openverse: "Openverse" })
+      }}
     </p>
+
     <h2>
       {{ $t("externalSourcesPage.new.title") }}
     </h2>
+
     <i18n path="externalSourcesPage.new.content" tag="p">
       <template #issue>
         <VLink
@@ -101,16 +125,16 @@
     </h2>
     <i18n path="externalSourcesPage.why.content" tag="p">
       <template #old>
-        <VLink
-          aria-label="email"
-          href="https://oldsearch.creativecommons.org"
-          >{{ $t("externalSourcesPage.why.old") }}</VLink
+        <VLink href="https://oldsearch.creativecommons.org"
+          >oldsearch.creativecommons.org</VLink
         >
       </template>
     </i18n>
 
     <p>
-      {{ $t("externalSourcesPage.why.new", { openverse: "Openverse" }) }}
+      {{ $t("externalSourcesPage.why.new.a", { openverse: "Openverse" }) }}
+      {{ $t("externalSourcesPage.why.new.b") }}
+      {{ $t("externalSourcesPage.why.new.c") }}
     </p>
     <i18n path="externalSourcesPage.why.feedbackSuggestions" tag="p">
       <template #feedback>

diff --git a/frontend/src/pages/privacy.vue b/frontend/src/pages/privacy.vue
@@ -15,9 +15,10 @@
     <h2>
       {{ $t("privacy.cookies.title") }}
     </h2>
-    <i18n path="privacy.cookies.content" tag="p">
-      <template #openverse>Openverse</template>
-    </i18n>
+    <p>
+      {{ $t("privacy.cookies.content.a", { openverse: "Openverse" }) }}
+      {{ $t("privacy.cookies.content.b", { openverse: "Openverse" }) }}
+    </p>
 
     <h2>
       {{ $t("privacy.contact.title") }}