gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove next-view-transitions and use native View Transition API

Browse Source 
- Remove external next-view-transitions dependency
- Use Next.js 16 native navigation and Safari 18+ native View Transition API
- Add ViewTransitionProvider for minimal wrapping with Safari 18+ detection
- Updated all Link imports from external package to next/link
- Removed link-wrapper.tsx and view-transitions-wrapper.tsx

This resolves Safari compatibility issues while maintaining transitions on modern browsers.
This commit is contained in:
gbanyan
2026-03-14 23:00:21 +08:00
parent efb57b691b
commit 1b495d2d2d
33 changed files with 1124 additions and 830 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/post-layout.tsx
View File

@@ -84,10 +84,10 @@ export function PostLayout({ children, hasToc = true, contentKey, wide }: { chil
const tocButton = hasToc && mounted ? (
<button
onClick={() => setIsTocOpen(true)}
className={cn(
"fixed bottom-6 right-16 z-40 flex h-9 items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 text-sm font-medium text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 lg:hidden",
className={cn(
"fixed bottom-6 right-16 z-40 flex h-9 items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 text-sm font-medium text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 hover:text-accent dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-accent lg:hidden",
isTocOpen ? "opacity-0 pointer-events-none" : "opacity-100"
)}
)}
aria-label="Open Table of Contents"
>
<FiList className="h-4 w-4" />
@@ -98,9 +98,9 @@ export function PostLayout({ children, hasToc = true, contentKey, wide }: { chil
const desktopTocButton = hasToc && mounted ? (
<button
onClick={() => setIsDesktopTocOpen(!isDesktopTocOpen)}
className={cn(
"fixed bottom-6 right-16 z-40 hidden h-9 items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 text-sm font-medium text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 lg:flex",
)}
className={cn(
"fixed bottom-6 right-16 z-40 hidden h-9 items-center gap-2 rounded-full border border-slate-200 bg-white/90 px-3 text-sm font-medium text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 hover:text-accent dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-accent lg:flex",
)}
aria-label={isDesktopTocOpen ? "Close Table of Contents" : "Open Table of Contents"}
>
<FiList className="h-4 w-4" />