fix: i18n for EN mode - theme toggle, section headers, date formats

Author: yanglbme

src/components/NavBar.astro

@@ -57,7 +57,7 @@ const langSwitch = locale === "en"
         <span>GitHub</span>
       </a>
       <!-- Theme toggle button -->
-      <button id="theme-toggle" class="flex items-center justify-center w-8 h-8 rounded-lg text-text-dim hover:text-text hover:bg-accent-glow transition-all" title="切换主题" aria-label="切换主题">
+      <button id="theme-toggle" class="flex items-center justify-center w-8 h-8 rounded-lg text-text-dim hover:text-text hover:bg-accent-glow transition-all" title={locale === "en" ? "Toggle theme" : "切换主题"} aria-label={locale === "en" ? "Toggle theme" : "切换主题"}>
         <svg id="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
         <svg id="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="hidden"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
       </button>
@@ -89,10 +89,10 @@ const langSwitch = locale === "en"
           </svg>
           GitHub
         </a>
-        <button id="mobile-theme-toggle" class="flex items-center gap-1.5 text-text-dim text-sm hover:text-text" aria-label="切换主题">
+        <button id="mobile-theme-toggle" class="flex items-center gap-1.5 text-text-dim text-sm hover:text-text" aria-label={locale === "en" ? "Toggle theme" : "切换主题"}>
           <svg class="mobile-icon-moon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
           <svg class="mobile-icon-sun hidden" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
-          <span class="mobile-theme-label">切换主题</span>
+          <span class="mobile-theme-label">{locale === "en" ? "Toggle theme" : "切换主题"}</span>
         </button>
         <a href={langSwitch.href}
            class="text-sm text-text-muted hover:text-text">
@@ -135,19 +135,20 @@ const langSwitch = locale === "en"
   var mobileMoonIcon = document.querySelector('.mobile-icon-moon');
   var mobileSunIcon = document.querySelector('.mobile-icon-sun');
   var mobileThemeLabel = document.querySelector('.mobile-theme-label');
