Demo of error page translation

This commit demonstrates front-end-side translation of an error page for a URL like /viewer#INVALIDBOOK/whatever (where INVALIDBOOK should be a book name NOT present in the library). Known issues: - This change breaks a couple of subtests in the ServerTest.Http404HtmlError unit test. - Changing the UI language while an error page is displayed in the viewer doesn't retranslate it.
kiwix · Jan 9, 2024 · 151cfce · 151cfce
1 parent bceba4d
commit 151cfce
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 12 deletions.
diff --git a/src/server/internalServer.cpp b/src/server/internalServer.cpp
@@ -1133,7 +1133,7 @@ std::unique_ptr<Response> InternalServer::handle_content(const RequestContext& r
 
   if (archive == nullptr) {
     const std::string searchURL = m_root + "/search?pattern=" + kiwix::urlEncode(pattern);
-    return UrlNotFoundResponse(request)
+    return UrlNotFoundResponse(request, true)
            + suggestSearchMsg(searchURL, kiwix::urlDecode(pattern));
   }
 

diff --git a/src/server/response.cpp b/src/server/response.cpp
@@ -334,16 +334,20 @@ HTTPErrorResponse::HTTPErrorResponse(const RequestContext& request,
   });
 }
 
-HTTP404Response::HTTP404Response(const RequestContext& request)
+HTTP404Response::HTTP404Response(const RequestContext& request,
+                                 bool includeKiwixResponseData)
   : HTTPErrorResponse(request,
                       MHD_HTTP_NOT_FOUND,
                       "404-page-title",
-                      "404-page-heading")
+                      "404-page-heading",
+                      std::string(),
+                      includeKiwixResponseData)
 {
 }
 
-UrlNotFoundResponse::UrlNotFoundResponse(const RequestContext& request)
-    : HTTP404Response(request)
+UrlNotFoundResponse::UrlNotFoundResponse(const RequestContext& request,
+                                         bool includeKiwixResponseData)
+    : HTTP404Response(request, includeKiwixResponseData)
 {
   const std::string requestUrl = urlDecode(m_request.get_full_url(), false);
   *this += ParameterizedMessage("url-not-found", {{"url", requestUrl}});

diff --git a/src/server/response.h b/src/server/response.h
@@ -160,12 +160,14 @@ struct HTTPErrorResponse : ContentResponseBlueprint
 
 struct HTTP404Response : HTTPErrorResponse
 {
-  explicit HTTP404Response(const RequestContext& request);
+  explicit HTTP404Response(const RequestContext& request,
+                           bool includeKiwixResponseData = false);
 };
 
 struct UrlNotFoundResponse : HTTP404Response
 {
-  explicit UrlNotFoundResponse(const RequestContext& request);
+  explicit UrlNotFoundResponse(const RequestContext& request,
+                               bool includeKiwixResponseData = false);
 };
 
 struct HTTP400Response : HTTPErrorResponse

diff --git a/static/skin/i18n.js b/static/skin/i18n.js
@@ -69,6 +69,37 @@ function $t(msgId, params={}) {
   }
 }
 
+const I18n = {
+  instantiateParameterizedMessages: function(data) {
+    if ( data.__proto__ == Array.prototype ) {
+      const result = [];
+      for ( const x of data ) {
+        result.push(this.instantiateParameterizedMessages(x));
+      }
+      return result;
+    } else if ( data.__proto__ == Object.prototype ) {
+      const msgId = data.msgid;
+      const msgParams = data.params;
+      if ( msgId && msgId.__proto__ == String.prototype && msgParams && msgParams.__proto__ == Object.prototype ) {
+        return $t(msgId, msgParams);
+      } else {
+        const result = {};
+        for ( const p in data ) {
+          result[p] = this.instantiateParameterizedMessages(data[p]);
+        }
+        return result;
+      }
+    } else {
+      return data;
+    }
+  },
+
+  render: function (template, params) {
+    params = this.instantiateParameterizedMessages(params);
+    return mustache.render(template, params);
+  }
+}
+
 const DEFAULT_UI_LANGUAGE = 'en';
 
 Translations.load(DEFAULT_UI_LANGUAGE, /*asDefault=*/true);
@@ -145,3 +176,4 @@ window.$t = $t;
 window.getUserLanguage = getUserLanguage;
 window.setUserLanguage = setUserLanguage;
 window.initUILanguageSelector = initUILanguageSelector;
