SECURITY: Update Next.js and React to patch critical RCE vulnerability

Addresses CVE-2025-55182 (React) and CVE-2025-66478 (Next.js)
- CVSS Score: 10.0 (Critical)
- Allows unauthenticated remote code execution via RSC payloads

Updates:
- Next.js: 16.0.3 → 16.0.7
- React: 19.2.0 → 19.2.1
- react-dom: 19.2.0 → 19.2.1

References:
- https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components
- https://nextjs.org/blog/CVE-2025-66478

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

.gitignore

@@ -37,5 +37,8 @@ pnpm-debug.log*
 # Generated assets mirror
 /public/assets
 
+# Generated search index
+/public/_pagefind
+
 # TypeScript
 *.tsbuildinfo

README.md

@@ -11,9 +11,61 @@ Recent updates include upgrading to Next.js 16 with Turbopack, migrating to Cont
 - **Runtime**: React 19
 - **Styling**: Tailwind CSS + Typography plugin
 - **Content**: Markdown via Contentlayer2 (`contentlayer2/source-files`)
+- **Search**: Pagefind for full-text search
 - **Theming**: `next-themes` (light/dark), env‑driven accent color system
 - **Content source**: Git submodule `content` → [`personal-blog`](https://gitea.gbanyan.net/gbanyan/personal-blog.git)
 
+## Performance Optimizations
+
+This blog is optimized for performance using Next.js 16 features and best practices:
+
+### Next.js 16 Features
+
+- **Partial Prerendering (PPR)** enabled via `cacheComponents: true` for faster page loads
+- **Turbopack** enabled in development for 4-5x faster builds
+- **Static site generation** for all blog posts and pages
+- **Loading states** and error boundaries for better UX
+
+### Bundle Size Reduction
+
+- **CSS-only animations** replacing Framer Motion (~50KB reduction)
+- **Dynamic imports** for SearchModal component (lazy loaded when needed)
+- **Optimized scroll reveals** using IntersectionObserver instead of React state
+- **Tree-shaking** with Next.js compiler removing unused code
+
+### Image & Video Optimization
+
+- **Responsive images** with proper `sizes` attributes for all Next.js Image components
+- **Lazy loading** for below-fold images, priority loading for hero images
+- **AVIF/WebP formats** for better compression
+- **GIF to video conversion**: Large animated GIFs converted to MP4/WebM for 80-95% file size reduction
+  - `AddNewThings3.gif` (2.4MB) → WebM (116KB) = 95% reduction
+  - `Things3.gif` (1.5MB) → WebM (170KB) = 89% reduction
+
+### SEO & Social Media
+
+- **Dynamic OG image generation** using `@vercel/og`
+- **Enhanced metadata** with OpenGraph and Twitter Cards for all posts
+- **1200x630 social images** with post title, description, and tags
+
+### Search Optimization
+
+Pagefind is configured to index only essential content:
+- **Indexed**: Post titles, tags, and article body content
+- **Excluded**: Navigation, related posts, footer, and UI elements
+- This improves search relevance and reduces index size
+
+Configuration in `app/blog/[slug]/page.tsx`:
+- `data-pagefind-body` wraps main content area
+- `data-pagefind-meta="tags"` marks tags as metadata
+- `data-pagefind-ignore` excludes navigation and related posts
+
+### Caching Strategy
+
+- **Static assets** cached for 1 year (`max-age=31536000, immutable`)
+- **PPR** caches static shells while streaming dynamic content
+- **Font optimization** with Next.js font loading
+
 ## Project Structure
 
 - `app/` – Next.js App Router

app/api/og/route.tsx

@@ -0,0 +1,166 @@
+import { ImageResponse } from '@vercel/og';
+import { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+
+    // Get parameters
+    const title = searchParams.get('title') || 'Blog Post';
+    const description = searchParams.get('description') || '';
+    const tags = searchParams.get('tags')?.split(',').slice(0, 3) || [];
+
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'space-between',
+            backgroundColor: '#0f172a',
+            backgroundImage: 'radial-gradient(circle at 25px 25px, #1e293b 2%, transparent 0%), radial-gradient(circle at 75px 75px, #1e293b 2%, transparent 0%)',
+            backgroundSize: '100px 100px',
+            padding: '80px',
+          }}
+        >
+          {/* Header with gradient */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '20px',
+            }}
+          >
+            <div
+              style={{
+                width: '8px',
+                height: '60px',
+                background: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
+                borderRadius: '4px',
+              }}
+            />
+            <div
+              style={{
+                fontSize: '32px',
+                fontWeight: 600,
+                color: '#f8fafc',
+                letterSpacing: '-0.02em',
+              }}
+            >
+              個人部落格
+            </div>
+          </div>
+
+          {/* Main content */}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '24px',
+              maxWidth: '900px',
+            }}
+          >
+            {/* Title */}
+            <div
+              style={{
+                fontSize: '72px',
+                fontWeight: 700,
+                color: '#f8fafc',
+                lineHeight: 1.1,
+                letterSpacing: '-0.03em',
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+              }}
+            >
+              {title}
+            </div>
+
+            {/* Description */}
+            {description && (
+              <div
+                style={{
+                  fontSize: '28px',
+                  color: '#cbd5e1',
+                  lineHeight: 1.4,
+                  display: '-webkit-box',
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: 'vertical',
+                  overflow: 'hidden',
+                }}
+              >
+                {description}
+              </div>
+            )}
+
+            {/* Tags */}
+            {tags.length > 0 && (
+              <div
+                style={{
+                  display: 'flex',
+                  gap: '12px',
+                  flexWrap: 'wrap',
+                }}
+              >
+                {tags.map((tag, i) => (
+                  <div
+                    key={i}
+                    style={{
+                      backgroundColor: '#1e293b',
+                      color: '#94a3b8',
+                      padding: '8px 20px',
+                      borderRadius: '20px',
+                      fontSize: '20px',
+                      border: '1px solid #334155',
+                    }}
+                  >
+                    #{tag.trim()}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Footer with accent line */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '16px',
+              width: '100%',
+            }}
+          >
+            <div
+              style={{
+                flex: 1,
+                height: '2px',
+                background: 'linear-gradient(90deg, #3b82f6, transparent)',
+              }}
+            />
+            <div
+              style={{
+                fontSize: '24px',
+                color: '#64748b',
+              }}
+            >
+              gbanyan.net
+            </div>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      }
+    );
+  } catch (e: any) {
+    console.error('Error generating OG image:', e);
+    return new Response(`Failed to generate image: ${e.message}`, {
+      status: 500,
+    });
+  }
+}

app/blog/[slug]/loading.tsx

@@ -0,0 +1,41 @@
+export default function BlogPostLoading() {
+  return (
+    <article className="container mx-auto max-w-4xl px-4 py-12">
+      {/* Header skeleton */}
+      <header className="mb-12 space-y-4">
+        <div className="h-4 w-24 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+        <div className="h-12 w-3/4 animate-pulse rounded bg-slate-300 dark:bg-slate-600"></div>
+        <div className="flex gap-4">
+          <div className="h-4 w-32 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+          <div className="h-4 w-32 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+        </div>
+      </header>
+
+      {/* Cover image skeleton */}
+      <div className="mb-12 aspect-video w-full animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-700"></div>
+
+      {/* Content skeleton */}
+      <div className="prose prose-slate mx-auto space-y-4 dark:prose-invert">
+        <div className="space-y-3">
+          <div className="h-4 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+          <div className="h-4 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+          <div className="h-4 w-5/6 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+        </div>
+
+        <div className="h-8 w-2/3 animate-pulse rounded bg-slate-300 dark:bg-slate-600"></div>
+
+        <div className="space-y-3">
+          <div className="h-4 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+          <div className="h-4 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+          <div className="h-4 w-4/5 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+        </div>
+
+        <div className="space-y-3">
+          <div className="h-4 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+          <div className="h-4 w-full animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+          <div className="h-4 w-3/4 animate-pulse rounded bg-slate-200 dark:bg-slate-700"></div>
+        </div>
+      </div>
+    </article>
+  );
+}

app/blog/[slug]/page.tsx

@@ -12,6 +12,7 @@ import { PostCard } from '@/components/post-card';
 import { PostStorylineNav } from '@/components/post-storyline-nav';
 import { SectionDivider } from '@/components/section-divider';
 import { FooterCue } from '@/components/footer-cue';
