feat(i18n): implement comprehensive blog post enhancements
- Add avatar to personal info in data.ts - Remove redundant headings from blog posts - Reorder imports in utils.ts for consistency - Implement new blog layout components including: - PostMeta for displaying post metadata - TableOfContents for navigation - BlogNavigation for post pagination - ShareButtons for social sharing - AuthorCard for author information - Enhance BlogPostLayout with: - Improved typography and spacing - Responsive sidebar layout - Dark mode support - Better code block styling - Remove outdated i18n guide documentation - Add comprehensive styling for all new components
This commit is contained in:
joyzhao
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -9,8 +9,6 @@ slug: "mastering-react-hooks"
|
||||
layout: "../../../../layouts/BlogPostLayout.astro"
|
||||
---
|
||||
|
||||
# 精通 React Hooks：深入探索
|
||||
|
||||
|
||||
|
||||
React Hooks 彻底改变了我们编写 React 组件的方式，让我们能够在函数组件中使用状态和其他 React 特性。在这个全面的指南中，我们将探索最重要的 hooks 并学习如何有效地使用它们。
|
||||
|
||||
@@ -9,8 +9,6 @@ slug: "modern-ui-tailwind"
|
||||
layout: "../../../../layouts/BlogPostLayout.astro"
|
||||
---
|
||||
|
||||
# 使用 Tailwind CSS 构建现代 UI
|
||||
|
||||
|
||||
|
||||
Tailwind CSS 已经彻底改变了我们构建用户界面的方式。作为一个实用优先的 CSS 框架，它提供了低级实用类，让你可以直接在标记中构建完全自定义的设计。在本指南中，我们将探索如何使用 Tailwind CSS 创建现代、响应式的 UI 组件。
|
||||
|
||||
@@ -9,8 +9,6 @@ slug: "scaling-nodejs-docker"
|
||||
layout: "../../../../layouts/BlogPostLayout.astro"
|
||||
---
|
||||
|
||||
# 使用 Docker 扩展 Node.js 应用
|
||||
|
||||
|
||||
|
||||
Docker 彻底改变了我们部署和扩展应用程序的方式。当与 Node.js 结合使用时，它提供了一个强大的平台来构建可扩展、可维护的应用程序。在本指南中，我们将探索如何容器化 Node.js 应用程序并有效地扩展它们。
|
||||
|
||||
@@ -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 组件
|
||||
|
||||
Reference in New Issue
Block a user