@jet-w/astro-blog 0.1.0

package/src/components/blog/RelatedPosts.astro

@@ -0,0 +1,175 @@
+---
+export interface Props {
+  currentPost: {
+    slug: string;
+    title: string;
+    tags?: string[];
+    categories?: string[];
+  };
+}
+
+const { currentPost } = Astro.props;
+
+// 模拟获取相关文章
+const allPosts = [
+  {
+    slug: 'astro-vs-nextjs',
+    title: 'Astro vs Next.js：静态站点生成器的对比',
+    description: '深入比较Astro和Next.js在性能、开发体验和生态系统方面的差异。',
+    pubDate: new Date('2025-01-07'),
+    tags: ['Astro', 'Next.js', 'SSG'],
+    categories: ['技术比较'],
+    readingTime: 8
+  },
+  {
+    slug: 'tailwind-best-practices',
+    title: 'Tailwind CSS最佳实践指南',
+    description: '总结使用Tailwind CSS开发时的最佳实践和常见问题解决方案。',
+    pubDate: new Date('2025-01-06'),
+    tags: ['Tailwind CSS', 'CSS', '最佳实践'],
+    categories: ['前端开发'],
+    readingTime: 6
+  },
+  {
+    slug: 'typescript-tips',
+    title: 'TypeScript高级技巧与实战',
+    description: '分享TypeScript在实际项目中的高级用法和技巧。',
+    pubDate: new Date('2025-01-05'),
+    tags: ['TypeScript', 'JavaScript'],
+    categories: ['编程语言'],
+    readingTime: 10
+  }
+];
+
+// 计算相关度分数
+function calculateRelevance(post: typeof allPosts[0]) {
+  let score = 0;
+
+  // 标签匹配
+  if (currentPost.tags && post.tags) {
+    const commonTags = currentPost.tags.filter(tag =>
+      post.tags!.includes(tag)
+    );
+    score += commonTags.length * 3;
+  }
+
+  // 分类匹配
+  if (currentPost.categories && post.categories) {
+    const commonCategories = currentPost.categories.filter(category =>
+      post.categories!.includes(category)
+    );
+    score += commonCategories.length * 2;
+  }
+
+  return score;
+}
+
+// 获取相关文章（排除当前文章）
+const relatedPosts = allPosts
+  .filter(post => post.slug !== currentPost.slug)
+  .map(post => ({
+    ...post,
+    relevance: calculateRelevance(post)
+  }))
+  .sort((a, b) => b.relevance - a.relevance)
+  .slice(0, 3);
+
+const formattedDate = (date: Date) => new Intl.DateTimeFormat('zh-CN', {
+  month: 'short',
+  day: 'numeric'
+}).format(date);
+---
+
+{relatedPosts.length > 0 && (
+  <section class="mt-16">
+    <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
+      相关文章
+    </h2>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {relatedPosts.map((post) => (
+        <article class="group">
+          <a
+            href={`/posts/${post.slug}`}
+            class="card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 block h-full"
+          >
+            <div class="flex flex-col h-full">
+              <!-- 元信息 -->
+              <div class="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400 mb-3">
+                <time datetime={post.pubDate.toISOString()}>
+                  {formattedDate(post.pubDate)}
+                </time>
+                {post.readingTime && (
+                  <span>{post.readingTime}分钟</span>
+                )}
+              </div>
+
+              <!-- 标题 -->
+              <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors mb-3 line-clamp-2">
+                {post.title}
+              </h3>
+
+              <!-- 描述 -->
+              <p class="text-sm text-slate-600 dark:text-slate-400 mb-4 line-clamp-3 flex-1">
+                {post.description}
+              </p>
+
+              <!-- 标签 -->
+              {post.tags && post.tags.length > 0 && (
+                <div class="flex flex-wrap gap-1 mb-3">
+                  {post.tags.slice(0, 2).map((tag) => (
+                    <span class="text-xs px-2 py-1 bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 rounded-full">
+                      {tag}
+                    </span>
+                  ))}
+                  {post.tags.length > 2 && (
+                    <span class="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 rounded-full">
+                      +{post.tags.length - 2}
+                    </span>
+                  )}
+                </div>
+              )}
+
+              <!-- 阅读链接 -->
+              <div class="flex items-center text-primary-500 group-hover:text-primary-600 transition-colors text-sm font-medium">
+                <span>阅读更多</span>
+                <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" 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>
+              </div>
+            </div>
+          </a>
+        </article>
+      ))}
+    </div>
+
+    <!-- 查看更多按钮 -->
+    <div class="text-center mt-8">
+      <a
+        href="/posts"
+        class="btn-secondary inline-flex items-center space-x-2"
+      >
+        <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>
+    </div>
+  </section>
+)}
+
+<style>
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+</style>

package/src/components/blog/TableOfContents.astro

@@ -0,0 +1,153 @@
+---
+export interface Props {
+  headings: Array<{
+    level: number;
+    text: string;
+    id: string;
+  }>;
+}
+
+const { headings } = Astro.props;
+---
+
+{headings.length > 0 && (
+  <nav class="sticky top-20 p-6" aria-label="目录">
+    <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">
+      目录
+    </h3>
+
+    <ol class="space-y-2 text-sm">
+      {headings.map((heading) => (
+        <li
+          class={`${
+            heading.level === 2 ? 'pl-0' :
+            heading.level === 3 ? 'pl-4' :
+            'pl-8'
+          }`}
+        >
+          <a
+            href={`#${heading.id}`}
+            class="block py-1 text-slate-600 dark:text-slate-400 hover:text-primary-500 transition-colors toc-link"
+            data-heading-id={heading.id}
+          >
+            {heading.text}
+          </a>
+        </li>
+      ))}
+    </ol>
+
+    <!-- 进度指示器 -->
+    <div class="mt-8 pt-4 border-t border-slate-200 dark:border-slate-700">
+      <div class="text-xs text-slate-500 dark:text-slate-400 mb-2">阅读进度</div>
+      <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2">
+        <div class="bg-primary-500 h-2 rounded-full transition-all duration-300" id="reading-progress" style="width: 0%"></div>
+      </div>
+    </div>
+  </nav>
+)}
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const tocLinks = document.querySelectorAll('.toc-link');
+    const headings = document.querySelectorAll('h2, h3, h4');
+    const progressBar = document.getElementById('reading-progress');
+
+    // 更新目录高亮
+    function updateTocHighlight() {
+      let current = '';
+
+      headings.forEach((heading) => {
+        const rect = heading.getBoundingClientRect();
+        if (rect.top <= 100) {
+          current = heading.id;
+        }
+      });
+
+      tocLinks.forEach((link) => {
+        const linkId = link.getAttribute('data-heading-id');
+        if (linkId === current) {
+          link.classList.add('text-primary-500', 'font-medium');
+          link.classList.remove('text-slate-600', 'dark:text-slate-400');
+        } else {
+          link.classList.remove('text-primary-500', 'font-medium');
+          link.classList.add('text-slate-600', 'dark:text-slate-400');
+        }
+      });
+    }
+
+    // 更新阅读进度
+    function updateReadingProgress() {
+      if (!progressBar) return;
+
+      const article = document.querySelector('main');
+      if (!article) return;
+
+      const articleTop = article.offsetTop;
+      const articleHeight = article.offsetHeight;
+      const windowTop = window.pageYOffset;
+      const windowHeight = window.innerHeight;
+
+      const progress = Math.min(
+        Math.max((windowTop - articleTop + windowHeight / 2) / articleHeight, 0),
+        1
+      );
+
+      progressBar.style.width = `${progress * 100}%`;
+    }
+
+    // 平滑滚动到标题
+    tocLinks.forEach((link) => {
+      link.addEventListener('click', (e) => {
+        e.preventDefault();
+        const targetId = link.getAttribute('data-heading-id');
+        const targetElement = targetId ? document.getElementById(targetId) : null;
+
+        if (targetElement) {
+          const offsetTop = targetElement.offsetTop - 80; // 考虑固定头部的高度
+          window.scrollTo({
+            top: offsetTop,
+            behavior: 'smooth'
+          });
+        }
+      });
+    });
+
+    // 监听滚动事件
+    let ticking = false;
+
+    function handleScroll() {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          updateTocHighlight();
+          updateReadingProgress();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    }
+
+    window.addEventListener('scroll', handleScroll);
+
+    // 初始化
+    updateTocHighlight();
+    updateReadingProgress();
+  });
+</script>
+
+<style>
+  .toc-link {
+    position: relative;
+  }
+
+  .toc-link.text-primary-500::before {
+    content: '';
+    position: absolute;
+    left: -12px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 4px;
+    height: 16px;
+    background-color: theme('colors.primary.500');
+    border-radius: 2px;
+  }
+</style>

package/src/components/blog/TagCloud.astro

