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

- 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:
2026-03-14 23:00:21 +08:00
parent efb57b691b
commit 1b495d2d2d
33 changed files with 1124 additions and 830 deletions

View File

@@ -1,4 +1,6 @@
import { Children, ReactNode } from 'react';
'use client';
import {Children, ReactNode, useEffect, useState} from 'react';
import clsx from 'clsx';
interface TimelineWrapperProps {
@@ -7,7 +9,23 @@ interface TimelineWrapperProps {
}
export function TimelineWrapper({ children, className }: TimelineWrapperProps) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const items = Children.toArray(children);
// Only render decorative elements after mount to prevent layout shift
if (!mounted) {
return (
<div className={clsx('relative pl-6 md:pl-8', className)}>
<div className="space-y-4">{items.map((child, index) => <div key={index} className="relative pl-5 sm:pl-8">{child}</div>)}</div>
</div>
);
}
return (
<div className={clsx('relative pl-6 md:pl-8', className)}>
<span