site: add view transitions and transition blog title (#9164)

* Add view transitions and transition blog title

* Scope view transitions to /blog routes

Author: geoffrich

pnpm-lock.yaml

@@ -29,7 +29,7 @@
   "devDependencies": {
     "@resvg/resvg-js": "^2.4.1",
     "@sveltejs/adapter-vercel": "^3.0.3",
-    "@sveltejs/kit": "^1.22.6",
+    "@sveltejs/kit": "^1.24.0",
     "@sveltejs/site-kit": "6.0.0-next.36",
     "@sveltejs/vite-plugin-svelte": "^2.4.5",
     "@types/cookie": "^0.5.1",

sites/svelte.dev/package.json

@@ -0,0 +1,22 @@
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+
+	// add these lines
+	interface ViewTransition {
+		updateCallbackDone: Promise<void>;
+		ready: Promise<void>;
+		finished: Promise<void>;
+		skipTransition: () => void;
+	}
+
+	interface Document {
+		startViewTransition(updateCallback: () => Promise<void>): ViewTransition;
+	}
+}
+
+export {};

sites/svelte.dev/src/app.d.ts

@@ -0,0 +1,16 @@
+<script>
+	import { onNavigate } from '$app/navigation';
+
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
+</script>
+
+<slot />

sites/svelte.dev/src/routes/blog/+layout.svelte

@@ -22,8 +22,8 @@
 		{#if !post.draft}
 			<article class="post" data-pubdate={post.date}>
 				<a class="no-underline" href="/blog/{post.slug}" title="Read the article »">
-					<h2>{post.title}</h2>
-					<p>{post.description}</p>
+					<h2 style:--name="post-title-{post.slug}">{post.title}</h2>
+					<p class="description" style:--name="post-description-{post.slug}">{post.description}</p>
 				</a>
 			</article>
 		{/if}
@@ -49,6 +49,13 @@
 		font-weight: 400;
 	}
 
+	@media (prefers-reduced-motion: no-preference) {
+		h2,
+		.description {
+			view-transition-name: var(--name);
+		}
+	}
+
 	.post:first-child {
 		margin: 0 0 2rem 0;
 		padding: 0 0 4rem 0;

sites/svelte.dev/src/routes/blog/+page.svelte

@@ -20,8 +20,10 @@
 </svelte:head>
 
 <article class="post listify text">
-	<h1>{data.post.title}</h1>
-	<p class="standfirst">{data.post.description}</p>
+	<h1 style:--name="post-title-{$page.params.slug}">{data.post.title}</h1>
+	<p class="standfirst" style:--name="post-description-{$page.params.slug}">
+		{data.post.description}
+	</p>
 
 	<p class="byline">
 		<a href={data.post.author.url}>{data.post.author.name}</a>
@@ -52,6 +54,13 @@
 		margin: 0 0 1em 0;
 	}
 
+	@media (prefers-reduced-motion: no-preference) {
+		h1,
+		.standfirst {
+			view-transition-name: var(--name);
+		}
+	}
+
 	.byline {
 		margin: 0 0 6rem 0;
 		padding: 1.6rem 0 0 0;