+  var themeLabel = document.documentElement.lang === 'en' ? 'Toggle theme' : '切换主题';
   function updateIcons(isDark) {
     if (isDark) {
       moonIcon.classList.add('hidden');
       sunIcon.classList.remove('hidden');
       if (mobileMoonIcon) mobileMoonIcon.classList.add('hidden');
       if (mobileSunIcon) mobileSunIcon.classList.remove('hidden');
-      if (mobileThemeLabel) mobileThemeLabel.textContent = '切换主题';
+      if (mobileThemeLabel) mobileThemeLabel.textContent = themeLabel;
     } else {
       moonIcon.classList.remove('hidden');
       sunIcon.classList.add('hidden');
       if (mobileMoonIcon) mobileMoonIcon.classList.remove('hidden');
       if (mobileSunIcon) mobileSunIcon.classList.add('hidden');
-      if (mobileThemeLabel) mobileThemeLabel.textContent = '切换主题';
+      if (mobileThemeLabel) mobileThemeLabel.textContent = themeLabel;
     }
   }
   function toggleTheme() {

src/components/SectionHeader.astro

@@ -7,9 +7,11 @@ interface Props {
   title: string;
   href: string;
   accentColor?: "accent" | "pink";
+  locale?: "zh" | "en";
 }
 
-const { title, href, accentColor = "accent" } = Astro.props;
+const { title, href, accentColor = "accent", locale = "zh" } = Astro.props;
+import { t } from "../i18n/utils.ts";
 const accentClass = accentColor === "pink" ? "bg-pink" : "bg-accent";
 ---
 
@@ -19,6 +21,6 @@ const accentClass = accentColor === "pink" ? "bg-pink" : "bg-accent";
     {title}
   </h2>
   <a href={href} class="text-sm text-text-muted hover:text-accent-light transition-colors no-underline">
-    <slot name="more">更多 →</slot>
+    <slot name="more">{t("home.more", locale)}</slot>
   </a>
 </div>

src/pages/en/index.astro

@@ -4,7 +4,7 @@ import Card from "../../components/Card.astro";
 import SectionHeader from "../../components/SectionHeader.astro";
 import { t } from "../../i18n/utils.ts";
 import { getCollection } from "astro:content";
-import { extractSummary, extractTags, TAG_MAP_EN, formatDateCn } from "../../lib/content.ts";
+import { extractSummary, extractTags, TAG_MAP_EN, formatWeekDateEn } from "../../lib/content.ts";
 
 const allEn = await getCollection("en");
 const allDaily = allEn.filter((e) => e.id.startsWith("daily/"));
@@ -22,7 +22,7 @@ function buildCard(article: any, type: "daily" | "weekly") {
   return {
     type,
     title: article.data.title,
-    date: formatDateCn(article.data.date),
+    date: type === "weekly" ? formatWeekDateEn(article.data.date) : article.data.date,
     summary: extractSummary(article.body),
     tags: extractTags(article.body, TAG_MAP_EN),
     href: `/en/${article.id.replace(".md", "")}`,
@@ -98,7 +98,7 @@ const recentTopics = topicsList.slice(1, 4).map((a) => ({
   <!-- Latest Three -->
   {(latestDaily || latestWeekly || latestTopic) && (
     <section class="mt-8 sm:mt-12">
-      <SectionHeader title={t("home.section_latest", "en")} href="/en/industry" />
+      <SectionHeader title={t("home.section_latest", "en")} href="/en/industry" locale="en" />
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
         {latestDaily && (
           <Card type={latestDaily.type} title={latestDaily.title} date={latestDaily.date} summary={latestDaily.summary} tags={latestDaily.tags} href={latestDaily.href} locale="en" />
@@ -116,7 +116,7 @@ const recentTopics = topicsList.slice(1, 4).map((a) => ({
   <!-- Industry News (Daily + Weekly combined) -->
   {(recentDaily.length > 0 || recentWeekly.length > 0) && (
     <section class="mt-10 sm:mt-14">
-      <SectionHeader title={t("home.section_industry", "en")} href="/en/industry" />
+      <SectionHeader title={t("home.section_industry", "en")} href="/en/industry" locale="en" />
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
         {[...recentDaily.map((item) => ({ ...item, type: "daily" as const })), ...recentWeekly.map((item) => ({ ...item, type: "weekly" as const }))]
           .sort((a, b) => b.date.localeCompare(a.date))
@@ -131,7 +131,7 @@ const recentTopics = topicsList.slice(1, 4).map((a) => ({
   <!-- Recent Discussions -->
   {recentTopics.length > 0 && (
     <section class="mt-10 sm:mt-14">
-      <SectionHeader title={t("home.section_discussions", "en")} href="/en/topics" accentColor="pink" />
+      <SectionHeader title={t("home.section_discussions", "en")} href="/en/topics" accentColor="pink" locale="en" />
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
         {recentTopics.map((item) => (
           <Card type={item.type} title={item.title} date={item.date} summary={item.summary} tags={item.tags} href={item.href} locale="en" />

src/pages/en/industry/index.astro

@@ -6,7 +6,7 @@ import Card from "../../../components/Card.astro";
 import "../../../styles/global.css";
 import { t } from "../../../i18n/utils.ts";
 import { getCollection } from "astro:content";
-import { extractSummary, extractTags, TAG_MAP_EN } from "../../../lib/content.ts";
+import { extractSummary, extractTags, TAG_MAP_EN, formatWeekDateEn } from "../../../lib/content.ts";
 
 const allEn = await getCollection("en");
 const allDaily = allEn.filter((e) => e.id.startsWith("daily/"));
@@ -27,10 +27,10 @@ const items = [
     href: `/en/${a.id.replace(".md", "")}`,
   })),
   ...allWeekly.map(a => ({
-    type: "weekly" as const,
-    title: a.data.title,
-    date: a.data.date,
-    dateRaw: a.data.date,
+      type: "weekly" as const,
+      title: a.data.title,
+      date: formatWeekDateEn(a.data.date),
+      dateRaw: a.data.date,
     summary: extractSummary(a.body),
     tags: extractTags(a.body, TAG_MAP_EN),
     href: `/en/${a.id.replace(".md", "")}`,