gbanyan
0bb3ee40c6
Major performance optimizations addressing PageSpeed Insights warnings:
**Phase 1: Replace Framer Motion with CSS (~60-100KB savings)**
- Remove Framer Motion from components/post-layout.tsx
- Add CSS transitions to styles/globals.css for TOC animations
- Replace motion.div/motion.button with regular elements + CSS classes
- Remove framer-motion package dependency
**Phase 2: Replace FontAwesome with React Icons (~150-250KB savings)**
- Replace FontAwesome in 16 components with react-icons
- Use Feather icons (react-icons/fi) for UI elements
- Use FontAwesome brand icons (react-icons/fa) for social media
- Remove 4 @fortawesome packages (@fortawesome/fontawesome-svg-core,
@fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons,
@fortawesome/react-fontawesome)
- Updated components:
- app/error.tsx, app/tags/page.tsx, app/tags/[tag]/page.tsx
- components/hero.tsx, components/mastodon-feed.tsx
- components/meta-item.tsx, components/nav-menu.tsx
- components/post-card.tsx, components/post-layout.tsx
- components/post-list-item.tsx, components/post-list-with-controls.tsx
- components/post-storyline-nav.tsx, components/post-toc.tsx
- components/right-sidebar.tsx, components/search-modal.tsx
- components/site-footer.tsx, components/theme-toggle.tsx
**Phase 3: Convert Mastodon Feed to Server Component**
- Convert components/mastodon-feed.tsx from Client Component to async Server Component
- Replace client-side useEffect fetching with server-side ISR
- Add 30-minute revalidation (next: { revalidate: 1800 })
- Eliminate 2 blocking client-side network requests
- Remove loading state (rendered on server)
**Total Impact:**
- JavaScript bundle: ~210-350KB reduction
- Blocking network requests: 2 eliminated
- Main thread time: Reduced by ~100-160ms
- Build: ✅ Verified successful
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
98 lines
2.5 KiB
TypeScript
98 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import {
|
|
FiMenu,
|
|
FiX,
|
|
FiHome,
|
|
FiFileText,
|
|
FiFile,
|
|
FiUser,
|
|
FiMail,
|
|
FiMapPin,
|
|
FiFeather,
|
|
FiTag,
|
|
FiServer,
|
|
FiCpu,
|
|
FiList
|
|
} from 'react-icons/fi';
|
|
import Link from 'next/link';
|
|
|
|
export type IconKey =
|
|
| 'home'
|
|
| 'blog'
|
|
| 'file'
|
|
| 'user'
|
|
| 'contact'
|
|
| 'location'
|
|
| 'pen'
|
|
| 'tags'
|
|
| 'server'
|
|
| 'device'
|
|
| 'menu';
|
|
|
|
const ICON_MAP: Record<IconKey, any> = {
|
|
home: FiHome,
|
|
blog: FiFileText,
|
|
file: FiFile,
|
|
user: FiUser,
|
|
contact: FiMail,
|
|
location: FiMapPin,
|
|
pen: FiFeather,
|
|
tags: FiTag,
|
|
server: FiServer,
|
|
device: FiCpu,
|
|
menu: FiList
|
|
};
|
|
|
|
export interface NavLinkItem {
|
|
key: string;
|
|
href: string;
|
|
label?: string;
|
|
iconKey: IconKey;
|
|
}
|
|
|
|
interface NavMenuProps {
|
|
items: NavLinkItem[];
|
|
}
|
|
|
|
export function NavMenu({ items }: NavMenuProps) {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const toggle = () => setOpen((val) => !val);
|
|
const close = () => setOpen(false);
|
|
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<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"
|
|
aria-label={open ? '關閉選單' : '開啟選單'}
|
|
aria-expanded={open}
|
|
onClick={toggle}
|
|
>
|
|
{open ? <FiX className="h-4 w-4" /> : <FiMenu className="h-4 w-4" />}
|
|
</button>
|
|
<nav
|
|
className={`${open ? 'flex' : 'hidden'} flex-col gap-2 sm:flex sm:flex-row sm:items-center sm:gap-3`}
|
|
>
|
|
{items.map((item) => (
|
|
<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}
|
|
>
|
|
{(() => {
|
|
const Icon = ICON_MAP[item.iconKey] ?? FiFile;
|
|
return <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>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|