Skip to content

Add i18n support for Chinese and English #46

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

Merged
watterfall merged 1 commit into from
Nov 22, 2025
Merged

Add i18n support for Chinese and English #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 6 additions & 0 deletions src/i18n/languages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ export const ui = {
'activities.xcamp.feature3Desc': '人工智能、生物科技、航天等多领域探索',
'activities.xcamp.feature4': '成果展示',
'activities.xcamp.feature4Desc': '论文发表、专利申请、学术会议报告机会',
'activities.xcamp.training': '科研训练',
'activities.owl.tag': 'Night at OWL',
'activities.owl.title': '猫头鹰奇妙夜',
'activities.owl.subtitle': 'Night at OWL',
Expand Down Expand Up @@ -315,9 +316,11 @@ export const ui = {
'spaces.design.techFutureDesc': '具有科技感和未来感的设计，激发创新想法的诞生',
'spaces.design.flexible': '灵活流动空间',
'spaces.design.flexibleDesc': '灵活、流动和多样化的空间代替隔离、固定的传统布局',
'spaces.design.special': '特别',
'spaces.design.creativeZone': '创意自由区',
'spaces.design.creativeZoneDesc': '留有学生自由涂鸦和可破坏的"混乱"空间。我们相信，真正的创造力需要自由的表达空间，',
'spaces.design.creativeZoneHighlight': '无拘无束的探索往往带来最意想不到的创新',
'spaces.owlSpace': '猫头鹰空间',
'spaces.locations.title': '我们的空间',
'spaces.locations.subtitle': '分布在深圳和北京的三处核心空间，为学生提供多元化的学习和创新环境',
'spaces.pingshan.name': '深圳坪山基地',
Expand Down Expand Up @@ -909,6 +912,7 @@ export const ui = {
'activities.xcamp.feature3Desc': 'Exploration across AI, biotechnology, aerospace, and more',
'activities.xcamp.feature4': 'Achievement Showcase',
'activities.xcamp.feature4Desc': 'Opportunities for paper publication, patent applications, and academic conference presentations',
'activities.xcamp.training': 'Research Training',
'activities.owl.tag': 'Night at OWL',
'activities.owl.title': 'Night at OWL',
'activities.owl.subtitle': 'Night at OWL',
Expand Down Expand Up @@ -942,9 +946,11 @@ export const ui = {
'spaces.design.techFutureDesc': 'Design with technological and futuristic elements to inspire innovative ideas',
'spaces.design.flexible': 'Flexible & Fluid Spaces',
'spaces.design.flexibleDesc': 'Flexible, fluid, and diverse spaces replace isolated, fixed traditional layouts',
'spaces.design.special': 'Special',
'spaces.design.creativeZone': 'Creative Free Zone',
'spaces.design.creativeZoneDesc': 'Spaces for free graffiti and "chaos" that students can freely modify. We believe true creativity needs space for free expression,',
'spaces.design.creativeZoneHighlight': 'Unfettered exploration often leads to the most unexpected innovations',
'spaces.owlSpace': 'OWL Space',
'spaces.locations.title': 'Our Spaces',
'spaces.locations.subtitle': 'Three core spaces across Shenzhen and Beijing, providing students with diverse learning and innovation environments',
'spaces.pingshan.name': 'Shenzhen Pingshan Base',
Expand Down
8 changes: 4 additions & 4 deletions src/pages/activities.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const meta = {
X
</div>
<div class="text-2xl font-bold text-white mb-2">CAMP</div>
<div class="text-sm text-gray-400 font-mono">RESEARCH TRAINING</div>
<div class="text-sm text-gray-400 font-mono" data-i18n="activities.xcamp.training">RESEARCH TRAINING</div>
</div>
<!-- 装饰性元素 -->
<div class="absolute top-4 right-4 w-20 h-20 border border-tech-500/30 rounded-full"></div>
Expand All @@ -114,9 +114,9 @@ const meta = {
<div class="text-6xl mb-4">
🦉
</div>
<div class="text-2xl font-black text-white mb-2">Night at OWL</div>
<div class="text-sm text-accent-400 font-mono">猫头鹰奇妙夜</div>
<div class="mt-4 text-xs text-gray-500 italic max-w-xs mx-auto">
<div class="text-2xl font-black text-white mb-2" data-i18n="activities.owl.subtitle">Night at OWL</div>
<div class="text-sm text-accent-400 font-mono" data-i18n="activities.owl.title">猫头鹰奇妙夜</div>
<div class="mt-4 text-xs text-gray-500 italic max-w-xs mx-auto" data-i18n="activities.owl.quote">
"让思维有地方闲逛，让想象力在无意中开花"
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/contact.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ const meta = {
<div class="text-center">
<ScrollReveal client:visible variant="brutal">
<h1 class="text-5xl md:text-7xl font-black text-black dark:text-white mb-6 font-display uppercase tracking-tighter">
<span class="dark:hidden">联系我们</span>
<span class="dark:hidden" data-i18n="page.contact.title">联系我们</span>
<span class="hidden dark:block">
<GlitchText client:visible variant="rgb" triggerOnHover>
联系我们
<span data-i18n="page.contact.title">联系我们</span>
</GlitchText>
</span>
</h1>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/spaces.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const spaces = [
<span class="text-3xl">~</span>
</div>
<div class="flex-1">
<div class="inline-flex items-center gap-2 px-3 py-1 bg-accent-500/20 rounded-full text-xs text-accent-400 uppercase tracking-wider mb-3">
<div class="inline-flex items-center gap-2 px-3 py-1 bg-accent-500/20 rounded-full text-xs text-accent-400 uppercase tracking-wider mb-3" data-i18n="spaces.design.special">
Special
</div>
<h3 class="text-2xl font-black text-white mb-3" data-i18n="spaces.design.creativeZone">创意自由区</h3>
Expand Down Expand Up @@ -198,7 +198,7 @@ const spaces = [
<div class={`hidden lg:flex items-center justify-center bg-gradient-to-br from-${space.color}-500/10 to-transparent p-8`}>
<div class="text-center">
<div class="text-8xl mb-4 opacity-50">{space.icon}</div>
<div class={`text-${space.color}-400 font-mono text-sm uppercase tracking-wider`}>
<div class={`text-${space.color}-400 font-mono text-sm uppercase tracking-wider`} data-i18n="spaces.owlSpace">
OWL Space
</div>
</div>
Expand Down
30 changes: 30 additions & 0 deletions src/scripts/i18n-client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,36 @@ export function applyTranslations(lang: LangKey) {
}
});

// Handle data-i18n-list for list items (comma-separated translations)
const listElements = document.querySelectorAll('[data-i18n-list]');
listElements.forEach((listElement) => {
const key = listElement.getAttribute('data-i18n-list') as TranslationKey;
if (key && ui[lang] && ui[lang][key]) {
const items = ui[lang][key].split(', ');
const liElements = listElement.querySelectorAll('li');
liElements.forEach((li, index) => {
if (items[index]) {
// Find the text node (skip the span with bullet)
const textNodes = Array.from(li.childNodes).filter(node =>
node.nodeType === Node.TEXT_NODE ||
(node.nodeType === Node.ELEMENT_NODE && !(node as Element).classList.contains('w-1.5'))
);
// Update the last text content (after the bullet span)
if (textNodes.length > 0) {
const lastNode = textNodes[textNodes.length - 1];
if (lastNode) {
if (lastNode.nodeType === Node.TEXT_NODE) {
lastNode.textContent = items[index];
} else {
(lastNode as Element).textContent = items[index];
}
}
}
}
});
}
});

// Update language display in toggle button
const langToggle = document.querySelector('#language-toggle span');
if (langToggle) {
Expand Down
Loading