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

- 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
2025-06-16 22:30:40 +08:00
parent 70b6a27021
commit d22174e0dc
12 changed files with 134 additions and 57 deletions
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -40,11 +40,7 @@ const lang = Astro.currentLocale as Lang || defaultLang;
    
    <!-- Main content with proper spacing for fixed header -->
    <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 />
-        </article>
-      </main>
    </div>
    
    <!-- Footer -->
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -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>
--- a/src/pages/blog/posts/index.astro
+++ b/src/pages/blog/posts/index.astro
@@ -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>
--- a/src/pages/blog/posts/mastering-react-hooks.md
+++ b/src/pages/blog/posts/mastering-react-hooks.md
@@ -6,7 +6,7 @@ date: "May 10, 2025"
 readTime: "5 min read"
 tags: ["React", "JavaScript", "Frontend"]
 slug: "mastering-react-hooks"
-layout: "../../../layouts/BlogLayout.astro"
+layout: "../../../layouts/BlogPostLayout.astro"
 ---

 # Mastering React Hooks: A Deep Dive
--- a/src/pages/blog/posts/modern-ui-tailwind.md
+++ b/src/pages/blog/posts/modern-ui-tailwind.md
@@ -6,7 +6,7 @@ date: "April 15, 2025"
 readTime: "6 min read"
 tags: ["CSS", "Tailwind", "UI/UX"]
 slug: "modern-ui-tailwind"
-layout: "../../../layouts/BlogLayout.astro"
+layout: "../../../layouts/BlogPostLayout.astro"
 ---

 # Building Modern UIs with Tailwind CSS
--- a/src/pages/blog/posts/scaling-nodejs-docker.md
+++ b/src/pages/blog/posts/scaling-nodejs-docker.md
@@ -6,7 +6,7 @@ date: "April 25, 2025"
 readTime: "7 min read"
 tags: ["Node.js", "Docker", "DevOps"]
 slug: "scaling-nodejs-docker"
-layout: "../../../layouts/BlogLayout.astro"
+layout: "../../../layouts/BlogPostLayout.astro"
 ---

 # Scaling Node.js Apps with Docker
--- a/src/pages/blog/posts/typescript-best-practices.md
+++ b/src/pages/blog/posts/typescript-best-practices.md
@@ -6,7 +6,7 @@ date: "March 30, 2025"
 readTime: "8 min read"
 tags: ["TypeScript", "JavaScript", "Architecture"]
 slug: "typescript-best-practices"
-layout: "../../../layouts/BlogLayout.astro"
+layout: "../../../layouts/BlogPostLayout.astro"
 ---

 # TypeScript Best Practices for Large Projects
--- a/src/pages/zh/blog/posts/index.astro
+++ b/src/pages/zh/blog/posts/index.astro
@@ -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>
--- a/src/pages/zh/blog/posts/mastering-react-hooks.md
+++ b/src/pages/zh/blog/posts/mastering-react-hooks.md
@@ -6,7 +6,7 @@ date: "2025年5月10日"
 readTime: "5分钟阅读"
 tags: ["React", "JavaScript", "前端"]
 slug: "mastering-react-hooks"
-layout: "../../../../layouts/BlogLayout.astro"
+layout: "../../../../layouts/BlogPostLayout.astro"
 ---

 # 精通 React Hooks：深入探索
--- a/src/pages/zh/blog/posts/modern-ui-tailwind.md
+++ b/src/pages/zh/blog/posts/modern-ui-tailwind.md
@@ -6,7 +6,7 @@ date: "2025年4月20日"
 readTime: "6分钟阅读"
 tags: ["CSS", "Tailwind", "UI/UX"]
 slug: "modern-ui-tailwind"
-layout: "../../../../layouts/BlogLayout.astro"
+layout: "../../../../layouts/BlogPostLayout.astro"
 ---

 # 使用 Tailwind CSS 构建现代 UI
--- a/src/pages/zh/blog/posts/scaling-nodejs-docker.md
+++ b/src/pages/zh/blog/posts/scaling-nodejs-docker.md
@@ -6,7 +6,7 @@ date: "2025年4月25日"
 readTime: "7分钟阅读"
 tags: ["Node.js", "Docker", "DevOps"]
 slug: "scaling-nodejs-docker"
-layout: "../../../../layouts/BlogLayout.astro"
+layout: "../../../../layouts/BlogPostLayout.astro"
 ---

 # 使用 Docker 扩展 Node.js 应用
--- a/src/pages/zh/blog/posts/typescript-best-practices.md
+++ b/src/pages/zh/blog/posts/typescript-best-practices.md
@@ -6,7 +6,7 @@ date: "2025年4月15日"
 readTime: "8分钟阅读"
 tags: ["TypeScript", "架构", "最佳实践"]
 slug: "typescript-best-practices"
-layout: "../../../../layouts/BlogLayout.astro"
+layout: "../../../../layouts/BlogPostLayout.astro"
 ---

 # TypeScript 在大型项目中的最佳实践