gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize performance: Replace Framer Motion and FontAwesome, convert Mastodon to Server Component

Browse Source 
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>
This commit is contained in:
gbanyan
2025-11-20 21:51:24 +08:00
parent 6badd76733
commit 0bb3ee40c6
21 changed files with 329 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
components/mastodon-feed.tsx
View File

@@ -1,74 +1,100 @@
'use client';
import { useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMastodon } from '@fortawesome/free-brands-svg-icons';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
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;
/**
* Fetch user's Mastodon account ID from username with ISR
*/
async function fetchAccountId(instance: string, username: string): Promise<string | null> {
try {
const response = await fetch(
`https://${instance}/api/v1/accounts/lookup?acct=${username}`,
{
next: { revalidate: 1800 } // Revalidate every 30 minutes
}
);
try {
// Parse the Mastodon URL
const parsed = parseMastodonUrl(mastodonUrl);
if (!parsed) {
setError(true);
setLoading(false);
return;
}
if (!response.ok) return null;
const { instance, username } = parsed;
const account = await response.json();
return account.id;
} catch (error) {
console.error('Error fetching Mastodon account:', error);
return null;
}
}
// 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);
/**
* Fetch user's recent statuses from Mastodon with ISR
*/
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`,
{
next: { revalidate: 1800 } // Revalidate every 30 minutes
}
};
);
loadStatuses();
}, []);
if (!response.ok) return [];
const statuses = await response.json();
return statuses;
} catch (error) {
console.error('Error fetching Mastodon statuses:', error);
return [];
}
}
/**
* Server Component for Mastodon feed with ISR
*/
export async function MastodonFeed() {
const mastodonUrl = siteConfig.social.mastodon;
// Don't render if no Mastodon URL is configured
if (!siteConfig.social.mastodon) {
if (!mastodonUrl) {
return null;
}
// Don't render if there's an error (fail silently)
if (error) {
let statuses: MastodonStatus[] = [];
try {
// Parse the Mastodon URL
const parsed = parseMastodonUrl(mastodonUrl);
if (!parsed) {
return null;
}
const { instance, username } = parsed;
// Fetch account ID
const accountId = await fetchAccountId(instance, username);
if (!accountId) {
return null;
}
// Fetch statuses (5 posts, exclude replies, include boosts)
statuses = await fetchStatuses(instance, accountId, 5);
} catch (err) {
console.error('Error loading Mastodon feed:', err);
// Fail silently - don't render component on error
return null;
}
// Don't render if no statuses
if (statuses.length === 0) {
return null;
}
@@ -76,95 +102,71 @@ export function MastodonFeed() {
<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">
<FontAwesomeIcon
icon={faMastodon}
className="h-4 w-4 text-purple-500 dark:text-purple-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;
<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"
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}
>
{/* Boost indicator */}
{status.reblog && (
<div className="type-small flex items-center gap-1 text-slate-400 dark:text-slate-500">
<FontAwesomeIcon
icon={faArrowRight}
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>
)}
{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"
>
查看更多
<FontAwesomeIcon icon={faArrowRight} className="h-3 w-3" />
</a>
)}
<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>
);
}