Features:
- Display latest 5 Mastodon posts (toots) in sidebar
- Include original posts and boosts, exclude replies
- Show medium-length previews (150-200 chars)
- Styled to match existing blog design with purple Mastodon branding
- Section title: "微網誌 (Microblog)"
- Relative timestamps in Chinese ("2小時前")
- Links to original posts on Mastodon
- Loading skeletons for better UX
- Graceful error handling (fails silently if API unavailable)
- Respects dark mode
Implementation:
- Created lib/mastodon.ts with utility functions:
- Parse Mastodon URL format
- Strip HTML from content
- Smart text truncation
- Relative time formatting in Chinese
- API functions to fetch account and statuses
- Created components/mastodon-feed.tsx:
- Client component with useEffect for data fetching
- Fetches directly from Mastodon public API
- Handles boosts/reblogs with indicator
- Shows media attachment indicators
- Matches existing card styling patterns
- Updated components/right-sidebar.tsx:
- Added MastodonFeed between profile and hot tags
- Maintains consistent spacing and layout
Usage:
Set NEXT_PUBLIC_MASTODON_URL in .env.local to enable
Format: https://your.instance/@yourhandle
159 lines
4.4 KiB
TypeScript
159 lines
4.4 KiB
TypeScript
/**
|
|
* 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(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, "'")
|
|
.replace(/ /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 [];
|
|
}
|
|
}
|