From a249a120a57fdf8512373c9dd9afbad6b6e8b2a4 Mon Sep 17 00:00:00 2001
From: Gbanyan <gbanyan.huang@gmail.com>
Date: Wed, 19 Nov 2025 17:38:45 +0800
Subject: [PATCH] Stage all layout updates

---
 app/blog/[slug]/page.tsx      |  45 +++++++--------
 app/blog/page.tsx             |  21 ++++---
 app/layout.tsx                |   9 ++-
 app/page.tsx                  |  53 +++++++++---------
 app/pages/[slug]/page.tsx     | 102 +++++++++++++++++++---------------
 app/tags/[tag]/page.tsx       |  30 ++++++++--
 app/tags/page.tsx             |  91 +++++++++++++++---------------
 app/template.tsx              |  15 +++++
 components/layout-shell.tsx   |   7 +--
 components/post-layout.tsx    |  75 +++++++++++++++++++++++++
 components/post-list-item.tsx |   2 +-
 components/sidebar-layout.tsx |  10 ++++
 package-lock.json             |  61 +++++++++++++++++++-
 styles/globals.css            |  87 ++++++++++++++++++-----------
 tailwind.config.js            |  10 +++-
 15 files changed, 424 insertions(+), 194 deletions(-)
 create mode 100644 app/template.tsx
 create mode 100644 components/post-layout.tsx
 create mode 100644 components/sidebar-layout.tsx

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 6f1a76f..c7821ee 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -6,8 +6,8 @@ import { allPosts } from 'contentlayer/generated';
 import { getPostBySlug, getRelatedPosts, getPostNeighbors } from '@/lib/posts';
 import { siteConfig } from '@/lib/config';
 import { ReadingProgress } from '@/components/reading-progress';
-import { PostToc } from '@/components/post-toc';
 import { ScrollReveal } from '@/components/scroll-reveal';
+import { PostLayout } from '@/components/post-layout';
 import { PostCard } from '@/components/post-card';
 import { PostStorylineNav } from '@/components/post-storyline-nav';
 import { SectionDivider } from '@/components/section-divider';
