feat: add Google Translate integration

[kaankacar]

This PR adds a Google Translate widget to the navbar, allowing users to translate the documentation into various languages.

Changes:

• Updated docusaurus.config.ts:
• Added the Google Translate external script to the scripts array.
• Added a custom HTML navbar item featuring the Google Translate icon.
• Implemented a lightweight plugin to inject the required googleTranslateElementInit global callback function.
• Configured the onclick handler to properly initialize the google.translate.TranslateElement widget and prevent default link behavior.

Verification:

• Verified locally that the Google Translate icon appears in the navbar.
• Confirmed that clicking the icon successfully opens the translation widget without reloading the page.

[Copilot]

Pull request overview

This PR adds Google Translate functionality to the Docusaurus documentation site by integrating the Google Translate widget into the navbar. The implementation includes external script loading, a custom plugin for initialization callback, and an HTML navbar item with an onclick handler.

Key Changes:

• Added Google Translate external script along with GitHub buttons and Font Awesome scripts
• Implemented a lightweight Docusaurus plugin that injects an empty googleTranslateElementInit callback function
• Added a custom HTML navbar item featuring a translate icon with inline onclick handler to initialize the translation widget

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Using inline styles (style="display:inline-block" and style="vertical-align: text-bottom") is not a best practice in modern web development and makes styling inconsistent and harder to maintain.

Consider:

1. Moving these styles to a CSS/SCSS file
2. Using CSS classes instead of inline styles
3. Following the existing styling patterns in the Docusaurus theme

[Copilot]

[nitpick] Loading external scripts without Subresource Integrity (SRI) hashes could pose a security risk if the third-party sources are compromised. While this is common practice for well-known CDNs like GitHub buttons and Font Awesome, consider adding SRI hashes for additional security or using a Content Security Policy (CSP) to restrict script sources.

This is particularly relevant for production deployments.

[Copilot]

The googleTranslateElementInit function is defined as an empty function but never actually initializes the Google Translate element. This means the translate widget won't work automatically on page load. The initialization logic is currently only in the onclick handler of the navbar link.

Consider implementing the function to actually initialize the translate element, or if you want the widget to only appear on click, you may not need this callback function at all (and can remove the ?cb=googleTranslateElementInit parameter from the script URL).

Suggested change

	function googleTranslateElementInit() {}
	function googleTranslateElementInit() {
	new google.translate.TranslateElement({
	pageLanguage: 'en',
	includedLanguages: 'en,es',
	layout: google.translate.TranslateElement.InlineLayout.SIMPLE
	}, 'google_translate_element');
	}

[Copilot]

This inline HTML is extremely long and difficult to maintain. The onclick handler contains a hardcoded list of 100+ language codes, making it fragile and hard to update.

Consider:

1. Moving this logic to a separate JavaScript file or React component
2. Storing the language list in a configuration variable
3. Using a more maintainable approach with proper event handlers instead of inline onclick

Example refactor:

const TRANSLATE_LANGUAGES = 'af,sq,am,en,fa,ar,...';
// Then reference this in a cleaner HTML structure or component

[Copilot]

The class attribute contains "navbar__link false" which includes a literal "false" string. This appears to be a mistake - it looks like this should either be a conditional class or just "navbar__link".

If you're not using a conditional here, remove the "false" string:

<a class="navbar__link" href="#" ...>

[Copilot]

The translate link is missing essential accessibility attributes. The link has no accessible label for screen readers to announce what the button does.

Add an aria-label attribute:

<a class="navbar__link" href="#" aria-label="Translate page" onclick="...">

[Copilot]

The onclick handler creates a new TranslateElement instance every time the link is clicked, which could lead to multiple widgets being initialized and potential memory leaks or unexpected behavior.

Consider tracking whether the element has already been initialized:

onclick="if (!window.googleTranslateInitialized) { new google.translate.TranslateElement({...}, 'google_translate_element'); window.googleTranslateInitialized = true; } return false;"

[briwylde08]

This is so exciting! It's looking great. There are a few UI nits --

This image shows how the translated pages make some headings unviewable.

If you translate a page and scroll down, the translation bar thing covers the headings.

Not sure if these are easy fixes? But thought I'd call them out for us to discuss.

[ElliotFriend]

Closing in favor of #2097