+import { JsonLd } from '@/components/json-ld';
 
 export function generateStaticParams() {
   return allPosts.map((post) => ({
@@ -28,9 +29,40 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const post = getPostBySlug(slug);
   if (!post) return {};
 
+  const ogImageUrl = new URL('/api/og', process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000');
+  ogImageUrl.searchParams.set('title', post.title);
+  if (post.description) {
+    ogImageUrl.searchParams.set('description', post.description);
+  }
+  if (post.tags && post.tags.length > 0) {
+    ogImageUrl.searchParams.set('tags', post.tags.slice(0, 3).join(','));
+  }
+
   return {
     title: post.title,
-    description: post.description || post.title
+    description: post.description || post.title,
+    openGraph: {
+      title: post.title,
+      description: post.description || post.title,
+      type: 'article',
+      publishedTime: post.published_at,
+      authors: post.authors,
+      tags: post.tags,
+      images: [
+        {
+          url: ogImageUrl.toString(),
+          width: 1200,
+          height: 630,
+          alt: post.title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.title,
+      description: post.description || post.title,
+      images: [ogImageUrl.toString()],
+    },
   };
 }
 
@@ -45,14 +77,96 @@ export default async function BlogPostPage({ params }: Props) {
 
   const hasToc = /<h[23]/.test(post.body.html);
 
+  // Generate absolute URL for the post
+  const postUrl = `${siteConfig.url}${post.url}`;
+
+  // Get the OG image URL (same as in metadata)
+  const ogImageUrl = new URL('/api/og', siteConfig.url);
+  ogImageUrl.searchParams.set('title', post.title);
+  if (post.description) {
+    ogImageUrl.searchParams.set('description', post.description);
+  }
+  if (post.tags && post.tags.length > 0) {
+    ogImageUrl.searchParams.set('tags', post.tags.slice(0, 3).join(','));
+  }
+
+  // Get image URL - prefer feature_image, fallback to OG image
+  const imageUrl = post.feature_image
+    ? `${siteConfig.url}${post.feature_image.replace('../assets', '/assets')}`
+    : ogImageUrl.toString();
+
+  // BlogPosting Schema
+  const blogPostingSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.title,
+    description: post.description || post.custom_excerpt || post.title,
+    image: imageUrl,
+    datePublished: post.published_at,
+    dateModified: post.updated_at || post.published_at,
+    author: {
+      '@type': 'Person',
+      name: post.authors?.[0] || siteConfig.author,
+      url: siteConfig.url,
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: siteConfig.name,
+      logo: {
+        '@type': 'ImageObject',
+        url: `${siteConfig.url}${siteConfig.avatar}`,
+      },
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': postUrl,
+    },
+    ...(post.tags && post.tags.length > 0 && {
+      keywords: post.tags.join(', '),
+      articleSection: post.tags[0],
+    }),
+    inLanguage: siteConfig.defaultLocale,
+    url: postUrl,
+  };
+
+  // BreadcrumbList Schema
+  const breadcrumbSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      {
+        '@type': 'ListItem',
+        position: 1,
+        name: '首頁',
+        item: siteConfig.url,
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
+        name: '所有文章',
+        item: `${siteConfig.url}/blog`,
+      },
+      {
+        '@type': 'ListItem',
+        position: 3,
+        name: post.title,
+        item: postUrl,
+      },
+    ],
+  };
+
   return (
     <>
+      <JsonLd data={blogPostingSchema} />
+      <JsonLd data={breadcrumbSchema} />
       <ReadingProgress />
-      <PostLayout hasToc={hasToc}>
+      <PostLayout hasToc={hasToc} contentKey={slug}>
         <div className="space-y-8">
-          <SectionDivider>
+          {/* Main content area for Pagefind indexing */}
-            <ScrollReveal>
+          <div data-pagefind-body>
-              <header className="mb-6 space-y-4 text-center">
+            <SectionDivider>
+              <ScrollReveal>
+                <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(
@@ -64,7 +178,7 @@ export default async function BlogPostPage({ params }: Props) {
                   {post.title}
                 </h1>
                 {post.tags && (
-                  <div className="flex flex-wrap justify-center gap-2 pt-2">
+                  <div className="flex flex-wrap justify-center gap-2 pt-2" data-pagefind-meta="tags">
                     {post.tags.map((t) => (
                       <Link
                         key={t}
@@ -84,7 +198,10 @@ export default async function BlogPostPage({ params }: Props) {
 
           <SectionDivider>
             <ScrollReveal>
-              <article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
+              <article
+                data-toc-content={slug}
+                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
@@ -92,6 +209,8 @@ export default async function BlogPostPage({ params }: Props) {
                       alt={post.title}
                       width={1200}
                       height={600}
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
+                      priority
                       className="w-full rounded-xl shadow-lg"
                     />
                   </div>
@@ -100,23 +219,26 @@ export default async function BlogPostPage({ params }: Props) {
               </article>
             </ScrollReveal>
           </SectionDivider>
+          </div>
 
           <FooterCue />
 
-          <SectionDivider>
+          {/* Exclude navigation and related posts from search indexing */}
-            <ScrollReveal>
+          <div data-pagefind-ignore>
-              <PostStorylineNav
-                current={post}
-                newer={neighbors.newer}
-                older={neighbors.older}
-              />
-            </ScrollReveal>
-          </SectionDivider>
-
-          {relatedPosts.length > 0 && (
             <SectionDivider>
               <ScrollReveal>
-                <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">
+                <PostStorylineNav
+                  current={post}
+                  newer={neighbors.newer}
+                  older={neighbors.older}
+                />
+              </ScrollReveal>
+            </SectionDivider>
+
+            {relatedPosts.length > 0 && (
+              <SectionDivider>
+                <ScrollReveal>
+                  <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">
                       相關文章
@@ -133,7 +255,8 @@ export default async function BlogPostPage({ params }: Props) {
                 </section>
               </ScrollReveal>
             </SectionDivider>
-          )}
+            )}
+          </div>
         </div>
       </PostLayout>
     </>

app/error.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useEffect } from 'react';
+import { FiAlertTriangle } from 'react-icons/fi';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Application error:', error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center px-4">
+      <div className="max-w-md text-center">
+        <div className="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
+          <FiAlertTriangle className="h-8 w-8 text-red-600 dark:text-red-400" />
+        </div>
+
+        <h2 className="mb-2 text-2xl font-semibold text-slate-900 dark:text-slate-100">
+          發生錯誤
+        </h2>
+
+        <p className="mb-6 text-slate-600 dark:text-slate-400">
+          {error.message || '頁面載入時發生問題，請稍後再試。'}
+        </p>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
+          <button
+            onClick={reset}
+            className="inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-600"
+          >
+            重試
+          </button>
+
+          <a
+            href="/"
+            className="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+          >
+            返回首頁
+          </a>
+        </div>
+
+        {error.digest && (
+          <p className="mt-6 text-xs text-slate-500 dark:text-slate-500">
+            錯誤代碼: {error.digest}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

app/feed.xml/route.ts

@@ -0,0 +1,63 @@
+import { allPosts } from 'contentlayer2/generated';
+import { siteConfig } from '@/lib/config';
+
+export async function GET() {
+  const sortedPosts = allPosts
+    .filter((post) => post.status === 'published')
+    .sort((a, b) => {
+      const dateA = a.published_at ? new Date(a.published_at).getTime() : 0;
+      const dateB = b.published_at ? new Date(b.published_at).getTime() : 0;
+      return dateB - dateA;
+    })
+    .slice(0, 20); // Latest 20 posts
+
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
+
+  const rss = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
+  <channel>
+    <title>${escapeXml(siteConfig.name)}</title>
+    <link>${siteUrl}</link>
+    <description>${escapeXml(siteConfig.description)}</description>
+    <language>${siteConfig.defaultLocale.replace('_', '-')}</language>
+    <lastBuildDate>${new Date().toUTCString()}</lastBuildDate>
+    <atom:link href="${siteUrl}/feed.xml" rel="self" type="application/rss+xml"/>
+    ${sortedPosts
+      .map((post) => {
+        const postUrl = `${siteUrl}${post.url}`;
+        const pubDate = post.published_at
+          ? new Date(post.published_at).toUTCString()
+          : new Date(post.created_at || Date.now()).toUTCString();
+
+        return `
+    <item>
+      <title>${escapeXml(post.title)}</title>
+      <link>${postUrl}</link>
+      <guid isPermaLink="true">${postUrl}</guid>
+      <description>${escapeXml(post.description || post.custom_excerpt || post.title)}</description>
+      ${post.body?.html ? `<content:encoded><![CDATA[${post.body.html}]]></content:encoded>` : ''}
+      <pubDate>${pubDate}</pubDate>
+      ${post.authors?.map((author) => `<author>${escapeXml(author)}</author>`).join('\n      ') || ''}
+      ${post.tags?.map((tag) => `<category>${escapeXml(tag)}</category>`).join('\n      ') || ''}
+    </item>`;
+      })
+      .join('')}
+  </channel>
+</rss>`;
+
+  return new Response(rss, {
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=3600, s-maxage=3600',
+    },
+  });
+}
+
+function escapeXml(unsafe: string): string {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}

app/layout.tsx

@@ -4,6 +4,7 @@ import { siteConfig } from '@/lib/config';
 import { LayoutShell } from '@/components/layout-shell';
 import { ThemeProvider } from 'next-themes';
 import { Playfair_Display } from 'next/font/google';
+import { JsonLd } from '@/components/json-ld';
 
 const playfair = Playfair_Display({
   subsets: ['latin'],
@@ -34,6 +35,11 @@ export const metadata: Metadata = {
   },
   icons: {
     icon: '/favicon.png'
+  },
+  alternates: {
+    types: {
+      'application/rss+xml': `${siteConfig.url}/feed.xml`
+    }
   }
 };
 
@@ -44,9 +50,48 @@ export default function RootLayout({
 }) {
   const theme = siteConfig.theme;
 
+  // WebSite Schema
+  const websiteSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: siteConfig.title,
+    description: siteConfig.description,
+    url: siteConfig.url,
+    inLanguage: siteConfig.defaultLocale,
+    author: {
+      '@type': 'Person',
+      name: siteConfig.author,
+      url: siteConfig.url,
+    },
+    potentialAction: {
+      '@type': 'SearchAction',
+      target: {
+        '@type': 'EntryPoint',
+        urlTemplate: `${siteConfig.url}/blog?search={search_term_string}`,
+      },
+      'query-input': 'required name=search_term_string',
+    },
+  };
+
+  // Organization Schema
+  const organizationSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: siteConfig.name,
+    url: siteConfig.url,
+    logo: `${siteConfig.url}${siteConfig.avatar}`,
+    sameAs: [
+      siteConfig.social.github,
+      siteConfig.social.twitter && `https://twitter.com/${siteConfig.social.twitter.replace('@', '')}`,
+      siteConfig.social.mastodon,
+    ].filter(Boolean),
+  };
+
   return (
     <html lang={siteConfig.defaultLocale} suppressHydrationWarning className={playfair.variable}>
       <body>
+        <JsonLd data={websiteSchema} />
+        <JsonLd data={organizationSchema} />
         <style
           // Set CSS variables for accent colors (light + dark variants)
           dangerouslySetInnerHTML={{

app/loading.tsx

@@ -0,0 +1,12 @@
+export default function Loading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="text-center">
+        <div className="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent"></div>
+        <p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
+          載入中...
+        </p>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -4,12 +4,35 @@ import { siteConfig } from '@/lib/config';
 import { PostListItem } from '@/components/post-list-item';
 import { TimelineWrapper } from '@/components/timeline-wrapper';
 import { SidebarLayout } from '@/components/sidebar-layout';
+import { JsonLd } from '@/components/json-ld';
 
 export default function HomePage() {
   const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage);
 
+  // CollectionPage Schema for homepage
+  const collectionPageSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'CollectionPage',
+    name: `${siteConfig.name} 的最新動態`,
+    description: siteConfig.description,
+    url: siteConfig.url,
+    inLanguage: siteConfig.defaultLocale,
+    isPartOf: {
+      '@type': 'WebSite',
+      name: siteConfig.title,
+      url: siteConfig.url,
+    },
+    about: {
+      '@type': 'Blog',
+      name: siteConfig.title,
+      description: siteConfig.description,
+    },
+  };
+
   return (
-    <section className="space-y-6">
+    <>
+      <JsonLd data={collectionPageSchema} />
+      <section className="space-y-6">
       <SidebarLayout>
         <header className="space-y-1 text-center">
           <h1 className="type-title font-bold text-slate-900 dark:text-slate-50">
@@ -40,5 +63,6 @@ export default function HomePage() {
         </div>
       </SidebarLayout>
     </section>
+    </>
   );
 }

app/pages/[slug]/page.tsx

@@ -9,6 +9,7 @@ import { ReadingProgress } from '@/components/reading-progress';
 import { PostLayout } from '@/components/post-layout';
 import { ScrollReveal } from '@/components/scroll-reveal';
 import { SectionDivider } from '@/components/section-divider';
+import { JsonLd } from '@/components/json-ld';
 
 export function generateStaticParams() {
   return allPages.map((page) => ({
@@ -39,10 +40,41 @@ export default async function StaticPage({ params }: Props) {
 
   const hasToc = /<h[23]/.test(page.body.html);
 
+  // Generate absolute URL for the page
+  const pageUrl = `${siteConfig.url}${page.url}`;
+
+  // Get image URL if available
+  const imageUrl = page.feature_image
+    ? `${siteConfig.url}${page.feature_image.replace('../assets', '/assets')}`
+    : `${siteConfig.url}${siteConfig.ogImage}`;
+
+  // WebPage Schema
+  const webPageSchema = {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    name: page.title,
+    description: page.description || page.title,
+    url: pageUrl,
+    image: imageUrl,
+    inLanguage: siteConfig.defaultLocale,
+    isPartOf: {
+      '@type': 'WebSite',
+      name: siteConfig.title,
+      url: siteConfig.url,
+    },
+    ...(page.published_at && {
+      datePublished: page.published_at,
+    }),
+    ...(page.updated_at && {
+      dateModified: page.updated_at,
+    }),
+  };
+
   return (
     <>
+      <JsonLd data={webPageSchema} />
       <ReadingProgress />
-      <PostLayout hasToc={hasToc}>
+      <PostLayout hasToc={hasToc} contentKey={slug}>
         <div className="space-y-8">
           <SectionDivider>
             <ScrollReveal>
@@ -78,7 +110,10 @@ export default async function StaticPage({ params }: Props) {
 
           <SectionDivider>
             <ScrollReveal>
-              <article className="prose prose-lg prose-slate mx-auto max-w-none dark:prose-dark">
+              <article
+                data-toc-content={slug}
+                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
@@ -86,6 +121,8 @@ export default async function StaticPage({ params }: Props) {
                       alt={page.title}
                       width={1200}
                       height={600}
+                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
+                      priority
                       className="w-full rounded-xl shadow-lg"
                     />
                   </div>

app/robots.ts

@@ -0,0 +1,14 @@
+import { MetadataRoute } from 'next';
+
+export default function robots(): MetadataRoute.Robots {
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
+
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/api/', '/_next/', '/admin/'],
+    },
+    sitemap: `${siteUrl}/sitemap.xml`,
+  };
+}

app/sitemap.ts

@@ -0,0 +1,68 @@
+import { MetadataRoute } from 'next';
+import { allPosts, allPages } from 'contentlayer2/generated';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
+
+  // Homepage
+  const homepage = {
+    url: siteUrl,
+    lastModified: new Date(),
+    changeFrequency: 'daily' as const,
+    priority: 1,
+  };
+
+  // Blog listing page
+  const blogPage = {
+    url: `${siteUrl}/blog`,
+    lastModified: new Date(),
+    changeFrequency: 'daily' as const,
+    priority: 0.9,
+  };
+
+  // Tags page
+  const tagsPage = {
+    url: `${siteUrl}/tags`,
+    lastModified: new Date(),
+    changeFrequency: 'weekly' as const,
+    priority: 0.7,
+  };
+
+  // All blog posts
+  const posts = allPosts
+    .filter((post) => post.status === 'published')
+    .map((post) => ({
+      url: `${siteUrl}${post.url}`,
+      lastModified: new Date(post.updated_at || post.published_at || post.created_at || Date.now()),
+      changeFrequency: 'weekly' as const,
+      priority: 0.8,
+    }));
+
+  // All pages
+  const pages = allPages
+    .filter((page) => page.status === 'published')
+    .map((page) => ({
+      url: `${siteUrl}${page.url}`,
+      lastModified: new Date(page.updated_at || page.published_at || page.created_at || Date.now()),
+      changeFrequency: 'monthly' as const,
+      priority: 0.6,
+    }));
+
+  // All unique tags
+  const allTags = Array.from(
+    new Set(
+      allPosts
+        .filter((post) => post.status === 'published' && post.tags)
+        .flatMap((post) => post.tags || [])
+    )
+  );
+
+  const tagPages = allTags.map((tag) => ({
+    url: `${siteUrl}/tags/${encodeURIComponent(tag.toLowerCase().replace(/\s+/g, '-'))}`,
+    lastModified: new Date(),
+    changeFrequency: 'weekly' as const,
+    priority: 0.5,
+  }));
+
+  return [homepage, blogPage, tagsPage, ...posts, ...pages, ...tagPages];
+}

app/tags/[tag]/page.tsx

@@ -5,8 +5,7 @@ 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 { FiTag } from 'react-icons/fi';
-import { faTag } from '@fortawesome/free-solid-svg-icons';
 
 export function generateStaticParams() {
   const slugs = new Set<string>();
@@ -27,10 +26,12 @@ interface Props {
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const { tag: slug } = await params;
+  // Decode the slug since Next.js encodes non-ASCII characters in URLs
+  const decodedSlug = decodeURIComponent(slug);
   // Find original tag label by slug
   const tag = allPosts
     .flatMap((post) => post.tags ?? [])
-    .find((t) => getTagSlug(t) === slug);
+    .find((t) => getTagSlug(t) === decodedSlug);
 
   return {
     title: tag ? `標籤：${tag}` : '標籤'
@@ -39,13 +40,15 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 
 export default async function TagPage({ params }: Props) {
   const { tag: slug } = await params;
+  // Decode the slug since Next.js encodes non-ASCII characters in URLs
+  const decodedSlug = decodeURIComponent(slug);
 
   const posts = allPosts.filter(
-    (post) => post.tags && post.tags.some((t) => getTagSlug(t) === slug)
+    (post) => post.tags && post.tags.some((t) => getTagSlug(t) === decodedSlug)
   );
 
   const tagLabel =
-    posts[0]?.tags?.find((t) => getTagSlug(t) === slug) ?? slug;
+    posts[0]?.tags?.find((t) => getTagSlug(t) === decodedSlug) ?? decodedSlug;
 
   return (
     <SidebarLayout>
@@ -53,7 +56,7 @@ export default async function TagPage({ params }: Props) {
         <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" />
+              <FiTag className="h-5 w-5" />
               <span className="type-small uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
                 TAG ARCHIVE
               </span>

app/tags/page.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import type { Metadata } from 'next';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FiTag, FiTrendingUp } from 'react-icons/fi';
-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';
@@ -30,7 +29,7 @@ export default function TagIndexPage() {
           <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" />
+                <FiTag className="h-5 w-5" />
                 <span className="type-small uppercase tracking-[0.4em] text-slate-500 dark:text-slate-400">
                   標籤索引
                 </span>
@@ -65,7 +64,7 @@ export default function TagIndexPage() {
                   </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" />
+                  <FiTrendingUp className="h-3 w-3 text-orange-400" />
                   熱度 #{index + 1}
                 </span>
               </Link>

app/template.tsx

@@ -1,15 +1,24 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { useEffect, useRef } from 'react';
 
 export default function Template({ children }: { children: React.ReactNode }) {
-    return (
+  const containerRef = useRef<HTMLDivElement>(null);
-        <motion.div
+
-            initial={{ opacity: 0, y: 20 }}
+  useEffect(() => {
-            animate={{ opacity: 1, y: 0 }}
+    const container = containerRef.current;
-            transition={{ duration: 0.3, ease: 'easeOut' }}
+    if (!container) return;
-        >
+
-            {children}
+    // Trigger animation on mount
-        </motion.div>
+    container.style.animation = 'none';
-    );
+    // Force reflow
+    void container.offsetHeight;
+    container.style.animation = 'pageEnter 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards';
+  }, [children]);
+
+  return (
+    <div ref={containerRef} className="page-transition">
+      {children}
+    </div>
+  );
 }

components/hero.tsx

@@ -1,13 +1,6 @@
 import { siteConfig } from '@/lib/config';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FaGithub, FaTwitter, FaMastodon, FaGit, FaLinkedin } from 'react-icons/fa';
-import {
+import { FiMail, FiFeather } from 'react-icons/fi';
-  faGithub,
-  faTwitter,
-  faMastodon,
-  faGitAlt,
-  faLinkedin
-} from '@fortawesome/free-brands-svg-icons';
-import { faEnvelope, faPenNib } from '@fortawesome/free-solid-svg-icons';
 import { MetaItem } from './meta-item';
 
 export function Hero() {
@@ -19,37 +12,37 @@ export function Hero() {
       key: 'github',
       href: social.github,
       label: 'GitHub',
-      icon: faGithub
+      icon: FaGithub
     },
     social.twitter && {
       key: 'twitter',
       href: `https://twitter.com/${social.twitter.replace('@', '')}`,
       label: 'Twitter',
-      icon: faTwitter
+      icon: FaTwitter
     },
     social.mastodon && {
       key: 'mastodon',
       href: social.mastodon,
       label: 'Mastodon',
-      icon: faMastodon
+      icon: FaMastodon
     },
     social.gitea && {
       key: 'gitea',
       href: social.gitea,
       label: 'Gitea',
-      icon: faGitAlt
+      icon: FaGit
     },
     social.linkedin && {
       key: 'linkedin',
       href: social.linkedin,
       label: 'LinkedIn',
-      icon: faLinkedin
+      icon: FaLinkedin
     },
     social.email && {
       key: 'email',
       href: `mailto:${social.email}`,
       label: 'Email',
-      icon: faEnvelope
+      icon: FiMail
     }
   ].filter(Boolean) as {
     key: string;
@@ -73,7 +66,7 @@ export function Hero() {
             {name}
           </h1>
           <div className="mt-1">
-            <MetaItem icon={faPenNib}>
+            <MetaItem icon={FiFeather}>
               {tagline}
             </MetaItem>
           </div>
@@ -87,7 +80,7 @@ export function Hero() {
                   rel="noopener noreferrer"
                   className="motion-link flex items-center gap-2 rounded-full bg-white/80 px-3 py-1 text-slate-600 shadow-sm ring-1 ring-slate-200 hover:-translate-y-0.5 hover:bg-accent-soft hover:text-accent hover:shadow-md dark:bg-slate-900/80 dark:text-slate-200 dark:ring-slate-700"
                 >
-                  <FontAwesomeIcon icon={item.icon} className="h-3.5 w-3.5 text-accent" />
+                  <item.icon className="h-3.5 w-3.5 text-accent" />
                   <span>{item.label}</span>
                 </a>
               ))}

components/json-ld.tsx

@@ -0,0 +1,12 @@
+/**
+ * JSON-LD component for rendering structured data
+ * Safely serializes and injects Schema.org structured data into the page
+ */
+export function JsonLd({ data }: { data: Record<string, any> }) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}

components/layout-shell.tsx

@@ -1,6 +1,5 @@
 import { SiteHeader } from './site-header';
 import { SiteFooter } from './site-footer';
-
 import { BackToTop } from './back-to-top';
 
 export function LayoutShell({ children }: { children: React.ReactNode }) {

components/mastodon-feed.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { FaMastodon } from 'react-icons/fa';
+import { FiArrowRight } from 'react-icons/fi';
+import { siteConfig } from '@/lib/config';
+import {
+  parseMastodonUrl,
+  stripHtml,
+  truncateText,
+  formatRelativeTime,
+  fetchAccountId,
+  fetchStatuses,
+  type MastodonStatus
+} from '@/lib/mastodon';
+
+export function MastodonFeed() {
+  const [statuses, setStatuses] = useState<MastodonStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    const loadStatuses = async () => {
+      const mastodonUrl = siteConfig.social.mastodon;
+
+      if (!mastodonUrl) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        // Parse the Mastodon URL
+        const parsed = parseMastodonUrl(mastodonUrl);
+        if (!parsed) {
+          setError(true);
+          setLoading(false);
+          return;
+        }
+
+        const { instance, username } = parsed;
+
+        // Fetch account ID
+        const accountId = await fetchAccountId(instance, username);
+        if (!accountId) {
+          setError(true);
+          setLoading(false);
+          return;
+        }
+
+        // Fetch statuses (5 posts, exclude replies, include boosts)
+        const fetchedStatuses = await fetchStatuses(instance, accountId, 5);
+        setStatuses(fetchedStatuses);
+      } catch (err) {
+        console.error('Error loading Mastodon feed:', err);
+        setError(true);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadStatuses();
+  }, []);
+
+  // Don't render if no Mastodon URL is configured
+  if (!siteConfig.social.mastodon) {
+    return null;
+  }
+
+  // Don't render if there's an error (fail silently)
+  if (error) {
+    return null;
+  }
+
+  return (
+    <section className="motion-card group rounded-xl border bg-white px-4 py-3 shadow-sm hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-900/90">
+      {/* Header */}
+      <div className="type-small mb-3 flex items-center gap-2 font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
+        <FaMastodon className="h-4 w-4 text-purple-500 dark:text-purple-400" />
+        微網誌
+      </div>
+
+      {/* Content */}
+      {loading ? (
+        <div className="space-y-3">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="h-3 w-3/4 rounded bg-slate-200 dark:bg-slate-800"></div>
+              <div className="mt-2 h-3 w-full rounded bg-slate-200 dark:bg-slate-800"></div>
+              <div className="mt-2 h-2 w-1/3 rounded bg-slate-200 dark:bg-slate-800"></div>
+            </div>
+          ))}
+        </div>
+      ) : statuses.length === 0 ? (
+        <p className="type-small text-slate-400 dark:text-slate-500">
+          暫無動態
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {statuses.map((status) => {
+            // Handle boosts (reblogs)
+            const displayStatus = status.reblog || status;
+            const content = stripHtml(displayStatus.content);
+            const truncated = truncateText(content, 180);
+            const relativeTime = formatRelativeTime(status.created_at);
+            const hasMedia = displayStatus.media_attachments.length > 0;
+
+            return (
+              <article key={status.id} className="group/post">
+                <a
+                  href={status.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block space-y-1.5 transition-opacity hover:opacity-70"
+                >
+                  {/* Boost indicator */}
+                  {status.reblog && (
+                    <div className="type-small flex items-center gap-1 text-slate-400 dark:text-slate-500">
+                      <FiArrowRight className="h-2.5 w-2.5 rotate-90" />
+                      <span>轉推了</span>
+                    </div>
+                  )}
+
+                  {/* Content */}
+                  <p className="text-sm leading-relaxed text-slate-700 dark:text-slate-200">
+                    {truncated}
+                  </p>
+
+                  {/* Media indicator */}
+                  {hasMedia && (
+                    <div className="type-small text-slate-400 dark:text-slate-500">
+                      📎 包含 {displayStatus.media_attachments.length} 個媒體
+                    </div>
+                  )}
+
+                  {/* Timestamp */}
+                  <time
+                    className="type-small block text-slate-400 dark:text-slate-500"
+                    dateTime={status.created_at}
+                  >
+                    {relativeTime}
+                  </time>
+                </a>
+              </article>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Footer link */}
+      {!loading && statuses.length > 0 && (
+        <a
+          href={siteConfig.social.mastodon}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="type-small mt-3 flex items-center justify-end gap-1.5 text-slate-500 transition-colors hover:text-accent-textLight dark:text-slate-400 dark:hover:text-accent-textDark"
+        >
+          查看更多
+          <FiArrowRight className="h-3 w-3" />
+        </a>
+      )}
+    </section>
+  );
+}

components/meta-item.tsx

@@ -1,16 +1,15 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { ReactNode } from 'react';
 import clsx from 'clsx';
+import { IconType } from 'react-icons';
 
 interface MetaItemProps {
-  icon: IconDefinition;
+  icon: IconType;
   children: ReactNode;
   className?: string;
   tone?: 'default' | 'muted';
 }
 
-export function MetaItem({ icon, children, className, tone = 'default' }: MetaItemProps) {
+export function MetaItem({ icon: Icon, children, className, tone = 'default' }: MetaItemProps) {
   return (
     <span
       className={clsx(
@@ -19,7 +18,7 @@ export function MetaItem({ icon, children, className, tone = 'default' }: MetaIt
         className
       )}
     >
-      <FontAwesomeIcon icon={icon} className="h-3.5 w-3.5 text-slate-400 dark:text-slate-500" />
+      <Icon className="h-3.5 w-3.5 text-slate-400 dark:text-slate-500" />
       <span>{children}</span>
     </span>
   );

components/nav-menu.tsx

@@ -1,23 +1,26 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useRef, FocusEvent, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { createPortal } from 'react-dom';
 import {
-  faBars,
+  FiMenu,
-  faXmark,
+  FiX,
-  faHouse,
+  FiHome,
-  faNewspaper,
+  FiFileText,
-  faFileLines,
+  FiFile,
-  faUser,
+  FiUser,
-  faEnvelope,
+  FiMail,
-  faLocationDot,
+  FiMapPin,
-  faPenNib,
+  FiFeather,
-  faTags,
+  FiTag,
-  faServer,
+  FiServer,
-  faMicrochip,
+  FiCpu,
-  faBarsStaggered
+  FiList,
-} from '@fortawesome/free-solid-svg-icons';
+  FiChevronDown,
+  FiChevronRight
+} from 'react-icons/fi';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 export type IconKey =
   | 'home'
@@ -33,24 +36,25 @@ export type IconKey =
   | 'menu';
 
 const ICON_MAP: Record<IconKey, any> = {
-  home: faHouse,
+  home: FiHome,
-  blog: faNewspaper,
+  blog: FiFileText,
-  file: faFileLines,
+  file: FiFile,
-  user: faUser,
+  user: FiUser,
-  contact: faEnvelope,
+  contact: FiMail,
-  location: faLocationDot,
+  location: FiMapPin,
-  pen: faPenNib,
+  pen: FiFeather,
-  tags: faTags,
+  tags: FiTag,
-  server: faServer,
+  server: FiServer,
-  device: faMicrochip,
+  device: FiCpu,
-  menu: faBarsStaggered
+  menu: FiList
 };
 
 export interface NavLinkItem {
   key: string;
-  href: string;
+  href?: string;
-  label?: string;
+  label: string;
   iconKey: IconKey;
+  children?: NavLinkItem[];
 }
 
 interface NavMenuProps {
@@ -59,40 +63,243 @@ interface NavMenuProps {
 
 export function NavMenu({ items }: NavMenuProps) {
   const [open, setOpen] = useState(false);
+  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
+  const [expandedMobileItems, setExpandedMobileItems] = useState<string[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const closeTimer = useRef<number | null>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Lock body scroll when menu is open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [open]);
+
+  // Close menu on route change
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname]);
 
   const toggle = () => setOpen((val) => !val);
   const close = () => setOpen(false);
 
+  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+    if (!event.currentTarget.contains(event.relatedTarget as Node)) {
+      setActiveDropdown(null);
+    }
+  };
+
+  const clearCloseTimer = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+
+  const openDropdown = (key: string) => {
+    clearCloseTimer();
+    setActiveDropdown(key);
+  };
+
+  const scheduleCloseDropdown = () => {
+    clearCloseTimer();
+    closeTimer.current = window.setTimeout(() => setActiveDropdown(null), 180);
+  };
+
+  const toggleMobileItem = (key: string) => {
+    setExpandedMobileItems(prev =>
+      prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]
+    );
+  };
+
+  const renderDesktopChild = (item: NavLinkItem) => {
+    const Icon = ICON_MAP[item.iconKey] ?? FiFile;
+    return item.href ? (
+      <Link
+        key={item.key}
+        href={item.href}
+        className="motion-link inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800"
+        onClick={close}
+      >
+        <Icon className="h-4 w-4 text-slate-400" />
+        <span>{item.label}</span>
+      </Link>
+    ) : null;
+  };
+
+  const renderMobileItem = (item: NavLinkItem, depth = 0) => {
+    const Icon = ICON_MAP[item.iconKey] ?? FiFile;
+    const hasChildren = item.children && item.children.length > 0;
+    const isExpanded = expandedMobileItems.includes(item.key);
+
+    if (hasChildren) {
+      return (
+        <div key={item.key} className="flex flex-col">
+          <button
+            onClick={() => toggleMobileItem(item.key)}
+            className="flex w-full items-center justify-between rounded-xl px-4 py-3 text-base font-medium text-slate-700 transition-colors active:bg-slate-100 dark:text-slate-200 dark:active:bg-slate-800"
+          >
+            <div className="flex items-center gap-3">
+              <Icon className="h-5 w-5 text-slate-400" />
+              <span>{item.label}</span>
+            </div>
+            <FiChevronRight
+              className={`h-5 w-5 text-slate-400 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
+            />
+          </button>
+          <div
+            className={`grid transition-all duration-200 ease-in-out ${isExpanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+              }`}
+          >
+            <div className="overflow-hidden">
+              <div className="flex flex-col gap-1 pl-4 pt-1">
+                {item.children!.map(child => renderMobileItem(child, depth + 1))}
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return item.href ? (
+      <Link
+        key={item.key}
+        href={item.href}
+        className="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-base font-medium text-slate-700 transition-colors active:bg-slate-100 dark:text-slate-200 dark:active:bg-slate-800"
+        onClick={close}
+      >
+        <Icon className="h-5 w-5 text-slate-400" />
+        <span>{item.label}</span>
+      </Link>
+    ) : null;
+  };
+
   return (
-    <div className="flex items-center gap-3">
+    <>
+      {/* Mobile Menu Trigger */}
       <button
         type="button"
-        className="sm:hidden inline-flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition duration-180 ease-snappy hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800"
+        className="relative z-50 inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800 sm:hidden"
         aria-label={open ? '關閉選單' : '開啟選單'}
         aria-expanded={open}
         onClick={toggle}
       >
-        <FontAwesomeIcon icon={open ? faXmark : faBars} className="h-4 w-4" />
+        <div className="relative h-5 w-5">
+          <span
+            className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? 'rotate-45' : '-translate-y-1.5'
+              }`}
+          />
+          <span
+            className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? 'opacity-0' : 'opacity-100'
+              }`}
+          />
+          <span
+            className={`absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 bg-current transition-all duration-300 ease-snappy ${open ? '-rotate-45' : 'translate-y-1.5'
+              }`}
+          />
+        </div>
       </button>
-      <nav
+
-        className={`${open ? 'flex' : 'hidden'} flex-col gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3`}
+      {/* Mobile Menu Overlay - Portaled */}
-      >
+      {mounted && createPortal(
-        {items.map((item) => (
+        <div
-          <Link
+          className={`fixed inset-0 z-[100] flex flex-col bg-white/95 backdrop-blur-xl transition-all duration-300 ease-snappy dark:bg-gray-950/95 sm:hidden ${open ? 'visible opacity-100' : 'invisible opacity-0 pointer-events-none'
-            key={item.key}
+            }`}
-            href={item.href}
+        >
-            className="motion-link type-nav group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
+          {/* Close button area */}
-            onClick={close}
+          <div className="flex items-center justify-end px-4 py-3">
-          >
+            <button
-            <FontAwesomeIcon
+              type="button"
-              icon={ICON_MAP[item.iconKey] ?? faFileLines}
+              className="inline-flex h-10 w-10 items-center justify-center rounded-full text-slate-600 transition-colors hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200 dark:hover:bg-slate-800"
-              className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-accent"
+              onClick={close}
-            />
+              aria-label="Close menu"
-            <span>{item.label}</span>
+            >
-            <span className="absolute inset-x-3 -bottom-0.5 h-px origin-left scale-x-0 bg-accent transition duration-180 ease-snappy group-hover:scale-x-100" aria-hidden="true" />
+              <div className="relative h-5 w-5">
-          </Link>
+                <span className="absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 rotate-45 bg-current" />
-        ))}
+                <span className="absolute left-0 top-1/2 h-0.5 w-5 -translate-y-1/2 -rotate-45 bg-current" />
+              </div>
+            </button>
+          </div>
+
+          <div className="container mx-auto flex flex-1 flex-col px-4 pb-8">
+            <div className="flex flex-1 flex-col gap-2 overflow-y-auto pt-4">
+              {items.map(item => renderMobileItem(item))}
+            </div>
+
+            <div className="mt-auto pt-8 text-center text-xs text-slate-400">
+              <p>© {new Date().getFullYear()} All rights reserved.</p>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Desktop Menu */}
+      <nav className="hidden sm:flex sm:items-center sm:gap-3">
+        {items.map((item) => {
+          if (item.children && item.children.length > 0) {
+            const Icon = ICON_MAP[item.iconKey] ?? FiFile;
+            const isOpen = activeDropdown === item.key;
+            return (
+              <div
+                key={item.key}
+                className="group relative"
+                onMouseEnter={() => openDropdown(item.key)}
+                onMouseLeave={scheduleCloseDropdown}
+                onFocus={() => openDropdown(item.key)}
+                onBlur={handleBlur}
+              >
+                <button
+                  type="button"
+                  className="motion-link type-nav inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
+                  aria-haspopup="menu"
+                  aria-expanded={isOpen}
+                >
+                  <Icon className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-accent" />
+                  <span>{item.label}</span>
+                  <FiChevronDown className="h-3 w-3 text-slate-400 transition group-hover:text-accent" />
+                </button>
+
+                <div
+                  className={`absolute left-0 top-full z-50 hidden min-w-[12rem] rounded-2xl border border-slate-200 bg-white p-2 shadow-lg transition duration-200 ease-snappy dark:border-slate-800 dark:bg-slate-900 sm:block ${isOpen ? 'pointer-events-auto translate-y-2 opacity-100' : 'pointer-events-none translate-y-1 opacity-0'
+                    }`}
+                  role="menu"
+                  aria-label={item.label}
+                >
+                  <div className="flex flex-col gap-1">
+                    {item.children.map((child) => renderDesktopChild(child))}
+                  </div>
+                </div>
+              </div>
+            );
+          }
+
+          const Icon = ICON_MAP[item.iconKey] ?? FiFile;
+
+          return item.href ? (
+            <Link
+              key={item.key}
+              href={item.href}
+              className="motion-link type-nav group relative inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-slate-600 hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:text-slate-200"
+              onClick={close}
+            >
+              <Icon className="h-3.5 w-3.5 text-slate-400 transition group-hover:text-accent" />
+              <span>{item.label}</span>
+              <span className="absolute inset-x-3 -bottom-0.5 h-px origin-left scale-x-0 bg-accent transition duration-180 ease-snappy group-hover:scale-x-100" aria-hidden="true" />
+            </Link>
+          ) : null;
+        })}
       </nav>
-    </div>
+    </>
   );
 }

components/optimized-video.tsx

@@ -0,0 +1,68 @@
+import { HTMLAttributes } from 'react';
+import clsx from 'clsx';
+
+interface OptimizedVideoProps extends Omit<HTMLAttributes<HTMLVideoElement>, 'src'> {
+  src: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  playsInline?: boolean;
+  controls?: boolean;
+  poster?: string;
+}
+
+/**
+ * Optimized video component that provides:
+ * - Multiple format support (WebM and MP4) for better browser compatibility
+ * - Proper accessibility attributes
+ * - Automatic GIF-like behavior when autoPlay is enabled
+ * - Lightweight alternative to GIF files with 80-95% file size reduction
+ */
+export function OptimizedVideo({
+  src,
+  alt,
+  width,
+  height,
+  autoPlay = true,
+  loop = true,
+  muted = true,
+  playsInline = true,
+  controls = false,
+  poster,
+  className,
+  ...props
+}: OptimizedVideoProps) {
+  // Remove file extension to get base path
+  const basePath = src.replace(/\.(mp4|webm|gif)$/i, '');
+
+  return (
+    <video
+      width={width}
+      height={height}
+      autoPlay={autoPlay}
+      loop={loop}
+      muted={muted}
+      playsInline={playsInline}
+      controls={controls}
+      poster={poster}
+      className={clsx('inline-block', className)}
+      aria-label={alt}
+      {...props}
+    >
+      {/* WebM for better compression (Chrome, Firefox, Edge) */}
+      <source src={`${basePath}.webm`} type="video/webm" />
+
+      {/* MP4 for Safari and older browsers */}
+      <source src={`${basePath}.mp4`} type="video/mp4" />
+
+      {/* Fallback message for browsers that don't support video */}
+      <p className="text-slate-500 dark:text-slate-400">
+        Your browser does not support the video tag.
+        {alt && <span className="block mt-2">{alt}</span>}
+      </p>
+    </video>
+  );
+}

components/post-card.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import type { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
-import { faCalendarDays, faTags } from '@fortawesome/free-solid-svg-icons';
+import { FiCalendar, FiTag } from 'react-icons/fi';
 import { MetaItem } from './meta-item';
 
 interface PostCardProps {
@@ -26,6 +26,8 @@ export function PostCard({ post, showTags = true }: PostCardProps) {
             alt={post.title}
             width={640}
             height={360}
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            loading="lazy"
             className="mx-auto max-h-60 w-full object-contain transition-transform duration-300 ease-out group-hover:scale-105"
           />
         </div>
@@ -33,14 +35,14 @@ export function PostCard({ post, showTags = true }: PostCardProps) {
       <div className="space-y-3 px-4 py-4">
         <div className="flex flex-wrap items-center gap-3 text-xs">
           {post.published_at && (
-            <MetaItem icon={faCalendarDays}>
+            <MetaItem icon={FiCalendar}>
               {new Date(post.published_at).toLocaleDateString(
                 siteConfig.defaultLocale
               )}
             </MetaItem>
           )}
           {showTags && post.tags && post.tags.length > 0 && (
-            <MetaItem icon={faTags} tone="muted">
+            <MetaItem icon={FiTag} tone="muted">
               {post.tags.slice(0, 3).join(', ')}
             </MetaItem>
           )}

components/post-layout.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { createPortal } from 'react-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FiList, FiX } from 'react-icons/fi';
-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';
@@ -12,81 +11,138 @@ function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
 }
 
-export function PostLayout({ children, hasToc = true }: { children: React.ReactNode; hasToc?: boolean }) {
+export function PostLayout({ children, hasToc = true, contentKey }: { children: React.ReactNode; hasToc?: boolean; contentKey?: string }) {
-    const [isTocOpen, setIsTocOpen] = useState(hasToc);
+    const [isTocOpen, setIsTocOpen] = useState(false); // Default closed on mobile
+    const [isDesktopTocOpen, setIsDesktopTocOpen] = useState(hasToc); // Separate state for desktop
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    // Lock body scroll when mobile TOC is open
+    useEffect(() => {
+        if (isTocOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isTocOpen]);
+
+    const mobileToc = hasToc && mounted
+        ? createPortal(
+            <>
+                {/* Backdrop */}
+                <div
+                    className={cn(
+                        "fixed inset-0 z-[1140] bg-black/40 backdrop-blur-sm transition-opacity duration-300 lg:hidden",
+                        isTocOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+                    )}
+                    onClick={() => setIsTocOpen(false)}
+                    aria-hidden="true"
+                />
+
+                {/* Drawer */}
+                <div
+                    className={cn(
+                        "fixed bottom-0 left-0 right-0 z-[1150] flex max-h-[85vh] flex-col rounded-t-2xl border-t border-white/20 bg-white/95 shadow-2xl backdrop-blur-xl transition-transform duration-300 ease-snappy dark:border-white/10 dark:bg-slate-900/95 lg:hidden",
+                        isTocOpen ? "translate-y-0" : "translate-y-full"
+                    )}
+                >
+                    {/* Handle / Header */}
+                    <div className="flex items-center justify-between border-b border-slate-200/50 px-6 py-4 dark:border-slate-700/50" onClick={() => setIsTocOpen(false)}>
+                        <div className="flex items-center gap-2 font-semibold text-slate-900 dark:text-slate-100">
+                            <FiList className="h-5 w-5 text-slate-500" />
+                            <span>目錄</span>
+                        </div>
+                        <button
+                            onClick={() => setIsTocOpen(false)}
+                            className="rounded-full p-1 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
+                        >
+                            <FiX className="h-5 w-5" />
+                        </button>
+                    </div>
+
+                    {/* Content */}
+                    <div className="flex-1 overflow-y-auto px-6 py-6">
+                        <PostToc
+                            contentKey={contentKey}
+                            onLinkClick={() => setIsTocOpen(false)}
+                            showTitle={false}
+                            className="w-full"
+                        />
+                    </div>
+                </div>
+            </>,
+            document.body
+        )
+        : null;
+
+    const tocButton = hasToc && mounted ? (
+        <button
+            onClick={() => setIsTocOpen(true)}
+            className={cn(
+                "fixed bottom-6 right-16 z-40 flex h-9 items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 text-sm font-medium text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 lg:hidden",
+                isTocOpen ? "opacity-0 pointer-events-none" : "opacity-100"
+            )}
+            aria-label="Open Table of Contents"
+        >
+            <FiList className="h-4 w-4" />
+            <span>目錄</span>
+        </button>
+    ) : null;
+
+    const desktopTocButton = hasToc && mounted ? (
+        <button
+            onClick={() => setIsDesktopTocOpen(!isDesktopTocOpen)}
+            className={cn(
+                "fixed bottom-6 right-16 z-40 hidden h-9 items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 text-sm font-medium text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 lg:flex",
+            )}
+            aria-label={isDesktopTocOpen ? "Close Table of Contents" : "Open Table of Contents"}
+        >
+            <FiList className="h-4 w-4" />
+            <span>{isDesktopTocOpen ? '隱藏目錄' : '顯示目錄'}</span>
+        </button>
+    ) : null;
 
     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]"
+                isDesktopTocOpen && hasToc ? "lg:grid-cols-[1fr_16rem] toc-open" : "lg:grid-cols-[1fr_0rem]"
             )}>
                 {/* Main Content Area */}
                 <div className="min-w-0">
-                    <motion.div
+                    <div className={cn("mx-auto transition-all duration-500 ease-snappy", isDesktopTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}>
-                        layout
-                        className={cn("mx-auto transition-all duration-500 ease-snappy", isTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}
-                    >
                         {children}
-                    </motion.div>
+                    </div>
                 </div>
 
                 {/* Desktop Sidebar (TOC) */}
                 <aside className="hidden lg:block">
                     <div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
-                        <AnimatePresence mode="wait">
+                        {isDesktopTocOpen && hasToc && (
-                            {isTocOpen && hasToc && (
+                            <div className="toc-sidebar h-full overflow-y-auto pr-2">
-                                <motion.div
+                                <PostToc contentKey={contentKey} />
-                                    initial={{ opacity: 0, x: 20 }}
+                            </div>
-                                    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>
 
             {/* Mobile TOC Overlay */}
-            <AnimatePresence>
+            {mobileToc}
-                {isTocOpen && hasToc && (
-                    <motion.div
-                        initial={{ opacity: 0, y: 20 }}
-                        animate={{ opacity: 1, y: 0 }}
-                        exit={{ opacity: 0, y: 20 }}
-                        transition={{ duration: 0.2 }}
-                        className="fixed bottom-24 right-4 z-40 w-72 rounded-2xl border border-white/20 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90 lg:hidden"
-                    >
-                        <div className="max-h-[60vh] overflow-y-auto">
-                            <PostToc onLinkClick={() => setIsTocOpen(false)} />
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
 
-            {/* Toggle Button (Glassmorphism Pill) */}
+            {/* Toggle Buttons - Rendered via Portal */}
-            {hasToc && (
+            {mounted && createPortal(
-                <motion.button
+                <>
-                    layout
+                    {tocButton}
-                    onClick={() => setIsTocOpen(!isTocOpen)}
+                    {desktopTocButton}
-                    className={cn(
+                </>,
-                        "fixed bottom-8 right-8 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",
+                document.body
-                        "text-sm font-medium text-slate-600 dark:text-slate-300",
-                        "lg:right-20" // Adjust position for desktop
-                    )}
-                    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>
     );

components/post-list-item.tsx

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { Post } from 'contentlayer2/generated';
 import { siteConfig } from '@/lib/config';
-import { faCalendarDays, faTags } from '@fortawesome/free-solid-svg-icons';
+import { FiCalendar, FiTag } from 'react-icons/fi';
 import { MetaItem } from './meta-item';
 
 interface Props {
@@ -28,6 +28,8 @@ export function PostListItem({ post }: Props) {
             alt={post.title}
             width={320}
             height={240}
+            sizes="(max-width: 640px) 96px, 160px"
+            loading="lazy"
             className="h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-105"
           />
         </div>
@@ -35,14 +37,14 @@ export function PostListItem({ post }: Props) {
       <div className="flex-1 space-y-1.5">
         <div className="flex flex-wrap gap-3 text-xs">
           {post.published_at && (
-            <MetaItem icon={faCalendarDays}>
+            <MetaItem icon={FiCalendar}>
               {new Date(post.published_at).toLocaleDateString(
                 siteConfig.defaultLocale
               )}
             </MetaItem>
           )}
           {post.tags && post.tags.length > 0 && (
-            <MetaItem icon={faTags} tone="muted">
+            <MetaItem icon={FiTag} tone="muted">
               {post.tags.slice(0, 3).join(', ')}
             </MetaItem>
           )}

components/post-list-with-controls.tsx

@@ -2,13 +2,7 @@
 
 import { useEffect, useMemo, useState } from 'react';
 import { Post, Page } from 'contentlayer2/generated';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FiArrowDown, FiArrowUp, FiSearch, FiList } from 'react-icons/fi';
-import {
-  faArrowDownWideShort,
-  faArrowUpWideShort,
-  faMagnifyingGlass,
-  faListUl
-} from '@fortawesome/free-solid-svg-icons';
 import { siteConfig } from '@/lib/config';
 import { PostListItem } from './post-list-item';
 import { TimelineWrapper } from './timeline-wrapper';
@@ -83,7 +77,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
     <div className="space-y-4">
       <div className="flex flex-col gap-4 text-xs text-slate-500 dark:text-slate-400 sm:flex-row sm:items-center sm:justify-between">
         <div className="inline-flex items-center gap-2 rounded-full bg-slate-100/70 px-2 py-1 text-slate-600 dark:bg-slate-800/70 dark:text-slate-300">
-          <FontAwesomeIcon icon={faListUl} className="h-3.5 w-3.5" />
+          <FiList className="h-3.5 w-3.5" />
           <span>排序</span>
           <button
             type="button"
@@ -93,7 +87,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
               : 'bg-white text-slate-600 hover:bg-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-700'
               }`}
           >
-            <FontAwesomeIcon icon={faArrowDownWideShort} className="h-3 w-3" />
+            <FiArrowDown className="h-3 w-3" />
             新到舊
           </button>
           <button
@@ -104,7 +98,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
               : 'bg-white text-slate-600 hover:bg-slate-200 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-700'
               }`}
           >
-            <FontAwesomeIcon icon={faArrowUpWideShort} className="h-3 w-3" />
+            <FiArrowUp className="h-3 w-3" />
             舊到新
           </button>
         </div>
@@ -113,8 +107,7 @@ export function PostListWithControls({ posts, pageSize }: Props) {
             搜尋文章
           </label>
           <div className="relative w-full sm:w-64">
-            <FontAwesomeIcon
+            <FiSearch
-              icon={faMagnifyingGlass}
               className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400"
             />
             <input

components/post-storyline-nav.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { Post } from 'contentlayer2/generated';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FiArrowLeft, FiArrowRight } from 'react-icons/fi';
-import { faArrowLeftLong, faArrowRightLong } from '@fortawesome/free-solid-svg-icons';
 
 interface Props {
   current: Post;
@@ -84,10 +83,11 @@ function Station({ station }: { station: StationConfig }) {
       className={`group flex flex-col gap-1 text-center transition duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 dark:focus-visible:ring-blue-300 ${alignClass}`}
     >
       <p className="text-[11px] uppercase tracking-[0.4em] text-slate-400 transition group-hover:text-blue-500 dark:text-slate-500">
-        <FontAwesomeIcon
+        {align === 'end' ? (
-          icon={align === 'end' ? faArrowLeftLong : faArrowRightLong}
+          <FiArrowLeft className="mr-1 inline h-3 w-3" />
-          className="mr-1 h-3 w-3"
+        ) : (
-        />
+          <FiArrowRight className="mr-1 inline h-3 w-3" />
+        )}
         {label}
       </p>
       <p className="text-lg font-semibold leading-snug tracking-tight text-slate-900 transition group-hover:text-blue-600 dark:text-slate-50 dark:group-hover:text-blue-300">

components/post-toc.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { useEffect, useRef, useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FiList } from 'react-icons/fi';
-import { faListUl } from '@fortawesome/free-solid-svg-icons';
 
 interface TocItem {
   id: string;
@@ -10,7 +9,17 @@ interface TocItem {
   depth: number;
 }
 
-export function PostToc({ onLinkClick }: { onLinkClick?: () => void }) {
+export function PostToc({
+  onLinkClick,
+  contentKey,
+  showTitle = true,
+  className
+}: {
+  onLinkClick?: () => void;
+  contentKey?: string;
+  showTitle?: boolean;
+  className?: string;
+}) {
   const [items, setItems] = useState<TocItem[]>([]);
   const [activeId, setActiveId] = useState<string | null>(null);
   const listRef = useRef<HTMLDivElement | null>(null);
@@ -18,40 +27,70 @@ export function PostToc({ onLinkClick }: { onLinkClick?: () => void }) {
   const [indicator, setIndicator] = useState({ top: 0, opacity: 0 });
 
   useEffect(() => {
-    const headings = Array.from(
+    // Clear items immediately when content changes
-      document.querySelectorAll<HTMLElement>('article h2, article h3')
+    setItems([]);
-    );
+    setActiveId(null);
-    const mapped = headings
+    itemRefs.current = {};
-      .filter((el) => el.id)
-      .map((el) => ({
-        id: el.id,
-        text: el.innerText,
-        depth: el.tagName === 'H3' ? 3 : 2
-      }));
-    setItems(mapped);
 
-    const observer = new IntersectionObserver(
+    const containerSelector = contentKey
-      (entries) => {
+      ? `[data-toc-content="${contentKey}"]`
-        entries.forEach((entry) => {
+      : '[data-toc-content]';
-          if (entry.isIntersecting) {
+    const container = document.querySelector<HTMLElement>(containerSelector);
-            const id = (entry.target as HTMLElement).id;
+
-            if (id) {
+    if (!container) {
-              setActiveId(id);
+      return undefined;
-            }
+    }
+
+    let observer: IntersectionObserver | null = null;
+    let rafId1: number;
+    let rafId2: number;
+
+    // Use double requestAnimationFrame to ensure DOM has been painted
+    // This is more reliable than setTimeout for DOM updates
+    rafId1 = requestAnimationFrame(() => {
+      rafId2 = requestAnimationFrame(() => {
+        const headings = Array.from(
+          container.querySelectorAll<HTMLElement>('h2, h3')
+        );
+        const mapped = headings
+          .filter((el) => el.id)
+          .map((el) => ({
+            id: el.id,
+            text: el.innerText,
+            depth: el.tagName === 'H3' ? 3 : 2
+          }));
+        setItems(mapped);
+
+        observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                const id = (entry.target as HTMLElement).id;
+                if (id) {
+                  setActiveId(id);
+                }
+              }
+            });
+          },
+          {
+            // Trigger when heading is in upper 40% of viewport
+            rootMargin: '0px 0px -60% 0px',
+            threshold: 0.1
           }
-        });
+        );
-      },
+
-      {
+        headings.forEach((el) => observer?.observe(el));
-        // Trigger when heading is in upper 40% of viewport
+      });
-        rootMargin: '0px 0px -60% 0px',
+    });
-        threshold: 0.1
+
+    return () => {
+      cancelAnimationFrame(rafId1);
+      cancelAnimationFrame(rafId2);
+      if (observer) {
+        observer.disconnect();
       }
-    );
+    };
-
+  }, [contentKey]);
-    headings.forEach((el) => observer.observe(el));
-
-    return () => observer.disconnect();
-  }, []);
 
   useEffect(() => {
     if (!activeId || !listRef.current) {
@@ -97,11 +136,13 @@ export function PostToc({ onLinkClick }: { onLinkClick?: () => void }) {
   if (items.length === 0) return null;
 
   return (
-    <nav className="not-prose sticky top-20 text-slate-500 dark:text-slate-400">
+    <nav className={`not-prose text-slate-500 dark:text-slate-400 ${className || 'sticky top-20'}`}>
-      <div className="mb-2 inline-flex items-center gap-2 font-semibold text-slate-700 dark:text-slate-200">
+      {showTitle && (
-        <FontAwesomeIcon icon={faListUl} className="h-4 w-4 text-slate-400" />
+        <div className="mb-2 inline-flex items-center gap-2 font-semibold text-slate-700 dark:text-slate-200">
-        目錄
+          <FiList className="h-4 w-4 text-slate-400" />
-      </div>
+          目錄
+        </div>
+      )}
       <div className="relative pl-4">
         <span className="absolute left-1 top-0 h-full w-px bg-slate-200 dark:bg-slate-800" aria-hidden="true" />
         <span
@@ -126,11 +167,10 @@ export function PostToc({ onLinkClick }: { onLinkClick?: () => void }) {
               <a
                 href={`#${item.id}`}
                 onClick={handleClick(item.id)}
-                className={`line-clamp-2 inline-flex items-center pl-2 hover:text-blue-600 dark:hover:text-blue-400 ${
+                className={`line-clamp-2 inline-flex items-center py-1 pl-2 hover:text-blue-600 dark:hover:text-blue-400 ${item.id === activeId
-                  item.id === activeId
                     ? 'text-blue-600 dark:text-blue-400 font-semibold'
                     : ''
-                }`}
+                  }`}
               >
                 {item.text}
               </a>

components/reading-progress.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 export function ReadingProgress() {
   const [mounted, setMounted] = useState(false);
@@ -29,19 +30,21 @@ export function ReadingProgress() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, [mounted]);
 
+
   if (!mounted) return null;
 
-  return (
+  return createPortal(
-    <div className="pointer-events-none fixed inset-x-0 top-0 z-40 h-px bg-transparent">
+    <div className="pointer-events-none fixed inset-x-0 top-0 z-[1200] h-1.5 bg-transparent">
-      <div className="relative h-1 w-full overflow-visible">
+      <div className="relative h-1.5 w-full overflow-visible">
         <div
-          className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-blue-500/70 via-sky-400/70 to-indigo-500/70 shadow-[0_0_8px_rgba(59,130,246,0.45)] transition-[transform,opacity] duration-300 ease-out dark:from-blue-400/70 dark:via-sky-300/70 dark:to-indigo-400/70"
+          className="absolute inset-y-0 left-0 w-full origin-left rounded-full bg-gradient-to-r from-[rgba(124,58,237,0.9)] via-[rgba(167,139,250,0.9)] to-[rgba(14,165,233,0.8)] shadow-[0_0_12px_rgba(124,58,237,0.5)] transition-[transform,opacity] duration-300 ease-out"
           style={{ transform: `scaleX(${progress / 100})`, opacity: progress > 0 ? 1 : 0 }}
         >
-          <span className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/70 blur-[1px] dark:bg-slate-900/70" aria-hidden="true" />
+          <span className="absolute -right-2 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-white/80 blur-[1px] dark:bg-slate-900/80" aria-hidden="true" />
         </div>
         <span className="absolute inset-x-0 top-2 h-px bg-gradient-to-r from-transparent via-blue-200/40 to-transparent blur-sm dark:via-blue-900/30" aria-hidden="true" />
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }

components/right-sidebar.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link';
 import Image from 'next/image';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FaGithub, FaMastodon, FaLinkedin } from 'react-icons/fa';
-import { faGithub, faMastodon, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { FiTrendingUp, FiArrowRight } from 'react-icons/fi';
-import { faFire, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { siteConfig } from '@/lib/config';
 import { getAllTagsWithCount } from '@/lib/posts';
 import { allPages } from 'contentlayer2/generated';
+import { MastodonFeed } from './mastodon-feed';
 
 export function RightSidebar() {
   const tags = getAllTagsWithCount().slice(0, 5);
@@ -20,19 +20,19 @@ export function RightSidebar() {
     siteConfig.social.github && {
       key: 'github',
       href: siteConfig.social.github,
-      icon: faGithub,
+      icon: FaGithub,
       label: 'GitHub'
     },
     siteConfig.social.mastodon && {
       key: 'mastodon',
       href: siteConfig.social.mastodon,
-      icon: faMastodon,
+      icon: FaMastodon,
       label: 'Mastodon'
     },
     siteConfig.social.linkedin && {
       key: 'linkedin',
       href: siteConfig.social.linkedin,
-      icon: faLinkedin,
+      icon: FaLinkedin,
       label: 'LinkedIn'
     }
   ].filter(Boolean) as { key: string; href: string; icon: any; label: string }[];
@@ -76,7 +76,7 @@ export function RightSidebar() {
                     aria-label={item.label}
                     className="motion-link inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:-translate-y-0.5 hover:bg-accent-soft hover:text-accent dark:bg-slate-800 dark:text-slate-200"
                   >
-                    <FontAwesomeIcon icon={item.icon} className="h-4 w-4" />
+                    <item.icon className="h-4 w-4" />
                   </a>
                 ))}
               </div>
@@ -91,10 +91,13 @@ export function RightSidebar() {
           </div>
         </section>
 
+        {/* Mastodon Feed */}
+        <MastodonFeed />
+
         {tags.length > 0 && (
           <section className="motion-card rounded-xl border bg-white px-4 py-3 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
             <h2 className="type-small flex items-center gap-2 font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
-              <FontAwesomeIcon icon={faFire} className="h-3 w-3 text-orange-400" />
+              <FiTrendingUp className="h-3 w-3 text-orange-400" />
               熱門標籤
             </h2>
             <div className="mt-2 flex flex-wrap gap-2 text-base">
@@ -116,7 +119,7 @@ export function RightSidebar() {
             </div>
             <div className="mt-3 flex items-center justify-between type-small text-slate-500 dark:text-slate-400">
               <span className="inline-flex items-center gap-1">
-                <FontAwesomeIcon icon={faArrowRight} className="h-3 w-3" />
+                <FiArrowRight className="h-3 w-3" />
                 一覽所有標籤
               </span>
               <Link

components/scroll-reveal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 
 interface ScrollRevealProps {
@@ -15,26 +15,25 @@ export function ScrollReveal({
   once = true
 }: ScrollRevealProps) {
   const ref = useRef<HTMLDivElement | null>(null);
-  const [visible, setVisible] = useState(false);
 
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
 
+    // Fallback for browsers without IntersectionObserver
     if (!('IntersectionObserver' in window)) {
-      setVisible(true);
+      el.classList.add('is-visible');
       return;
     }
 
-    let cancelled = false;
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            if (!cancelled) setVisible(true);
+            entry.target.classList.add('is-visible');
             if (once) observer.unobserve(entry.target);
           } else if (!once) {
-            if (!cancelled) setVisible(false);
+            entry.target.classList.remove('is-visible');
           }
         });
       },
@@ -46,12 +45,12 @@ export function ScrollReveal({
 
     observer.observe(el);
 
+    // Fallback timeout for slow connections
     const fallback = window.setTimeout(() => {
-      if (!cancelled) setVisible(true);
+      el.classList.add('is-visible');
     }, 500);
 
     return () => {
-      cancelled = true;
       observer.disconnect();
       window.clearTimeout(fallback);
     };
@@ -60,13 +59,7 @@ export function ScrollReveal({
   return (
     <div
       ref={ref}
-      className={clsx(
+      className={clsx('scroll-reveal', className)}
-        'motion-safe:transition-all motion-safe:duration-500 motion-safe:ease-out',
-        'motion-safe:opacity-0 motion-safe:translate-y-3',
-        visible &&
-          'motion-safe:opacity-100 motion-safe:translate-y-0 motion-safe:animate-none',
-        className
-      )}
     >
       {children}
     </div>

components/search-modal.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { FiSearch, FiX } from 'react-icons/fi';
+
+interface SearchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function SearchModal({ isOpen, onClose }: SearchModalProps) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const searchContainerRef = useRef<HTMLDivElement>(null);
+  const pagefindUIRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    let link: HTMLLinkElement | null = null;
+    let script: HTMLScriptElement | null = null;
+
+    // Load Pagefind UI dynamically when modal opens
+    const loadPagefind = async () => {
+      if (pagefindUIRef.current) {
+        // Already loaded
+        return;
+      }
+
+      try {
+        // Load Pagefind UI CSS
+        link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = '/_pagefind/pagefind-ui.css';
+        document.head.appendChild(link);
+
+        // Load Pagefind UI JS
+        script = document.createElement('script');
+        script.src = '/_pagefind/pagefind-ui.js';
+        script.onload = () => {
+          if (searchContainerRef.current && (window as any).PagefindUI) {
+            pagefindUIRef.current = new (window as any).PagefindUI({
+              element: searchContainerRef.current,
+              bundlePath: '/_pagefind/',
+              showSubResults: true,
+              showImages: false,
+              excerptLength: 15,
+              resetStyles: false,
+              autofocus: true,
+              translations: {
+                placeholder: '搜尋文章...',
+                clear_search: '清除',
+                load_more: '載入更多結果',
+                search_label: '搜尋此網站',
+                filters_label: '篩選',
+                zero_results: '找不到 [SEARCH_TERM] 的結果',
+                many_results: '找到 [COUNT] 個 [SEARCH_TERM] 的結果',
+                one_result: '找到 [COUNT] 個 [SEARCH_TERM] 的結果',
+                alt_search: '找不到 [SEARCH_TERM] 的結果。改為顯示 [DIFFERENT_TERM] 的結果',
+                search_suggestion: '找不到 [SEARCH_TERM] 的結果。請嘗試以下搜尋：',
+                searching: '搜尋中...'
+              }
+            });
+            setIsLoaded(true);
+
+            // Auto-focus the search input after a short delay
+            setTimeout(() => {
+              const input = searchContainerRef.current?.querySelector('input[type="search"]') as HTMLInputElement;
+              if (input) {
+                input.focus();
+              }
+            }, 100);
+          }
+        };
+        document.head.appendChild(script);
+      } catch (error) {
+        console.error('Failed to load Pagefind:', error);
+      }
+    };
+
+    loadPagefind();
+
+    // Cleanup function to prevent duplicate initializations
+    return () => {
+      if (link && link.parentNode) {
+        link.parentNode.removeChild(link);
+      }
+      if (script && script.parentNode) {
+        script.parentNode.removeChild(script);
+      }
+      if (pagefindUIRef.current && pagefindUIRef.current.destroy) {
+        pagefindUIRef.current.destroy();
+        pagefindUIRef.current = null;
+      }
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    // Prevent body scroll when modal is open
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  // Use portal to render modal at document body level to avoid z-index stacking context issues
+  if (typeof window === 'undefined') return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[9999] flex items-start justify-center bg-black/50 backdrop-blur-sm pt-20 px-4"
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-3xl rounded-2xl border border-white/40 bg-white/95 shadow-2xl backdrop-blur-md dark:border-white/10 dark:bg-slate-900/95"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-slate-200 px-6 py-4 dark:border-slate-700">
+          <div className="flex items-center gap-2 text-slate-600 dark:text-slate-300">
+            <FiSearch className="h-5 w-5" />
+            <span className="text-sm font-medium">全站搜尋</span>
+          </div>
+          <button
+            onClick={onClose}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
+            aria-label="關閉搜尋"
+          >
+            <FiX className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Search Container */}
+        <div className="max-h-[60vh] overflow-y-auto p-6">
+          <div
+            ref={searchContainerRef}
+            className="pagefind-search"
+            data-pagefind-ui
+          />
+          {!isLoaded && (
+            <div className="flex items-center justify-center py-12">
+              <div className="text-center">
+                <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent"></div>
+                <p className="mt-4 text-sm text-slate-500 dark:text-slate-400">
+                  載入搜尋引擎...
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-slate-200 px-6 py-3 text-xs text-slate-500 dark:border-slate-700 dark:text-slate-400">
+          <div className="flex items-center justify-between">
+            <span>按 ESC 關閉</span>
+            <span className="text-right">支援中英文全文搜尋</span>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+export function SearchButton({ onClick }: { onClick: () => void }) {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        onClick();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onClick]);
+
+  return (
+    <button
+      onClick={onClick}
+      className="motion-link inline-flex h-9 items-center gap-2 rounded-full bg-slate-100 px-3 py-1.5 text-sm text-slate-600 transition hover:bg-slate-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+      aria-label="搜尋 (Cmd+K)"
+    >
+      <FiSearch className="h-3.5 w-3.5" />
+      <span className="hidden sm:inline">搜尋</span>
+      <kbd className="hidden rounded bg-white px-1.5 py-0.5 text-xs font-semibold text-slate-500 shadow-sm dark:bg-slate-900 dark:text-slate-400 sm:inline-block">
+        ⌘K
+      </kbd>
+    </button>
+  );
+}

components/site-footer.tsx

@@ -1,13 +1,9 @@
 import { siteConfig } from '@/lib/config';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FaGithub, FaTwitter, FaMastodon, FaGit, FaLinkedin } from 'react-icons/fa';
-import {
+import { FiMail } from 'react-icons/fi';
-  faGithub,
+
-  faTwitter,
+// Calculate year at build time for PPR compatibility
-  faMastodon,
+const currentYear = new Date().getFullYear();
-  faGitAlt,
-  faLinkedin
-} from '@fortawesome/free-brands-svg-icons';
-import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 
 export function SiteFooter() {
   const { social } = siteConfig;
@@ -17,37 +13,37 @@ export function SiteFooter() {
       key: 'github',
       href: social.github,
       label: 'GitHub',
-      icon: faGithub
+      icon: FaGithub
     },
     social.twitter && {
       key: 'twitter',
       href: `https://twitter.com/${social.twitter.replace('@', '')}`,
       label: 'Twitter',
-      icon: faTwitter
+      icon: FaTwitter
     },
     social.mastodon && {
       key: 'mastodon',
       href: social.mastodon,
       label: 'Mastodon',
-      icon: faMastodon
+      icon: FaMastodon
     },
     social.gitea && {
       key: 'gitea',
       href: social.gitea,
       label: 'Gitea',
-      icon: faGitAlt
+      icon: FaGit
     },
     social.linkedin && {
       key: 'linkedin',
       href: social.linkedin,
       label: 'LinkedIn',
-      icon: faLinkedin
+      icon: FaLinkedin
     },
     social.email && {
       key: 'email',
       href: `mailto:${social.email}`,
       label: 'Email',
-      icon: faEnvelope
+      icon: FiMail
     }
   ].filter(Boolean) as {
     key: string;
@@ -59,7 +55,7 @@ export function SiteFooter() {
   return (
     <footer className="py-4 text-center text-sm text-gray-500 dark:text-slate-400">
       <div>
-        © {new Date().getFullYear()} {siteConfig.author}
+        © {currentYear} {siteConfig.author}
       </div>
       {items.length > 0 && (
         <div className="mt-2 flex justify-center gap-4 text-base">
@@ -72,7 +68,7 @@ export function SiteFooter() {
               aria-label={item.label}
               className="text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-100"
             >
-              <FontAwesomeIcon icon={item.icon} className="h-4 w-4" />
+              <item.icon className="h-4 w-4" />
             </a>
           ))}
         </div>

components/site-header.tsx

@@ -1,27 +1,80 @@
+'use client';
+
 import Link from 'next/link';
+import { useState } from 'react';
+import dynamic from 'next/dynamic';
 import { ThemeToggle } from './theme-toggle';
 import { NavMenu, NavLinkItem, IconKey } from './nav-menu';
+import { SearchButton } from './search-modal';
 import { siteConfig } from '@/lib/config';
 import { allPages } from 'contentlayer2/generated';
 
+// Dynamically import SearchModal to reduce initial bundle size
+const SearchModal = dynamic(
+  () => import('./search-modal').then((mod) => ({ default: mod.SearchModal })),
+  { ssr: false }
+);
+
 export function SiteHeader() {
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const pages = allPages
     .slice()
     .sort((a, b) => (a.title || '').localeCompare(b.title || ''));
 
+  const findPage = (title: string) => pages.find((page) => page.title === title);
+
+  const aboutChildren = [
+    { title: '關於作者', label: '作者' },
+    { title: '關於本站', label: '本站' }
+  ]
+    .map(({ title, label }) => {
+      const page = findPage(title);
+      if (!page) return null;
+      return {
+        key: page._id,
+        href: page.url,
+        label,
+        iconKey: getIconForPage(page.title, page.slug)
+      } satisfies NavLinkItem;
+    })
+    .filter(Boolean) as NavLinkItem[];
+
+  const deviceChildren = [
+    { title: '開發工作環境', label: '開發環境' },
+    { title: 'HomeLab', label: 'HomeLab' }
+  ]
+    .map(({ title, label }) => {
+      const page = findPage(title);
+      if (!page) return null;
+      return {
+        key: page._id,
+        href: page.url,
+        label,
+        iconKey: getIconForPage(page.title, page.slug)
+      } satisfies NavLinkItem;
+    })
+    .filter(Boolean) as NavLinkItem[];
+
   const navItems: NavLinkItem[] = [
     { key: 'home', href: '/', label: '首頁', iconKey: 'home' },
-    { key: 'blog', href: '/blog', label: 'Blog', iconKey: 'blog' },
+    {
-    ...pages.map((page) => ({
+      key: 'about',
-      key: page._id,
+      href: aboutChildren[0]?.href,
-      href: page.url,
+      label: '關於',
-      label: page.title,
+      iconKey: 'user',
-      iconKey: getIconForPage(page.title, page.slug)
+      children: aboutChildren
-    }))
+    },
+    {
+      key: 'devices',
+      href: deviceChildren[0]?.href,
+      label: '裝置',
+      iconKey: 'device',
+      children: deviceChildren
+    }
   ];
 
   return (
-    <header className="bg-white/80 backdrop-blur transition-colors duration-200 ease-snappy dark:bg-gray-950/80">
+    <header className="relative z-40 bg-white/80 backdrop-blur transition-colors duration-200 ease-snappy dark:bg-gray-950/80">
       <div className="container mx-auto flex items-center justify-between px-4 py-3 text-slate-900 dark:text-slate-100">
         <Link
           href="/"
@@ -32,8 +85,13 @@ export function SiteHeader() {
         </Link>
         <div className="flex items-center gap-3">
           <NavMenu items={navItems} />
+          <SearchButton onClick={() => setIsSearchOpen(true)} />
           <ThemeToggle />
         </div>
+        <SearchModal
+          isOpen={isSearchOpen}
+          onClose={() => setIsSearchOpen(false)}
+        />
       </div>
     </header>
   );

components/theme-toggle.tsx

@@ -2,8 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useTheme } from 'next-themes';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FiMoon, FiSun } from 'react-icons/fi';
-import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
@@ -27,12 +26,11 @@ export function ThemeToggle() {
       onClick={() => setTheme(next)}
       aria-label={theme === 'dark' ? '切換為淺色主題' : '切換為深色主題'}
     >
-      <FontAwesomeIcon
+      {isDark ? (
-        icon={isDark ? faSun : faMoon}
+        <FiSun className="h-4 w-4 rotate-0 text-amber-400 transition-transform duration-260 ease-snappy" />
-        className={`h-4 w-4 transition-transform duration-260 ease-snappy ${
+      ) : (
-          isDark ? 'rotate-0 text-amber-400' : 'rotate-180 text-blue-500'
+        <FiMoon className="h-4 w-4 rotate-180 text-blue-500 transition-transform duration-260 ease-snappy" />
-        }`}
+      )}
-      />
     </button>
   );
 }

components/timeline-wrapper.tsx

@@ -9,20 +9,20 @@ interface TimelineWrapperProps {
 export function TimelineWrapper({ children, className }: TimelineWrapperProps) {
   const items = Children.toArray(children);
   return (
-    <div className={clsx('relative pl-8', className)}>
+    <div className={clsx('relative pl-6 md:pl-8', className)}>
       <span
-        className="pointer-events-none absolute left-3 top-0 h-full w-[2px] rounded-full bg-blue-400 shadow-[0_0_10px_rgba(59,130,246,0.35)] dark:bg-cyan-300"
+        className="pointer-events-none absolute left-2 top-0 h-full w-[2px] rounded-full bg-blue-400 shadow-[0_0_10px_rgba(59,130,246,0.35)] dark:bg-cyan-300 md:left-3"
         aria-hidden="true"
       />
       <span
-        className="pointer-events-none absolute left-3 top-0 h-full w-[8px] rounded-full bg-blue-500/15 blur-[14px]"
+        className="pointer-events-none absolute left-2 top-0 h-full w-[8px] rounded-full bg-blue-500/15 blur-[14px] md:left-3"
         aria-hidden="true"
       />
 
       <div className="space-y-4">
         {items.map((child, index) => (
-          <div key={index} className="relative pl-6 sm:pl-8">
+          <div key={index} className="relative pl-5 sm:pl-8">
-            <span className="pointer-events-none absolute left-0 top-1/2 h-px w-8 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-transparent via-blue-300/80 to-transparent dark:via-cyan-200/80" aria-hidden="true" />
+            <span className="pointer-events-none absolute left-0 top-1/2 h-px w-5 -translate-x-full -translate-y-1/2 bg-gradient-to-r from-transparent via-blue-300/80 to-transparent dark:via-cyan-200/80 sm:w-8" aria-hidden="true" />
             {child}
           </div>
         ))}

contentlayer.config.ts

@@ -3,6 +3,8 @@ import { visit } from 'unist-util-visit';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import remarkGfm from 'remark-gfm';
+import rehypePrettyCode from 'rehype-pretty-code';
+import { rehypeCallouts } from './lib/rehype-callouts';
 
 export const Post = defineDocumentType(() => ({
   name: 'Post',
@@ -86,6 +88,17 @@ export default makeSource({
   markdown: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [
+      rehypeCallouts,
+      [
+        rehypePrettyCode,
+        {
+          theme: {
+            dark: 'github-dark',
+            light: 'github-light',
+          },
+          keepBackground: false,
+        },
+      ],
       rehypeSlug,
       [rehypeAutolinkHeadings, { behavior: 'wrap' }],
       /**

env

@@ -0,0 +1,32 @@
+# Public site metadata (safe to expose to browser)
+NEXT_PUBLIC_SITE_NAME="Gbanyan"
+NEXT_PUBLIC_SITE_TITLE="霍德爾之目"
+NEXT_PUBLIC_SITE_DESCRIPTION="醫學、科技與生活隨筆。"
+NEXT_PUBLIC_SITE_URL="http://localhost:3000"
+NEXT_PUBLIC_SITE_AUTHOR="Gbanyan"
+NEXT_PUBLIC_SITE_TAGLINE="醫學、科技與生活的隨筆記錄。"
+NEXT_PUBLIC_POSTS_PER_PAGE="5"
+NEXT_PUBLIC_DEFAULT_LOCALE="zh-TW"
+NEXT_PUBLIC_SITE_AVATAR_URL="https://www.gravatar.com/avatar/53f2a6e011d5ececcd0d6e33e8e7329f60efcd23a5b77ba382273d5060a2cffe?s=160&d=identicon"
+NEXT_PUBLIC_SITE_ABOUT_SHORT="掙扎混亂過日子 \n 對平淡美好日常的期待即是救贖"
+
+# Color scheme / accents
+NEXT_PUBLIC_COLOR_ACCENT="#2563eb"
+NEXT_PUBLIC_COLOR_ACCENT_SOFT="#dbeafe"
+NEXT_PUBLIC_COLOR_ACCENT_TEXT_LIGHT="#1d4ed8"
+NEXT_PUBLIC_COLOR_ACCENT_TEXT_DARK="#93c5fd"
+
+# Social and profile
+NEXT_PUBLIC_TWITTER_HANDLE="@gbanyan"
+NEXT_PUBLIC_GITHUB_URL="https://github.com/gbanyan"
+NEXT_PUBLIC_LINKEDIN_URL=""
+NEXT_PUBLIC_EMAIL_CONTACT=""
+NEXT_PUBLIC_MASTODON_URL=""
+NEXT_PUBLIC_GITEA_URL=""
+
+# SEO / Open Graph
+NEXT_PUBLIC_OG_DEFAULT_IMAGE="/assets/og-default.jpg"
+NEXT_PUBLIC_TWITTER_CARD_TYPE="summary_large_image"
+
+# Analytics (public ID only)
+NEXT_PUBLIC_ANALYTICS_ID=""

lib/config.ts

@@ -42,7 +42,7 @@ export const siteConfig = {
     },
     slugs: {}
   },
-  ogImage: process.env.NEXT_PUBLIC_OG_DEFAULT_IMAGE || '/assets/og-default.jpg',
+  ogImage: process.env.NEXT_PUBLIC_OG_DEFAULT_IMAGE || '/assets/og-default.png',
   twitterCard:
     (process.env.NEXT_PUBLIC_TWITTER_CARD_TYPE as
       | 'summary'

lib/mastodon.ts

@@ -0,0 +1,158 @@
+/**
+ * Mastodon API utilities for fetching and processing toots
+ */
+
+export interface MastodonStatus {
+  id: string;
+  content: string;
+  created_at: string;
+  url: string;
+  reblog: MastodonStatus | null;
+  account: {
+    username: string;
+    display_name: string;
+    avatar: string;
+  };
+  media_attachments: Array<{
+    type: string;
+    url: string;
+    preview_url: string;
+  }>;
+}
+
+/**
+ * Parse Mastodon URL to extract instance domain and username
+ * @param url - Mastodon profile URL (e.g., "https://mastodon.social/@username")
+ * @returns Object with instance and username, or null if invalid
+ */
+export function parseMastodonUrl(url: string): { instance: string; username: string } | null {
+  try {
+    const urlObj = new URL(url);
+    const instance = urlObj.hostname;
+    const pathMatch = urlObj.pathname.match(/^\/@?([^/]+)/);
+
+    if (!pathMatch) return null;
+
+    const username = pathMatch[1];
+    return { instance, username };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Strip HTML tags from content and decode HTML entities
+ * @param html - HTML content from Mastodon post
+ * @returns Plain text content
+ */
+export function stripHtml(html: string): string {
+  // Remove HTML tags
+  let text = html.replace(/<br\s*\/?>/gi, '\n');
+  text = text.replace(/<\/p><p>/gi, '\n\n');
+  text = text.replace(/<[^>]+>/g, '');
+
+  // Decode common HTML entities
+  text = text
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&nbsp;/g, ' ');
+
+  return text.trim();
+}
+
+/**
+ * Truncate text smartly, avoiding cutting words in half
+ * @param text - Text to truncate
+ * @param maxLength - Maximum length (default: 180)
+ * @returns Truncated text with ellipsis if needed
+ */
+export function truncateText(text: string, maxLength: number = 180): string {
+  if (text.length <= maxLength) return text;
+
+  // Find the last space before maxLength
+  const truncated = text.substring(0, maxLength);
+  const lastSpace = truncated.lastIndexOf(' ');
+
+  // If there's a space, cut at the space; otherwise use maxLength
+  const cutPoint = lastSpace > maxLength * 0.8 ? lastSpace : maxLength;
+
+  return text.substring(0, cutPoint).trim() + '...';
+}
+
+/**
+ * Format timestamp as relative time in Chinese
+ * @param dateString - ISO date string
+ * @returns Relative time string (e.g., "2小時前")
+ */
+export function formatRelativeTime(dateString: string): string {
+  const now = new Date();
+  const date = new Date(dateString);
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+
+  if (diffSec < 60) return '剛剛';
+  if (diffMin < 60) return `${diffMin}分鐘前`;
+  if (diffHour < 24) return `${diffHour}小時前`;
+  if (diffDay < 7) return `${diffDay}天前`;
+  if (diffDay < 30) return `${Math.floor(diffDay / 7)}週前`;
+  if (diffDay < 365) return `${Math.floor(diffDay / 30)}個月前`;
+
+  return `${Math.floor(diffDay / 365)}年前`;
+}
+
+/**
+ * Fetch user's Mastodon account ID from username
+ * @param instance - Mastodon instance domain
+ * @param username - Username without @
+ * @returns Account ID or null if not found
+ */
+export async function fetchAccountId(instance: string, username: string): Promise<string | null> {
+  try {
+    const response = await fetch(
+      `https://${instance}/api/v1/accounts/lookup?acct=${username}`,
+      { cache: 'no-store' }
+    );
+
+    if (!response.ok) return null;
+
+    const account = await response.json();
+    return account.id;
+  } catch (error) {
+    console.error('Error fetching Mastodon account:', error);
+    return null;
+  }
+}
+
+/**
+ * Fetch user's recent statuses from Mastodon
+ * @param instance - Mastodon instance domain
+ * @param accountId - Account ID
+ * @param limit - Number of statuses to fetch (default: 5)
+ * @returns Array of statuses or empty array on error
+ */
+export async function fetchStatuses(
+  instance: string,
+  accountId: string,
+  limit: number = 5
+): Promise<MastodonStatus[]> {
+  try {
+    const response = await fetch(
+      `https://${instance}/api/v1/accounts/${accountId}/statuses?limit=${limit}&exclude_replies=true`,
+      { cache: 'no-store' }
+    );
+
+    if (!response.ok) return [];
+
+    const statuses = await response.json();
+    return statuses;
+  } catch (error) {
+    console.error('Error fetching Mastodon statuses:', error);
+    return [];
+  }
+}

lib/posts.ts

@@ -27,7 +27,14 @@ export function getPageBySlug(slug: string): Page | undefined {
 }
 
 export function getTagSlug(tag: string): string {
-  return tag.toLowerCase().replace(/\s+/g, '-');
+  // Normalize spaces and convert to lowercase
+  // Replace multiple spaces/dashes with single dash
+  // Next.js will handle URL encoding automatically, so we don't encode here
+  return tag
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .trim();
 }
 
 export function getAllTagsWithCount(): { tag: string; slug: string; count: number }[] {

lib/rehype-callouts.ts

@@ -0,0 +1,111 @@
+import { visit } from 'unist-util-visit';
+
+/**
+ * Rehype plugin to transform GitHub-style blockquote alerts
+ * Transforms: > [!NOTE] into styled callout boxes
+ */
+export function rehypeCallouts() {
+  return (tree: any) => {
+    visit(tree, 'element', (node) => {
+      // Only process blockquotes
+      if (node.tagName !== 'blockquote') return;
+      if (!node.children || node.children.length === 0) return;
+
+      // Find the first non-whitespace child
+      let contentChild: any = null;
+      for (const child of node.children) {
+        if (child.type === 'text' && child.value.trim()) {
+          contentChild = child;
+          break;
+        } else if (child.tagName === 'p') {
+          contentChild = child;
+          break;
+        }
+      }
+
+      if (!contentChild) return;
+
+      // Find the first text node
+      let textNode: any = null;
+      let textParent: any = null;
+
+      if (contentChild.type === 'text') {
+        // Direct text child
+        textNode = contentChild;
+        textParent = node;
+      } else if (contentChild.tagName === 'p' && contentChild.children) {
+        // Text inside paragraph - find first non-whitespace text
+        for (const child of contentChild.children) {
+          if (child.type === 'text' && child.value.trim()) {
+            textNode = child;
+            textParent = contentChild;
+            break;
+          }
+        }
+      }
+
+      if (!textNode || textNode.type !== 'text') return;
+
+      // Check if text starts with [!TYPE]
+      const match = textNode.value.match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/i);
+      if (!match) return;
+
+      const type = match[1].toLowerCase();
+
+      // Remove the [!TYPE] marker from the text
+      textNode.value = textNode.value.replace(match[0], '').trim();
+
+      // If the text node is now empty, remove it
+      if (!textNode.value) {
+        const index = textParent.children.indexOf(textNode);
+        if (index > -1) {
+          textParent.children.splice(index, 1);
+        }
+      }
+
+      // Add callout data attributes and classes
+      node.properties = node.properties || {};
+      node.properties.className = ['callout', `callout-${type}`];
+      node.properties['data-callout'] = type;
+
+      // Add icon and title elements
+      const iconMap: Record<string, string> = {
+        note: '📝',
+        tip: '💡',
+        important: '❗',
+        warning: '⚠️',
+        caution: '🚨',
+      };
+
+      const icon = {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['callout-icon'] },
+        children: [{ type: 'text', value: iconMap[type] || '📝' }],
+      };
+
+      const title = {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['callout-title'] },
+        children: [{ type: 'text', value: type.toUpperCase() }],
+      };
+
+      const header = {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['callout-header'] },
+        children: [icon, title],
+      };
+
+      const content = {
+        type: 'element',
+        tagName: 'div',
+        properties: { className: ['callout-content'] },
+        children: [...node.children],
+      };
+
+      node.children = [header, content];
+    });
+  };
+}

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.mjs

@@ -1,9 +1,38 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  // Image optimization configuration
   images: {
-    remotePatterns: []
+    remotePatterns: [],
+    formats: ['image/avif', 'image/webp'],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
   },
 
+  // Enable Partial Prerendering (PPR) via cacheComponents in Next.js 16
+  cacheComponents: true,
+
+  // Compiler optimizations
+  compiler: {
+    // Remove console.log in production
+    removeConsole: process.env.NODE_ENV === 'production' ? {
+      exclude: ['error', 'warn'],
+    } : false,
+  },
+
+  // Headers for better caching
+  async headers() {
+    return [
+      {
+        source: '/assets/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'public, max-age=31536000, immutable',
+          },
+        ],
+      },
+    ];
+  },
 };
 
 export default nextConfig;

package.json

@@ -4,9 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "concurrently \"contentlayer2 dev\" \"next dev\"",
+    "dev": "concurrently \"contentlayer2 dev\" \"next dev --turbo\"",
     "sync-assets": "node scripts/sync-assets.mjs",
-    "build": "npm run sync-assets && contentlayer2 build && next build",
+    "build": "npm run sync-assets && contentlayer2 build && next build && npx pagefind --site .next && rm -rf public/_pagefind && cp -r .next/pagefind public/_pagefind",
     "start": "next start",
     "lint": "next lint",
     "contentlayer": "contentlayer build"
@@ -17,23 +17,23 @@
   "type": "module",
   "dependencies": {
     "@emotion/is-prop-valid": "^1.4.0",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@vercel/og": "^0.8.5",
-    "@fortawesome/free-brands-svg-icons": "^7.1.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
-    "@fortawesome/react-fontawesome": "^3.1.0",
     "clsx": "^2.1.1",
     "contentlayer2": "^0.5.8",
-    "framer-motion": "^12.23.24",
     "gray-matter": "^4.0.3",
     "markdown-wasm": "^1.2.0",
-    "next": "^16.0.3",
+    "next": "^16.0.7",
     "next-contentlayer2": "^0.5.8",
     "next-themes": "^0.4.6",
-    "react": "^19.2.0",
+    "react": "^19.2.1",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.1",
+    "react-icons": "^5.5.0",
     "rehype-autolink-headings": "^7.1.0",
+    "rehype-pretty-code": "^0.14.1",
     "rehype-slug": "^6.0.0",
+    "remark-directive": "^4.0.0",
     "remark-gfm": "^4.0.1",
+    "shiki": "^3.15.0",
     "tailwind-merge": "^3.4.0",
     "unist-util-visit": "^5.0.0"
   },
@@ -41,12 +41,14 @@
     "@tailwindcss/typography": "^0.5.19",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.22",
     "concurrently": "^9.2.1",
-    "eslint": "^8.57.1",
+    "eslint": "^9.39.1",
     "eslint-config-next": "^16.0.3",
+    "pagefind": "^1.4.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.18",
     "typescript": "^5.9.3"
   }
-}
+}

styles/globals.css

@@ -13,9 +13,24 @@
   --font-weight-semibold: 600;
   --font-system-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans CJK TC', 'Noto Sans CJK SC', 'Source Han Sans TC', 'Source Han Sans SC', 'Roboto', 'Ubuntu', 'Cantarell', 'Inter', 'Helvetica Neue', Arial, sans-serif;
 
+  /* Ink + accent palette */
+  --color-ink-strong: #0f172a;
+  --color-ink-body: #1f2937;
+  --color-ink-muted: #475569;
+  --color-accent: #7c3aed;
+  --color-accent-soft: #f4f0ff;
+
   font-size: clamp(15px, 0.65vw + 11px, 19px);
 }
 
+.dark {
+  --color-ink-strong: #e2e8f0;
+  --color-ink-body: #cbd5e1;
+  --color-ink-muted: #94a3b8;
+  --color-accent: #a78bfa;
+  --color-accent-soft: #1f1a3d;
+}
+
 @media (min-width: 2560px) {
   :root {
     font-size: 20px;
@@ -27,6 +42,7 @@ body {
   font-size: 1rem;
   line-height: var(--line-height-body);
   font-family: var(--font-system-sans);
+  color: var(--color-ink-body);
 }
 
 @keyframes timeline-scroll {
@@ -49,6 +65,43 @@ body {
   }
 }
 
+@keyframes pageEnter {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.page-transition {
+  opacity: 0;
+}
+
+/* Scroll reveal animations - CSS only */
+.scroll-reveal {
+  opacity: 0;
+  transform: translateY(12px);
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1),
+              transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.scroll-reveal.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .scroll-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
 
 .toc-target-highlight {
   @apply bg-yellow-50/60 dark:bg-yellow-900/40 transition-colors duration-500;
@@ -58,17 +111,17 @@ body {
 .prose blockquote {
   @apply transition-transform transition-shadow duration-180 ease-snappy;
   border-left: 4px solid var(--color-accent, #2563eb);
-  background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.08));
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.1));
   padding: 1.2rem 1.5rem;
   font-style: italic;
-  color: rgba(15, 23, 42, 0.75);
+  color: rgba(15, 23, 42, 0.78);
   position: relative;
 }
 
 .dark .prose blockquote {
-  background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.06));
+  background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(124, 58, 237, 0.08));
-  color: rgba(226, 232, 240, 0.8);
+  color: rgba(226, 232, 240, 0.85);
-  border-left-color: rgba(96, 165, 250, 0.9);
+  border-left-color: rgba(167, 139, 250, 0.9);
 }
 
 .prose blockquote:hover {
@@ -97,27 +150,32 @@ body {
 .prose {
   font-size: clamp(1rem, 0.2vw + 0.9rem, 1.2rem);
   line-height: var(--line-height-body);
+  color: var(--color-ink-body);
 }
 
 .prose h1 {
   font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem);
   line-height: 1.25;
+  color: var(--color-ink-strong);
 }
 
 .prose h2 {
   font-size: clamp(1.8rem, 1.1rem + 1.6vw, 2.8rem);
   line-height: 1.3;
+  color: var(--color-ink-strong);
 }
 
 .prose h3 {
   font-size: clamp(1.4rem, 0.9rem + 1vw, 2rem);
   line-height: 1.35;
+  color: var(--color-ink-strong);
 }
 
 .prose p,
 .prose li {
   font-size: clamp(1rem, 0.2vw + 0.9rem, 1.15rem);
   line-height: var(--line-height-body);
+  color: var(--color-ink-body);
 }
 
 .prose small,
@@ -196,6 +254,69 @@ body {
   left: 0;
 }
 
+/* TOC transitions - replaces Framer Motion */
+.toc-sidebar {
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+  will-change: opacity, transform;
+}
+
+.toc-sidebar-enter {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.toc-sidebar-enter-active {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.toc-sidebar-exit {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.toc-sidebar-exit-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.toc-mobile {
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  will-change: opacity, transform;
+}
+
+.toc-mobile-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.toc-mobile-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.toc-mobile-exit {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.toc-mobile-exit-active {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.toc-button {
+  transition: all 0.2s ease-in-out;
+}
+
+.toc-button:active {
+  transform: scale(0.95);
+}
+
+.toc-button:hover {
+  transform: scale(1.05);
+}
+
 @layer components {
   .type-display {
     font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem);
@@ -265,4 +386,235 @@ body {
     transition: color var(--motion-duration-short) var(--motion-ease-snappy),
       transform var(--motion-duration-short) var(--motion-ease-snappy);
   }
-}
+}
+
+/* Pagefind Search Styles - Use CSS variables to override defaults */
+:root {
+  --pagefind-ui-scale: 1;
+  --pagefind-ui-primary: #2563eb;
+  --pagefind-ui-text: #0f172a;
+  --pagefind-ui-background: #ffffff;
+  --pagefind-ui-border: #e2e8f0;
+  --pagefind-ui-tag: #f1f5f9;
+  --pagefind-ui-border-width: 1px;
+  --pagefind-ui-border-radius: 0.5rem;
+  --pagefind-ui-font: var(--font-system-sans);
+}
+
+.dark {
+  --pagefind-ui-primary: #60a5fa;
+  --pagefind-ui-text: #f1f5f9;
+  --pagefind-ui-background: #0f172a;
+  --pagefind-ui-border: #475569;
+  --pagefind-ui-tag: #334155;
+}
+
+/* Enhanced text colors for better readability */
+.pagefind-ui__result-title {
+  color: var(--pagefind-ui-text) !important;
+}
+
+.dark .pagefind-ui__result-title {
+  color: #f8fafc !important;
+}
+
+.pagefind-ui__result-excerpt {
+  color: #475569 !important;
+}
+
+.dark .pagefind-ui__result-excerpt {
+  color: #cbd5e1 !important;
+}
+
+.pagefind-ui__result-link {
+  color: var(--pagefind-ui-primary) !important;
+}
+
+.dark .pagefind-ui__result-link {
+  color: #93c5fd !important;
+}
+
+/* Additional custom styling for highlights */
+.pagefind-ui__result-excerpt mark {
+  @apply bg-yellow-200 font-semibold text-slate-900 dark:bg-yellow-600 dark:text-slate-100;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+}
+
+.pagefind-ui__search-input:focus {
+  @apply ring-2 ring-blue-500 dark:ring-blue-400;
+}
+
+/* Code Syntax Highlighting Styles (rehype-pretty-code) */
+.prose pre {
+  @apply overflow-x-auto rounded-lg border border-slate-200 dark:border-slate-700;
+  padding: 1rem 1.2rem;
+  margin: 1.5rem 0;
+  background-color: #f8fafc;
+}
+
+.dark .prose pre {
+  background-color: #0f172a;
+}
+
+.prose pre > code {
+  @apply grid;
+  counter-reset: line;
+  font-size: 0.9em;
+  line-height: 1.7;
+}
+
+.prose pre > code > [data-line] {
+  padding: 0 1rem;
+  border-left: 2px solid transparent;
+}
+
+.prose pre > code > [data-line]::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 1.5rem;
+  margin-right: 1.5rem;
+  text-align: right;
+  color: #94a3b8;
+  user-select: none;
+}
+
+.dark .prose pre > code > [data-line]::before {
+  color: #475569;
+}
+
+/* Highlighted lines */
+.prose pre > code > [data-highlighted-line] {
+  background-color: rgba(59, 130, 246, 0.1);
+  border-left-color: rgb(59, 130, 246);
+}
+
+.dark .prose pre > code > [data-highlighted-line] {
+  background-color: rgba(96, 165, 250, 0.15);
+  border-left-color: rgb(96, 165, 250);
+}
+
+/* Inline code */
+.prose :not(pre) > code {
+  @apply rounded bg-slate-100 px-1.5 py-0.5 text-sm font-semibold text-slate-800 dark:bg-slate-800 dark:text-slate-200;
+  white-space: nowrap;
+}
+
+/* Code title (if specified in markdown: ```js title="example.js") */
+.prose [data-rehype-pretty-code-title] {
+  @apply rounded-t-lg border border-b-0 border-slate-200 bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300;
+  margin-bottom: 0;
+}
+
+.prose [data-rehype-pretty-code-title] + pre {
+  @apply mt-0 rounded-t-none;
+}
+
+/* GitHub-style Callouts/Alerts */
+.prose .callout {
+  @apply my-6 rounded-lg border-l-4 p-4 shadow-sm;
+  background: linear-gradient(135deg, var(--callout-bg-start), var(--callout-bg-end));
+}
+
+.prose .callout-header {
+  @apply mb-3 flex items-center gap-2;
+}
+
+.prose .callout-icon {
+  @apply text-2xl;
+  line-height: 1;
+}
+
+.prose .callout-title {
+  @apply text-sm font-bold uppercase tracking-wider;
+  color: var(--callout-title-color);
+  letter-spacing: 0.05em;
+}
+
+.prose .callout-content {
+  @apply text-sm leading-relaxed;
+}
+
+.prose .callout-content > *:first-child {
+  @apply mt-0;
+}
+
+.prose .callout-content > *:last-child {
+  @apply mb-0;
+}
+
+/* NOTE - Blue */
+.prose .callout-note {
+  --callout-bg-start: rgba(59, 130, 246, 0.08);
+  --callout-bg-end: rgba(59, 130, 246, 0.04);
+  --callout-title-color: #2563eb;
+  @apply border-blue-500;
+}
+
+.dark .prose .callout-note {
+  --callout-bg-start: rgba(96, 165, 250, 0.12);
+  --callout-bg-end: rgba(96, 165, 250, 0.06);
+  --callout-title-color: #93c5fd;
+  @apply border-blue-400;
+}
+
+/* TIP - Green */
+.prose .callout-tip {
+  --callout-bg-start: rgba(34, 197, 94, 0.08);
+  --callout-bg-end: rgba(34, 197, 94, 0.04);
+  --callout-title-color: #16a34a;
+  @apply border-green-500;
+}
+
+.dark .prose .callout-tip {
+  --callout-bg-start: rgba(74, 222, 128, 0.12);
+  --callout-bg-end: rgba(74, 222, 128, 0.06);
+  --callout-title-color: #86efac;
+  @apply border-green-400;
+}
+
+/* IMPORTANT - Purple */
+.prose .callout-important {
+  --callout-bg-start: rgba(168, 85, 247, 0.08);
+  --callout-bg-end: rgba(168, 85, 247, 0.04);
+  --callout-title-color: #9333ea;
+  @apply border-purple-500;
+}
+
+.dark .prose .callout-important {
+  --callout-bg-start: rgba(192, 132, 252, 0.12);
+  --callout-bg-end: rgba(192, 132, 252, 0.06);
+  --callout-title-color: #c084fc;
+  @apply border-purple-400;
+}
+
+/* WARNING - Orange/Yellow */
+.prose .callout-warning {
+  --callout-bg-start: rgba(251, 191, 36, 0.08);
+  --callout-bg-end: rgba(251, 191, 36, 0.04);
+  --callout-title-color: #d97706;
+  @apply border-yellow-500;
+}
+
+.dark .prose .callout-warning {
+  --callout-bg-start: rgba(253, 224, 71, 0.12);
+  --callout-bg-end: rgba(253, 224, 71, 0.06);
+  --callout-title-color: #fde047;
+  @apply border-yellow-400;
+}
+
+/* CAUTION - Red */
+.prose .callout-caution {
+  --callout-bg-start: rgba(239, 68, 68, 0.08);
+  --callout-bg-end: rgba(239, 68, 68, 0.04);
+  --callout-title-color: #dc2626;
+  @apply border-red-500;
+}
+
+.dark .prose .callout-caution {
+  --callout-bg-start: rgba(248, 113, 113, 0.12);
+  --callout-bg-end: rgba(248, 113, 113, 0.06);
+  --callout-title-color: #fca5a5;
+  @apply border-red-400;
+}