Add bundle analyzer configuration
Configure @next/bundle-analyzer for production bundle analysis: **Changes:** - Install @next/bundle-analyzer package - Update next.config.mjs to wrap config with bundle analyzer - Add npm script `build:analyze` to run build with ANALYZE=true - Bundle analyzer only enabled when ANALYZE=true environment variable is set **Usage:** ```bash # Run build with bundle analysis npm run build:analyze # Opens interactive bundle visualization in browser # Shows chunk sizes, module dependencies, and optimization opportunities ``` **Note:** Kept Mastodon feed as Client Component (not Server Component) because formatRelativeTime() uses `new Date()` which requires dynamic rendering. Converting to Server Component would prevent static generation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,3 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FaMastodon } from 'react-icons/fa';
|
||||
import { FiArrowRight } from 'react-icons/fi';
|
||||
import { siteConfig } from '@/lib/config';
|
||||
@@ -6,95 +9,65 @@ import {
|
||||
stripHtml,
|
||||
truncateText,
|
||||
formatRelativeTime,
|
||||
fetchAccountId,
|
||||
fetchStatuses,
|
||||
type MastodonStatus
|
||||
} from '@/lib/mastodon';
|
||||
|
||||
/**
|
||||
* 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
|
||||
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;
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) return null;
|
||||
try {
|
||||
// Parse the Mastodon URL
|
||||
const parsed = parseMastodonUrl(mastodonUrl);
|
||||
if (!parsed) {
|
||||
setError(true);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const account = await response.json();
|
||||
return account.id;
|
||||
} catch (error) {
|
||||
console.error('Error fetching Mastodon account:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
const { instance, username } = parsed;
|
||||
|
||||
/**
|
||||
* 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
|
||||
// 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);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
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;
|
||||
loadStatuses();
|
||||
}, []);
|
||||
|
||||
// Don't render if no Mastodon URL is configured
|
||||
if (!mastodonUrl) {
|
||||
if (!siteConfig.social.mastodon) {
|
||||
return null;
|
||||
}
|
||||
|
||||
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) {
|
||||
// Don't render if there's an error (fail silently)
|
||||
if (error) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -107,66 +80,84 @@ export async function MastodonFeed() {
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<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;
|
||||
{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}
|
||||
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"
|
||||
>
|
||||
{relativeTime}
|
||||
</time>
|
||||
</a>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{/* 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 */}
|
||||
<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>
|
||||
{!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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user