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

lib/mastodon.ts

@@ -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(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&nbsp;/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 [];
+  }
+}