@jet-w/astro-blog 0.1.5 → 0.2.0

package/src/components/layout/Header.astro

@@ -3,37 +3,69 @@ import { siteConfig } from '@jet-w/astro-blog/config';
 import ThemeToggle from '../ui/ThemeToggle.vue';
 import SearchBox from '../ui/SearchBox.vue';
 import MobileMenu from '../ui/MobileMenu.vue';
+import LanguageSwitcher from '../ui/LanguageSwitcher.vue';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import {
+  getLocaleFromPath,
+  getLocaleConfig,
+  removeLocalePrefix,
+  isMultiLanguageEnabled,
+} from '../../utils/i18n';
+
+export interface Props {
+  i18nConfig?: I18nConfig;
+}
+
+const { i18nConfig = defaultI18nConfig } = Astro.props;
 
 const currentPath = Astro.url.pathname;
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+
+// Use locale-specific site config and menu
+const localeSiteConfig = localeConfig.site;
+const menu = localeConfig.menu;
+
+// Get base path without locale prefix for language switcher
+const basePath = removeLocalePrefix(currentPath, i18nConfig);
+
+// Check if multi-language is enabled
+const showLanguageSwitcher = isMultiLanguageEnabled(i18nConfig);
+
+// Prepare locales for language switcher
+const localesForSwitcher = i18nConfig.locales.map(l => ({
+  code: l.code,
+  name: l.name,
+}));
 ---
 
 <header class="sticky top-0 z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
   <div class="container mx-auto px-4">
     <nav class="flex items-center justify-between h-16">
-      <!-- Logo 和站点名称 -->
       <div class="flex items-center space-x-4">
         <a href="/" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
