This is an automated email from the ASF dual-hosted git repository.
shenghang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/seatunnel-website.git
The following commit(s) were added to refs/heads/main by this push:
new 2273414c619a [Feature] Integrate Google Translate for multi-language
support (#404)
2273414c619a is described below
commit 2273414c619a520d2df5b915f86a603b1dd2d1cb
Author: David Zollo <[email protected]>
AuthorDate: Tue Dec 30 19:55:45 2025 +0800
[Feature] Integrate Google Translate for multi-language support (#404)
---
.../NavbarItem/LocaleDropdownNavbarItem/index.js | 125 +++++++++++++++++++++
.../LocaleDropdownNavbarItem/styles.module.css | 11 ++
static/js/google_translate_init.js | 11 ++
3 files changed, 147 insertions(+)
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js
b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js
new file mode 100644
index 000000000000..9add6b242ccb
--- /dev/null
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.js
@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
+import { translate } from '@docusaurus/Translate';
+import { useLocation } from '@docusaurus/router';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import IconLanguage from '@theme/Icon/Language';
+import styles from './styles.module.css';
+
+const GOOGLE_LANGUAGES = [
+ { label: '日本語', code: 'ja' },
+ { label: '한국어', code: 'ko' },
+ { label: 'Français', code: 'fr' },
+ { label: 'Español', code: 'es' },
+ { label: 'Русский', code: 'ru' },
+ { label: 'Deutsch', code: 'de' },
+];
+
+export default function LocaleDropdownNavbarItem({
+ mobile,
+ dropdownItemsBefore,
+ dropdownItemsAfter,
+ ...props
+}) {
+ const {
+ i18n: { currentLocale, locales, localeConfigs },
+ } = useDocusaurusContext();
+ const alternatePageUtils = useAlternatePageUtils();
+ const { search, hash } = useLocation();
+
+ // Clear Google Translate cookie if we are on a native locale page
+ React.useEffect(() => {
+ if (currentLocale === 'en' || currentLocale === 'zh-CN') {
+ const clearCookie = (name) => {
+ document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00
UTC; path=/;';
+ document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00
UTC; path=/seatunnel-website;';
+ document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00
UTC; domain=.' + document.domain + '; path=/;';
+ };
+ clearCookie('googtrans');
+ const frame = document.querySelector('.goog-te-banner-frame');
+ if (frame) {
+ frame.style.display = 'none';
+ }
+ }
+ }, [currentLocale]);
+
+ // Detect if we're on a versioned documentation page
+ const currentPath = typeof window !== 'undefined' ?
window.location.pathname : '';
+ const versionMatch = currentPath.match(/^\/docs\/([^/]+)\//);
+ const isVersionedDoc = versionMatch && versionMatch[1] !== '';
+
+ // Helper function to trigger Google Translate programmatically
+ const handleGoogleTranslate = (langCode) => {
+ const select = document.querySelector('.goog-te-combo');
+ if (select) {
+ select.value = langCode;
+ select.dispatchEvent(new Event('change'));
+ }
+ };
+
+ const localeItems = locales.map((locale) => {
+ const baseTo = `pathname://${alternatePageUtils.createUrl({
+ locale,
+ fullyQualified: false,
+ })}`;
+ const to = `${baseTo}${search}${hash}`;
+
+ return {
+ label: localeConfigs[locale].label,
+ lang: localeConfigs[locale].htmlLang,
+ to,
+ target: '_self',
+ autoAddBaseUrl: false,
+ className:
+ locale === currentLocale
+ ? mobile
+ ? 'menu__link--active'
+ : 'dropdown__link--active'
+ : '',
+ onClick: () => {
+ // Clear Google Translate cookie when switching to native
locales
+ document.cookie = 'googtrans=; expires=Thu, 01 Jan 1970
00:00:00 UTC; path=/;';
+ }
+ };
+ });
+
+ const googleItems = GOOGLE_LANGUAGES.map((lang) => ({
+ label: lang.label,
+ to: '#',
+ onClick: (e) => {
+ e.preventDefault();
+ handleGoogleTranslate(lang.code);
+ },
+ }));
+
+ const items = [...dropdownItemsBefore, ...localeItems, ...googleItems,
...dropdownItemsAfter];
+ const dropdownLabel = mobile
+ ? translate({
+ message: 'Languages',
+ id: 'theme.navbar.mobileLanguageDropdown.label',
+ description: 'The label for the mobile language switcher dropdown',
+ })
+ : localeConfigs[currentLocale].label;
+
+ return (
+ <DropdownNavbarItem
+ {...props}
+ mobile={mobile}
+ label={
+ <>
+ <div id="google_translate_element" style={{ visibility:
'hidden', height: 0, overflow: 'hidden', position: 'absolute' }} />
+ <IconLanguage className={styles.iconLanguage} />
+ {dropdownLabel}
+ </>
+ }
+ items={items}
+ />
+ );
+}
diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
new file mode 100644
index 000000000000..ef086390bebf
--- /dev/null
+++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.iconLanguage {
+ vertical-align: text-bottom;
+ margin-right: 5px;
+}
diff --git a/static/js/google_translate_init.js
b/static/js/google_translate_init.js
new file mode 100644
index 000000000000..5826a162ad1d
--- /dev/null
+++ b/static/js/google_translate_init.js
@@ -0,0 +1,11 @@
+function googleTranslateElementInit() {
+ new google.translate.TranslateElement(
+ {
+ pageLanguage: "en",
+ // Only languages NOT provided by native Docusaurus i18n
+ includedLanguages: "zh-CN,ja,ko,fr,es,ru,de",
+ autoDisplay: false,
+ },
+ "google_translate_element"
+ );
+}
