Skip to content

feat: add Google Translate integration #2079

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kaankacar wants to merge 2 commits into from
Closed

feat: add Google Translate integration #2079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9ab0eb3
feat: add Google Translate integration
kaankacar Dec 1, 2025
37c791c
Fix Google Translate header visibility and navbar overlap
kaankacar Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,27 @@ const config: Config = {
defaultLocale: DEFAULT_LOCALE,
locales: ["en", "es"],
},
scripts: [
'https://buttons.github.io/buttons.js',
'https://use.fontawesome.com/221fd444f5.js',
'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit',
Comment on lines +35 to +37
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[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 uses AI. Check for mistakes.
],
plugins: [
() => ({
name: 'google-translate-init',
injectHtmlTags() {
return {
headTags: [
{
tagName: 'script',
innerHTML: `
function googleTranslateElementInit() {}
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
`,
},
],
};
},
}),
"docusaurus-plugin-sass",
[
"docusaurus-plugin-sentry",
Expand Down Expand Up @@ -161,6 +181,12 @@ const config: Config = {
className: "header-github-link",
'aria-label': "GitHub",
},
{
type: 'html',
position: 'right',
value:
'<div id="google_translate_element" style="display:inline-block"></div><a class="navbar__link false" href="#" onclick="new google.translate.TranslateElement({pageLanguage: \'en\', includedLanguages: \'af,sq,am,en,fa,ar,ps,ja,zh-CN,hy,az,eu,be,bn,bs,bg,ca,ceb,ny,zh-TW,co,hr,cs,da,nl,eo,et,tl,fi,fr,fy,gl,ka,de,el,gu,ht,ha,haw,iw,hi,hmn,hu,is,ig,id,ga,it,jw,kn,kk,km,ko,ku,ky,lo,la,lv,lt,lb,mk,mg,ms,ml,mt,mi,mr,mn,my,ne,no,pl,pt,pa,ro,ru,sm,gd,sr,st,sn,sd,si,sk,sl,so,es,su,sw,sv,tg,ta,te,th,tr,uk,ur,uz,vi,cy,xh,yi,yo,zu\'}, \'google_translate_element\'); return false;"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" style="vertical-align: text-bottom"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg></a>',
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
Copy link

Copilot AI Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;"

Copilot uses AI. Check for mistakes.
},
],
},
algolia: {
Expand Down
60 changes: 32 additions & 28 deletions src/css/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,10 @@ html[data-theme="dark"] {
--ifm-background-color: var(--ifm-color-black);
}

.markdown > h4 {
.markdown>h4 {
--ifm-h4-font-size: 1.25rem;

margin-bottom: calc(
var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading)
);
margin-bottom: calc(var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading));
margin-top: calc(var(--ifm-h4-vertical-rhythm-top) * var(--ifm-leading));
}

Expand All @@ -93,8 +91,7 @@ html[data-theme="dark"] {
svg {
height: 1.5rem;
width: 1.5rem;
transition: color var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);

&:hover,
&:focus {
Expand Down Expand Up @@ -126,20 +123,14 @@ html[data-theme="dark"] {
div[class^="announcementBar_"] {
font-size: 18px;

--site-announcement-bar-stripe-color1: hsl(
var(--site-primary-hue-saturation) 85%
);
--site-announcement-bar-stripe-color2: hsl(
var(--site-primary-hue-saturation) 95%
);

background: repeating-linear-gradient(
35deg,
var(--site-announcement-bar-stripe-color1),
var(--site-announcement-bar-stripe-color1) 20px,
var(--site-announcement-bar-stripe-color2) 10px,
var(--site-announcement-bar-stripe-color2) 40px
);
--site-announcement-bar-stripe-color1: hsl(var(--site-primary-hue-saturation) 85%);
--site-announcement-bar-stripe-color2: hsl(var(--site-primary-hue-saturation) 95%);

background: repeating-linear-gradient(35deg,
var(--site-announcement-bar-stripe-color1),
var(--site-announcement-bar-stripe-color1) 20px,
var(--site-announcement-bar-stripe-color2) 10px,
var(--site-announcement-bar-stripe-color2) 40px);

height: fit-content;
}
Expand All @@ -162,7 +153,7 @@ div[class^="announcementBar_"] {
}
}

.navbar .dropdown > a.active {
.navbar .dropdown>a.active {
color: var(--ifm-color-primary);
}

Expand Down Expand Up @@ -210,15 +201,15 @@ select[data-testid="example-pairing-select"] {
max-width: 135%;

thead {
color: var(--ifm-color-primary-darker);
background-color: var(--ifm-color-gray-300);
font-size: large;
text-align: left;
text-wrap: nowrap;
color: var(--ifm-color-primary-darker);
background-color: var(--ifm-color-gray-300);
font-size: large;
text-align: left;
text-wrap: nowrap;
}

td {
font-size: small;
font-size: small;
}
}

Expand All @@ -231,8 +222,21 @@ select[data-testid="example-pairing-select"] {

.dropdown__link.has-nested-items::after {
content: '➜';
margin-left: 10px; // spacing (use margin instead of padding when using flex)
margin-left: 10px; // spacing (use margin instead of padding when using flex)
font-size: 1em;
line-height: 1;
display: inline-block;
}

/* Fix for Google Translate making headers invisible */
html.translated-ltr .hash-link,
html.translated-rtl .hash-link {
opacity: 1 !important;
visibility: visible !important;
}

/* Fix for Google Translate bar overlapping the navbar */
html.translated-ltr .navbar,
html.translated-rtl .navbar {
top: 40px;
}