3748e2f9e8
Optimize blog performance with Next.js 16 features and video conversion
...
## Performance Improvements
### Next.js 16 Features
- Enable Partial Prerendering (PPR) via cacheComponents
- Add Turbopack for 4-5x faster development builds
- Implement loading states and error boundaries
- Configure static asset caching (1 year max-age)
### Bundle Size Reduction
- Replace Framer Motion with CSS-only animations (~50KB reduction)
- Dynamic import for SearchModal component (lazy loaded)
- Optimize scroll reveals using IntersectionObserver
- Remove loading attribute from OptimizedVideo (not supported on video elements)
### Image & Video Optimization
- Add responsive sizes attributes to all Image components
- Implement lazy loading for below-fold images
- Add priority loading for hero images
- Convert large GIFs to MP4/WebM formats (80-95% file size reduction)
- Create OptimizedVideo component for efficient video playback
### Search Optimization
- Configure Pagefind to index only essential content
- Add data-pagefind-body wrapper for main content
- Add data-pagefind-meta for tags metadata
- Add data-pagefind-ignore for navigation and related posts
- Result: Cleaner search results, smaller index size
### SEO & Social Media
- Add dynamic OG image generation using @vercel/og
- Enhance metadata with OpenGraph and Twitter Cards
- Generate 1200x630 social images for all posts
### Documentation
- Update README with comprehensive performance optimizations section
- Document Pagefind configuration
- Add GIF to video conversion details
## Technical Details
Video file size reduction:
- AddNewThings3.gif (2.4MB) → WebM (116KB) = 95% reduction
- Things3.gif (1.5MB) → WebM (170KB) = 89% reduction
- Total: 3.9MB → 286KB = 93% reduction
Build output: 49 pages indexed, 5370 words searchable
2025-11-20 15:50:46 +08:00
a4db9688b6
Upgrade to Next.js 16 with Turbopack and Contentlayer2
...
- Upgraded Next.js to v16, React to v19
- Migrated from contentlayer to contentlayer2
- Migrated to Turbopack by decoupling Contentlayer from webpack
- Updated all page components to handle async params (Next.js 15+ breaking change)
- Changed package.json to type: module and renamed config files to .cjs
- Updated README with current tech stack and article creation instructions
- Fixed tag encoding issue (removed double encoding)
- All security vulnerabilities resolved (npm audit: 0 vulnerabilities)
2025-11-19 22:43:14 +08:00
7ca7655e40
Add asset sync script
2025-11-19 17:31:18 +08:00
0d5fc93b30
Document serif headings and point submodule to GitHub
2025-11-19 17:12:11 +08:00
937203b4e9
docs: refresh README for new design
2025-11-19 02:31:37 +08:00
96ebca37d6
Add storyline navigation rail for posts
2025-11-18 16:45:46 +08:00
4b3329d66f
Add related posts section and blog search
2025-11-18 16:43:52 +08:00
0df0a85579
Refresh README to match current layout, color system, and content submodule workflow
2025-11-18 02:04:43 +08:00
e8436106c7
Add project README
2025-11-17 16:37:48 +08:00
