gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
175 Commits 1 Branch 0 Tags
1f3323834e73584bed4035d513f0388512342c8a
Commit Graph

24 Commits

Author SHA1 Message Date
gbanyan
0bb3ee40c6 Optimize performance: Replace Framer Motion and FontAwesome, convert Mastodon to Server Component 
Major performance optimizations addressing PageSpeed Insights warnings:

**Phase 1: Replace Framer Motion with CSS (~60-100KB savings)**
- Remove Framer Motion from components/post-layout.tsx
- Add CSS transitions to styles/globals.css for TOC animations
- Replace motion.div/motion.button with regular elements + CSS classes
- Remove framer-motion package dependency

**Phase 2: Replace FontAwesome with React Icons (~150-250KB savings)**
- Replace FontAwesome in 16 components with react-icons
- Use Feather icons (react-icons/fi) for UI elements
- Use FontAwesome brand icons (react-icons/fa) for social media
- Remove 4 @fortawesome packages (@fortawesome/fontawesome-svg-core,
  @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons,
  @fortawesome/react-fontawesome)
- Updated components:
  - app/error.tsx, app/tags/page.tsx, app/tags/[tag]/page.tsx
  - components/hero.tsx, components/mastodon-feed.tsx
  - components/meta-item.tsx, components/nav-menu.tsx
  - components/post-card.tsx, components/post-layout.tsx
  - components/post-list-item.tsx, components/post-list-with-controls.tsx
  - components/post-storyline-nav.tsx, components/post-toc.tsx
  - components/right-sidebar.tsx, components/search-modal.tsx
  - components/site-footer.tsx, components/theme-toggle.tsx

**Phase 3: Convert Mastodon Feed to Server Component**
- Convert components/mastodon-feed.tsx from Client Component to async Server Component
- Replace client-side useEffect fetching with server-side ISR
- Add 30-minute revalidation (next: { revalidate: 1800 })
- Eliminate 2 blocking client-side network requests
- Remove loading state (rendered on server)

**Total Impact:**
- JavaScript bundle: ~210-350KB reduction
- Blocking network requests: 2 eliminated
- Main thread time: Reduced by ~100-160ms
- Build: ✅ Verified successful

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 21:51:24 +08:00
gbanyan
8c71e80b2a 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
 2025-11-20 16:10:31 +08:00
gbanyan
4c08413936 Migrate to Contentlayer2 2025-11-19 21:46:49 +08:00
gbanyan
f32206d390 Use next/image for hero/sidebar/markdown images 2025-11-19 02:07:35 +08:00
gbanyan
61d5092136 Let sidebar about text honor line breaks 2025-11-19 00:26:37 +08:00
gbanyan
a582ef9cb5 Scale right sidebar typography 2025-11-19 00:24:16 +08:00
gbanyan
dc5ca97fee Add fluid typography scale and responsive headings 2025-11-19 00:22:09 +08:00
gbanyan
80d0b236c5 Refine navigation and post UI 2025-11-18 17:34:05 +08:00
gbanyan
00b45950a4 Increase right sidebar font sizes for better readability 2025-11-18 00:26:55 +08:00
gbanyan
42ea2de3bd Add env-based short about text under sidebar avatar and remove 'about site' card 2025-11-18 00:18:15 +08:00
gbanyan
586e0bfdbc Align sidebar hot tags with neutral dark-mode styling 2025-11-17 23:17:23 +08:00
gbanyan
6033d9f58a Apply accent-based tag styling to sidebar hot tags for better dark-mode readability 2025-11-17 23:11:25 +08:00
gbanyan
834ee6838d Make right-sidebar gravatar larger again 2025-11-17 23:07:41 +08:00
gbanyan
22d01bfee8 Increase gravatar size in right sidebar hero 2025-11-17 23:06:15 +08:00
gbanyan
4cb3e7627b Introduce env-driven accent color system and apply to links, icons, and tags 2025-11-17 22:46:55 +08:00
gbanyan
8c7453dbcc Remove latest articles section from right sidebar 2025-11-17 22:24:49 +08:00
gbanyan
593a5ff272 Add gravatar hero with social icons to right sidebar 2025-11-17 22:01:25 +08:00
gbanyan
845be8a6fe Limit sidebar to top 5 popular tags and add tag index page 2025-11-17 21:31:39 +08:00
gbanyan
c675fa65e3 Make right sidebar sticky like TOC on single posts 2025-11-17 20:56:49 +08:00
gbanyan
3b1a3eb6e1 Introduce colorful accents for tags, tag cloud, and hero 2025-11-17 20:23:45 +08:00
gbanyan
bede4a2f3e Stabilize tag URLs using slugs instead of raw tag text 2025-11-17 18:48:50 +08:00
gbanyan
7c5962485c Link tags to tag pages and add tag overview 2025-11-17 18:40:27 +08:00
gbanyan
3253e70a37 Add tag cloud to right sidebar 2025-11-17 18:38:08 +08:00
gbanyan
b89c01c966 Tweak card images, dark mode text, social links, and add right sidebar 2025-11-17 17:19:47 +08:00