- Scale monitor, desk, keyboard, Mac mini proportionally at 1024/1280/1536px
- Increase terminal window, logos, and font sizes on larger viewports
- Scale bezel, stand, screen inset for consistent proportions
Co-authored-by: Cursor <cursoragent@cursor.com>
- MatrixRain: add delta time for consistent speed across 60/120/144Hz displays
- ReadingProgress: use Scroll-Driven Animations API with JS fallback
- Fallback to scroll events for unsupported browsers (Firefox) and prefers-reduced-motion
Co-authored-by: Cursor <cursoragent@cursor.com>
- 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>
