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:
2025-11-20 16:10:31 +08:00
parent 2b1060dd45
commit 8c71e80b2a
3 changed files with 332 additions and 0 deletions

View File

@@ -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">