-          {siteConfig.avatar && (
+          {(localeSiteConfig.avatar || siteConfig.avatar) && (
             <img
-              src={siteConfig.avatar}
-              alt={siteConfig.title}
+              src={localeSiteConfig.avatar || siteConfig.avatar}
+              alt={localeSiteConfig.title || siteConfig.title}
               class="w-8 h-8 rounded-full"
             />
           )}
           <div class="hidden sm:block">
             <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100">
-              {siteConfig.title}
+              {localeSiteConfig.title || siteConfig.title}
             </h1>
             <p class="text-xs text-slate-600 dark:text-slate-400 -mt-1">
-              技术博客
+              {localeSiteConfig.description || siteConfig.description}
             </p>
           </div>
         </a>
       </div>
 
-      <!-- 桌面端导航 -->
       <div class="hidden md:flex items-center space-x-8">
-        {siteConfig.menu.map((item) => (
+        {menu.map((item) => (
           <a
             href={item.href}
             class={`text-sm font-medium transition-colors hover:text-primary-500 ${
@@ -47,22 +79,44 @@ const currentPath = Astro.url.pathname;
         ))}
       </div>
 
-      <!-- 右侧功能区 -->
       <div class="flex items-center">
-        <!-- 搜索框 -->
         <div class="hidden sm:block mr-2">
-          <SearchBox client:load />
+          <SearchBox
+            client:load
+            placeholder={ui.searchPlaceholder}
+            searchLabel={ui.search}
+          />
         </div>
 
+        {showLanguageSwitcher && (
+          <div class="hidden sm:block mr-2">
+            <LanguageSwitcher
+              client:load
+              locales={localesForSwitcher}
+              currentLocale={currentLocale}
+              currentPath={basePath}
+              defaultLocale={i18nConfig.defaultLocale}
+              prefixDefaultLocale={i18nConfig.routing.prefixDefaultLocale}
+            />
+          </div>
+        )}
+
         <div class="hidden sm:block mr-2">
-          <!-- 主题切换 -->
           <ThemeToggle client:load />
         </div>
-        <!-- 移动端菜单 -->
+
         <div class="md:hidden">
-          <MobileMenu client:load navigation={siteConfig.menu} />
+          <MobileMenu
+            client:load
+            navigation={menu}
+            locales={showLanguageSwitcher ? localesForSwitcher : []}
+            currentLocale={currentLocale}
+            currentPath={basePath}
+            defaultLocale={i18nConfig.defaultLocale}
+            prefixDefaultLocale={i18nConfig.routing.prefixDefaultLocale}
+          />
         </div>
       </div>
     </nav>
   </div>
-</header>
+</header>

package/src/components/layout/Sidebar.astro

@@ -1,7 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
 import Icon from '../ui/Icon.astro';
-import { sidebarConfig } from '@jet-w/astro-blog/config';
 import {
   processSidebarConfig,
   getRecentPosts,
@@ -9,12 +8,25 @@ import {
   getArchives,
   filterGroupsByPath,
 } from '@jet-w/astro-blog/utils/sidebar';
+import type { I18nConfig } from '../../config/i18n';
+import { defaultI18nConfig } from '../../config/i18n';
+import { getLocaleFromPath, getLocaleConfig, getLocalePrefix, formatDate } from '../../utils/i18n';
 
 interface Props {
   currentPath?: string;
+  i18nConfig?: I18nConfig;
 }
 
-const { currentPath = Astro.url.pathname } = Astro.props;
+const { currentPath = Astro.url.pathname, i18nConfig = defaultI18nConfig } = Astro.props;
+
+// Get current locale and translations
+const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+const localeConfig = getLocaleConfig(currentLocale, i18nConfig);
+const ui = localeConfig.ui;
+const localePrefix = getLocalePrefix(currentLocale, i18nConfig);
+
+// Get locale-specific sidebar config (already merged with defaults in getLocaleConfig)
+const sidebarConfig = localeConfig.sidebar;
 
 // 获取所有文章
 const allPosts = await getCollection('posts', ({ data }) => !data.draft);
@@ -362,17 +374,17 @@ const archives = sidebarConfig.showArchives
     )
   ))}
 
-  {/* 最新文章 */}
+  {/* Recent Posts */}
   {sidebarConfig.showRecentPosts && recentPosts.length > 0 && (
     <section>
       <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">
-        最新文章
+        {ui.recentPosts}
       </h3>
       <div class="space-y-3">
         {recentPosts.map((post) => (
           <article class="group">
             <a
-              href={`/posts/${post.id.toLowerCase()}`}
+              href={`${localePrefix}/posts/${post.id.toLowerCase()}`}
               class="block p-3 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
             >
               <h4 class="text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-primary-500 line-clamp-2 mb-1">
@@ -380,7 +392,7 @@ const archives = sidebarConfig.showArchives
               </h4>
               {post.data.pubDate && (
                 <time class="text-xs text-slate-500 dark:text-slate-400">
-                  {new Date(post.data.pubDate).toLocaleDateString('zh-CN')}
+                  {formatDate(post.data.pubDate, localeConfig.locale.dateLocale)}
                 </time>
               )}
             </a>
@@ -390,16 +402,16 @@ const archives = sidebarConfig.showArchives
     </section>
   )}
 
-  {/* 热门标签 */}
+  {/* Popular Tags */}
   {sidebarConfig.showPopularTags && popularTags.length > 0 && (
     <section>
       <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">
-        热门标签
+        {ui.popularTags}
       </h3>
       <div class="flex flex-wrap gap-2">
         {popularTags.map((tag) => (
           <a
-            href={`/tags/${tag.slug}`}
+            href={`${localePrefix}/tags/${tag.slug}`}
             class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 hover:bg-primary-200 dark:hover:bg-primary-900/50 transition-colors"
             style={`font-size: ${Math.min(14, 10 + tag.count * 0.5)}px`}
           >
@@ -411,20 +423,20 @@ const archives = sidebarConfig.showArchives
     </section>
   )}
 
-  {/* 归档 */}
+  {/* Archives */}
   {sidebarConfig.showArchives && archives.length > 0 && (
     <section>
       <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">
-        文章归档
+        {ui.archives}
       </h3>
       <div class="space-y-2">
         {archives.map((archive) => (
           <a
-            href={`/archives/${archive.year}/${String(archive.month).padStart(2, '0')}`}
+            href={`${localePrefix}/archives/${archive.year}/${String(archive.month).padStart(2, '0')}`}
             class="flex items-center justify-between p-2 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors group"
           >
             <span class="text-sm text-slate-700 dark:text-slate-300 group-hover:text-primary-500">
-              {archive.year}年{archive.month}月
+              {new Date(archive.year, archive.month - 1).toLocaleDateString(localeConfig.locale.dateLocale, { year: 'numeric', month: 'long' })}
             </span>
             <span class="text-xs text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded-full">
               {archive.count}
@@ -435,11 +447,11 @@ const archives = sidebarConfig.showArchives
     </section>
   )}
 
-  {/* 友情链接 */}
+  {/* Friend Links */}
   {sidebarConfig.showFriendLinks && sidebarConfig.friendLinks && sidebarConfig.friendLinks.length > 0 && (
     <section>
       <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4 border-b border-slate-200 dark:border-slate-700 pb-2">
-        友情链接
+        {ui.friendLinks}
       </h3>
       <div class="space-y-2">
         {sidebarConfig.friendLinks.map((link) => (

package/src/components/ui/LanguageSwitcher.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="relative" ref="dropdownRef">
+    <button
+      @click="toggleDropdown"
+      class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
+      :aria-expanded="isOpen"
+      aria-haspopup="listbox"
+      :aria-label="ariaLabel"
+    >
+      <svg
+        class="w-4 h-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"
+        />
+      </svg>
+      <span>{{ currentLocaleName }}</span>
+      <svg
+        class="w-3 h-3 transition-transform"
+        :class="{ 'rotate-180': isOpen }"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M19 9l-7 7-7-7"
+        />
+      </svg>
+    </button>
+
+    <Transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute right-0 mt-2 w-40 origin-top-right rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-700 focus:outline-none z-50"
+        role="listbox"
+        :aria-label="listLabel"
+      >
+        <div class="py-1">
+          <a
+            v-for="locale in locales"
+            :key="locale.code"
+            :href="getLocalizedUrl(locale.code)"
+            class="flex items-center gap-2 px-4 py-2 text-sm transition-colors"
+            :class="[
+              locale.code === currentLocale
+                ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+            ]"
+            role="option"
+            :aria-selected="locale.code === currentLocale"
+            @click="closeDropdown"
+          >
+            <span
+              v-if="locale.code === currentLocale"
+              class="w-4 h-4 flex items-center justify-center"
+            >
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </span>
+            <span v-else class="w-4 h-4" />
+            <span>{{ locale.name }}</span>
+          </a>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+interface LocaleInfo {
+  code: string;
+  name: string;
+}
+
+interface Props {
+  /** Available locales */
+  locales: LocaleInfo[];
+  /** Current locale code */
+  currentLocale: string;
+  /** Current page path (without locale prefix) */
+  currentPath: string;
+  /** Default locale code */
+  defaultLocale: string;
+  /** Whether to prefix the default locale in URLs */
+  prefixDefaultLocale?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  prefixDefaultLocale: false,
+});
+
+const isOpen = ref(false);
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const currentLocaleName = computed(() => {
+  const locale = props.locales.find((l) => l.code === props.currentLocale);
+  return locale?.name || props.currentLocale;
+});
+
+const ariaLabel = computed(() => {
+  return `Select language, current: ${currentLocaleName.value}`;
+});
+
+const listLabel = computed(() => {
+  return 'Available languages';
+});
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value;
+}
+
+function closeDropdown() {
+  isOpen.value = false;
+}
+
+function getLocalizedUrl(targetLocale: string): string {
+  // Normalize the path
+  let basePath = props.currentPath;
+  if (!basePath.startsWith('/')) {
+    basePath = '/' + basePath;
+  }
+
+  // If target is default locale and prefix is not required
+  if (targetLocale === props.defaultLocale && !props.prefixDefaultLocale) {
+    return basePath === '/' ? '/' : basePath;
+  }
+
+  // Add locale prefix
+  if (basePath === '/') {
+    return `/${targetLocale}`;
+  }
+
+  return `/${targetLocale}${basePath}`;
+}
+
+// Close dropdown when clicking outside
+function handleClickOutside(event: MouseEvent) {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    closeDropdown();
+  }
+}
+
+// Close dropdown on escape key
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    closeDropdown();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+  document.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  document.removeEventListener('keydown', handleKeyDown);
+});
+</script>