Files
zhaoguiyang.site/src/components/blog/CategoryCard.astro
joyzhao 7951121c7f refactor(blog): extract blog utilities into shared module
Move common blog functionality like post filtering, sorting and data extraction into a centralized utils module.
Replace Astro.glob with import.meta.glob for better performance.
Update all blog components and pages to use the new utilities.
2025-06-19 16:28:59 +08:00

61 lines
2.0 KiB
Plaintext

---
import { type Lang } from '@/i18n/utils';
import { defaultLang } from '@/i18n/ui';
import { getBlogBaseUrl, extractCategories } from '@/utils/blog-utils';
// Define component props
interface Props {
lang?: Lang;
currentCategory?: string;
}
// Get component props
const { lang = defaultLang, currentCategory = '' } = Astro.props;
// Determine base URL path
const baseUrl = getBlogBaseUrl(lang);
// Read all blog posts - choose different static paths based on language
const postsGlob = {
en: await import.meta.glob('/src/pages/blog/posts/*.md', { eager: true }),
zh: await import.meta.glob('/src/pages/zh/blog/posts/*.md', { eager: true })
};
// Get posts for current language
const allPosts = lang === 'zh' ? Object.values(postsGlob.zh) : Object.values(postsGlob.en);
// Extract categories from posts
const categoryMap = extractCategories(allPosts);
// Convert to array and sort
const categories = Array.from(categoryMap.keys()).sort();
// Multilingual titles
const titles = {
en: 'Categories',
zh: '分类'
};
// Get title for current language
const title = titles[lang] || titles[defaultLang];
---
<div class="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border">
<h3 class="text-xl font-semibold text-card-foreground mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14-7l2 2-2 2m2-2H9m10 0V9M5 19l2-2-2-2m2 2H3m2 0v2"></path>
</svg>
{title}
</h3>
<div class="space-y-2">
{categories.map((cat) => {
const categoryId = categoryMap.get(cat) || cat.toLowerCase();
return (
<a href={`${baseUrl}/categories/${encodeURIComponent(categoryId)}`}
class={`block transition-colors duration-200 ${categoryId === currentCategory.toLowerCase() ? 'text-purple-500 font-medium' : 'text-muted-foreground hover:text-purple-500'}`}>
{cat}
</a>
);
})}
</div>
</div>