use ViewTransitions Hero

src/components/PostComponent.astro

@@ -18,19 +18,19 @@ const { post } = Astro.props as Props;
         {post.data.image != null
             ? (
                 <div class="flex-shrink-0 pr-2">
-                    <Image src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
+                    <Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="rounded-2xl shadow-2xl object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
                 </div>
             )
             : null}
         <div>
-            <h2 class="text-2xl font-bold">{post.data.title}</h2>
+            <h2 class="text-2xl font-bold" transition:name={post.data.title + "-title"}>{post.data.title}</h2>
             <P class="text-gray-500">{Intl.DateTimeFormat(astroI18n.locale, {
                 day: "numeric",
                 month: "long",
                 year: "numeric",
             }).format(post.data.created)}</P>
             <P>{post.data.description}</P>
-            <div class="mt-1">
+            <div class="mt-1" transition:name={post.data.title + "-tags"}>
                 {post.data.tags.map((tag) => (
                     <TagComponent tag={tag} />
                 ))}

src/pages/announcements/[...slug].astro

@@ -71,17 +71,19 @@ const ogImage = await getImage({
         <div class={"relative w-full " + (post.data.image ? "aspect-video" : "")}>
             {post.data.image && (
                 <div class="absolute top-0 left-0 w-full aspect-video flex justify-center">
-                    <Image src={post.data.image} height="1080" alt=""
+                    <Image src={post.data.image} height="1080" alt="" transition:name={post.data.title + "-image"}
                         class="rounded-2xl linear-fade object-contain h-full"/>
                 </div>
             )}
             <div class={post.data.image ? "absolute bottom-8 left-2" : "mb-4"}>
-                <h1 class="text-4xl mb-0">{post.data.title}</h1>
+                <h1 class="text-4xl mb-0" transition:name={post.data.title + "-title"}>{post.data.title}</h1>
                 <h5 class="flex items-center mt-2 text-neutral-300">
                     <TagSolid class="w-4 h-4 mr-2"/>
-                    {post.data.tags.map(tag => (
+                    <div transition:name={post.data.title + "-tags"}>
-                        <TagComponent tag={tag}/>
+                        {post.data.tags.map(tag => (
-                    ))}
+                            <TagComponent tag={tag} />
+                        ))}
+                    </div>
                     <CalendarMonthSolid class="w-4 h-4 mr-2"/>
                     {Intl.DateTimeFormat(astroI18n.locale, {
                         day: "numeric",