feat: add view transitions

valcosmos · Oct 9, 2024 · 118a935 · 118a935
1 parent e920373
commit 118a935
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 46 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import type { AnalyticsConfig } from 'pliny/analytics'
 import type { SearchConfig } from 'pliny/search'
+import { ViewTransitions } from 'next-view-transitions'
 
 // import process from 'node:process'
 import Footer from '@/components/Footer'
@@ -66,50 +67,53 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   const basePath = process.env.BASE_PATH || ''
 
   return (
-    <html
-      lang={siteMetadata.language}
-      className={`${space_grotesk.variable} scroll-smooth`}
-      suppressHydrationWarning
-    >
-      <link
-        rel="apple-touch-icon"
-        sizes="76x76"
-        href={`${basePath}/static/favicons/apple-touch-icon.png`}
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href={`${basePath}/static/favicons/favicon-32x32.png`}
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="16x16"
-        href={`${basePath}/static/favicons/favicon-16x16.png`}
-      />
-      <link rel="manifest" href={`${basePath}/static/favicons/site.webmanifest`} />
-      <link
-        rel="mask-icon"
-        href={`${basePath}/static/favicons/safari-pinned-tab.svg`}
-        color="#5bbad5"
-      />
-      <meta name="msapplication-TileColor" content="#000000" />
-      <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
-      <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
-      <link rel="alternate" type="application/rss+xml" href={`${basePath}/feed.xml`} />
-      <body className="bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white">
-        <ThemeProviders>
-          <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
-          <SectionContainer>
-            <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
-              <Header />
-              <main className="mb-auto">{children}</main>
-            </SearchProvider>
-            <Footer />
-          </SectionContainer>
-        </ThemeProviders>
-      </body>
-    </html>
+    <ViewTransitions>
+
+      <html
+        lang={siteMetadata.language}
+        className={`${space_grotesk.variable} scroll-smooth`}
+        suppressHydrationWarning
+      >
+        <link
+          rel="apple-touch-icon"
+          sizes="76x76"
+          href={`${basePath}/static/favicons/apple-touch-icon.png`}
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href={`${basePath}/static/favicons/favicon-32x32.png`}
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href={`${basePath}/static/favicons/favicon-16x16.png`}
+        />
+        <link rel="manifest" href={`${basePath}/static/favicons/site.webmanifest`} />
+        <link
+          rel="mask-icon"
+          href={`${basePath}/static/favicons/safari-pinned-tab.svg`}
+          color="#5bbad5"
+        />
+        <meta name="msapplication-TileColor" content="#000000" />
+        <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
+        <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
+        <link rel="alternate" type="application/rss+xml" href={`${basePath}/feed.xml`} />
+        <body className="bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white">
+          <ThemeProviders>
+            <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
+            <SectionContainer>
+              <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
+                <Header />
+                <main className="mb-auto">{children}</main>
+              </SearchProvider>
+              <Footer />
+            </SectionContainer>
+          </ThemeProviders>
+        </body>
+      </html>
+    </ViewTransitions>
   )
 }
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -1,6 +1,7 @@
 import type { LinkProps } from 'next/link'
 import type { AnchorHTMLAttributes } from 'react'
-import Link from 'next/link'
+// import Link from 'next/link'
+import { Link } from 'next-view-transitions'
 
 function CustomLink({ href, ...rest }: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>) {
   const isInternalLink = href && href.startsWith('/')

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "next": "14.2.14",
     "next-contentlayer2": "0.5.1",
     "next-themes": "^0.3.0",
+    "next-view-transitions": "^0.3.2",
     "pliny": "0.3.2",
     "postcss": "^8.4.47",
     "react": "18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml