@jet-w/astro-blog 0.1.0

package/templates/default/src/pages/categories/[category].astro

@@ -0,0 +1,198 @@
+---
+import { getCollection } from 'astro:content';
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+import PostCard from '@jet-w/astro-blog/components/blog/PostCard.astro';
+import Pagination from '@jet-w/astro-blog/components/ui/Pagination.astro';
+
+export async function getStaticPaths() {
+  const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+  // 从所有文章中收集分类
+  const categoryMap = new Map<string, { name: string; count: number }>();
+
+  allPosts.forEach(post => {
+    (post.data.categories || []).forEach(category => {
+      const slug = category.toLowerCase().replace(/\s+/g, '-');
+      if (categoryMap.has(slug)) {
+        categoryMap.get(slug)!.count++;
+      } else {
+        categoryMap.set(slug, { name: category, count: 1 });
+      }
+    });
+  });
+
+  // 为每个分类生成路径
+  return Array.from(categoryMap.entries()).map(([slug, { name, count }]) => ({
+    params: { category: slug },
+    props: { categorySlug: slug, categoryName: name, categoryCount: count }
+  }));
+}
+
+const { categorySlug, categoryName } = Astro.props;
+
+// 获取所有文章并筛选包含该分类的文章
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+// 筛选包含该分类的文章
+const filteredPosts = allPosts
+  .filter(post =>
+    (post.data.categories || []).some(c => c.toLowerCase().replace(/\s+/g, '-') === categorySlug)
+  )
+  .sort((a, b) => {
+    const dateA = a.data.pubDate ? new Date(a.data.pubDate).getTime() : 0;
+    const dateB = b.data.pubDate ? new Date(b.data.pubDate).getTime() : 0;
+    return dateB - dateA;
+  });
+
+// 分页逻辑
+const currentPage = 1;
+const postsPerPage = 10;
+const totalPosts = filteredPosts.length;
+const totalPages = Math.ceil(totalPosts / postsPerPage);
+const startIndex = (currentPage - 1) * postsPerPage;
+const endIndex = startIndex + postsPerPage;
+const posts = filteredPosts.slice(startIndex, endIndex);
+
+// 获取相关分类（同一篇文章中出现的其他分类）
+const relatedCategoryMap = new Map<string, { name: string; count: number }>();
+filteredPosts.forEach(post => {
+  (post.data.categories || []).forEach(cat => {
+    const slug = cat.toLowerCase().replace(/\s+/g, '-');
+    if (slug !== categorySlug) {
+      if (relatedCategoryMap.has(slug)) {
+        relatedCategoryMap.get(slug)!.count++;
+      } else {
+        relatedCategoryMap.set(slug, { name: cat, count: 1 });
+      }
+    }
+  });
+});
+
+const relatedCategories = Array.from(relatedCategoryMap.entries())
+  .sort((a, b) => b[1].count - a[1].count)
+  .slice(0, 3)
+  .map(([slug, { name, count }]) => ({ slug, name, count }));
+---
+
+<PageLayout
+  title={`分类: ${categoryName}`}
+  description={`浏览所有 ${categoryName} 相关的文章`}
+  showSidebar={true}
+>
+  <!-- 面包屑导航 -->
+  <nav class="flex items-center space-x-2 text-sm text-slate-600 dark:text-slate-400 mb-8">
+    <a href="/" class="hover:text-primary-500 transition-colors">首页</a>
+    <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 href="/categories" class="hover:text-primary-500 transition-colors">分类</a>
+    <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 class="text-slate-900 dark:text-slate-100">{categoryName}</span>
+  </nav>
+
+  <!-- 页面头部 -->
+  <div class="text-center mb-12">
+    <div class="inline-flex items-center justify-center w-20 h-20 bg-amber-100 dark:bg-amber-900/30 rounded-full mb-6">
+      <svg class="w-10 h-10 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+    </div>
+
+    <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+      {categoryName}
+    </h1>
+
+    <p class="text-xl text-slate-600 dark:text-slate-400 mb-8 max-w-2xl mx-auto">
+      浏览 {categoryName} 分类下的所有文章
+    </p>
+
+    <!-- 分类统计 -->
+    <div class="inline-flex items-center space-x-6 text-sm text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800 px-6 py-3 rounded-lg">
+      <span>{categoryName}</span>
+      <span>•</span>
+      <span>{totalPosts} 篇文章</span>
+      {totalPages > 1 && (
+        <>
+          <span>•</span>
+          <span>共 {totalPages} 页</span>
+        </>
+      )}
+    </div>
+  </div>
+
+  <!-- 文章列表 -->
+  {posts.length > 0 ? (
+    <div class="space-y-8 mb-12">
+      {posts.map((post) => (
+        <PostCard
+          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,
+            image: post.data.image
+          }}
+          layout="horizontal"
+        />
+      ))}
+    </div>
+  ) : (
+    <div class="text-center py-16">
+      <div class="text-6xl mb-4">📂</div>
+      <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100 mb-2">
+        暂无相关文章
+      </h3>
+      <p class="text-slate-600 dark:text-slate-400 mb-6">
+        目前还没有 {categoryName} 分类的文章，请查看其他分类。
+      </p>
+      <a href="/categories" class="btn-secondary">
+        浏览所有分类
+      </a>
+    </div>
+  )}
+
+  <!-- 分页导航 -->
+  {totalPages > 1 && (
+    <Pagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      baseUrl={`/categories/${categorySlug}`}
+    />
+  )}
+
+  <!-- 相关分类 -->
+  {relatedCategories.length > 0 && (
+    <section class="mt-16 pt-8 border-t border-slate-200 dark:border-slate-700">
+      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-6">
+        相关分类
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {relatedCategories.map((relatedCategory) => (
+          <a
+            href={`/categories/${relatedCategory.slug}`}
+            class="group card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300"
+          >
+            <div class="flex items-center justify-between">
+              <div>
+                <h3 class="font-semibold text-slate-900 dark:text-slate-100 group-hover:text-amber-500 transition-colors">
+                  {relatedCategory.name}
+                </h3>
+                <p class="text-sm text-slate-600 dark:text-slate-400">
+                  {relatedCategory.count} 篇文章
+                </p>
+              </div>
+              <svg class="w-5 h-5 text-slate-400 group-hover:text-amber-500 transition-colors" 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>
+          </a>
+        ))}
+      </div>
+    </section>
+  )}
+</PageLayout>

package/templates/default/src/pages/categories/index.astro

@@ -0,0 +1,190 @@
+---
+import { getCollection } from 'astro:content';
+import PageLayout from '@jet-w/astro-blog/layouts/PageLayout.astro';
+
+// 从文章集合动态获取所有分类
+const allPosts = await getCollection('posts', ({ data }) => !data.draft);
+
+// 统计分类
+const categoryMap = new Map<string, { name: string; count: number }>();
+
+allPosts.forEach(post => {
+  (post.data.categories || []).forEach(category => {
+    const slug = category.toLowerCase().replace(/\s+/g, '-');
+    if (categoryMap.has(slug)) {
+      categoryMap.get(slug)!.count++;
+    } else {
+      categoryMap.set(slug, { name: category, count: 1 });
+    }
+  });
+});
+
+// 转换为数组格式
+const allCategories = Array.from(categoryMap.entries()).map(([slug, { name, count }]) => ({
+  name,
+  count,
+  slug,
+  description: `浏览 ${name} 分类下的所有文章`
+}));
+
+// 按文章数量排序
+const sortedCategories = [...allCategories].sort((a, b) => b.count - a.count);
+const totalPosts = allCategories.reduce((sum, category) => sum + category.count, 0);
+
+// 获取图标（根据分类名称返回相应图标路径）
+const getCategoryIcon = (slug: string) => {
+  const icons: Record<string, string> = {
+    'tech': 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
+    'frontend': 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
+    'backend': 'M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01',
+    'llm': 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
+    'ai': 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
+    'tutorial': 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253',
+    'tools': 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z',
+    'project': 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'
+  };
+  // 尝试匹配 slug 中的关键词
+  for (const [key, path] of Object.entries(icons)) {
+    if (slug.includes(key)) {
+      return path;
+    }
+  }
+  // 默认图标
+  return 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10';
+};
+---
+
+<PageLayout
+  title="分类"
+  description="按分类浏览文章"
+  showSidebar={true}
+>
+  <!-- 页面头部 -->
+  <div class="text-center mb-12">
+    <h1 class="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4">
+      文章分类
+    </h1>
+    <p class="text-xl text-slate-600 dark:text-slate-400 mb-8">
+      按主题分类浏览所有文章
+    </p>
+
+    <!-- 统计信息 -->
+    <div class="inline-flex items-center space-x-6 text-sm text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800 px-6 py-3 rounded-lg">
+      <span>共 {allCategories.length} 个分类</span>
+      <span>•</span>
+      <span>{totalPosts} 篇文章</span>
+    </div>
+  </div>
+
+  <!-- 分类网格 -->
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
+    {sortedCategories.map((category) => (
+      <a
+        href={`/categories/${category.slug}`}
+        class="group card hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 h-full"
+      >
+        <div class="flex flex-col h-full">
+          <!-- 图标和标题 -->
+          <div class="flex items-start space-x-4 mb-4">
+            <div class="flex-shrink-0 w-12 h-12 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center group-hover:bg-primary-200 dark:group-hover:bg-primary-900/50 transition-colors">
+              <svg class="w-6 h-6 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getCategoryIcon(category.slug)} />
+              </svg>
+            </div>
+            <div class="flex-1">
+              <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors mb-2">
+                {category.name}
+              </h3>
+              <div class="flex items-center text-sm text-slate-500 dark:text-slate-400">
+                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                </svg>
+                <span>{category.count} 篇文章</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 描述 -->
+          <p class="text-slate-600 dark:text-slate-400 text-sm mb-4 flex-1">
+            {category.description}
+          </p>
+
+          <!-- 进度条 -->
+          <div class="mt-auto">
+            <div class="h-2 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
+              <div
+                class="h-full bg-primary-500 rounded-full transition-all duration-500 group-hover:bg-primary-600"
+                style={`width: ${Math.round((category.count / Math.max(...sortedCategories.map(c => c.count))) * 100)}%`}
+              ></div>
+            </div>
+          </div>
+        </div>
+      </a>
+    ))}
+  </div>
+
+  <!-- 热门分类 -->
+  {sortedCategories.length > 4 && (
+    <section class="mb-16">
+      <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
+        热门分类
+      </h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {sortedCategories.slice(0, 4).map((category) => (
+          <a
+            href={`/categories/${category.slug}`}
+            class="group p-6 bg-gradient-to-br from-primary-50 to-secondary-50 dark:from-primary-900/20 dark:to-secondary-900/20 rounded-xl border border-primary-200 dark:border-primary-800 hover:shadow-lg transition-all duration-300"
+          >
+            <div class="text-center">
+              <div class="text-3xl font-bold text-primary-500 mb-2">
+                {category.count}
+              </div>
+              <h3 class="font-semibold text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors">
+                {category.name}
+              </h3>
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  )}
+
+  <!-- 分类列表 -->
+  <section>
+    <h2 class="text-2xl font-bold text-slate-900 dark:text-slate-100 mb-8">
+      所有分类
+    </h2>
+    <div class="space-y-3">
+      {sortedCategories.map((category) => (
+        <a
+          href={`/categories/${category.slug}`}
+          class="flex items-center justify-between p-4 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:shadow-md hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-200 group"
+        >
+          <div class="flex items-center space-x-4">
+            <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900/30 rounded-lg flex items-center justify-center group-hover:bg-primary-200 dark:group-hover:bg-primary-900/50 transition-colors">
+              <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getCategoryIcon(category.slug)} />
+              </svg>
+            </div>
+            <div>
+              <h3 class="font-semibold text-slate-900 dark:text-slate-100 group-hover:text-primary-500 transition-colors">
+                {category.name}
+              </h3>
+              <p class="text-sm text-slate-600 dark:text-slate-400">
+                {category.description}
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center space-x-3">
+            <span class="text-sm px-3 py-1 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-400 rounded-full">
+              {category.count} 篇
+            </span>
+            <svg class="w-5 h-5 text-slate-400 group-hover:text-primary-500 transition-colors" 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>
+        </a>
+      ))}
+    </div>
+  </section>
+</PageLayout>

package/templates/default/src/pages/container-test.astro

@@ -0,0 +1,79 @@
+---
+import BaseLayout from '@jet-w/astro-blog/layouts/BaseLayout.astro';
+---
+
+<BaseLayout title="容器测试页面">
+  <div class="container mx-auto px-4 py-8">
+    <div class="max-w-4xl mx-auto">
+      <h1 class="text-3xl font-bold mb-8">容器效果测试</h1>
+
+      <div class="prose prose-slate dark:prose-invert max-w-none prose-lg">
+
+        <h1>测试各种容器类型</h1>
+
+        <div class="container-tip custom-container" data-container-type="tip">
+          <div class="container-title">💡 提示</div>
+          <div class="container-content">
+            <p>这是一个提示容器，用于显示有用的提示信息。</p>
+            <ul>
+              <li>支持列表</li>
+              <li>支持多行内容</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="container-note custom-container" data-container-type="note">
+          <div class="container-title">📝 注意</div>
+          <div class="container-content">
+            <p>这是一个注意容器，用于显示需要注意的信息。可以包含<strong>粗体文字</strong>和<em>斜体文字</em>。</p>
+          </div>
+        </div>
+
+        <div class="container-warning custom-container" data-container-type="warning">
+          <div class="container-title">⚠️ 警告</div>
+          <div class="container-content">
+            <p>这是一个警告容器，用于显示警告信息。</p>
+          </div>
+        </div>
+
+        <div class="container-danger custom-container" data-container-type="danger">
+          <div class="container-title">🚨 危险</div>
+          <div class="container-content">
+            <p>这是一个危险容器，用于显示危险信息。</p>
+          </div>
+        </div>
+
+        <div class="container-info custom-container" data-container-type="info">
+          <div class="container-title">ℹ️ 信息</div>
+          <div class="container-content">
+            <p>这是一个信息容器，用于显示一般信息。</p>
+          </div>
+        </div>
+
+        <div class="container-details custom-container" data-container-type="details">
+          <div class="container-title">📋 详情</div>
+          <div class="container-content">
+            <p>这是一个详情容器，用于显示详细信息。</p>
+          </div>
+        </div>
+
+        <h2>自定义标题测试</h2>
+
+        <div class="container-tip custom-container" data-container-type="tip">
+          <div class="container-title">自定义提示标题</div>
+          <div class="container-content">
+            <p>这个容器有自定义的标题。</p>
+          </div>
+        </div>
+
+        <div class="container-note custom-container" data-container-type="note">
+          <div class="container-title">我的自定义注意事项</div>
+          <div class="container-content">
+            <p>这个容器也有自定义的标题。</p>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</BaseLayout>

package/templates/default/src/pages/mermaid-direct.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Direct Mermaid Test</title>
+  <meta charset="UTF-8">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    .chart-container {
+      margin: 2rem 0;
+      padding: 1rem;
+      border: 2px solid #ddd;
+      border-radius: 8px;
+      background: #f9f9f9;
+    }
+  </style>
+</head>
+<body>
+  <h1>🧪 Direct Mermaid Test</h1>
+
+  <p><strong>Status:</strong> This is a direct HTML test to verify Mermaid works in this environment.</p>
+
+  <div class="chart-container">
+    <h3>Chart 1: Simple Flow</h3>
+    <div class="mermaid">
+graph TD
+    A[Start] --> B[Process]
+    B --> C[Decision]
+    C -->|Yes| D[Action 1]
+    C -->|No| E[Action 2]
+    D --> F[End]
+    E --> F
+    </div>
+  </div>
+
+  <div class="chart-container">
+    <h3>Chart 2: Process Flow</h3>
+    <div class="mermaid">
+graph LR
+    A[Input] --> B[Validate]
+    B --> C[Process]
+    C --> D[Output]
+    </div>
+  </div>
+
+  <!-- Load Mermaid from CDN -->
+  <script src="https://unpkg.com/mermaid@10.9.0/dist/mermaid.min.js"></script>
+  <script>
+    console.log('🚀 Initializing Mermaid directly...');
+
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: 'default',
+      securityLevel: 'loose'
+    });
+
+    console.log('✅ Mermaid initialized and should render automatically');
+
+    // Check status after a delay
+    setTimeout(() => {
+      const svgs = document.querySelectorAll('.mermaid svg');
+      console.log(`📊 Found ${svgs.length} rendered SVG charts`);
+
+      if (svgs.length > 0) {
+        console.log('🎉 SUCCESS: Mermaid is working!');
+        document.body.style.borderTop = '5px solid green';
+      } else {
+        console.log('❌ FAILED: No SVG charts found');
+        document.body.style.borderTop = '5px solid red';
+      }
+    }, 2000);
+  </script>
+</body>
+</html>