@@ -0,0 +1,91 @@
+---
+export interface Props {
+  tags: Array<{
+    name: string;
+    count: number;
+    slug: string;
+  }>;
+  maxSize?: number;
+  minSize?: number;
+}
+
+const { tags, maxSize = 2.5, minSize = 0.8 } = Astro.props;
+
+// 计算字体大小
+const maxCount = Math.max(...tags.map(tag => tag.count));
+const minCount = Math.min(...tags.map(tag => tag.count));
+
+const getFontSize = (count: number) => {
+  if (maxCount === minCount) return (maxSize + minSize) / 2;
+  const ratio = (count - minCount) / (maxCount - minCount);
+  return minSize + ratio * (maxSize - minSize);
+};
+
+// 生成随机颜色类
+const getColorClass = (index: number) => {
+  const colors = [
+    'text-primary-500 hover:text-primary-600',
+    'text-secondary-500 hover:text-secondary-600',
+    'text-accent-500 hover:text-accent-600',
+    'text-blue-500 hover:text-blue-600',
+    'text-green-500 hover:text-green-600',
+    'text-purple-500 hover:text-purple-600',
+    'text-pink-500 hover:text-pink-600',
+    'text-indigo-500 hover:text-indigo-600',
+    'text-red-500 hover:text-red-600',
+    'text-yellow-500 hover:text-yellow-600',
+    'text-teal-500 hover:text-teal-600',
+    'text-orange-500 hover:text-orange-600'
+  ];
+  return colors[index % colors.length];
+};
+
+// 随机打乱标签顺序以增加视觉趣味性
+const shuffledTags = [...tags].sort(() => Math.random() - 0.5);
+---
+
+<div class="tag-cloud p-8 bg-slate-50 dark:bg-slate-800 rounded-xl">
+  <div class="flex flex-wrap items-center justify-center gap-3 leading-relaxed">
+    {shuffledTags.map((tag, index) => (
+      <a
+        href={`/tags/${tag.slug}`}
+        class={`inline-block font-medium transition-all duration-300 hover:scale-110 ${getColorClass(index)}`}
+        style={`font-size: ${getFontSize(tag.count)}rem`}
+        title={`${tag.name} (${tag.count} 篇文章)`}
+      >
+        {tag.name}
+      </a>
+    ))}
+  </div>
+
+  <!-- 图例 -->
+  <div class="mt-6 pt-4 border-t border-slate-200 dark:border-slate-700">
+    <div class="flex items-center justify-center space-x-8 text-sm text-slate-600 dark:text-slate-400">
+      <div class="flex items-center space-x-2">
+        <span class="text-xs">文字大小表示文章数量</span>
+      </div>
+      <div class="flex items-center space-x-2">
+        <span class="text-xs">共 {tags.length} 个标签</span>
+      </div>
+      <div class="flex items-center space-x-2">
+        <span class="text-xs">最多 {maxCount} 篇</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .tag-cloud {
+    background:
+      radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
+      radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
+  }
+
+  .dark .tag-cloud {
+    background:
+      radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
+      radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
+  }
+</style>

package/src/components/home/FeaturedPostsSection.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * 首页特色文章组件
+ */
+import PostCard from '../../components/blog/PostCard.astro';
+import { getCollection } from 'astro:content';
+
+export interface Props {
+  count?: number;
+}
+
+const { count = 3 } = Astro.props;
+
+const allPosts = await getCollection('posts');
+const publishedPosts = allPosts
+  .filter(post => !post.data.draft)
+  .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
+
+const featuredPosts = publishedPosts.slice(0, count).map(post => ({
+  slug: post.id.toLowerCase(),
+  title: post.data.title,
+  description: post.data.description,
+  pubDate: post.data.pubDate,
+  tags: post.data.tags,
+  categories: post.data.categories,
+  author: post.data.author,
+  readingTime: 5
+}));
+---
+
+{featuredPosts.length > 0 && (
+  <section class="mb-16">
+    <div class="flex items-center justify-between mb-8">
+      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+        特色文章
+      </h2>
+      <a
+        href="/posts"
+        class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium text-sm flex items-center space-x-1 transition-colors"
+      >
+        <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>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {featuredPosts.map((post) => (
+        <PostCard post={post} featured={true} />
+      ))}
+    </div>
+  </section>
+)}

package/src/components/home/QuickNavSection.astro