+window.I18n = I18n;
diff --git a/static/skin/viewer.js b/static/skin/viewer.js
@@ -249,6 +249,25 @@ function handle_location_hash_change() {
   history.replaceState(viewerState, null);
 }
 
+function translateErrorPageIfNeeded() {
+  const cw = contentIframe.contentWindow;
+  if ( cw.KIWIX_RESPONSE_TEMPLATE && cw.KIWIX_RESPONSE_DATA ) {
+    const template = htmlDecode(cw.KIWIX_RESPONSE_TEMPLATE);
+
+    // cw.KIWIX_RESPONSE_DATA belongs to the iframe context and running
+    // I18n.render() on it directly in the top context doesn't work correctly
+    // because the type checks (obj.__proto__ == ???.prototype) in
+    // I18n.instantiateParameterizedMessages() always fail (String.prototype
+    // refers to different objects in different contexts).
+    // Work arround that issue by copying the object into our context.
+    const params = JSON.parse(JSON.stringify(cw.KIWIX_RESPONSE_DATA));
+
+    const html = I18n.render(template, params);
+    const htmlDoc = new DOMParser().parseFromString(html, "text/html");
+    cw.document.documentElement.innerHTML = htmlDoc.documentElement.innerHTML;
+  }
+}
+
 function handle_content_url_change() {
   const iframeLocation = contentIframe.contentWindow.location;
   console.log('handle_content_url_change: ' + iframeLocation.href);
@@ -258,6 +277,7 @@ function handle_content_url_change() {
   const newHash = iframeUrl2UserUrl(iframeContentUrl, iframeContentQuery);
   history.replaceState(viewerState, null, makeURL(location.search, newHash));
   updateCurrentBookIfNeeded(newHash);
+  translateErrorPageIfNeeded();
 };
 
 ////////////////////////////////////////////////////////////////////////////////

diff --git a/test/server.cpp b/test/server.cpp
@@ -59,7 +59,7 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css?cacheid=ef30cd42" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=6a8c6fb2" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=4ab55b42" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=1e78e7cf" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
@@ -75,7 +75,7 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/taskbar.css?cacheid=e014a885" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/viewer.js?cacheid=948df083" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/viewer.js?cacheid=b6a17838" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/fonts/Poppins.ttf?cacheid=af705837" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Roboto.ttf" },
@@ -285,7 +285,7 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9"
     <link rel="mask-icon" href="/ROOT%23%3F/skin/favicon/safari-pinned-tab.svg?cacheid=8d487e95" color="#5bbad5">
     <link rel="shortcut icon" href="/ROOT%23%3F/skin/favicon/favicon.ico?cacheid=92663314">
     <meta name="msapplication-config" content="/ROOT%23%3F/skin/favicon/browserconfig.xml?cacheid=f29a7c4a">
-    <script type="module" src="/ROOT%23%3F/skin/i18n.js?cacheid=6a8c6fb2" defer></script>
+    <script type="module" src="/ROOT%23%3F/skin/i18n.js?cacheid=4ab55b42" defer></script>
     <script type="text/javascript" src="/ROOT%23%3F/skin/languages.js?cacheid=96f2cf73" defer></script>
     <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
@@ -318,9 +318,9 @@ R"EXPECTEDRESULT(                                <img src="${root}/skin/download
 R"EXPECTEDRESULT(    <link type="text/css" href="./skin/kiwix.css?cacheid=2158fad9" rel="Stylesheet" />
     <link type="text/css" href="./skin/taskbar.css?cacheid=e014a885" rel="Stylesheet" />
     <link type="text/css" href="./skin/autoComplete/css/autoComplete.css?cacheid=ef30cd42" rel="Stylesheet" />
-    <script type="module" src="./skin/i18n.js?cacheid=6a8c6fb2" defer></script>
+    <script type="module" src="./skin/i18n.js?cacheid=4ab55b42" defer></script>
     <script type="text/javascript" src="./skin/languages.js?cacheid=96f2cf73" defer></script>
-    <script type="text/javascript" src="./skin/viewer.js?cacheid=948df083" defer></script>
+    <script type="text/javascript" src="./skin/viewer.js?cacheid=b6a17838" defer></script>
     <script type="text/javascript" src="./skin/autoComplete/autoComplete.min.js?cacheid=1191aaaf"></script>
       const blankPageUrl = root + "/skin/blank.html?cacheid=6b1fa032";
           <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>