added Simplified Chinese translation #311
Conversation
|
Someone is attempting to deploy a commit to the Creative Programming group Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis pull request integrates Simplified Chinese (zh-CN) support into the project. It adds a new Chinese translation file and updates the i18n configuration in both the locale index and Next.js config to include zh-CN. The settings page now features a dedicated Chinese language selection button with a corresponding Chinese flag image, while a minor correction was made to the Indonesian flag's alt text. Additionally, existing locale files (English, German, Indonesian) have been updated to incorporate a new translation entry for the Chinese language option. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant S as Settings Page
participant I as i18n Engine
participant T as zh-CN Translations
U->>S: Clicks Chinese language button
S->>I: Request to switch locale to "zh-CN"
I->>T: Dynamically import Chinese translations
T-->>I: Return translation object
I-->>S: Update displayed texts with zh-CN content
Assessment against linked issues
Poem
Tip 🌐 Web search-backed reviews and chat
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/web/src/locales/zh_cn.ts (2)
37-40: Language names should be in their native script.For consistency and better user experience, language names should be displayed in their native script.
- "settings.english": "English", - "settings.german": "German", - "settings.indonesian": "Indonesian", - "settings.chinese": "Chinese", + "settings.english": "English", + "settings.german": "Deutsch", + "settings.indonesian": "Bahasa Indonesia", + "settings.chinese": "中文",
130-131: Maintain consistency in quote usage for HTML content.Some translations use different quote styles for HTML content. Standardize to use double quotes for HTML attributes.
- '由以下人员<span class="text-4xl" style="color: rgb(239 68 68)">♥\uFE0F</span> 精心制作： ', + "由以下人员<span class=\"text-4xl\" style=\"color: rgb(239 68 68)\">♥\uFE0F</span> 精心制作： ",Also applies to: 182-183
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/locales/index.ts(1 hunks)apps/web/src/locales/zh_cn.ts(1 hunks)
🔇 Additional comments (4)
apps/web/src/locales/index.ts (1)
13-13: LGTM! Correct implementation of Chinese locale.The addition follows the established pattern and uses proper dynamic importing.
apps/web/src/locales/zh_cn.ts (3)
88-102: Excellent localization of weather descriptions!The translations effectively maintain the playful tone while using culturally appropriate Chinese expressions. Well done!
20-26: Accurate translation of technical weather terms.The translations correctly use standard Chinese meteorological terminology, maintaining technical accuracy while being understandable to users.
Also applies to: 73-81
1-1: Good TypeScript implementation with proper type safety.The use of
as constassertion and consistent object structure ensures type safety throughout the translations.Also applies to: 188-188
apps/web/src/locales/zh_cn.ts
Outdated
| "home.moon phase card title": "Current Moon Phase", | ||
| "home.moon phase card content": | ||
| "The moon phase is the shape of the directly sunlit portion of the Moon as viewed from Earth.", |
There was a problem hiding this comment.
Translate moon phase card title and content to Chinese.
These strings are still in English and need to be translated:
- "home.moon phase card title": "Current Moon Phase",
+ "home.moon phase card title": "当前月相",
- "home.moon phase card content":
- "The moon phase is the shape of the directly sunlit portion of the Moon as viewed from Earth.",
+ "home.moon phase card content":
+ "月相是从地球上看到的月球被阳光直接照射部分的形状。",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "home.moon phase card title": "Current Moon Phase", | |
| "home.moon phase card content": | |
| "The moon phase is the shape of the directly sunlit portion of the Moon as viewed from Earth.", | |
| "home.moon phase card title": "当前月相", | |
| "home.moon phase card content": | |
| "月相是从地球上看到的月球被阳光直接照射部分的形状。", |
There was a problem hiding this comment.
Followed suggestions
There was a problem hiding this comment.
@NicoCanada Thank you for implementing the translations! The moon phase section is now properly localized in Simplified Chinese.
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
NicoCanada
force-pushed
the
chinese_translation
branch
from
597820f to
c8f9dac
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
apps/web/src/locales/zh-CN.ts (3)
68-68: Clarify the German law reference for Chinese users.The reference to German law might be unclear to Chinese users. Consider adding context:
- "legal.information disclaimer": "根据《德国电信和信息服务法》第5条的规定", + "legal.information disclaimer": "根据《德国电信和信息服务法》(German Telemedia Act) 第5条的规定",
97-98: Consider a more culturally relevant metaphor.The penguin reference might be replaced with a more familiar Chinese cultural reference:
- "home.feels like phrase cold": "企鹅们都因为寒冷去喝热巧克力了！", + "home.feels like phrase cold": "寒得连熊猫都要喝姜茶暖身了！",
47-51: Adjust punctuation for natural Chinese reading.The exclamation marks feel excessive in Chinese. Consider a more natural approach:
- "locationsettings.at least one city toast": "至少需要一个城市!", - "locationsettings.switched to city toast": "切换到城市!", - "locationsettings.added city toast": "添加城市!", - "locationsettings.city not found toast": "城市未找到!", - "locationsettings.try again toast": "请再试一次!", + "locationsettings.at least one city toast": "至少需要一个城市", + "locationsettings.switched to city toast": "已切换到所选城市", + "locationsettings.added city toast": "已添加城市", + "locationsettings.city not found toast": "未找到该城市", + "locationsettings.try again toast": "请重试",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/web/src/locales/index.ts(1 hunks)apps/web/src/locales/zh-CN.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/locales/index.ts
🔇 Additional comments (2)
apps/web/src/locales/zh-CN.ts (2)
150-157: Excellent use of traditional Chinese astronomical terms!The moon phase translations accurately use traditional Chinese astronomical terminology, which maintains cultural authenticity while being easily understood by modern Chinese readers.
1-188: Verify translation completeness against other locale files.Let's ensure no translations are missing compared to other locale files.
✅ Verification successful
All translations are complete and correctly structured ✅
The Chinese locale file contains all required translations and maintains consistent structure with other locale files. The additional
"settings.chinese"key is intentionally present only in the Chinese locale file, as it represents the language's name in its native form.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Compare keys between locale files to ensure completeness # Expected: All keys present in other locale files should exist in zh-CN.ts # Find all locale files echo "Searching for locale files..." fd -e ts -e js --full-path "locales" --exclude "index.ts" # Extract and compare keys for locale in $(fd -e ts -e js --full-path "locales" --exclude "index.ts" --exclude "zh-CN.ts"); do echo "Comparing keys with $locale..." # Extract keys (lines containing quotes followed by colon) grep -o '"[^"]*":' "$locale" | sort > /tmp/other_keys grep -o '"[^"]*":' "apps/web/src/locales/zh-CN.ts" | sort > /tmp/zh_keys # Show missing keys echo "Keys in $locale but missing in zh-CN.ts:" comm -23 /tmp/other_keys /tmp/zh_keys doneLength of output: 2066
Script:
#!/bin/bash # Description: Compare locale files using diff and check structure echo "=== Analyzing locale files ===" # Function to extract and sort keys extract_keys() { grep -o '"[^"]*":' "$1" | sort > "/tmp/keys_$2" } # Process zh-CN keys first extract_keys "apps/web/src/locales/zh-CN.ts" "zh" # Compare with other locales for locale in $(fd -e ts -e js --full-path "locales" --exclude "index.ts" --exclude "zh-CN.ts"); do echo -e "\nComparing with $locale:" extract_keys "$locale" "other" # Compare keys echo "Differences (< means missing in zh-CN, > means extra in zh-CN):" diff "/tmp/keys_other" "/tmp/keys_zh" || true # Check export structure echo -e "\nChecking export structure:" head -n1 "$locale" grep -c "export default {" "$locale" # Check closing structure echo "Checking closing structure:" tail -n1 "$locale" done # Additional structure check for zh-CN echo -e "\nChecking zh-CN structure:" head -n1 "apps/web/src/locales/zh-CN.ts" grep -c "export default {" "apps/web/src/locales/zh-CN.ts" tail -n1 "apps/web/src/locales/zh-CN.ts"Length of output: 2918
| "home.9 day forecast card content": | ||
| "未来9天的天气预报。<br /> <span class=\"font-semibold\">温度</span> 为每日的平均温度，分别代表白天和夜晚的温度。", | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider using template interpolation instead of HTML in translations.
HTML markup embedded in translations can be fragile and harder to maintain. Consider using template interpolation:
- "home.9 day forecast card content": "未来9天的天气预报。<br /> <span class=\"font-semibold\">温度</span> 为每日的平均温度，分别代表白天和夜晚的温度。",
+ "home.9 day forecast card content": {
+ text: "未来9天的天气预报。{break}温度为每日的平均温度，分别代表白天和夜晚的温度。",
+ bold: ["温度"]
+ }This approach:
- Separates content from presentation
- Reduces risk of HTML-related bugs
- Makes translations easier to maintain
Also applies to: 141-142, 182-183
There was a problem hiding this comment.
The way of coding is not seen in other locales.
There was a problem hiding this comment.
@NicoCanada You're absolutely right. I apologize for my earlier suggestion. After checking all locale files, I can see that HTML markup is consistently used across all translations. Your implementation matches the established pattern in the codebase, so we should keep it as is.
🔗 Analysis chain
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for the "home.9 day forecast card content" translation across all locale files
ast-grep --pattern 'export default {
$$$
"home.9 day forecast card content": $VALUE,
$$$
}'
Length of output: 99
Script:
#!/bin/bash
# Search for the forecast card content translation in locale files
rg -A 1 -B 1 "home\.9 day forecast card content" apps/web/src/locales/
Length of output: 1167
✏️ Learnings added
Learnt from: NicoCanada
PR: The-Creative-Programming-Group/Weather-App#311
File: apps/web/src/locales/zh-CN.ts:130-132
Timestamp: 2025-01-30T23:04:08.252Z
Learning: In the Weather App project, translations in locale files use direct HTML markup (like <br /> and <span>) rather than template interpolation, as established by the existing implementation in en.ts, de.ts, and id.ts files.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
Could you add Chinese as a settings option too? https://github.com/The-Creative-Programming-Group/Weather-App/blob/master/apps%2Fweb%2Fsrc%2Fpages%2Fsettings%2Findex.tsx#L141-L202 |
| <Image | ||
| src={indonesianFlag} | ||
| alt="Flag of the Netherladns" | ||
| alt="Flag of the Republic of Indonesia" |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://weather-app-git-fork-nicocana-d682d7-creative-programming-group.vercel.app/ |
|
Things that still need to be done before I can merge this PR:
Here are some references: https://github.com/The-Creative-Programming-Group/Weather-App/pull/302/files |
|
Things that stop this PR from being merged:
|
|
Deployment failed with the following error: |
|
Thank you continuing in this now: #321 |
2 participants
Fixes #310
Added Chinese translation
Summary by CodeRabbit