unbug
Implement Chinese and English internationalization (i18n) support using i18next
Overview
This PR implements comprehensive internationalization (i18n) support for the Codelf application using i18next, enabling seamless switching between Chinese and English languages while preserving all existing functionality.
🌐 Features Implemented
Language Support
- Chinese (zh): Complete translation of all UI text to Chinese
- English (en): Default language with all original English text
- Auto-detection: Automatically detects browser language on first visit
- Smart mapping: Chinese variants (zh-CN, zh-TW, etc.) automatically map to 'zh'
- Persistence: Language preference stored in localStorage
User Interface
- Language Switcher: Added dropdown in top navigation with world icon
- Responsive Design: Styled for both mobile and desktop views
- Seamless Switching: Instant language changes without page reload
- Visual Indicators: Shows current language with flag-style formatting
📁 Files Added/Modified
New Files
-
src/i18n.js- i18next configuration with browser language detection -
src/locales/en.json- English translations (1,472 characters) -
src/locales/zh.json- Chinese translations (1,485 characters) -
src/components/LanguageSwitch.js- Language switcher component -
.eslintignore- Exclude JSON translation files from linting
Modified Components
-
src/App.js- Initialize i18n -
src/containers/MainContainer.js- Internationalize placeholder text -
src/containers/NavBarContainer.js- Add language switcher, internationalize tooltips -
src/containers/NoticeContainer.js- Internationalize notice links -
src/components/SearchBar.js- Internationalize search description, extensions text -
src/components/SearchError.js- Internationalize error messages -
src/components/VariableItem.js- Internationalize button labels -
src/components/Suggestion.js- Internationalize quick search text -
src/components/SourceCode.js- Internationalize modal button text
Styling
-
styles/_nav-bar-container.scss- Added CSS for language switcher
🛠 Technical Implementation
Dependencies Added
{
"i18next": "latest",
"react-i18next": "latest",
"i18next-browser-languagedetector": "latest"
}
Language Detection Logic
detection: {
order: ['localStorage', 'navigator', 'htmlTag'],
caches: ['localStorage'],
lookupLocalStorage: 'codelf-language',
convertDetectedLanguage: (lng) => {
if (lng.startsWith('zh')) return 'zh';
if (lng.startsWith('en')) return 'en';
return lng;
}
}
Translation Structure
{
"searchBar": {
"description": "Search over GitHub, Bitbucket, GitLab...",
"placeholder": "AI Artificial Intelligence",
"extensions": "Extensions:"
},
"variable": {
"search": "Search",
"repo": "Repo",
"copy": "Copy",
"codes": "Codes"
}
}
✅ Preservation of Existing Features
- YoudaoTranslate API: Existing Chinese keyword translation functionality unchanged
- Search Logic: All search and filtering capabilities preserved
- UI Components: All existing styling and behavior maintained
- Build System: JavaScript builds successfully (CSS requires node-sass update)
🧪 Testing
- ✅ JavaScript build passes successfully
- ✅ All components render without errors
- ✅ Language switching works in development environment
- ✅ Browser language detection functions correctly
- ✅ LocalStorage persistence working
📱 Usage
Users can now:
- Auto-detection: Language automatically detected on first visit
- Manual switching: Click world icon in top navigation to change language
- Persistent preference: Selected language remembered across sessions
- Instant updates: All UI text changes immediately without reload
🔄 Migration Notes
This implementation:
- Is fully backward compatible
- Requires no database changes
- Preserves all existing APIs
- Maintains current URL structure
- Does not affect SEO or existing functionality
The internationalization system is production-ready and provides a seamless multilingual experience for Codelf users worldwide.
[!WARNING]
Firewall rules blocked me from connecting to one or more addresses
I tried to connect to the following addresses, but was blocked by firewall rules:
http://168.63.129.16:80/machine/
- Triggering command:
/usr/bin/python3 -u bin/WALinuxAgent-2.13.1.1-py3.9.egg -collect-logs(http block)If you need me to access, download, or install something from one of these locations, you can either:
- Configure Actions setup steps to set up my environment, which run before the firewall is enabled
- Add the appropriate URLs or hosts to my firewall allow list
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.
@copilot 加上德语、法语、韩语的支持
已添加德语、法语、韩语支持。新增了完整的翻译文件 (de.json, fr.json, ko.json) 并更新了语言切换器和自动检测逻辑。现在用户可以在5种语言之间无缝切换。提交 fe12b86
[!WARNING]
Firewall rules blocked me from connecting to one or more addresses
I tried to connect to the following addresses, but was blocked by firewall rules:
http://168.63.129.16:80/machine/
- Triggering command:
/usr/bin/python3 -u bin/WALinuxAgent-2.13.1.1-py3.9.egg -collect-logs(http block)If you need me to access, download, or install something from one of these locations, you can either:
- Configure Actions setup steps to set up my environment, which run before the firewall is enabled
- Add the appropriate URLs or hosts to my firewall allow list
@copilot 把韩语删除
已删除韩语支持。移除了 ko.json 语言文件和相关配置，现在支持中文、英语、德语、法语四种语言。提交 f0e0b5d