Stage all layout updates

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>
     </>
   );
 }

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>
   );
 }

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)

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>
   );
 }

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>
     </>
   );
 }

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>
   );
 }

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>
   );
 }

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>
+    );
+}