From 8cecab8479b8ca8f7ac9ec6a5d42e2ffc618c548 Mon Sep 17 00:00:00 2001
From: joyzhao <zhaoguiyang18@gmail.com>
Date: Thu, 19 Jun 2025 11:52:05 +0800
Subject: [PATCH] refactor(layout): improve blog post layout and component
 styling

- Move AuthorCard to bottom of main content with enhanced styling
- Adjust TableOfContents styling and positioning
- Simplify AuthorCard and GlassHeader components
---
 src/components/AuthorCard.tsx               |  2 +-
 src/components/layout/TableOfContents.astro |  4 ++--
 src/layouts/BlogPostLayout.astro            | 21 +++++++++++++--------
 src/pages/projects.astro                    |  2 +-
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/AuthorCard.tsx b/src/components/AuthorCard.tsx
index 1b751db..01f32fc 100644
--- a/src/components/AuthorCard.tsx
+++ b/src/components/AuthorCard.tsx
@@ -20,7 +20,7 @@ export default function AuthorCard({ lang, author }: AuthorCardProps) {
   const websiteText = lang === 'zh' ? '个人网站' : 'Website';
 
   return (
-    <div className="bg-card/50 backdrop-blur-sm rounded-2xl border border-border p-6 relative">
+    <div className="relative">
       <div className="flex flex-col items-center text-center">
         {/* Avatar */}
         <div className="flex-shrink-0 mb-4">
diff --git a/src/components/layout/TableOfContents.astro b/src/components/layout/TableOfContents.astro
index d488220..8df7521 100644
--- a/src/components/layout/TableOfContents.astro
+++ b/src/components/layout/TableOfContents.astro
@@ -9,8 +9,8 @@ const { lang } = Astro.props;
 const title = lang === 'zh' ? '目录' : 'Table of Contents';
 ---
 
-<div class="max-xl:hidden">
-  <div id="nav-content" class="sticky w-72 top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden">
+<div>
+  <div id="nav-content" class="sticky xl:w-72 w-full top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden">
     <div class="flex flex-col gap-3 p-4">
       <h3 class="dark:text-zinc-400 text-blacktext/90 font-bold tracking-wide text-sm sm:text-base uppercase flex items-center mb-4">
         <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/src/layouts/BlogPostLayout.astro b/src/layouts/BlogPostLayout.astro
index 479405a..5d123dd 100644
--- a/src/layouts/BlogPostLayout.astro
+++ b/src/layouts/BlogPostLayout.astro
@@ -67,6 +67,7 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
           <div class="grid grid-cols-1 xl:grid-cols-4 gap-6 lg:gap-8">
             <!-- Main Content -->
             <main class="xl:col-span-3 order-2 xl:order-1">
+            
               <!-- Blog post header -->
               <header class="mb-10">
                 <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-6 leading-tight tracking-tight">
@@ -98,18 +99,22 @@ const finalReadingTime = readTime ? parseInt(readTime.replace(/\D/g, '')) : unde
               <div class="mt-8 sm:mt-12">
                 <BlogNavigation />
               </div>
+              
+              <!-- Author Card moved to bottom with enhanced styling -->
+              <div class="mt-10 sm:mt-16 border-t border-border pt-10">
+                <div class="bg-card/30 backdrop-blur-sm rounded-2xl border border-border p-6 shadow-sm hover:shadow-md transition-all duration-300">
+                  <AuthorCard lang={lang} />
+                </div>
+              </div>
             </main>
             
-            <!-- Sidebar -->
-            <aside class="xl:col-span-1 order-1 xl:order-2">
-              <div class="xl:sticky xl:top-24 space-y-6 sm:space-y-8 xl:space-y-12 xl:max-h-[calc(100vh-6rem)] xl:overflow-y-auto">
-                <!-- Table of Contents -->
-                <div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border h-auto xl:h-[400px] lg:h-[500px] overflow-y-auto">
+            <!-- Sidebar with Table of Contents -->
+            <aside class="xl:col-span-1 order-1 xl:order-2 md:mb-0 mb-6">
+              <div class="xl:sticky xl:top-24">
+                <!-- Table of Contents with dynamic max height -->
+                <div class="bg-card/50 backdrop-blur-sm rounded-2xl border border-border overflow-y-auto" style="max-height: min(calc(100vh - 6rem), 600px);">
                   <TableOfContents lang={lang} />
                 </div>
-                
-                <!-- Author Card -->
-                <AuthorCard lang={lang} />
               </div>
             </aside>
           </div>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index acdf9c2..f30b5ce 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -16,7 +16,7 @@ const currentProjects = projects[lang as keyof typeof projects] || projects.en;
 ---
 
 <Layout title={pageTitle}>
-  <GlassHeader client:only="react" />
+  <GlassHeader lang={lang} client:only="react" />
   <main class="min-h-screen">
     <!-- Projects Hero Section -->
     <section class="py-24 relative overflow-hidden">