feat: add view transitions

Author: WarningImHack3r

package.json

@@ -60,6 +60,7 @@
 		"svelte-exmarkdown": "^5.0.1",
 		"svelte-meta-tags": "^4.3.0",
 		"svelte-sonner": "^1.0.3",
+		"sveltekit-view-transition": "^0.5.3",
 		"tailwind-merge": "^3.3.0",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.1.7",

pnpm-lock.yaml

@@ -7,6 +7,7 @@
 	import { ProgressBar } from "@prgm/sveltekit-progress-bar";
 	import { ModeWatcher, resetMode, setMode } from "mode-watcher";
 	import { MetaTags, deepMerge } from "svelte-meta-tags";
+	import { setupViewTransition } from "sveltekit-view-transition";
 	import { news } from "$lib/news/news.json";
 	import type { Entries } from "$lib/types";
 	import { cn } from "$lib/utils";
@@ -18,6 +19,8 @@
 
 	let { data, children } = $props();
 
+	setupViewTransition();
+
 	// SEO
 	let metaTags = $derived(deepMerge(data.baseMetaTags, page.data.pageMetaTags));
 

src/routes/+layout.svelte

@@ -15,6 +15,7 @@
 	import ReleaseCard from "./ReleaseCard.svelte";
 
 	let { data } = $props();
+	let viewTransitionName = $derived(data.currentPackage.pkg.name.replace(/[@/-]/g, ""));
 	let latestRelease = $derived(
 		data.currentPackage.category.slug === ALL_SLUG
 			? undefined
@@ -100,7 +101,10 @@
 	{:then}
 		<div class="flex flex-col">
 			<div class="my-8">
-				<h1 class="text-3xl font-semibold text-primary text-shadow-sm md:text-5xl">
+				<h1
+					class="text-3xl font-semibold text-primary text-shadow-sm md:text-5xl"
+					style:view-transition-name="title-{viewTransitionName}"
+				>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 					{@html data.currentPackage.pkg.name.replace(/\//g, "/<wbr />")}
 				</h1>
@@ -113,7 +117,11 @@
 								target="_blank"
 								class="underline-offset-2 group-hover:underline after:ml-0.5 after:inline-block after:font-sans after:text-sm after:content-['↗']"
 							>
-								{data.currentPackage.repoOwner}/<wbr />{data.currentPackage.repoName}
+								<span style:view-transition-name="owner-{viewTransitionName}">
+									{data.currentPackage.repoOwner}
+								</span>/<wbr /><span style:view-transition-name="repo-name-{viewTransitionName}">
+									{data.currentPackage.repoName}
+								</span>
 							</a>
 						</h2>
 						<Separator
@@ -153,7 +161,9 @@
 					</Collapsible.Root>
 				</div>
 				{#if data.currentPackage.pkg.description}
-					<h3 class="mt-4 italic">{data.currentPackage.pkg.description}</h3>
+					<h3 class="mt-4 italic" style:view-transition-name="desc-{viewTransitionName}">
+						{data.currentPackage.pkg.description}
+					</h3>
 				{/if}
 			</div>
 			<Accordion.Root

src/routes/package/[...package]/+page.svelte

@@ -60,6 +60,7 @@
 			<h3 class="font-display text-3xl text-primary text-shadow-sm">{category.name}</h3>
 			<ul class="mt-2">
 				{#each packages as { repoOwner, repoName, pkg }, index (pkg.name)}
+					{@const viewTransitionName = pkg.name.replace(/[@/-]/g, "")}
 					{@const linkedBadgeData = getBadgeDataFromOther(pkg.name)}
 					{#if index > 0}
 						<Separator class="mx-auto my-1 w-[95%]" />
@@ -70,14 +71,22 @@
 							class="group flex items-center gap-4 rounded-xl px-4 py-3 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800"
 						>
 							<div class="flex flex-col">
-								<h4 class="font-medium">{pkg.name}</h4>
+								<h4 class="font-medium" style:view-transition-name="title-{viewTransitionName}">
+									{pkg.name}
+								</h4>
 								<span class="text-muted-foreground">
-									{pkg.description}
+									<span style:view-transition-name="desc-{viewTransitionName}">
+										{pkg.description}
+									</span>
 									<span class="font-bold">
 										{#if pkg.description}
 											•
 										{/if}
-										{repoOwner}/{repoName}
+										<span style:view-transition-name="owner-{viewTransitionName}">
+											{repoOwner}
+										</span>/<span style:view-transition-name="repo-name-{viewTransitionName}">
+											{repoName}
+										</span>
 									</span>
 								</span>
 							</div>