Add View Transitions announcer (#8621)

* Add View Transitions announcer

* fix astro check

* Append the text in a setTimeout

* Use 60 for the timeout

* Add comment on magic number

* Add a changeset

* Update .changeset/small-rules-relax.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Bring back announce logic

* Remove mention of env file

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

5 files changed, 175 insertions, 0 deletions

diff --git a/examples/view-transitions/src/components/Footer.astro b/examples/view-transitions/src/components/Footer.astro
new file mode 100644
index 000000000..45f1338b0
--- /dev/null
+++ b/examples/view-transitions/src/components/Footer.astro
@@ -0,0 +1,17 @@
+<footer class="border border-t border-gray-800">
+  <div class="container mx-auto text-sm px-4 py-6">
+    Made with ❤️ by <a
+      href="https://www.twitter.com/charca"
+      target="_blank"
+      class="underline hover:text-gray-300">Maxi Ferreira</a
+    > — Powered by <a
+      href="https://astro.build"
+      target="_blank"
+      class="underline hover:text-gray-300">Astro</a
+    > and <a
+      href="https://www.themoviedb.org/documentation/api"
+      target="_blank"
+      class="underline hover:text-gray-300">TMDb API</a
+    >.
+  </div>
+</footer>
diff --git a/examples/view-transitions/src/components/MovieCard.astro b/examples/view-transitions/src/components/MovieCard.astro
new file mode 100644
index 000000000..eed190efd
--- /dev/null
+++ b/examples/view-transitions/src/components/MovieCard.astro
@@ -0,0 +1,23 @@
+---
+const { movie } = Astro.props;
+---
+
+<div class="mt-8">
+  <a href={`/movies/${movie.id}`}>
+      <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
+				alt={`${movie.title} Poster`}
+				class="thumbnail hover:opacity-75 transition ease-in-out duration-150"
+				id={`movie-poster-${movie.id}`}
+				transition:name={`poster-${movie.id}`}>
+  </a>
+  <div class="mt-2">
+      <a href={`/movies/${movie.id}`} class="text-lg mt-2 hover:text-gray-300">{movie.title}</a>
+      <div class="flex items-center text-gray-400 text-sm mt-1">
+          <svg class="fill-current text-orange-500 w-4" viewBox="0 0 24 24"><g data-name="Layer 2"><path d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z" data-name="star"/></g></svg>
+          <span class="ml-1">{movie.vote_average}</span>
+          <span class="mx-2">|</span>
+          <span>{movie.release_date}</span>
+      </div>
+      <div class="text-gray-400 text-sm">{movie.genres}</div>
+  </div>
+</div>
diff --git a/examples/view-transitions/src/components/MovieDetails.astro b/examples/view-transitions/src/components/MovieDetails.astro
new file mode 100644
index 000000000..d03340a4b
--- /dev/null
+++ b/examples/view-transitions/src/components/MovieDetails.astro
@@ -0,0 +1,100 @@
+---
+const { data } = Astro.props;
+
+const movie = {
+    ...data,
+    poster_path: data.poster_path
+        ? 'https://image.tmdb.org/t/p/w500/' + data.poster_path
+        : 'https://via.placeholder.com/500x750',
+    vote_average: (data.vote_average * 10).toFixed(2) + '%',
+    release_date: new Date(data.release_date).toLocaleDateString('en-us', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    }),
+    genres: data.genres.map((g: any) => g.name).join(', '),
+    crew: data.credits.crew.slice(0,3),
+    cast: data.credits.cast.slice(0,5).map((c: any) => ({
+        ...c,
+        profile_path: c.profile_path
+            ? 'https://image.tmdb.org/t/p/w300/' + c.profile_path
+            : 'https://via.placeholder.com/300x450'
+    })),
+    images: data.images.backdrops.slice(0, 9),
+}
+---
+
+<div class="movie-info border-b border-gray-800">
+    <div class="container mx-auto px-4 py-16 flex flex-col md:flex-row">
+        <div class="flex-none">
+            <img src={movie.poster_path}
+							alt={`${movie.title} Poster`}
+							class="movie-poster w-64 lg:w-96"
+							id="movie-poster"
+							transition:name={`poster-${movie.id}`}>
+        </div>
+        <div class="md:ml-24">
+            <h2 class="text-4xl mt-4 md:mt-0 mb-2 font-semibold">{movie.title}</h2>
+            <div class="flex flex-wrap items-center text-gray-400 text-sm">
+                <svg class="fill-current text-orange-500 w-4" viewBox="0 0 24 24"><g data-name="Layer 2"><path d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z" data-name="star"/></g></svg>
+                <span class="ml-1">{movie.vote_average}</span>
+                <span class="mx-2">|</span>
+                <span>{movie.release_date}</span>
+                <span class="mx-2">|</span>
+                <span>{movie.genres}</span>
+            </div>
+
+            <p class="text-gray-300 mt-8">
+                {movie.overview}
+            </p>
+
+            <div class="mt-12">
+                <h4 class="text-white font-semibold">Featured Crew</h4>
+                <div class="flex mt-4">
+                    {movie.crew.map((crew: any) => (
+                        <div class="mr-8">
+                            <div>{crew.name}</div>
+                            <div class="text-gray-400 text-sm">{crew.job}</div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    </div>
+</div> <!-- end movie-info -->
+
+<div class="movie-cast border-b border-gray-800">
+    <div class="container mx-auto px-4 py-16">
+        <h2 class="text-4xl font-semibold">Cast</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
+        {movie.cast.map((cast: any) => (
+            <div class="mt-8">
+                <span>
+                    <img id={`person-photo-${cast.id}`} src={cast.profile_path} alt={cast.name} class="thumbnail hover:opacity-75 transition ease-in-out duration-150">
+                </span>
+                <div class="mt-2">
+                    <span class="text-lg mt-2 hover:text-gray:300">{cast.name}</span>
+                    <div class="text-sm text-gray-400">
+                        {cast.character}
+                    </div>
+                </div>
+            </div>
+        ))}
+        </div>
+    </div>
+</div> <!-- end movie-cast -->
+
+<div class="movie-images">
+    <div class="container mx-auto px-4 py-16">
+        <h2 class="text-4xl font-semibold">Images</h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
+        {movie.images.map((image: any) => (
+            <div class="mt-8">
+                    <span>
+                        <img src={`https://image.tmdb.org/t/p/w500${image.file_path}`} loading="lazy" alt={movie.name} class="hover:opacity-75 transition ease-in-out duration-150">
+                    </span>
+                </div>
+        ))}
+        </div>
+    </div>
+</div> <!-- end movie-images -->
diff --git a/examples/view-transitions/src/components/MovieList.astro b/examples/view-transitions/src/components/MovieList.astro
new file mode 100644
index 000000000..69679619c
--- /dev/null
+++ b/examples/view-transitions/src/components/MovieList.astro
@@ -0,0 +1,19 @@
+---
+import MovieCard from './MovieCard.astro';
+import movies from '../popular-movies.json';
+const popularMovies = movies.results;
+---
+
+<div class="container mx-auto px-4 pt-16 mb-16">
+  <div class="popular-movies">
+    <h2 class="uppercase tracking-wider text-orange-500 text-lg font-semibold">
+      Popular Movies
+    </h2>
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"
+    >
+      {popularMovies.map((movie) => <MovieCard movie={movie} />)}
+    </div>
+  </div>
+  <!-- end pouplar-movies -->
+</div>
diff --git a/examples/view-transitions/src/components/Nav.astro b/examples/view-transitions/src/components/Nav.astro
new file mode 100644
index 000000000..c0ca3d5e3
--- /dev/null
+++ b/examples/view-transitions/src/components/Nav.astro
@@ -0,0 +1,16 @@
+<nav class="nav border-b border-gray-800 sticky top-0 z-30 bg-gray-900">
+    <div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between px-4 py-6">
+        <ul class="flex flex-col md:flex-row items-center">
+            <li>
+                <a href="/" class="flex items-center font-bold text-xl">
+                    <span>Movies</span>
+                    &nbsp;
+                    <span class="text-orange-500">List</span>
+                </a>
+            </li>
+            <li class="md:ml-16 mt-3 md:mt-0">
+                <a href="/" class="hover:text-gray-300">Movies</a>
+            </li>
+        </ul>
+    </div>
+</nav>