Summary
Proposing the addition of a Google Translate widget to make base.org accessible to a global audience in 133 languages. The widget would appear as a slim banner at the top of every page, allowing users to translate the site into their preferred language.
Motivation
Base is a global platform, and many users are non-English speakers. Adding translation support lowers the barrier to entry for international builders, creators, and users who want to participate in the Base ecosystem.
Currently:
next.config.js already allows https://translate.googleapis.com in the CSP connect-src directivereact-intl is installed as a dependency but not actively used- The
i18n config only supports en
A lightweight Google Translate integration would provide immediate multilingual access without requiring a full i18n implementation with manually maintained translation files.
Proposed Implementation
- New component:
GoogleTranslate — a 'use client' React component that dynamically loads Google's Translate Element API (translate.google.com/translate_a/element.js)
- Placement: Full-width banner at the top of the
(base-org) layout, above the sidebar/content grid
- Styling: Minimal, matches Base's design system (dark/light mode support via Tailwind, clean typography)
- CSP updates: Add
translate.google.com and translate.googleapis.com to default-src and img-src directives
Languages Supported
Google Translate natively supports 133 languages including: Afrikaans, Albanian, Amharic, Arabic, Armenian, Bengali, Chinese (Simplified & Traditional), Dutch, French, German, Hindi, Japanese, Korean, Portuguese, Russian, Spanish, Swahili, and many more.
Design Considerations
- The widget is lightweight (~50KB) and loads asynchronously — no impact on initial page load
- Falls back gracefully if the script fails to load
- Respects the site's existing dark/light mode
- Positioned with
sticky so it remains accessible while scrolling
- Can be dismissed/collapsed by users
Prior Art
I have implemented this same feature in my project Luxbin-Quantum-internet, and am happy to contribute a PR with the implementation.
Checklist
Summary
Proposing the addition of a Google Translate widget to make base.org accessible to a global audience in 133 languages. The widget would appear as a slim banner at the top of every page, allowing users to translate the site into their preferred language.
Motivation
Base is a global platform, and many users are non-English speakers. Adding translation support lowers the barrier to entry for international builders, creators, and users who want to participate in the Base ecosystem.
Currently:
next.config.jsalready allowshttps://translate.googleapis.comin the CSPconnect-srcdirectivereact-intlis installed as a dependency but not actively usedi18nconfig only supportsenA lightweight Google Translate integration would provide immediate multilingual access without requiring a full i18n implementation with manually maintained translation files.
Proposed Implementation
GoogleTranslate— a'use client'React component that dynamically loads Google's Translate Element API (translate.google.com/translate_a/element.js)(base-org)layout, above the sidebar/content gridtranslate.google.comandtranslate.googleapis.comtodefault-srcandimg-srcdirectivesLanguages Supported
Google Translate natively supports 133 languages including: Afrikaans, Albanian, Amharic, Arabic, Armenian, Bengali, Chinese (Simplified & Traditional), Dutch, French, German, Hindi, Japanese, Korean, Portuguese, Russian, Spanish, Swahili, and many more.
Design Considerations
stickyso it remains accessible while scrollingPrior Art
I have implemented this same feature in my project Luxbin-Quantum-internet, and am happy to contribute a PR with the implementation.
Checklist