@jet-w/astro-blog 0.1.0

package/src/components/ui/Icon.astro

@@ -0,0 +1,187 @@
+---
+/**
+ * 通用图标组件
+ * 支持多种图标格式：
+ *
+ * 1. Emoji: 直接使用 emoji 字符，如 "📁" "🎉"
+ *
+ * 2. Font Awesome:
+ *    - "fa:folder" → <i class="fa-solid fa-folder"></i>
+ *    - "fa-brands:github" → <i class="fa-brands fa-github"></i>
+ *    - "fa-regular:star" → <i class="fa-regular fa-star"></i>
+ *
+ * 3. Material Icons:
+ *    - "mi:folder" → <span class="material-icons">folder</span>
+ *    - "mi-outlined:folder" → <span class="material-icons-outlined">folder</span>
+ *    - "mi-round:folder" → <span class="material-icons-round">folder</span>
+ *
+ * 4. Bootstrap Icons:
+ *    - "bi:folder" → <i class="bi bi-folder"></i>
+ *
+ * 5. Remix Icon:
+ *    - "ri:folder-line" → <i class="ri-folder-line"></i>
+ *    - "ri:folder-fill" → <i class="ri-folder-fill"></i>
+ *
+ * 6. Ionicons:
+ *    - "ion:folder" → <ion-icon name="folder"></ion-icon>
+ *    - "ion:folder-outline" → <ion-icon name="folder-outline"></ion-icon>
+ */
+
+export interface Props {
+  icon: string;
+  class?: string;
+  size?: string;
+}
+
+const { icon, class: className = '', size = '1em' } = Astro.props;
+
+// 解析图标格式
+function parseIcon(iconStr: string) {
+  if (!iconStr) return { type: 'none', value: '' };
+
+  // 检测是否有前缀
+  const hasPrefix = /^[a-z-]+:/i.test(iconStr);
+
+  if (!hasPrefix) {
+    // 检测是否为 emoji（包含非 ASCII 字符）
+    const isEmoji = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{1F600}-\u{1F64F}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]/u.test(iconStr);
+    if (isEmoji) {
+      return { type: 'emoji', value: iconStr };
+    }
+
+    // 没有前缀且不是 emoji，默认当作 Font Awesome solid 图标
+    return { type: 'fa', style: 'solid', value: iconStr };
+  }
+
+  const [prefix, ...rest] = iconStr.split(':');
+  const value = rest.join(':');
+
+  switch (prefix.toLowerCase()) {
+    // Font Awesome
+    case 'fa':
+      return { type: 'fa', style: 'solid', value };
+    case 'fa-solid':
+    case 'fas':
+      return { type: 'fa', style: 'solid', value };
+    case 'fa-regular':
+    case 'far':
+      return { type: 'fa', style: 'regular', value };
+    case 'fa-brands':
+    case 'fab':
+      return { type: 'fa', style: 'brands', value };
+    case 'fa-light':
+    case 'fal':
+      return { type: 'fa', style: 'light', value };
+    case 'fa-thin':
+    case 'fat':
+      return { type: 'fa', style: 'thin', value };
+    case 'fa-duotone':
+    case 'fad':
+      return { type: 'fa', style: 'duotone', value };
+
+    // Material Icons
+    case 'mi':
+    case 'material':
+      return { type: 'material', style: 'filled', value };
+    case 'mi-outlined':
+    case 'material-outlined':
+      return { type: 'material', style: 'outlined', value };
+    case 'mi-round':
+    case 'material-round':
+      return { type: 'material', style: 'round', value };
+
+    // Bootstrap Icons
+    case 'bi':
+    case 'bootstrap':
+      return { type: 'bootstrap', value };
+
+    // Remix Icon
+    case 'ri':
+    case 'remix':
+      return { type: 'remix', value };
+
+    // Ionicons
+    case 'ion':
+    case 'ionicon':
+      return { type: 'ionicon', value };
+
+    default:
+      // 未知前缀，当作 emoji 处理
+      return { type: 'emoji', value: iconStr };
+  }
+}
+
+const parsed = parseIcon(icon);
+---
+
+{parsed.type === 'emoji' && (
+  <span class:list={['icon-emoji', className]} style={`font-size: ${size};`}>{parsed.value}</span>
+)}
+
+{parsed.type === 'fa' && (
+  <i
+    class:list={[`fa-${parsed.style}`, `fa-${parsed.value}`, className]}
+    style={`font-size: ${size};`}
+  ></i>
+)}
+
+{parsed.type === 'material' && parsed.style === 'filled' && (
+  <span
+    class:list={['material-icons', className]}
+    style={`font-size: ${size};`}
+  >{parsed.value}</span>
+)}
+
+{parsed.type === 'material' && parsed.style === 'outlined' && (
+  <span
+    class:list={['material-icons-outlined', className]}
+    style={`font-size: ${size};`}
+  >{parsed.value}</span>
+)}
+
+{parsed.type === 'material' && parsed.style === 'round' && (
+  <span
+    class:list={['material-icons-round', className]}
+    style={`font-size: ${size};`}
+  >{parsed.value}</span>
+)}
+
+{parsed.type === 'bootstrap' && (
+  <i
+    class:list={['bi', `bi-${parsed.value}`, className]}
+    style={`font-size: ${size};`}
+  ></i>
+)}
+
+{parsed.type === 'remix' && (
+  <i
+    class:list={[`ri-${parsed.value}`, className]}
+    style={`font-size: ${size};`}
+  ></i>
+)}
+
+{parsed.type === 'ionicon' && (
+  <ion-icon
+    name={parsed.value}
+    class={className}
+    style={`font-size: ${size};`}
+  ></ion-icon>
+)}
+
+<style>
+  .icon-emoji {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  /* 统一图标垂直对齐 */
+  i, span.material-icons, span.material-icons-outlined, span.material-icons-round, ion-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    line-height: 1;
+  }
+</style>

