zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(blog): update blog post layouts and remove index pages

Browse Source 
- Replace BlogLayout with new BlogPostLayout for better post styling
- Remove unused blog post index pages
- Add new blog post layout with enhanced typography and metadata
This commit is contained in:
joyzhao
2025-06-16 22:30:40 +08:00
parent 70b6a27021
commit d22174e0dc
12 changed files with 134 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/BlogLayout.astro
View File

@@ -40,11 +40,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
<!-- Main content with proper spacing for fixed header --> <!-- Main content with proper spacing for fixed header -->
<div class="pt-16"> <div class="pt-16">
<main class="container mx-auto px-4 py-8 max-w-4xl">
<article class="prose prose-lg dark:prose-invert prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground prose-code:text-foreground prose-pre:bg-muted prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground prose-a:text-primary hover:prose-a:text-primary/80 prose-li:text-muted-foreground">
<slot /> <slot />
</article>
</main>
</div> </div>
<!-- Footer --> <!-- Footer -->

125
src/layouts/BlogPostLayout.astro Normal file
View File

@@ -0,0 +1,125 @@
---
import { type Lang } from '@/i18n/utils';
import { defaultLang } from '@/i18n/ui';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';
import "../styles/global.css";
export interface Props {
title: string;
description?: string;
publishDate?: string;
author?: string;
}
const {
title,
description = 'Explore my latest thoughts on coding, tech trends, and developer life.',
publishDate,
author = 'Zhao Guiyang'
} = Astro.props;
const lang = Astro.currentLocale as Lang || defaultLang;
---
<!doctype html>
<html lang={lang}>
<head>
<meta charset="UTF-8" />
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="min-h-screen bg-background font-sans antialiased selection:bg-purple-500/20 selection:text-purple-500">
<div
class="fixed inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"
>
</div>
<!-- Glass Header with navigation -->
<GlassHeader lang={lang} client:load />
<!-- Main content with proper spacing for fixed header -->
<div class="pt-16">
<main class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Blog post header -->
<header class="mb-8 text-center">
<h1 class="text-4xl font-bold text-foreground mb-4">{title}</h1>
{publishDate && (
<div class="text-muted-foreground mb-2">
<time datetime={publishDate}>{new Date(publishDate).toLocaleDateString(lang === 'zh' ? 'zh-CN' : 'en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})}</time>
</div>
)}
{author && (
<div class="text-muted-foreground">
By {author}
</div>
)}
</header>
<!-- Blog post content with typography styles -->
<article class="prose prose-lg dark:prose-invert max-w-none prose-headings:text-foreground prose-p:text-muted-foreground prose-strong:text-foreground prose-code:text-foreground prose-pre:bg-muted prose-blockquote:border-l-primary prose-blockquote:text-muted-foreground prose-a:text-primary hover:prose-a:text-primary/80 prose-li:text-muted-foreground prose-img:rounded-lg prose-img:shadow-lg">
<slot />
</article>
</main>
</div>
<!-- Footer -->
<Footer lang={lang} client:load />
</body>
</html>
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
return localStorage.getItem("theme");
}
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};
const isDark = getThemePreference() === "dark";
document.documentElement.classList[isDark ? "add" : "remove"]("dark");
if (typeof localStorage !== "undefined") {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains("dark");
localStorage.setItem("theme", isDark ? "dark" : "light");
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"],
});
}
</script>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
scroll-behavior: smooth;
}
:root {
--transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
transition:
background-color var(--transition-standard),
color var(--transition-standard);
}
</style>

22
src/pages/blog/posts/index.astro
View File

@@ -1,22 +0,0 @@
---
import BlogLayout from '../../../layouts/BlogLayout.astro';
import type { Lang } from '../../../i18n/utils';
const lang = (Astro.currentLocale || 'en') as Lang;
---
<BlogLayout title="Blog Posts">
<div class="container mx-auto px-4 py-8">
<h1 class="text-4xl font-bold text-center mb-8">All Blog Posts</h1>
<p class="text-center text-muted-foreground mb-8">
Explore all our blog posts organized by categories and topics.
</p>
<!-- This page can be used for additional blog organization features -->
<div class="text-center">
<a href="/blog" class="text-primary hover:underline">
← Back to Blog Home
</a>
</div>
</div>
</BlogLayout>

2
src/pages/blog/posts/mastering-react-hooks.md
View File

@@ -6,7 +6,7 @@ date: "May 10, 2025"
readTime: "5 min read" readTime: "5 min read"
tags: ["React", "JavaScript", "Frontend"] tags: ["React", "JavaScript", "Frontend"]
slug: "mastering-react-hooks" slug: "mastering-react-hooks"
layout: "../../../layouts/BlogLayout.astro" layout: "../../../layouts/BlogPostLayout.astro"
--- ---
# Mastering React Hooks: A Deep Dive # Mastering React Hooks: A Deep Dive

2
src/pages/blog/posts/modern-ui-tailwind.md
View File

