feat(i18n): implement astro i18n integration and refactor locale handling

- Add i18n configuration to astro.config.mjs with default locale and routing
- Refactor language handling to use Astro.currentLocale instead of URL parsing
- Update tsconfig to include only necessary files for better type checking
- Improve LanguageSwitcher to handle routing based on astro i18n config
- Add new translation keys and update components to use dynamic titles
- Simplify MotionWrapper component by removing unused default animations
This commit is contained in:
joyzhao
2025-06-15 17:20:29 +08:00
parent 22799c9d8a
commit 1476f4eeec
9 changed files with 110 additions and 53 deletions

View File

@@ -4,11 +4,7 @@ import { ui, defaultLang, languages } from './ui';
export type Lang = keyof typeof languages;
export type UiKeys = keyof typeof ui[typeof defaultLang];
export function getLangFromUrl(url: URL): Lang {
const [, lang] = url.pathname.split('/');
if (lang in languages) return lang as Lang;
return defaultLang;
}
export function useTranslations(lang: Lang | undefined) {
const currentLang = lang || defaultLang;
@@ -27,15 +23,30 @@ export function getLocalizedPath(path: string, lang: Lang | undefined): string {
const currentLang = lang || defaultLang;
const basePath = import.meta.env.BASE_URL === '/' ? '' : import.meta.env.BASE_URL;
// If the current language is the default language, do not add a language prefix.
if (currentLang === defaultLang) {
const fullPath = `${basePath}${path.startsWith('/') ? path : `/${path}`}`;
return fullPath.replace(/\/\/+/g, '/');
// Astro's i18n routing handles prefixing automatically based on astro.config.mjs settings.
// We just need to ensure the path is correctly formed relative to the base.
// If a language is explicitly provided and it's not the default,
// and prefixDefaultLocale is false (meaning default lang has no prefix),
// we might need to add it. However, Astro typically handles this.
// For now, let's assume Astro's routing takes care of the prefix.
// This function might become simpler or even unnecessary depending on how LanguageSwitcher is used.
let newPath = path;
// Ensure path starts with a slash if it's not an external URL
if (!newPath.startsWith('/') && !newPath.match(/^https?:\/\//)) {
newPath = `/${newPath}`;
}
// Otherwise, add the language prefix.
const langPrefix = `/${currentLang}`;
const fullPath = `${basePath}${langPrefix}${path.startsWith('/') ? path : `/${path}`}`;
// Remove any double slashes that might occur.
return fullPath.replace(/\/\/+/g, '/');
// If prefixDefaultLocale is false (default in our config) and currentLang is not defaultLang,
// Astro will expect /zh/path. If currentLang is defaultLang, it expects /path.
// If prefixDefaultLocale is true, all locales get a prefix: /en/path, /zh/path.
// Given our astro.config.mjs: prefixDefaultLocale: false
// If lang is 'zh', the path should be /zh/your-path
// If lang is 'en' (default), the path should be /your-path
// Astro's <a href> or Astro.redirect should handle this correctly when given a root-relative path.
// This function's main job is to ensure the base path and the target path are combined correctly.
const fullPath = `${basePath}${newPath}`;
return fullPath.replace(/\/\/+/g, '/'); // Clean up any double slashes
}