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.
61 lines
2.0 KiB
Plaintext
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> |