Add Mastodon feed to right sidebar
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
This commit is contained in:
170
components/mastodon-feed.tsx
Normal file
170
components/mastodon-feed.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
'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 { 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">
|
||||
<FontAwesomeIcon
|
||||
icon={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">
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ 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);
|
||||
@@ -91,6 +92,9 @@ 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">
|
||||
|
||||
158
lib/mastodon.ts
Normal file
158
lib/mastodon.ts
Normal file
@@ -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(/</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 [];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user