[i18n] Google translate button in fallback pages for all locales (#6117)

Author: chalin

.gitmodules

@@ -2,7 +2,7 @@
 [submodule "themes/docsy"]
 	path = themes/docsy
 	url = https://github.com/google/docsy.git
-	docsy-pin = v0.11.0-37-ga854cb31
+	docsy-pin = v0.11.0-38-g77da7e49
 	docsy-note = "2024-04-01 Switching to google/docsy.git from cncf/docsy.git since we don't have any CNCF customizations."
 	docsy-reminder = "Ensure that any tag referenced by `docsy-pin` is present in the remote repo (url), otherwise add (push) the tags to the repo."
 [submodule "content-modules/opentelemetry-specification"]

.htmltest.yml

@@ -34,6 +34,7 @@ IgnoreURLs: # list of regexs of paths or URLs to be ignored
 
   - ^https://deploy-preview-\d+--opentelemetry.netlify.app/
   - ^https://www\.googletagmanager\.com
+  - ^(https:)?//translate.google.com
 
   - ^https?://localhost\b
   - ^https?://127\.0\.0\.1\b

assets/scss/_styles_project.scss

@@ -323,3 +323,15 @@ details {
     overflow-y: auto;
   }
 }
+
+// Google translate select / dropdown
+
+.goog-te-gadget {
+  // cSpell:ignore goog
+  padding-top: 1rem;
+  margin-bottom: -0.5rem;
+
+  @include media-breakpoint-up(md) {
+    padding-left: 0.6rem;
+  }
+}

layouts/docs/baseof.html

@@ -17,6 +17,7 @@
       <div class="td-main">
         <div class="row flex-xl-nowrap">
           <aside class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+            <div id="google_translate_element"></div>
             {{ partial "sidebar.html" . }}
           </aside>
           <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
@@ -36,5 +37,6 @@
       {{ partial "footer.html" . }}
     </div>
     {{ partial "scripts.html" . }}
+    {{ partial "translate-scripts.html" . -}}
   </body>
 </html>

layouts/partials/translate-scripts.html

@@ -0,0 +1,99 @@
+{{/* cSpell:ignore goog
+<!-- prettier-ignore -->
+*/ -}}
+{{ $pageProseLang := partial "i18n/lang.html" . -}}
+{{ $siteLang := .Site.Language.Lang -}}
+{{- if ne $siteLang $pageProseLang -}}
+
+<script type="text/javascript">
+  const infoToConsole = false;
+  const consoleInfo = (msg) => {
+    if (infoToConsole) console.log(msg);
+  };
+
+  const gtContainerID = 'google_translate_element';
+  const siteLang = '{{ $siteLang }}';
+  let translationBarSeen = false;
+
+  const getGtSelectElt = () => document.querySelector('select.goog-te-combo');
+
+  function waitForGtSelectElt(siteLang) {
+    const observer = new MutationObserver((mutations, obs) => {
+      if (!getGtSelectElt()) return;
+      obs.disconnect(); // Stop observing
+      observeGoogleTranslateBar();
+    });
+    const elt = document.querySelector(`#${gtContainerID}`) || document.body;
+    observer.observe(elt, { childList: true, subtree: true });
+  }
+
+  function hasVisibleTranslationBar() {
+    let iframe = document.querySelector('.skiptranslate > iframe');
+    let translateBar = iframe && iframe.parentElement;
+    if (!translateBar) return false;
+
+    let computedStyle = window.getComputedStyle(translateBar);
+    let style = computedStyle.display;
+    consoleInfo(`hVTB: style is '${style}'`);
+    if (!style || style === 'none') return false;
+    return true;
+  }
+
+  function adjustNavbarPosition() {
+    if (hasVisibleTranslationBar()) {
+      const extraMargin = '40px'; // TODO: declare modifier style in SCSS file instead
+      const navBarElt = document.querySelector('.td-navbar');
+      if (navBarElt.style.marginTop === extraMargin) return;
+      navBarElt.style.marginTop = extraMargin; // Position navbar bellow GT banner
+      consoleInfo(
+        `adjustNavbarPos: GT banner present, navbar lowered by ${extraMargin}`,
+      );
+      translationBarSeen = true;
+    } else if (translationBarSeen) {
+      translationBarSeen = false;
+      let navBarElt = document.querySelector('.td-navbar');
+      navBarElt.style.marginTop = ''; // Reset position if GT banner is gone
+      consoleInfo(`adjustNavbarPos: GT bar is gone; navbar style reset`);
+    } else {
+      consoleInfo(`adjustNavbarPos: no action`);
+    }
+  }
+
+  function observeGoogleTranslateBar() {
+    const observer = new MutationObserver((mutations, obs) =>
+      adjustNavbarPosition(),
+    );
+    observer.observe(document.body, { childList: true, subtree: true });
+  }
+
+  window.onload = function () {
+    consoleInfo(`Doc loaded`);
+    translationBarSeen = false;
+    waitForGtSelectElt(siteLang);
+  };
+
+  function googleTranslateElementInit() {
+    const pageLanguage = '{{ $pageProseLang }}';
+    // Languages codes supported by Google for the locales in OTel.io site
+    let allLangArr = ['en', 'es', 'fr', 'ja', 'pt', 'zh-cn'];
+    const allLangButPageLang = allLangArr
+      .filter((lang) => !lang.startsWith(pageLanguage))
+      .join(',');
+    new google.translate.TranslateElement(
+      {
+        pageLanguage: pageLanguage,
+        includedLanguages: allLangButPageLang,
+        // autoDisplay: true,
+        multilanguagePage: true,
+      },
+      gtContainerID,
+    );
+  }
+</script>
+
+<script
+  type="text/javascript"
+  src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
+></script>
+
+{{- end -}}