@@ -0,0 +1,81 @@
+---
+/**
+ * 首页快速导航组件
+ */
+import NavigationTabs from '../../components/blog/NavigationTabs.vue';
+import { getCollection } from 'astro:content';
+
+const allPosts = await getCollection('posts');
+const publishedPosts = allPosts
+  .filter(post => !post.data.draft)
+  .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
+
+const posts = publishedPosts.map(post => ({
+  slug: post.id.toLowerCase(),
+  title: post.data.title,
+  pubDate: post.data.pubDate,
+  tags: post.data.tags,
+  categories: post.data.categories,
+}));
+
+// 构建标签数据
+const tagCounts: Record<string, number> = {};
+posts.forEach(post => {
+  (post.tags || []).forEach(tag => {
+    tagCounts[tag] = (tagCounts[tag] || 0) + 1;
+  });
+});
+const tagsData = Object.entries(tagCounts)
+  .map(([name, count]) => ({ name, count }))
+  .sort((a, b) => b.count - a.count);
+
+// 构建分类数据
+const categoryCounts: Record<string, number> = {};
+posts.forEach(post => {
+  (post.categories || []).forEach(category => {
+    categoryCounts[category] = (categoryCounts[category] || 0) + 1;
+  });
+});
+const categoriesData = Object.entries(categoryCounts)
+  .map(([name, count]) => ({ name, count }))
+  .sort((a, b) => b.count - a.count);
+
+// 构建归档数据
+const archiveCounts: Record<string, number> = {};
+posts.forEach(post => {
+  if (post.pubDate) {
+    const year = post.pubDate.getFullYear().toString();
+    const month = (post.pubDate.getMonth() + 1).toString().padStart(2, '0');
+    const key = `${year}-${month}`;
+    archiveCounts[key] = (archiveCounts[key] || 0) + 1;
+  }
+});
+const archivesData = Object.entries(archiveCounts)
+  .map(([key, count]) => {
+    const [year, month] = key.split('-');
+    return { year, month, key, count };
+  })
+  .sort((a, b) => b.key.localeCompare(a.key));
+
+// 构建时间轴数据（最近10篇）
+const timelineData = posts.slice(0, 10).map(post => ({
+  slug: post.slug,
+  title: post.title,
+  pubDate: post.pubDate?.toISOString() || ''
+}));
+---
+
+<section class="mb-16">
+  <div class="flex items-center justify-between mb-8">
+    <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+      快速导航
+    </h2>
+  </div>
+  <NavigationTabs
+    client:load
+    tags={tagsData}
+    archives={archivesData}
+    categories={categoriesData}
+    timeline={timelineData}
+  />
+</section>

package/src/components/home/RecentPostsSection.astro

@@ -0,0 +1,52 @@
+---
+/**
+ * 首页最新文章组件
+ */
+import PostCard from '../../components/blog/PostCard.astro';
+import { getCollection } from 'astro:content';
+
+export interface Props {
+  count?: number;
+}
+
+const { count = 6 } = Astro.props;
+
+const allPosts = await getCollection('posts');
+const publishedPosts = allPosts
+  .filter(post => !post.data.draft)
+  .sort((a, b) => (b.data.pubDate?.getTime() ?? 0) - (a.data.pubDate?.getTime() ?? 0));
+
+const recentPosts = publishedPosts.slice(0, count).map(post => ({
+  slug: post.id.toLowerCase(),
+  title: post.data.title,
+  description: post.data.description,
+  pubDate: post.data.pubDate,
+  tags: post.data.tags,
+  categories: post.data.categories,
+  author: post.data.author,
+  readingTime: 5
+}));
+---
+
+<section class="mb-16">
+  <div class="flex items-center justify-between mb-8">
+    <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+      最新文章
+    </h2>
+    <a
+      href="/posts"
+      class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400 font-medium text-sm flex items-center space-x-1 transition-colors"
+    >
+      <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>
+  </div>
+
+  <div class="space-y-6">
+    {recentPosts.map((post) => (
+      <PostCard post={post} layout="horizontal" />
+    ))}
+  </div>
+</section>

package/src/components/home/StatsSection.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * 首页统计信息组件
+ */
+import { getCollection } from 'astro:content';
+
+const allPosts = await getCollection('posts');
+const publishedPosts = allPosts.filter(post => !post.data.draft);
+
+const totalPosts = publishedPosts.length;
+const allTags = new Set(publishedPosts.flatMap(post => post.data.tags || []));
+const allCategories = new Set(publishedPosts.flatMap(post => post.data.categories || []));
+const totalTags = allTags.size;
+const totalCategories = allCategories.size;
+---
+
+<section class="mb-16">
+  <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
+    <div class="card text-center">
+      <div class="text-3xl font-bold text-primary-500 mb-2">
+        {totalPosts}
+      </div>
+      <div class="text-sm text-slate-600 dark:text-slate-400">
+        文章总数
+      </div>
+    </div>
+    <div class="card text-center">
+      <div class="text-3xl font-bold text-primary-500 mb-2">
+        {totalTags}
+      </div>
+      <div class="text-sm text-slate-600 dark:text-slate-400">
+        标签数量
+      </div>
+    </div>
+    <div class="card text-center">
+      <div class="text-3xl font-bold text-primary-500 mb-2">
+        {totalCategories}
+      </div>
+      <div class="text-sm text-slate-600 dark:text-slate-400">
+        分类数量
+      </div>
+    </div>
+  </div>
+</section>