package/src/components/ui/MobileMenu.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <!-- 菜单按钮 -->
+    <button
+      @click="isOpen = !isOpen"
+      class="p-2 rounded-lg bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 transition-colors"
+      aria-label="菜单"
+    >
+      <transition name="rotate" mode="out-in">
+        <svg
+          v-if="!isOpen"
+          key="menu"
+          class="w-5 h-5 text-slate-700 dark:text-slate-300"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+        </svg>
+        <svg
+          v-else
+          key="close"
+          class="w-5 h-5 text-slate-700 dark:text-slate-300"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </transition>
+    </button>
+
+    <!-- 使用 Teleport 将菜单渲染到 body -->
+    <Teleport to="body" v-if="isMounted">
+      <!-- 遮罩层 -->
+      <transition name="fade">
+        <div
+          v-if="isOpen"
+          @click="isOpen = false"
+          class="mobile-menu-overlay"
+        ></div>
+      </transition>
+
+      <!-- 侧边菜单 -->
+      <transition name="slide">
+        <div
+          v-if="isOpen"
+          class="mobile-menu-panel"
+        >
+        <div class="p-6">
+          <!-- 头部 -->
+          <div class="flex items-center justify-between mb-8">
+            <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">菜单</h2>
+            <button
+              @click="isOpen = false"
+              class="p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+            >
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- 搜索框 -->
+          <div class="mb-8 sm:hidden">
+            <SearchBox />
+          </div>
+
+          <!-- 导航链接 -->
+          <nav class="space-y-2">
+            <a
+              v-for="item in navigation"
+              :key="item.href"
+              :href="item.href"
+              @click="isOpen = false"
+              class="flex items-center px-4 py-3 rounded-lg text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+              :class="{ 'bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400': isActive(item.href) }"
+            >
+              <span class="font-medium">{{ item.name }}</span>
+            </a>
+          </nav>
+
+          <!-- 分隔线 -->
+          <hr class="my-8 border-slate-200 dark:border-slate-700" />
+
+          <!-- 快捷功能 -->
+          <div class="space-y-4">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-medium text-slate-700 dark:text-slate-300">深色模式</span>
+              <ThemeToggle />
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import type { NavigationItem } from '../../types'
+import SearchBox from './SearchBox.vue'
+import ThemeToggle from './ThemeToggle.vue'
+
+interface Props {
+  navigation: NavigationItem[]
+}
+
+const props = defineProps<Props>()
+const isOpen = ref(false)
+const currentPath = ref('')
+const isMounted = ref(false)
+
+const isActive = (href: string) => {
+  return currentPath.value === href || (href !== '/' && currentPath.value.startsWith(href))
+}
+
+const handleEscape = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  isMounted.value = true
+  currentPath.value = window.location.pathname
+  document.addEventListener('keydown', handleEscape)
+
+  // 监听路由变化（如果使用客户端路由）
+  window.addEventListener('popstate', () => {
+    currentPath.value = window.location.pathname
+  })
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+})
+</script>
+
+<style scoped>
+.rotate-enter-active,
+.rotate-leave-active {
+  transition: transform 0.2s ease;
+}
+
+.rotate-enter-from,
+.rotate-leave-to {
+  transform: rotate(90deg);
+}
+</style>
+
+<style>
+/* 非 scoped 样式，用于 Teleport 渲染的内容 */
+.mobile-menu-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99998;
+}
+
+.mobile-menu-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 20rem;
+  max-width: 80vw;
+  background-color: white;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+  z-index: 99999;
+  overflow-y: auto;
+}
+
+.dark .mobile-menu-panel {
+  background-color: rgb(15 23 42);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateX(100%);
+}
+</style>