@@ -6,7 +6,7 @@ date: "April 15, 2025"
readTime: "6 min read" readTime: "6 min read"
tags: ["CSS", "Tailwind", "UI/UX"] tags: ["CSS", "Tailwind", "UI/UX"]
slug: "modern-ui-tailwind" slug: "modern-ui-tailwind"
layout: "../../../layouts/BlogLayout.astro" layout: "../../../layouts/BlogPostLayout.astro"
--- ---
# Building Modern UIs with Tailwind CSS # Building Modern UIs with Tailwind CSS

2
src/pages/blog/posts/scaling-nodejs-docker.md
View File

@@ -6,7 +6,7 @@ date: "April 25, 2025"
readTime: "7 min read" readTime: "7 min read"
tags: ["Node.js", "Docker", "DevOps"] tags: ["Node.js", "Docker", "DevOps"]
slug: "scaling-nodejs-docker" slug: "scaling-nodejs-docker"
layout: "../../../layouts/BlogLayout.astro" layout: "../../../layouts/BlogPostLayout.astro"
--- ---
# Scaling Node.js Apps with Docker # Scaling Node.js Apps with Docker

2
src/pages/blog/posts/typescript-best-practices.md
View File

@@ -6,7 +6,7 @@ date: "March 30, 2025"
readTime: "8 min read" readTime: "8 min read"
tags: ["TypeScript", "JavaScript", "Architecture"] tags: ["TypeScript", "JavaScript", "Architecture"]
slug: "typescript-best-practices" slug: "typescript-best-practices"
layout: "../../../layouts/BlogLayout.astro" layout: "../../../layouts/BlogPostLayout.astro"
--- ---
# TypeScript Best Practices for Large Projects # TypeScript Best Practices for Large Projects

22
src/pages/zh/blog/posts/index.astro
View File

@@ -1,22 +0,0 @@
---
import BlogLayout from '../../../../layouts/BlogLayout.astro';
import type { Lang } from '../../../../i18n/utils';
const lang = (Astro.currentLocale || 'zh') as Lang;
---
<BlogLayout title="博客文章">
<div class="container mx-auto px-4 py-8">
<h1 class="text-4xl font-bold text-center mb-8">所有博客文章</h1>
<p class="text-center text-muted-foreground mb-8">
浏览按分类和主题组织的所有博客文章。
</p>
<!-- 此页面可用于其他博客组织功能 -->
<div class="text-center">
<a href="/zh/blog" class="text-primary hover:underline">
← 返回博客首页
</a>
</div>
</div>
</BlogLayout>

2
src/pages/zh/blog/posts/mastering-react-hooks.md
View File

@@ -6,7 +6,7 @@ date: "2025年5月10日"
readTime: "5分钟阅读" readTime: "5分钟阅读"
tags: ["React", "JavaScript", "前端"] tags: ["React", "JavaScript", "前端"]
slug: "mastering-react-hooks" slug: "mastering-react-hooks"
layout: "../../../../layouts/BlogLayout.astro" layout: "../../../../layouts/BlogPostLayout.astro"
--- ---
# 精通 React Hooks：深入探索 # 精通 React Hooks：深入探索

2
src/pages/zh/blog/posts/modern-ui-tailwind.md
View File

@@ -6,7 +6,7 @@ date: "2025年4月20日"
readTime: "6分钟阅读" readTime: "6分钟阅读"
tags: ["CSS", "Tailwind", "UI/UX"] tags: ["CSS", "Tailwind", "UI/UX"]
slug: "modern-ui-tailwind" slug: "modern-ui-tailwind"
layout: "../../../../layouts/BlogLayout.astro" layout: "../../../../layouts/BlogPostLayout.astro"
--- ---
# 使用 Tailwind CSS 构建现代 UI # 使用 Tailwind CSS 构建现代 UI

2
src/pages/zh/blog/posts/scaling-nodejs-docker.md
View File

@@ -6,7 +6,7 @@ date: "2025年4月25日"
readTime: "7分钟阅读" readTime: "7分钟阅读"
tags: ["Node.js", "Docker", "DevOps"] tags: ["Node.js", "Docker", "DevOps"]
slug: "scaling-nodejs-docker" slug: "scaling-nodejs-docker"
layout: "../../../../layouts/BlogLayout.astro" layout: "../../../../layouts/BlogPostLayout.astro"
--- ---
# 使用 Docker 扩展 Node.js 应用 # 使用 Docker 扩展 Node.js 应用

2
src/pages/zh/blog/posts/typescript-best-practices.md
View File

@@ -6,7 +6,7 @@ date: "2025年4月15日"
readTime: "8分钟阅读" readTime: "8分钟阅读"
tags: ["TypeScript", "架构", "最佳实践"] tags: ["TypeScript", "架构", "最佳实践"]
slug: "typescript-best-practices" slug: "typescript-best-practices"
layout: "../../../../layouts/BlogLayout.astro" layout: "../../../../layouts/BlogPostLayout.astro"
--- ---
# TypeScript 在大型项目中的最佳实践 # TypeScript 在大型项目中的最佳实践