✨ View transitions

n1ckoates · Nov 17, 2024 · 2a30c72 · 2a30c72
1 parent be8404b
commit 2a30c72
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 42 deletions.
diff --git a/app/blog/Search.tsx b/app/blog/Search.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { IconSearch } from "@tabler/icons-react";
-import Link from "next/link";
+import { Link } from "next-view-transitions";
 import { useState } from "react";
 import Image from "next/image";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
@@ -71,7 +71,12 @@ export default function Search(props: {
 						/>
 
 						<div className="flex flex-col justify-between gap-1 bg-gradient-to-b from-transparent to-zinc-950 p-4 text-white lg:flex-row">
-							<div className="text-zinc-300 md:text-lg">
+							<div
+								className="text-zinc-300 md:text-lg"
+								style={{
+									viewTransitionName: `${post.slug}-time`,
+								}}
+							>
 								<time
 									dateTime={post.date.toISOString()}
 									className="whitespace-pre after:content-['_•_'] lg:after:content-['\A']"
@@ -83,7 +88,12 @@ export default function Search(props: {
 								{post.readingTime} min read
 							</div>
 							<div className="w-full lg:w-2/3">
-								<h1 className="mb-1 text-xl font-bold md:text-2xl">
+								<h1
+									className="mb-1 text-xl font-bold md:text-2xl"
+									style={{
+										viewTransitionName: `${post.slug}-title`,
+									}}
+								>
 									{post.title}
 								</h1>
 								<h2 className="text-lg text-zinc-300 md:text-xl">

diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -15,11 +15,25 @@ export default async function Post(props: Props) {
 
 	return (
 		<article className="prose prose-lg prose-zinc mx-auto dark:prose-invert md:prose-xl prose-h1:tracking-tight prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-pre:bg-zinc-100 dark:prose-a:text-blue-400 dark:prose-pre:bg-zinc-900 lg:mx-0">
-			<time dateTime={post.date.toISOString()}>
-				{post.date.toLocaleDateString(undefined, { dateStyle: "long" })}
-			</time>{" "}
-			&bull; {post.readingTime} min read
-			<h1 className="text-balance">{post.title}</h1>
+			<span
+				style={{
+					viewTransitionName: `${post._meta.path}-time`,
+				}}
+			>
+				<time dateTime={post.date.toISOString()}>
+					{post.date.toLocaleDateString(undefined, { dateStyle: "long" })}
+				</time>{" "}
+				&bull; {post.readingTime} min read
+			</span>
+
+			<h1
+				className="text-balance"
+				style={{
+					viewTransitionName: `${post._meta.path}-title`,
+				}}
+			>
+				{post.title}
+			</h1>
 			<CustomMDX code={post.mdx} />
 		</article>
 	);

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,6 +6,7 @@ import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import mergeMetadata from "@/lib/mergeMetadata";
 import { ThemeProvider } from "next-themes";
+import { ViewTransitions } from "next-view-transitions";
 
 export const metadata = mergeMetadata();
 
@@ -25,27 +26,29 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<html
-			lang="en"
-			suppressHydrationWarning
-			className={`${monaSans.className} scroll-smooth [scrollbar-gutter:stable]`}
-		>
-			<body className="max-w-7xl gap-8 bg-zinc-50 px-6 pb-8 text-black dark:bg-zinc-950 dark:text-white lg:mx-auto lg:flex lg:flex-row lg:py-20 2xl:px-0">
-				<div className="bg-grid fixed left-0 top-0 -z-50 size-full text-zinc-200 [mask-image:radial-gradient(ellipse_at_top_left,black,transparent_50%)] dark:text-zinc-900" />
-
-				<ThemeProvider attribute="class" disableTransitionOnChange>
-					<Navbar />
-
-					<Sidebar />
-
-					<main id="main" className="mt-16 grow lg:mt-0">
-						{children}
-					</main>
-				</ThemeProvider>
-
-				<Analytics />
-				<SpeedInsights />
-			</body>
-		</html>
+		<ViewTransitions>
+			<html
+				lang="en"
+				suppressHydrationWarning
+				className={`${monaSans.className} scroll-smooth [scrollbar-gutter:stable]`}
+			>
+				<body className="max-w-7xl gap-8 bg-zinc-50 px-6 pb-8 text-black dark:bg-zinc-950 dark:text-white lg:mx-auto lg:flex lg:flex-row lg:py-20 2xl:px-0">
+					<div className="bg-grid fixed left-0 top-0 -z-50 size-full text-zinc-200 [mask-image:radial-gradient(ellipse_at_top_left,black,transparent_50%)] dark:text-zinc-900" />
+
+					<ThemeProvider attribute="class" disableTransitionOnChange>
+						<Navbar />
+
+						<Sidebar />
+
+						<main id="main" className="mt-16 grow lg:mt-0">
+							{children}
+						</main>
+					</ThemeProvider>
+
+					<Analytics />
+					<SpeedInsights />
+				</body>
+			</html>
+		</ViewTransitions>
 	);
 }
diff --git a/app/loading.tsx b/app/loading.tsx
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,6 +4,7 @@ import NewsletterForm from "@/components/NewsletterForm";
 import { OrbContainer, Orb } from "@/components/Orb";
 import allPosts from "@/lib/posts";
 import Image from "next/image";
+import { Link as TransitionLink } from "next-view-transitions";
 
 function S({ children }: { children: React.ReactNode }) {
 	return (
@@ -88,7 +89,7 @@ async function PostGrid() {
 	return (
 		<div className="mx-auto grid grid-cols-2 gap-4 md:grid-cols-3">
 			{posts.map((post) => (
-				<Link
+				<TransitionLink
 					href={"/blog/" + post._meta.path}
 					className="group relative h-60 overflow-hidden rounded-xl first:col-span-2 only:col-span-full max-md:last:even:col-span-full md:h-80 md:last:[&:nth-child(3)]:col-span-full last:[&:nth-child(4)]:col-span-2"
 					aria-label={post.title}
@@ -106,14 +107,24 @@ async function PostGrid() {
 					/>
 
 					<div className="absolute w-full bg-gradient-to-b from-zinc-50/70 via-zinc-50/50 via-75% p-4 dark:from-zinc-950/70 dark:via-zinc-950/50">
-						<div className="text-zinc-800 drop-shadow-sm dark:text-zinc-200">
+						<p
+							className="text-zinc-800 drop-shadow-sm dark:text-zinc-200"
+							style={{
+								viewTransitionName: `${post._meta.path}-time`,
+							}}
+						>
 							{post.date.toLocaleDateString(undefined, {
 								dateStyle: "long",
 							})}{" "}
 							&bull; {post.readingTime} min read
-						</div>
+						</p>
 
-						<h1 className="max-w-lg text-balance text-2xl font-bold drop-shadow-sm md:group-first:text-3xl">
+						<h1
+							className="max-w-lg text-balance text-2xl font-bold drop-shadow-sm md:group-first:text-3xl"
+							style={{
+								viewTransitionName: `${post._meta.path}-title`,
+							}}
+						>
 							{post.title}
 						</h1>
 					</div>
@@ -125,7 +136,7 @@ async function PostGrid() {
 					>
 						Read post
 					</div>
-				</Link>
+				</TransitionLink>
 			))}
 		</div>
 	);

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
 		"clsx": "^2.1.1",
 		"next": "^15.0.3",
 		"next-themes": "^0.4.3",
+		"next-view-transitions": "^0.3.2",
 		"postcss": "^8.4.47",
 		"react": "^19.0.0-rc-7c8e5e7a-20241101",
 		"react-dom": "^19.0.0-rc-7c8e5e7a-20241101",