{title}
- {publishDate && ( -
-
-
- )}
- {author && (
-
- By {author}
-
- )}
- {t('nav.home')}
-Welcome to the English version of the site!
-{t('footer.rights')}
-{t('nav.home')}
-欢迎来到本站的中文版本！
-{t('footer.rights')}
-{t('nav.home')}
-Welcome to the English version of the site!
- - -
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/ShareButtons.tsx b/src/components/ShareButtons.tsx
new file mode 100644
index 0000000..56ba202
--- /dev/null
+++ b/src/components/ShareButtons.tsx
@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import type { Lang } from '../i18n/utils';
+
+interface ShareButtonsProps {
+ lang: Lang;
+ title: string;
+ url?: string;
+}
+
+export default function ShareButtons({ lang, title, url }: ShareButtonsProps) {
+ const [copied, setCopied] = useState(false);
+ const shareUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
+ const shareText = lang === 'zh' ? '分享这篇文章' : 'Share this article';
+ const copyText = lang === 'zh' ? '复制链接' : 'Copy link';
+ const copiedText = lang === 'zh' ? '已复制!' : 'Copied!';
+
+ const handleCopyLink = async () => {
+ try {
+ await navigator.clipboard.writeText(shareUrl);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy link:', err);
+ }
+ };
+
+ const shareLinks = [
+ {
+ name: 'Twitter',
+ url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(shareUrl)}`,
+ icon: (
+
+ ),
+ color: 'hover:bg-blue-500/10 hover:text-blue-500'
+ },
+ {
+ name: 'LinkedIn',
+ url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`,
+ icon: (
+
+ ),
+ color: 'hover:bg-blue-600/10 hover:text-blue-600'
+ },
+ {
+ name: 'Facebook',
+ url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`,
+ icon: (
+
+ ),
+ color: 'hover:bg-blue-700/10 hover:text-blue-700'
+ }
+ ];
+
+ return (
+
+ {/* Avatar */}
+
+
+
+
+ {/* Author Info */}
+
+
+ {authorInfo.avatar ? (
+ 
+ ) : (
+ authorInfo.name.charAt(0).toUpperCase()
+ )}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/blog/PostMeta.astro b/src/components/blog/PostMeta.astro
new file mode 100644
index 0000000..61c18cb
--- /dev/null
+++ b/src/components/blog/PostMeta.astro
@@ -0,0 +1,142 @@
+---
+import { type Lang } from '@/i18n/utils';
+import { useTranslations } from '@/i18n/utils';
+
+export interface Props {
+ lang: Lang;
+ publishDate?: string;
+ readingTime?: number;
+ tags?: string[];
+ category?: string | string[];
+ className?: string;
+}
+
+const {
+ lang,
+ publishDate,
+ readingTime,
+ tags,
+ category,
+ className = ''
+} = Astro.props;
+
+const t = useTranslations(lang);
+
+/**
+ * Format date according to locale
+ */
+const formatDate = (dateString: string) => {
+ const date = new Date(dateString);
+ return date.toLocaleDateString(lang === 'zh' ? 'zh-CN' : 'en-US', {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric'
+ });
+};
+
+/**
+ * Get reading time text based on language
+ */
+const getReadingTimeText = (minutes: number) => {
+ if (lang === 'zh') {
+ return `${minutes} 分钟阅读`;
+ }
+ return `${minutes} min read`;
+};
+---
+
++ + {shareText} +
+ +
+ {/* Social Share Buttons */}
+ {shareLinks.map((link) => (
+
+ {link.icon}
+
+ ))}
+
+ {/* Copy Link Button */}
+
+
+
+ {/* Copy Success Message */}
+ {copied && (
+
+
+ {copiedText}
+
+ )}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/layout/BlogNavigation.astro b/src/components/layout/BlogNavigation.astro
new file mode 100644
index 0000000..3546d42
--- /dev/null
+++ b/src/components/layout/BlogNavigation.astro
@@ -0,0 +1,124 @@
+---
+const currentPath = Astro.url.pathname;
+const isZh = currentPath.includes('/zh/');
+const lang = isZh ? 'zh' : 'en';
+const currentSlug = currentPath.split('/').filter(Boolean).pop();
+
+const enPosts = await Astro.glob('../../pages/blog/posts/*.md');
+const zhPosts = await Astro.glob('../../pages/zh/blog/posts/*.md');
+const allPosts = isZh ? zhPosts : enPosts;
+
+
+interface BlogPost {
+ title: string;
+ slug: string;
+ url: string;
+ frontmatter: {
+ title: string;
+ description?: string;
+ pubDate?: string;
+ date?: string;
+ readTime?: string;
+ tags?: string[];
+ category?: string;
+ };
+}
+
+const posts: BlogPost[] = allPosts.map((post) => {
+ const slug = post.url?.split('/').filter(Boolean).pop() || '';
+ return {
+ title: post.frontmatter.title,
+ slug: slug,
+ url: post.url || '',
+ frontmatter: {
+ title: post.frontmatter.title,
+ description: post.frontmatter.description,
+ pubDate: post.frontmatter.pubDate,
+ date: post.frontmatter.date || post.frontmatter.pubDate,
+ readTime: post.frontmatter.readTime,
+ tags: post.frontmatter.tags,
+ category: post.frontmatter.category
+ }
+ };
+});
+
+
+const sortedPosts = posts
+ .filter(post => post.frontmatter.date || post.frontmatter.pubDate)
+ .sort((a, b) => {
+ const dateA = new Date(a.frontmatter.date || a.frontmatter.pubDate || '').getTime();
+ const dateB = new Date(b.frontmatter.date || b.frontmatter.pubDate || '').getTime();
+ return dateB - dateA;
+ });
+
+
+const currentIndex = sortedPosts.findIndex((post) => post.slug === currentSlug);
+
+const nextPost = currentIndex > 0 ? sortedPosts[currentIndex - 1] : null;
+const prevPost = currentIndex < sortedPosts.length - 1 ? sortedPosts[currentIndex + 1] : null;
+
+const prevText = lang === 'zh' ? '上一篇' : 'Previous Post';
+const nextText = lang === 'zh' ? '下一篇' : 'Next Post';
+---
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/layout/TableOfContents.astro b/src/components/layout/TableOfContents.astro
new file mode 100644
index 0000000..58a7442
--- /dev/null
+++ b/src/components/layout/TableOfContents.astro
@@ -0,0 +1,141 @@
+---
+import type { Lang } from '../../i18n/utils';
+
+interface Props {
+ lang: Lang;
+}
+
+const { lang } = Astro.props;
+const title = lang === 'zh' ? '目录' : 'Table of Contents';
+---
+
+
+
+ {publishDate && (
+
+
+
+ {(category || (tags && tags.length > 0)) && (
+
+
+
+
+ )}
+
+
+ {readingTime && (
+
+
+ {getReadingTimeText(readingTime)}
+
+ )}
+
+
+
+ {category && (
+
+ )}
+
+
+
+ )}
+
+
+ {tags && tags.length > 0 && (
+
+ 分类
+
+
+ {Array.isArray(category) ? (
+ category.map((cat) => (
+
+ {cat}
+
+ ))
+ ) : (
+
+ {category}
+
+ )}
+
+
+
+ )}
+
+
+ 标签
+
+
+ {tags.map((tag) => (
+
+ # {tag}
+
+ ))}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index dda3ffd..589c1a5 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -31,9 +31,12 @@ const lang = Astro.currentLocale as Lang || defaultLang;
/>
-
+
+ ;
+
+// Access frontmatter data correctly for markdown layouts
+const { frontmatter } = Astro.props;
const {
title,
- description = 'Explore my latest thoughts on coding, tech trends, and developer life.',
+ description,
publishDate,
- author = 'Zhao Guiyang'
-} = Astro.props;
+ date,
+ tags,
+ category,
+ readTime,
+} = frontmatter;
+
const lang = Astro.currentLocale as Lang || defaultLang;
+
+// Handle different field names for backward compatibility
+const finalPublishDate = publishDate || date;
+const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : undefined;
---
@@ -45,33 +70,63 @@ const lang = Astro.currentLocale as Lang || defaultLang;
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
@@ -122,4 +177,147 @@ const lang = Astro.currentLocale as Lang || defaultLang;
background-color var(--transition-standard),
color var(--transition-standard);
}
+
+ /* Enhanced prose styles for better readability */
+ .prose {
+ line-height: 1.75;
+ font-size: 1rem;
+ }
+
+ @media (min-width: 640px) {
+ .prose {
+ font-size: 1.125rem;
+ }
+ }
+
+ .prose h1,
+ .prose h2,
+ .prose h3,
+ .prose h4 {
+ scroll-margin-top: 6rem;
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+ }
+
+ /* Hide the first H1 in markdown content to avoid duplicate titles */
+ .prose h1:first-of-type {
+ display: none;
+ }
+
+ .prose h1 {
+ font-size: 1.5rem;
+ line-height: 1.2;
+ }
+
+ @media (min-width: 640px) {
+ .prose h1 {
+ font-size: 1.875rem;
+ }
+ }
+
+ .prose h2 {
+ font-size: 1.25rem;
+ line-height: 1.3;
+ }
+
+ @media (min-width: 640px) {
+ .prose h2 {
+ font-size: 1.5rem;
+ }
+ }
+
+ .prose h3 {
+ font-size: 1.125rem;
+ line-height: 1.4;
+ }
+
+ @media (min-width: 640px) {
+ .prose h3 {
+ font-size: 1.25rem;
+ }
+ }
+
+ .prose h4 {
+ font-size: 1rem;
+ line-height: 1.5;
+ }
+
+ @media (min-width: 640px) {
+ .prose h4 {
+ font-size: 1.125rem;
+ }
+ }
+
+ .prose p {
+ margin-bottom: 1.5rem;
+ line-height: 1.75;
+ }
+
+ .prose li {
+ margin-bottom: 0.5rem;
+ line-height: 1.75;
+ }
+
+ .prose img {
+ margin: 2rem auto;
+ border-radius: 0.75rem;
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+ }
+
+ .prose pre {
+ border-radius: 0.75rem;
+ border: 1px solid hsl(var(--border));
+ font-size: 0.875rem;
+ line-height: 1.5;
+ }
+
+ .prose code {
+ font-size: 0.875rem;
+ padding: 0.125rem 0.25rem;
+ border-radius: 0.25rem;
+ }
+
+ .prose blockquote {
+ border-left: 4px solid hsl(var(--primary));
+ background: hsl(var(--muted) / 0.3);
+ border-radius: 0 0.5rem 0.5rem 0;
+ padding: 1rem 1.5rem;
+ margin: 1.5rem 0;
+ font-size: 1rem;
+ }
+
+ @media (min-width: 640px) {
+ .prose blockquote {
+ font-size: 1.125rem;
+ }
+ }
+
+ /* Responsive sidebar */
+ @media (max-width: 1023px) {
+ aside {
+ order: -1;
+ margin-bottom: 2rem;
+ }
+
+ .sticky {
+ position: static !important;
+ }
+ }
+
+ /* Line clamp utilities */
+ .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;
+ }
\ No newline at end of file
diff --git a/src/lib/data.ts b/src/lib/data.ts
index 64d9448..ee75d69 100644
--- a/src/lib/data.ts
+++ b/src/lib/data.ts
@@ -1,6 +1,7 @@
export const personalInfo = {
name: "Joy Zhao",
location: "Shanghai, China",
+ avatar:"https://avatars.githubusercontent.com/u/24975063?v=4",
email: "zhaoguiyang18@gmail.com",
github: "https://github.com/zguiyang",
linkedin: "https://linkedin.com/in/zhaoguiyang"
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index bd0c391..d084cca 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx"
+import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
diff --git a/src/pages/blog/posts/mastering-react-hooks.md b/src/pages/blog/posts/mastering-react-hooks.md
index e3fe599..0e95ce0 100644
--- a/src/pages/blog/posts/mastering-react-hooks.md
+++ b/src/pages/blog/posts/mastering-react-hooks.md
@@ -5,12 +5,11 @@ image: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=400&h=250
date: "May 10, 2025"
readTime: "5 min read"
tags: ["React", "JavaScript", "Frontend"]
+category: ["React", "Frontend"]
slug: "mastering-react-hooks"
layout: "../../../layouts/BlogPostLayout.astro"
---
-# Mastering React Hooks: A Deep Dive
-
React Hooks have revolutionized the way we write React components, allowing us to use state and other React features in functional components. In this comprehensive guide, we'll explore the most important hooks and learn how to use them effectively.
diff --git a/src/pages/blog/posts/modern-ui-tailwind.md b/src/pages/blog/posts/modern-ui-tailwind.md
index cd5d13e..e78cc13 100644
--- a/src/pages/blog/posts/modern-ui-tailwind.md
+++ b/src/pages/blog/posts/modern-ui-tailwind.md
@@ -9,8 +9,6 @@ slug: "modern-ui-tailwind"
layout: "../../../layouts/BlogPostLayout.astro"
---
-# Building Modern UIs with Tailwind CSS
-
Tailwind CSS has revolutionized the way developers approach styling web applications. By providing a comprehensive set of utility classes, it enables rapid development of beautiful, responsive user interfaces without writing custom CSS. Let's explore how to leverage Tailwind CSS to build modern UIs.
diff --git a/src/pages/blog/posts/scaling-nodejs-docker.md b/src/pages/blog/posts/scaling-nodejs-docker.md
index 5718ef0..dbd5054 100644
--- a/src/pages/blog/posts/scaling-nodejs-docker.md
+++ b/src/pages/blog/posts/scaling-nodejs-docker.md
@@ -9,8 +9,6 @@ slug: "scaling-nodejs-docker"
layout: "../../../layouts/BlogPostLayout.astro"
---
-# Scaling Node.js Apps with Docker
-
Docker has revolutionized how we deploy and scale applications. When combined with Node.js, it provides a powerful platform for building scalable, maintainable applications. In this guide, we'll explore how to containerize Node.js applications and scale them effectively.
diff --git a/src/pages/blog/posts/typescript-best-practices.md b/src/pages/blog/posts/typescript-best-practices.md
index 96ba8d1..440c370 100644
--- a/src/pages/blog/posts/typescript-best-practices.md
+++ b/src/pages/blog/posts/typescript-best-practices.md
@@ -9,8 +9,6 @@ slug: "typescript-best-practices"
layout: "../../../layouts/BlogPostLayout.astro"
---
-# TypeScript Best Practices for Large Projects
-
TypeScript has become the de facto standard for building large-scale JavaScript applications. Its static type system helps catch errors early, improves code maintainability, and enhances developer productivity. In this comprehensive guide, we'll explore essential TypeScript best practices for enterprise-level projects.
@@ -88,7 +86,7 @@ Start with a robust `tsconfig.json`:
Organize your project for scalability:
-```
+```markdown
src/
├── components/ # Reusable UI components
│ ├── common/ # Shared components
diff --git a/src/pages/zh/blog/posts/mastering-react-hooks.md b/src/pages/zh/blog/posts/mastering-react-hooks.md
index e3552d4..7178220 100644
--- a/src/pages/zh/blog/posts/mastering-react-hooks.md
+++ b/src/pages/zh/blog/posts/mastering-react-hooks.md
@@ -9,8 +9,6 @@ slug: "mastering-react-hooks"
layout: "../../../../layouts/BlogPostLayout.astro"
---
-# 精通 React Hooks：深入探索
-
React Hooks 彻底改变了我们编写 React 组件的方式，让我们能够在函数组件中使用状态和其他 React 特性。在这个全面的指南中，我们将探索最重要的 hooks 并学习如何有效地使用它们。
diff --git a/src/pages/zh/blog/posts/modern-ui-tailwind.md b/src/pages/zh/blog/posts/modern-ui-tailwind.md
index 789885a..e04d1c3 100644
--- a/src/pages/zh/blog/posts/modern-ui-tailwind.md
+++ b/src/pages/zh/blog/posts/modern-ui-tailwind.md
@@ -9,8 +9,6 @@ slug: "modern-ui-tailwind"
layout: "../../../../layouts/BlogPostLayout.astro"
---
-# 使用 Tailwind CSS 构建现代 UI
-
Tailwind CSS 已经彻底改变了我们构建用户界面的方式。作为一个实用优先的 CSS 框架，它提供了低级实用类，让你可以直接在标记中构建完全自定义的设计。在本指南中，我们将探索如何使用 Tailwind CSS 创建现代、响应式的 UI 组件。
diff --git a/src/pages/zh/blog/posts/scaling-nodejs-docker.md b/src/pages/zh/blog/posts/scaling-nodejs-docker.md
index 45db7f8..5a32afc 100644
--- a/src/pages/zh/blog/posts/scaling-nodejs-docker.md
+++ b/src/pages/zh/blog/posts/scaling-nodejs-docker.md
@@ -9,8 +9,6 @@ slug: "scaling-nodejs-docker"
layout: "../../../../layouts/BlogPostLayout.astro"
---
-# 使用 Docker 扩展 Node.js 应用
-
Docker 彻底改变了我们部署和扩展应用程序的方式。当与 Node.js 结合使用时，它提供了一个强大的平台来构建可扩展、可维护的应用程序。在本指南中，我们将探索如何容器化 Node.js 应用程序并有效地扩展它们。
diff --git a/src/pages/zh/blog/posts/typescript-best-practices.md b/src/pages/zh/blog/posts/typescript-best-practices.md
index b893244..8f2c713 100644
--- a/src/pages/zh/blog/posts/typescript-best-practices.md
+++ b/src/pages/zh/blog/posts/typescript-best-practices.md
@@ -9,8 +9,6 @@ slug: "typescript-best-practices"
layout: "../../../../layouts/BlogPostLayout.astro"
---
-# TypeScript 在大型项目中的最佳实践
-
TypeScript 已经成为现代 JavaScript 开发的标准选择，特别是在大型项目中。它提供了静态类型检查、更好的 IDE 支持和增强的代码可维护性。在本指南中，我们将探索在企业级应用中使用 TypeScript 的最佳实践。
@@ -29,7 +27,7 @@ TypeScript 为大型项目带来了显著优势：
### 1. 推荐的项目结构
-```
+```markdown
src/
├── components/ # 可重用组件
│ ├── ui/ # 基础 UI 组件
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {title} +
+ + {description && ( ++ {description} +
+ )} + +
+
+