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>
+      <slot />
    </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>