package/src/components/ui/Pagination.astro

@@ -0,0 +1,143 @@
+---
+export interface Props {
+  currentPage: number;
+  totalPages: number;
+  baseUrl: string;
+}
+
+const { currentPage, totalPages, baseUrl } = Astro.props;
+
+// 生成页码数组
+const generatePageNumbers = () => {
+  const pages = [];
+  const showPages = 5; // 显示的页码数量
+  const halfShow = Math.floor(showPages / 2);
+
+  let start = Math.max(1, currentPage - halfShow);
+  let end = Math.min(totalPages, start + showPages - 1);
+
+  // 调整起始位置
+  if (end - start < showPages - 1) {
+    start = Math.max(1, end - showPages + 1);
+  }
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  return pages;
+};
+
+const pageNumbers = generatePageNumbers();
+const prevPage = currentPage > 1 ? currentPage - 1 : null;
+const nextPage = currentPage < totalPages ? currentPage + 1 : null;
+
+const getPageUrl = (page: number) => {
+  if (page === 1) {
+    return baseUrl;
+  }
+  return `${baseUrl}/page/${page}`;
+};
+---
+
+{totalPages > 1 && (
+  <nav class="flex justify-center" aria-label="分页导航">
+    <div class="flex items-center space-x-2">
+      <!-- 上一页 -->
+      {prevPage ? (
+        <a
+          href={getPageUrl(prevPage)}
+          class="flex items-center space-x-1 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+          aria-label="上一页"
+        >
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+          <span>上一页</span>
+        </a>
+      ) : (
+        <span class="flex items-center space-x-1 px-3 py-2 text-sm font-medium text-slate-400 dark:text-slate-600 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg cursor-not-allowed">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+          </svg>
+          <span>上一页</span>
+        </span>
+      )}
+
+      <!-- 第一页 -->
+      {pageNumbers[0] > 1 && (
+        <>
+          <a
+            href={getPageUrl(1)}
+            class="px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+          >
+            1
+          </a>
+          {pageNumbers[0] > 2 && (
+            <span class="px-2 py-2 text-slate-400 dark:text-slate-600">...</span>
+          )}
+        </>
+      )}
+
+      <!-- 页码 -->
+      {pageNumbers.map((page) => (
+        page === currentPage ? (
+          <span
+            class="px-3 py-2 text-sm font-medium text-white bg-primary-500 border border-primary-500 rounded-lg"
+            aria-current="page"
+          >
+            {page}
+          </span>
+        ) : (
+          <a
+            href={getPageUrl(page)}
+            class="px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+          >
+            {page}
+          </a>
+        )
+      ))}
+
+      <!-- 最后一页 -->
+      {pageNumbers[pageNumbers.length - 1] < totalPages && (
+        <>
+          {pageNumbers[pageNumbers.length - 1] < totalPages - 1 && (
+            <span class="px-2 py-2 text-slate-400 dark:text-slate-600">...</span>
+          )}
+          <a
+            href={getPageUrl(totalPages)}
+            class="px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+          >
+            {totalPages}
+          </a>
+        </>
+      )}
+
+      <!-- 下一页 -->
+      {nextPage ? (
+        <a
+          href={getPageUrl(nextPage)}
+          class="flex items-center space-x-1 px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+          aria-label="下一页"
+        >
+          <span>下一页</span>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </a>
+      ) : (
+        <span class="flex items-center space-x-1 px-3 py-2 text-sm font-medium text-slate-400 dark:text-slate-600 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg cursor-not-allowed">
+          <span>下一页</span>
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </span>
+      )}
+    </div>
+
+    <!-- 页面信息 -->
+    <div class="hidden sm:flex items-center ml-8 text-sm text-slate-600 dark:text-slate-400">
+      第 {currentPage} 页，共 {totalPages} 页
+    </div>
+  </nav>
+)}