From 874ea9829e803818971ca9c066d2f9f35e58985a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 30 Nov 2025 08:58:22 +0000
Subject: [PATCH] feat(i18n): add bilingual support to 404 error page

- Add error404.* translation keys for title, message, description, and
  back home button in both Chinese (zh) and English (en) sections
- Update Error404.astro component with data-i18n attributes for proper
  language switching support
- Change default text to Chinese as per project convention
---
 src/components/widgets/Error404.astro | 26 ++++++++++++--------------
 src/i18n/languages.ts                 | 12 ++++++++++++
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/components/widgets/Error404.astro b/src/components/widgets/Error404.astro
index b77ceda..c068f87 100644
--- a/src/components/widgets/Error404.astro
+++ b/src/components/widgets/Error404.astro
@@ -2,23 +2,21 @@
 import { getHomePermalink } from '~/utils/permalinks';
 ---
 
-<section class="flex items-center h-full p-16">
-	<div class="container flex flex-col items-center justify-center px-5 mx-auto my-8">
+<section class="flex h-full items-center p-16">
+	<div class="container mx-auto my-8 flex flex-col items-center justify-center px-5">
 		<div class="max-w-md text-center">
-			<h2 class="mb-8 font-bold text-9xl">
-				<span class="sr-only">Error</span>
-				<span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">404</span>
+			<h2 class="mb-8 text-9xl font-bold">
+				<span class="sr-only" data-i18n="common.error">Error</span>
+				<span
+					class="bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent"
+					data-i18n="error404.title">404</span
+				>
 			</h2>
-			<p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
-			<p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
-				But dont worry, you can find plenty of other things on our homepage.
+			<p class="text-3xl font-semibold md:text-3xl" data-i18n="error404.message">抱歉，我们找不到这个页面。</p>
+			<p class="mb-8 mt-4 text-lg text-gray-600 dark:text-slate-400" data-i18n="error404.description">
+				别担心，您可以在我们的首页找到更多精彩内容。
 			</p>
-			<a
-				rel="noopener noreferrer"
-				href={getHomePermalink()}
-				class="btn ml-4"
-				>Back to homepage</a
-			>
+			<a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4" data-i18n="error404.backHome">返回首页</a>
 		</div>
 	</div>
 </section>
diff --git a/src/i18n/languages.ts b/src/i18n/languages.ts
index fda3df9..81f23b7 100644
--- a/src/i18n/languages.ts
+++ b/src/i18n/languages.ts
@@ -140,6 +140,12 @@ export const ui = {
 		'common.all': '全部',
 		'common.scrollToTop': '返回顶部',
 
+		// 404 页面
+		'error404.title': '404',
+		'error404.message': '抱歉，我们找不到这个页面。',
+		'error404.description': '别担心，您可以在我们的首页找到更多精彩内容。',
+		'error404.backHome': '返回首页',
+
 		// 表单
 		'form.name': '姓名',
 		'form.email': '邮箱',
@@ -869,6 +875,12 @@ export const ui = {
 		'common.all': 'All',
 		'common.scrollToTop': 'Back to Top',
 
+		// 404 Page
+		'error404.title': '404',
+		'error404.message': "Sorry, we couldn't find this page.",
+		'error404.description': "But don't worry, you can find plenty of other things on our homepage.",
+		'error404.backHome': 'Back to Homepage',
+
 		// Form
 		'form.name': 'Name',
 		'form.email': 'Email',