From be8852c8b0f3bc4296eb77e44a108bf5e1f86f40 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Thu, 2 May 2024 23:56:58 +0200
Subject: [PATCH] enhance(l10n): localize "(en-US)" indicator (#10996)

Links in other locales that point to the English locale often
have an indicator "(en-US)", but this is rather technical and not
ideal from a user experience point of view.

This PR replaces the indicator by a localized one, added via CSS.

---------

Co-authored-by: A1lo <yin199909@aliyun.com>
---
 build/flaws/broken-links.ts    |  1 -
 client/src/document/index.scss | 40 ++++++++++++++++++++++++++++++++++
 kumascript/src/api/web.ts      |  2 +-
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/build/flaws/broken-links.ts b/build/flaws/broken-links.ts
index 6650466d31a6..412561cb966a 100644
--- a/build/flaws/broken-links.ts
+++ b/build/flaws/broken-links.ts
@@ -54,7 +54,6 @@ function mutateLink(
     // As we still suggest the translated version even if we only
     // have an English (US) version.
     $element.attr("href", enUSFallback);
-    $element.append(` <small>(${DEFAULT_LOCALE})<small>`);
     $element.addClass("only-in-en-us");
     $element.attr("title", "Currently only available in English (US)");
   } else if (suggestion) {
diff --git a/client/src/document/index.scss b/client/src/document/index.scss
index 3c55c8536ca1..8292c1ed3b7b 100644
--- a/client/src/document/index.scss
+++ b/client/src/document/index.scss
@@ -942,3 +942,43 @@ kbd {
     opacity: 0.4;
   }
 }
+
+html a.only-in-en-us:after {
+  content: "(en-US)";
+  font-size: smaller;
+  vertical-align: super;
+}
+
+html[lang="es"] a.only-in-en-us:after {
+  content: "(inglés)";
+}
+
+html[lang="fr"] a.only-in-en-us:after {
+  content: "(angl.)";
+}
+
+html[lang="ja"] a.only-in-en-us:after {
+  content: "(英語)";
+}
+
+html[lang="ko"] a.only-in-en-us:after {
+  content: "(영어)";
+}
+
+html[lang="ru"] a.only-in-en-us:after {
+  content: "(англ.)";
+}
+
+html[lang="pt-BR"] a.only-in-en-us:after {
+  content: "(inglês)";
+}
+
+html[lang="zh-CN"] a.only-in-en-us:after {
+  content: "（英语）";
+  vertical-align: baseline;
+}
+
+html[lang="zh-TW"] a.only-in-en-us:after {
+  content: "（英語）";
+  vertical-align: baseline;
+}
diff --git a/kumascript/src/api/web.ts b/kumascript/src/api/web.ts
index 5697b10a7425..3fb5e8fa07dc 100644
--- a/kumascript/src/api/web.ts
+++ b/kumascript/src/api/web.ts
@@ -155,7 +155,7 @@ const web = {
         return (
           '<a class="only-in-en-us" ' +
           'title="Currently only available in English (US)" ' +
-          `href="${enUSPage.url}"${flawAttribute}>${content} <small>(en-US)</small></a>`
+          `href="${enUSPage.url}"${flawAttribute}>${content}</a>`
         );
       }
     }