@@ -43,17 +43,16 @@ export default function BlogPostPage({ params }: Props) {
   const relatedPosts = getRelatedPosts(post, 3);
   const neighbors = getPostNeighbors(post);
 
+  const hasToc = /<h[23]/.test(post.body.html);
+
   return (
     <>
       <ReadingProgress />
-      <div className="flex gap-6 pt-4">
-        <aside className="hidden shrink-0 lg:block lg:w-44">
-          <PostToc />
-        </aside>
-        <div className="flex-1 space-y-6">
+      <PostLayout hasToc={hasToc}>
+        <div className="space-y-8">
           <SectionDivider>
             <ScrollReveal>
-              <header className="mb-2 space-y-2">
+              <header className="mb-6 space-y-4 text-center">
                 {post.published_at && (
                   <p className="type-small text-slate-500 dark:text-slate-500">
                     {new Date(post.published_at).toLocaleDateString(
@@ -65,14 +64,14 @@ export default function BlogPostPage({ params }: Props) {
                   {post.title}
                 </h1>
                 {post.tags && (
-                  <div className="flex flex-wrap gap-2 pt-1">
+                  <div className="flex flex-wrap justify-center gap-2 pt-2">
                     {post.tags.map((t) => (
                       <Link
                         key={t}
                         href={`/tags/${encodeURIComponent(
                           t.toLowerCase().replace(/\s+/g, '-')
                         )}`}
-                        className="tag-chip rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight dark:bg-slate-800 dark:text-slate-100"
+                        className="tag-chip rounded-full bg-accent-soft px-3 py-1 text-sm text-accent-textLight dark:bg-slate-800 dark:text-slate-100"
                       >
                         #{t}
                       </Link>
@@ -85,16 +84,18 @@ export default function BlogPostPage({ params }: Props) {
 
           <SectionDivider>
             <ScrollReveal>
-              <article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
-              {post.feature_image && (
-                <Image
-                  src={post.feature_image.replace('../assets', '/assets')}
-                  alt={post.title}
-                  width={1200}
-                  height={600}
-                  className="my-4 rounded"
-                />
-              )}
+              <article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
+                {post.feature_image && (
+                  <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
+                    <Image
+                      src={post.feature_image.replace('../assets', '/assets')}
+                      alt={post.title}
+                      width={1200}
+                      height={600}
+                      className="w-full rounded-xl shadow-lg"
+                    />
+                  </div>
+                )}
                 <div dangerouslySetInnerHTML={{ __html: post.body.html }} />
               </article>
             </ScrollReveal>
@@ -115,7 +116,7 @@ export default function BlogPostPage({ params }: Props) {
           {relatedPosts.length > 0 && (
             <SectionDivider>
               <ScrollReveal>
-                <section className="space-y-4 rounded-xl border border-slate-200 bg-white/80 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/50">
+                <section className="space-y-6 rounded-2xl border border-slate-200/60 bg-slate-50/50 p-8 dark:border-slate-800 dark:bg-slate-900/30">
                   <div className="flex items-center justify-between gap-2">
                     <h2 className="type-subtitle font-semibold text-slate-900 dark:text-slate-50">
                       相關文章
@@ -124,7 +125,7 @@ export default function BlogPostPage({ params }: Props) {
                       為你挑選相似主題
                     </p>
                   </div>
-                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                     {relatedPosts.map((related) => (
                       <PostCard key={related._id} post={related} showTags={false} />
                     ))}
@@ -134,7 +135,7 @@ export default function BlogPostPage({ params }: Props) {
             </SectionDivider>
           )}
         </div>
-      </div>
+      </PostLayout>
     </>
   );
 }
diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 2eca05e..ada4740 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -1,6 +1,7 @@
 import { getAllPostsSorted } from '@/lib/posts';
 import { PostListWithControls } from '@/components/post-list-with-controls';
 import { TimelineWrapper } from '@/components/timeline-wrapper';
+import { SidebarLayout } from '@/components/sidebar-layout';
 
 export const metadata = {
   title: '所有文章'
@@ -11,15 +12,17 @@ export default function BlogIndexPage() {
 
   return (
     <section className="space-y-4">
-      <header className="space-y-1">
-        <h1 className="type-title font-semibold text-slate-900 dark:text-slate-50">
-          所有文章
-        </h1>
-        <p className="type-small text-slate-500 dark:text-slate-400">
-          繼續往下滑，慢慢逛逛。
-        </p>
-      </header>
-      <PostListWithControls posts={posts} />
+      <SidebarLayout>
+        <header className="space-y-1">
+          <h1 className="type-title font-semibold text-slate-900 dark:text-slate-50">
+            所有文章
+          </h1>
+          <p className="type-small text-slate-500 dark:text-slate-400">
+            繼續往下滑，慢慢逛逛。
+          </p>
+        </header>
+        <PostListWithControls posts={posts} />
+      </SidebarLayout>
     </section>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 2f24dc4..2918654 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,13 @@ import type { Metadata } from 'next';
 import { siteConfig } from '@/lib/config';
 import { LayoutShell } from '@/components/layout-shell';
 import { ThemeProvider } from 'next-themes';
+import { Playfair_Display } from 'next/font/google';
+
+const playfair = Playfair_Display({
+  subsets: ['latin'],
+  variable: '--font-serif-eng',
+  display: 'swap',
+});
 
 export const metadata: Metadata = {
   title: {
@@ -38,7 +45,7 @@ export default function RootLayout({
   const theme = siteConfig.theme;
 
   return (
-    <html lang={siteConfig.defaultLocale} suppressHydrationWarning>
+    <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={playfair.variable}>
       <body>
         <style
           // Set CSS variables for accent colors (light + dark variants)
diff --git a/app/page.tsx b/app/page.tsx
index d7193db..f26cc73 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,39 +3,42 @@ import { getAllPostsSorted } from '@/lib/posts';
 import { siteConfig } from '@/lib/config';
 import { PostListItem } from '@/components/post-list-item';
 import { TimelineWrapper } from '@/components/timeline-wrapper';
+import { SidebarLayout } from '@/components/sidebar-layout';
 
 export default function HomePage() {
   const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage);
 
   return (
     <section className="space-y-6">
-      <header className="space-y-1 text-center">
-        <h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
-          {siteConfig.name} 的最新動態
-        </h1>
-        <p className="type-small text-slate-600 dark:text-slate-300">
-          {siteConfig.tagline}
-        </p>
-      </header>
+      <SidebarLayout>
+        <header className="space-y-1 text-center">
+          <h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
+            {siteConfig.name} 的最新動態
+          </h1>
+          <p className="type-small text-slate-600 dark:text-slate-300">
+            {siteConfig.tagline}
+          </p>
+        </header>
 
-      <div>
-        <div className="mb-3 flex items-baseline justify-between">
-          <h2 className="type-small font-semibold uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
-            最新文章
-          </h2>
-          <Link
-            href="/blog"
-            className="text-xs text-blue-600 hover:underline dark:text-blue-400"
-          >
-            所有文章 →
-          </Link>
+        <div>
+          <div className="mb-3 flex items-baseline justify-between">
+            <h2 className="type-small font-semibold uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
+              最新文章
+            </h2>
+            <Link
+              href="/blog"
+              className="text-xs text-blue-600 hover:underline dark:text-blue-400"
+            >
+              所有文章 →
+            </Link>
+          </div>
+          <TimelineWrapper>
+            {posts.map((post) => (
+              <PostListItem key={post._id} post={post} />
+            ))}
+          </TimelineWrapper>
         </div>
-        <TimelineWrapper>
-          {posts.map((post) => (
-            <PostListItem key={post._id} post={post} />
-          ))}
-        </TimelineWrapper>
-      </div>
+      </SidebarLayout>
     </section>
   );
 }
diff --git a/app/pages/[slug]/page.tsx b/app/pages/[slug]/page.tsx
index af1a031..c610b8d 100644
--- a/app/pages/[slug]/page.tsx
+++ b/app/pages/[slug]/page.tsx
@@ -6,7 +6,9 @@ import { allPages } from 'contentlayer/generated';
 import { getPageBySlug } from '@/lib/posts';
 import { siteConfig } from '@/lib/config';
 import { ReadingProgress } from '@/components/reading-progress';
-import { PostToc } from '@/components/post-toc';
+import { PostLayout } from '@/components/post-layout';
+import { ScrollReveal } from '@/components/scroll-reveal';
+import { SectionDivider } from '@/components/section-divider';
 
 export function generateStaticParams() {
   return allPages.map((page) => ({
@@ -35,55 +37,65 @@ export default function StaticPage({ params }: Props) {
 
   if (!page) return notFound();
 
+  const hasToc = /<h[23]/.test(page.body.html);
+
   return (
     <>
       <ReadingProgress />
-      <div className="flex gap-6 pt-4">
-        <aside className="hidden shrink-0 lg:block lg:w-44">
-          <PostToc />
-        </aside>
-        <div className="flex-1">
-          <header className="mb-6 space-y-2">
-            {page.published_at && (
-              <p className="text-xs text-slate-500 dark:text-slate-500">
-                {new Date(page.published_at).toLocaleDateString(
-                  siteConfig.defaultLocale
+      <PostLayout hasToc={hasToc}>
+        <div className="space-y-8">
+          <SectionDivider>
+            <ScrollReveal>
+              <header className="mb-6 space-y-4 text-center">
+                {page.published_at && (
+                  <p className="type-small text-slate-500 dark:text-slate-500">
+                    {new Date(page.published_at).toLocaleDateString(
+                      siteConfig.defaultLocale
+                    )}
+                  </p>
                 )}
-              </p>
-            )}
-            <h1 className="text-2xl font-bold leading-tight text-slate-900 sm:text-3xl dark:text-slate-50">
-              {page.title}
-            </h1>
-            {page.tags && (
-              <div className="flex flex-wrap gap-2 pt-1">
-                {page.tags.map((t) => (
-                  <Link
-                    key={t}
-                    href={`/tags/${encodeURIComponent(
-                      t.toLowerCase().replace(/\s+/g, '-')
-                    )}`}
-                    className="rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight transition hover:bg-accent hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
-                  >
-                    #{t}
-                  </Link>
-                ))}
-              </div>
-            )}
-          </header>
-          <article className="prose prose-lg prose-slate max-w-none dark:prose-dark">
-              {page.feature_image && (
-                <Image
-                  src={page.feature_image.replace('../assets', '/assets')}
-                  alt={page.title}
-                  width={1200}
-                  height={600}
-                  className="my-4 rounded"
-                />
-              )}
-            <div dangerouslySetInnerHTML={{ __html: page.body.html }} />
-          </article>
+                <h1 className="type-display font-bold leading-tight text-slate-900 dark:text-slate-50">
+                  {page.title}
+                </h1>
+                {page.tags && (
+                  <div className="flex flex-wrap justify-center gap-2 pt-2">
+                    {page.tags.map((t) => (
+                      <Link
+                        key={t}
+                        href={`/tags/${encodeURIComponent(
+                          t.toLowerCase().replace(/\s+/g, '-')
+                        )}`}
+                        className="tag-chip rounded-full bg-accent-soft px-3 py-1 text-sm text-accent-textLight dark:bg-slate-800 dark:text-slate-100"
+                      >
+                        #{t}
+                      </Link>
+                    ))}
+                  </div>
+                )}
+              </header>
+            </ScrollReveal>
+          </SectionDivider>
+
+          <SectionDivider>
+            <ScrollReveal>
+              <article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
+                {page.feature_image && (
+                  <div className="-mx-4 mb-8 transition-all duration-500 sm:-mx-12 lg:-mx-20 group-[.toc-open]:lg:-mx-4">
+                    <Image
+                      src={page.feature_image.replace('../assets', '/assets')}
+                      alt={page.title}
+                      width={1200}
+                      height={600}
+                      className="w-full rounded-xl shadow-lg"
+                    />
+                  </div>
+                )}
+                <div dangerouslySetInnerHTML={{ __html: page.body.html }} />
+              </article>
+            </ScrollReveal>
+          </SectionDivider>
         </div>
-      </div>
+      </PostLayout>
     </>
   );
 }
diff --git a/app/tags/[tag]/page.tsx b/app/tags/[tag]/page.tsx
index 38781c1..fa7c981 100644
--- a/app/tags/[tag]/page.tsx
+++ b/app/tags/[tag]/page.tsx
@@ -2,6 +2,11 @@ import type { Metadata } from 'next';
 import { allPosts } from 'contentlayer/generated';
 import { PostListWithControls } from '@/components/post-list-with-controls';
 import { getTagSlug } from '@/lib/posts';
+import { SidebarLayout } from '@/components/sidebar-layout';
+import { SectionDivider } from '@/components/section-divider';
+import { ScrollReveal } from '@/components/scroll-reveal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTag } from '@fortawesome/free-solid-svg-icons';
 
 export function generateStaticParams() {
   const slugs = new Set<string>();
@@ -43,11 +48,26 @@ export default function TagPage({ params }: Props) {
     posts[0]?.tags?.find((t) => getTagSlug(t) === slug) ?? params.tag;
 
   return (
-    <section className="space-y-4">
-      <h1 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
-        標籤：{tagLabel}
-      </h1>
+    <SidebarLayout>
+      <SectionDivider>
+        <ScrollReveal>
+          <div className="motion-card mb-8 rounded-2xl border border-white/40 bg-white/60 p-8 text-center shadow-lg backdrop-blur-md dark:border-white/10 dark:bg-slate-900/60">
+            <div className="inline-flex items-center gap-2 text-accent">
+              <FontAwesomeIcon icon={faTag} className="h-5 w-5" />
+              <span className="type-small uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
+                TAG ARCHIVE
+              </span>
+            </div>
+            <h1 className="type-title mt-2 font-semibold text-slate-900 dark:text-slate-50">
+              {tagLabel}
+            </h1>
+            <p className="type-small mt-2 text-slate-600 dark:text-slate-300">
+              收錄 {posts.length} 篇文章
+            </p>
+          </div>
+        </ScrollReveal>
+      </SectionDivider>
       <PostListWithControls posts={posts} />
-    </section>
+    </SidebarLayout>
   );
 }
diff --git a/app/tags/page.tsx b/app/tags/page.tsx
index 1982620..1d30f1b 100644
--- a/app/tags/page.tsx
+++ b/app/tags/page.tsx
@@ -5,6 +5,7 @@ import { faTags, faFire } from '@fortawesome/free-solid-svg-icons';
 import { getAllTagsWithCount } from '@/lib/posts';
 import { SectionDivider } from '@/components/section-divider';
 import { ScrollReveal } from '@/components/scroll-reveal';
+import { SidebarLayout } from '@/components/sidebar-layout';
 
 export const metadata: Metadata = {
   title: '標籤索引'
@@ -24,52 +25,54 @@ export default function TagIndexPage() {
 
   return (
     <section className="space-y-6">
-      <SectionDivider>
-        <ScrollReveal>
-          <div className="motion-card rounded-2xl border bg-white/90 p-6 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
-            <div className="inline-flex items-center gap-2 text-accent">
-              <FontAwesomeIcon icon={faTags} className="h-5 w-5" />
-              <span className="type-small uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
-                標籤索引
-              </span>
-            </div>
-            <h1 className="type-title mt-2 font-semibold text-slate-900 dark:text-slate-50">
-              共 {tags.length} 組主題，任你探索
-            </h1>
-            <p className="type-small mt-2 text-slate-600 dark:text-slate-300">
-              熱度最高的標籤：
-              {topTags.map((t) => t.tag).join('、')}
-            </p>
-          </div>
-        </ScrollReveal>
-      </SectionDivider>
-
-      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-        {tags.map(({ tag, slug, count }, index) => {
-          const color = colorClasses[index % colorClasses.length];
-          return (
-            <Link
-              key={tag}
-              href={`/tags/${slug}`}
-              className="motion-card flex flex-col rounded-xl border bg-white/90 p-4 shadow-sm transition hover:-translate-y-1 dark:border-slate-800 dark:bg-slate-900"
-            >
-              <span className={`mb-3 block h-1.5 w-16 rounded-full bg-gradient-to-r ${color}`} aria-hidden="true" />
-              <div className="flex items-center justify-between">
-                <h2 className="type-subtitle font-semibold text-slate-900 dark:text-slate-50">
-                  {tag}
-                </h2>
-                <span className="type-small text-slate-600 dark:text-slate-300">
-                  {count} 篇
+      <SidebarLayout>
+        <SectionDivider>
+          <ScrollReveal>
+            <div className="motion-card rounded-2xl border border-white/40 bg-white/60 p-8 text-center shadow-lg backdrop-blur-md dark:border-white/10 dark:bg-slate-900/60">
+              <div className="inline-flex items-center gap-2 text-accent">
+                <FontAwesomeIcon icon={faTags} className="h-5 w-5" />
+                <span className="type-small uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
+                  標籤索引
                 </span>
               </div>
-              <span className="mt-1 inline-flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
-                <FontAwesomeIcon icon={faFire} className="h-3 w-3" />
-                熱度 #{index + 1}
-              </span>
-            </Link>
-          );
-        })}
-      </div>
+              <h1 className="type-title mt-2 font-semibold text-slate-900 dark:text-slate-50">
+                共 {tags.length} 組主題，任你探索
+              </h1>
+              <p className="type-small mt-2 text-slate-600 dark:text-slate-300">
+                熱度最高的標籤：
+                {topTags.map((t) => t.tag).join('、')}
+              </p>
+            </div>
+          </ScrollReveal>
+        </SectionDivider>
+
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {tags.map(({ tag, slug, count }, index) => {
+            const color = colorClasses[index % colorClasses.length];
+            return (
+              <Link
+                key={tag}
+                href={`/tags/${slug}`}
+                className="motion-card group flex flex-col rounded-2xl border border-white/40 bg-white/60 p-5 shadow-sm backdrop-blur-md transition-all hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60"
+              >
+                <span className={`mb-3 block h-1.5 w-16 rounded-full bg-gradient-to-r ${color}`} aria-hidden="true" />
+                <div className="flex items-center justify-between">
+                  <h2 className="type-subtitle font-semibold text-slate-900 group-hover:text-blue-600 dark:text-slate-50 dark:group-hover:text-blue-400">
+                    {tag}
+                  </h2>
+                  <span className="type-small text-slate-600 dark:text-slate-300">
+                    {count} 篇
+                  </span>
+                </div>
+                <span className="mt-1 inline-flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
+                  <FontAwesomeIcon icon={faFire} className="h-3 w-3 text-orange-400" />
+                  熱度 #{index + 1}
+                </span>
+              </Link>
+            );
+          })}
+        </div>
+      </SidebarLayout>
     </section>
   );
 }
diff --git a/app/template.tsx b/app/template.tsx
new file mode 100644
index 0000000..a4e1e09
--- /dev/null
+++ b/app/template.tsx
@@ -0,0 +1,15 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+export default function Template({ children }: { children: React.ReactNode }) {
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, ease: 'easeOut' }}
+        >
+            {children}
+        </motion.div>
+    );
+}
diff --git a/components/layout-shell.tsx b/components/layout-shell.tsx
index ed1cdf6..048b30a 100644
--- a/components/layout-shell.tsx
+++ b/components/layout-shell.tsx
@@ -1,6 +1,6 @@
 import { SiteHeader } from './site-header';
 import { SiteFooter } from './site-footer';
-import { RightSidebar } from './right-sidebar';
+
 import { BackToTop } from './back-to-top';
 
 export function LayoutShell({ children }: { children: React.ReactNode }) {
@@ -8,10 +8,7 @@ export function LayoutShell({ children }: { children: React.ReactNode }) {
     <div className="flex min-h-screen flex-col">
       <SiteHeader />
       <main className="flex-1 container mx-auto px-4 py-6">
-        <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
-          <div>{children}</div>
-          <RightSidebar />
-        </div>
+        {children}
       </main>
       <SiteFooter />
       <BackToTop />
diff --git a/components/post-layout.tsx b/components/post-layout.tsx
new file mode 100644
index 0000000..eaf8831
--- /dev/null
+++ b/components/post-layout.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faListUl, faChevronRight, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { PostToc } from './post-toc';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}
+
+export function PostLayout({ children, hasToc = true }: { children: React.ReactNode; hasToc?: boolean }) {
+    const [isTocOpen, setIsTocOpen] = useState(hasToc);
+
+    return (
+        <div className="relative">
+            <div className={cn(
+                "group grid gap-8 transition-all duration-500 ease-snappy",
+                isTocOpen && hasToc ? "lg:grid-cols-[1fr_16rem] toc-open" : "lg:grid-cols-[1fr_0rem]"
+            )}>
+                {/* Main Content Area */}
+                <div className="min-w-0">
+                    <motion.div
+                        layout
+                        className={cn("mx-auto transition-all duration-500 ease-snappy", isTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}
+                    >
+                        {children}
+                    </motion.div>
+                </div>
+
+                {/* Sidebar (TOC) */}
+                <aside className="hidden lg:block">
+                    <div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
+                        <AnimatePresence mode="wait">
+                            {isTocOpen && hasToc && (
+                                <motion.div
+                                    initial={{ opacity: 0, x: 20 }}
+                                    animate={{ opacity: 1, x: 0 }}
+                                    exit={{ opacity: 0, x: 20 }}
+                                    transition={{ duration: 0.3 }}
+                                    className="h-full overflow-y-auto pr-2"
+                                >
+                                    <PostToc />
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                </aside>
+            </div>
+
+            {/* Toggle Button (Glassmorphism Pill) */}
+            {hasToc && (
+                <motion.button
+                    layout
+                    onClick={() => setIsTocOpen(!isTocOpen)}
+                    className={cn(
+                        "fixed bottom-8 right-20 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-white/80 px-4 py-2.5 shadow-lg backdrop-blur-md transition-all hover:bg-white hover:scale-105 dark:border-white/10 dark:bg-slate-900/80 dark:hover:bg-slate-900",
+                        "text-sm font-medium text-slate-600 dark:text-slate-300"
+                    )}
+                    whileTap={{ scale: 0.95 }}
+                    aria-label="Toggle Table of Contents"
+                >
+                    <FontAwesomeIcon
+                        icon={isTocOpen ? faChevronRight : faListUl}
+                        className="h-3.5 w-3.5"
+                    />
+                    <span>{isTocOpen ? 'Hide' : 'Menu'}</span>
+                </motion.button>
+            )}
+        </div>
+    );
+}
diff --git a/components/post-list-item.tsx b/components/post-list-item.tsx
index 18a0e0b..1fde1f8 100644
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -19,7 +19,7 @@ export function PostListItem({ post }: Props) {
     post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
 
   return (
-    <article className="motion-card group relative flex gap-4 rounded-lg border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/80">
+    <article className="motion-card group relative flex gap-4 rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60">
       <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
       {cover && (
         <div className="relative flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40">
diff --git a/components/sidebar-layout.tsx b/components/sidebar-layout.tsx
new file mode 100644
index 0000000..6221bf7
--- /dev/null
+++ b/components/sidebar-layout.tsx
@@ -0,0 +1,10 @@
+import { RightSidebar } from './right-sidebar';
+
+export function SidebarLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
+            <div>{children}</div>
+            <RightSidebar />
+        </div>
+    );
+}
diff --git a/package-lock.json b/package-lock.json
index 5c5993a..41873d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@fortawesome/react-fontawesome": "^3.1.0",
         "clsx": "^2.1.1",
         "contentlayer": "^0.3.4",
+        "framer-motion": "^12.23.24",
         "gray-matter": "^4.0.3",
         "markdown-wasm": "^1.2.0",
         "next": "^13.5.11",
@@ -24,6 +25,7 @@
         "rehype-autolink-headings": "^7.1.0",
         "rehype-slug": "^6.0.0",
         "remark-gfm": "^4.0.1",
+        "tailwind-merge": "^3.4.0",
         "unist-util-visit": "^5.0.0"
       },
       "devDependencies": {
@@ -4078,6 +4080,7 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -4818,6 +4821,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.24",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.24.tgz",
+      "integrity": "sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-monkey": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.1.0.tgz",
@@ -4981,9 +5011,9 @@
       "license": "ISC"
     },
     "node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -11306,6 +11336,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -14236,6 +14281,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.18",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
diff --git a/styles/globals.css b/styles/globals.css
index f420f6b..18dc73e 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -34,12 +34,15 @@ body {
     transform: translate(-50%, -10%);
     opacity: 0;
   }
+
   15% {
     opacity: 1;
   }
+
   85% {
     opacity: 1;
   }
+
   100% {
     transform: translate(-50%, 110%);
     opacity: 0;
@@ -122,12 +125,12 @@ body {
   font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem);
 }
 
-.prose h1 > a,
-.prose h2 > a,
-.prose h3 > a,
-.prose h4 > a,
-.prose h5 > a,
-.prose h6 > a {
+.prose h1>a,
+.prose h2>a,
+.prose h3>a,
+.prose h4>a,
+.prose h5>a,
+.prose h6>a {
   text-decoration: none !important;
   color: inherit !important;
 }
@@ -153,13 +156,16 @@ body {
     transform: translateX(-120%);
     opacity: 0;
   }
+
   30% {
     opacity: 0.4;
   }
+
   60% {
     transform: translateX(120%);
     opacity: 0;
   }
+
   100% {
     transform: translateX(120%);
     opacity: 0;
@@ -191,35 +197,52 @@ body {
 }
 
 @layer components {
-.type-display {
-  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
-  line-height: 1.2;
-  font-weight: var(--font-weight-semibold);
-}
+  .type-display {
+    font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
+    line-height: 1.2;
+    font-weight: var(--font-weight-semibold);
+    font-family: var(--font-serif-eng), "Songti SC", serif;
+  }
 
-.type-title {
-  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem);
-  line-height: 1.3;
-  font-weight: var(--font-weight-semibold);
-}
+  .type-title {
+    font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem);
+    line-height: 1.3;
+    font-weight: var(--font-weight-semibold);
+    font-family: var(--font-serif-eng), "Songti SC", serif;
+    letter-spacing: 0.02em;
+  }
 
-.type-subtitle {
-  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
-  line-height: 1.35;
-  font-weight: var(--font-weight-medium);
-}
+  .type-subtitle {
+    font-size: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
+    line-height: 1.35;
+    font-weight: var(--font-weight-medium);
+    font-family: var(--font-serif-eng), "Songti SC", serif;
+    letter-spacing: 0.02em;
+  }
 
-.type-body {
-  font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
-  line-height: var(--line-height-body);
-  font-weight: var(--font-weight-regular);
-}
+  .type-body {
+    font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
+    line-height: var(--line-height-body);
+    font-weight: var(--font-weight-regular);
+  }
 
-.type-small {
-  font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem);
-  line-height: 1.4;
-  font-weight: var(--font-weight-regular);
-}
+  .type-small {
+    font-size: clamp(0.85rem, 0.2vw + 0.8rem, 0.95rem);
+    line-height: 1.4;
+    font-weight: var(--font-weight-regular);
+  }
+
+  h1 {
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    font-family: var(--font-serif-eng), "Songti SC", serif;
+  }
+
+  h2 {
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    font-family: var(--font-serif-eng), "Songti SC", serif;
+  }
 
   .type-nav {
     font-size: clamp(0.95rem, 0.2vw + 0.85rem, 1.05rem);
@@ -242,4 +265,4 @@ body {
     transition: color var(--motion-duration-short) var(--motion-ease-snappy),
       transform var(--motion-duration-short) var(--motion-ease-snappy);
   }
-}
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index db82f7c..74b799a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,6 +16,10 @@ module.exports = {
           textDark: 'var(--color-accent-text-dark)'
         }
       },
+      fontFamily: {
+        'serif-eng': ['var(--font-serif-eng)', 'serif'],
+        'serif-cn': ['"Songti SC"', '"Noto Serif TC"', '"SimSun"', 'serif'],
+      },
       transitionTimingFunction: {
         snappy: 'cubic-bezier(0.32, 0.72, 0, 1)'
       },
@@ -54,11 +58,13 @@ module.exports = {
             },
             h1: {
               fontWeight: '700',
-              letterSpacing: '-0.03em'
+              letterSpacing: '-0.03em',
+              fontFamily: 'var(--font-serif-eng), "Songti SC", serif',
             },
             h2: {
               fontWeight: '600',
-              letterSpacing: '-0.02em'
+              letterSpacing: '-0.02em',
+              fontFamily: 'var(--font-serif-eng), "Songti SC", serif',
             },
             blockquote: {
               fontStyle: 'normal',