- Add nextjs-toploader for instant top progress bar on navigation
- Add next-view-transitions for View Transitions API page transitions
- Enhance template.tsx page enter animation (0.45s, scale effect)
- Replace next/link with next-view-transitions Link for smooth transitions
- Add prefers-reduced-motion support for accessibility
Co-authored-by: Cursor <cursoragent@cursor.com>
- Hero: responsive max-width (2xl→3xl→4xl→5xl) and min-height
- Terminal: responsive font size (sm→base→lg), padding, title bar
Co-authored-by: Cursor <cursoragent@cursor.com>
- Extract RightSidebarContent for reuse in desktop and mobile
- Add floating action button (FAB) on narrow screens to open sidebar
- Slide-over drawer from right with author card, Mastodon feed, tags
- Lazy load Mastodon feed when drawer opens (forceLoadFeed prop)
Co-authored-by: Cursor <cursoragent@cursor.com>
Added dark:hover:bg-slate-800/80 to prevent the light hover:bg-slate-50
from overriding the dark background.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Replace tailwindcss v3 + autoprefixer with tailwindcss v4 + @tailwindcss/postcss
- Migrate tailwind.config.cjs theme to @theme block in globals.css
- Add @custom-variant dark for class-based dark mode (next-themes)
- Load typography plugin via @plugin directive, replace prose-dark with prose-invert
- Convert prose dark mode overrides from JS config to CSS (.dark .prose rules)
- Add @source directive for content submodule detection
- Replace postcss.config.cjs with postcss.config.mjs
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add placeholder fallback to generateStaticParams for cacheComponents compatibility
- Update npm packages within semver range (next 16.1.6, react 19.2.4, shiki 3.22.0, etc.)
- Add /new-post skill for blog publishing workflow
- Update CLAUDE.md with git remote mirroring docs
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- New post: 不是所有眼淚，都該被濃縮成重點
- CLAUDE.md: add deployment workflow and content submodule instructions
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Added whitespace-pre-line CSS class to preserve line breaks in
Mastodon post content. Previously, newline characters were being
collapsed into single spaces by default HTML whitespace handling.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Better fix for TOC showing previous article headings. The issue was
relying on pathname which could be out of sync with the actual content.
Changes:
- Pass contentKey as prop to PostToc instead of using usePathname()
- Use contentKey in useEffect dependency for more reliable updates
- Replace setTimeout with double requestAnimationFrame for DOM sync
- Remove unused usePathname import
This ensures the TOC effect runs exactly when the content changes,
not just when the URL changes, providing more reliable synchronization
between the TOC and the article content.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The TOC was displaying sections from previously viewed articles when
navigating between posts. This happened because the DOM query for
headings ran before Next.js finished updating the page content.
Changes to components/post-toc.tsx:
- Clear items and activeId immediately when pathname changes
- Add 50ms delay before querying DOM for new headings
- Properly handle IntersectionObserver cleanup with timeout
This ensures the TOC always shows the correct headings for the
current article, not the previous one.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adjusted TOC button positioning to prevent overlap with the back-to-top
button on mobile devices:
- Mobile: bottom-20 (80px) - sits well above back-to-top at bottom-6
- Desktop: lg:bottom-8 - maintains original desktop position
- Both buttons now aligned to right-4 on mobile for consistency
This gives ~56px vertical spacing between buttons on mobile,
preventing any overlap while keeping both easily accessible.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The TOC toggle button was appearing near the end of posts instead of
floating at a fixed position. This happened because the button was
rendered inside the PostLayout component hierarchy.
Changes:
- Use React Portal to render TOC button at document.body level
- Add mounted state for proper SSR/client hydration
- Button now floats like back-to-top button, visible from start
This ensures the button is always visible and accessible, similar to
the back-to-top button behavior.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Removed @next/bundle-analyzer package
- Removed build:analyze script
- Cleaned up next.config.mjs
The Next Bundle Analyzer is not compatible with Turbopack builds yet.
Since this project uses Turbopack, the analyzer cannot be used.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Bundle analyzer requires webpack, add --webpack flag to build:analyze script.
Note: This makes analysis builds slower but enables bundle visualization.
Regular builds still use faster Turbopack.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Configure @next/bundle-analyzer for production bundle analysis:
**Changes:**
- Install @next/bundle-analyzer package
- Update next.config.mjs to wrap config with bundle analyzer
- Add npm script `build:analyze` to run build with ANALYZE=true
- Bundle analyzer only enabled when ANALYZE=true environment variable is set
**Usage:**
```bash
# Run build with bundle analysis
npm run build:analyze
# Opens interactive bundle visualization in browser
# Shows chunk sizes, module dependencies, and optimization opportunities
```
**Note:** Kept Mastodon feed as Client Component (not Server Component)
because formatRelativeTime() uses `new Date()` which requires dynamic
rendering. Converting to Server Component would prevent static generation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented comprehensive Schema.org structured data across the blog to improve SEO and enable rich snippets in search results.
Changes:
- Created JSON-LD helper component for safe schema rendering
- Added BlogPosting schema to blog posts with:
* Article metadata (headline, description, image, dates)
* Author and publisher information
* Keywords and article sections from tags
- Added BreadcrumbList schema to blog posts for navigation
- Added WebSite and Organization schemas to root layout
* Site-wide identity and branding
* Search action for site search functionality
- Added CollectionPage schema to homepage
* Blog collection metadata
- Added WebPage schema to static pages
* Page metadata with dates and images
Benefits:
- Rich snippets in Google/Bing search results
- Better content understanding by search engines
- Article cards with images, dates, authors in SERPs
- Breadcrumb navigation in search results
- Improved SEO ranking signals
All schemas validated against Schema.org specifications and include proper Chinese language support.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed all internal post links from /posts/ to /blog/ to match the actual URL structure. The contentlayer config generates URLs as /blog/{slug} for posts, not /posts/{slug}.
Fixed links in:
- content/pages/關於作者.md (7 links)
- content/posts/OPNsense 在 Proxmox VE 內安裝筆記.md (1 link)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
