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:
@@ -1,6 +1,5 @@
|
||||
'use client';
|
||||
|
||||
import { Link } from 'next-view-transitions';
|
||||
import { useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { ThemeToggle } from './theme-toggle';
|
||||
@@ -8,6 +7,7 @@ import { NavMenu, NavLinkItem, IconKey } from './nav-menu';
|
||||
import { SearchButton } from './search-modal';
|
||||
import { siteConfig } from '@/lib/config';
|
||||
import { allPages } from 'contentlayer2/generated';
|
||||
import Link from 'next/link';
|
||||
|
||||
// Dynamically import SearchModal to reduce initial bundle size
|
||||
const SearchModal = dynamic(
|
||||
@@ -88,7 +88,7 @@ export function SiteHeader({ recentPosts = [] }: SiteHeaderProps) {
|
||||
<Link
|
||||
href="/"
|
||||
prefetch={true}
|
||||
className="motion-link group relative type-title whitespace-nowrap text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100"
|
||||
className="motion-link group relative type-title whitespace-nowrap text-slate-900 hover:text-accent focus-visible:outline-none focus-visible:text-accent dark:text-slate-100 dark:hover:text-accent"
|
||||
>
|
||||
<span className="absolute -bottom-0.5 left-0 h-[2px] w-0 bg-accent transition-all duration-180 ease-snappy group-hover:w-full" aria-hidden="true" />
|
||||
{siteConfig.title}
|
||||
|
||||
Reference in New Issue
Block a user