88 lines
3.4 KiB
Plaintext
88 lines
3.4 KiB
Plaintext
---
|
|
import BlogLayout from '../../layouts/BlogLayout.astro';
|
|
import BlogList from '../../components/blog/BlogList.astro';
|
|
import CategoryCard from '../../components/blog/CategoryCard.astro';
|
|
import TagCard from '../../components/blog/TagCard.astro';
|
|
import Container from '../../components/ui/Container';
|
|
import { type BlogPost } from '@/types';
|
|
import { useTranslations } from '@/i18n/utils';
|
|
import { type Lang } from '@/types/i18n';
|
|
import { defaultLang } from '@/i18n/ui';
|
|
import { sortPostsByDate } from '@/utils/blog-utils';
|
|
|
|
// Get current language environment using Astro.currentLocale
|
|
const lang = Astro.currentLocale as Lang || defaultLang;
|
|
const t = useTranslations(lang);
|
|
|
|
// Read all blog posts using import.meta.glob
|
|
const allPosts = await import.meta.glob('./posts/*.md', { eager: true });
|
|
|
|
// Process blog post data
|
|
const blogPosts: BlogPost[] = Object.values(allPosts).map((post: any) => {
|
|
const slug = post.url?.split('/').filter(Boolean).pop() || '';
|
|
|
|
// Default image if not specified in frontmatter
|
|
const defaultImage = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=250&fit=crop&crop=center";
|
|
|
|
return {
|
|
title: post.frontmatter.title,
|
|
description: post.frontmatter.description || '',
|
|
image: post.frontmatter.image || defaultImage,
|
|
slug: slug,
|
|
tags: post.frontmatter.tags || [],
|
|
tagId: post.frontmatter.tagId || [],
|
|
category: Array.isArray(post.frontmatter.category) ? post.frontmatter.category : post.frontmatter.category ? [post.frontmatter.category] : [],
|
|
categoryId: Array.isArray(post.frontmatter.categoryId) ? post.frontmatter.categoryId : post.frontmatter.categoryId ? [post.frontmatter.categoryId] : [],
|
|
date: post.frontmatter.date || post.frontmatter.pubDate || '',
|
|
readTime: post.frontmatter.readTime || post.frontmatter.readingTime || '5 min read',
|
|
};
|
|
});
|
|
|
|
// Sort posts by date
|
|
const sortedBlogPosts = sortPostsByDate(blogPosts);
|
|
|
|
---
|
|
|
|
<BlogLayout title="Blog - Joy Zhao" description="Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.">
|
|
<main class="min-h-screen">
|
|
<!-- Header Section -->
|
|
<Container client:load className="pt-24 pb-12">
|
|
<div class="text-center mb-16">
|
|
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
|
|
Our <span class="text-purple-500">Latest</span> Blog
|
|
</h1>
|
|
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
{t('blog.slogan')} Dive into my thoughts on coding, tech trends, and developer life. Explore my latest posts below.
|
|
</p>
|
|
</div>
|
|
</Container>
|
|
|
|
<!-- Main Content -->
|
|
<Container client:load className="pb-20">
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
<!-- 侧边栏 -->
|
|
<div class="lg:col-span-1 space-y-8">
|
|
<!-- 分类卡片 -->
|
|
<CategoryCard lang="en" />
|
|
|
|
<!-- 标签卡片 -->
|
|
<TagCard lang="en" />
|
|
</div>
|
|
|
|
<!-- Blog Posts -->
|
|
<div class="lg:col-span-3">
|
|
<BlogList posts={sortedBlogPosts} lang="en" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</BlogLayout>
|
|
|
|
<style>
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
</style> |