From ea46ad57dd58603bccbe7eef2a725a9b6ed894f3 Mon Sep 17 00:00:00 2001
From: Chaoscaot <chaos@chaoscaot.de>
Date: Fri, 1 Mar 2024 21:58:30 +0100
Subject: [PATCH] use ViewTransitions Hero

---
 src/components/PostComponent.astro      |  6 +++---
 src/pages/announcements/[...slug].astro | 12 +++++++-----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/PostComponent.astro b/src/components/PostComponent.astro
index 5deaa5d..49e5f8f 100644
--- a/src/components/PostComponent.astro
+++ b/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} />
                 ))}
diff --git a/src/pages/announcements/[...slug].astro b/src/pages/announcements/[...slug].astro
index 28c5ef0..b02d148 100644
--- a/src/pages/announcements/[...slug].astro
+++ b/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 => (
-                        <TagComponent tag={tag}/>
-                    ))}
+                    <div transition:name={post.data.title + "-tags"}>
+                        {post.data.tags.map(tag => (
+                            <TagComponent tag={tag} />
+                        ))}
+                    </div>
                     <CalendarMonthSolid class="w-4 h-4 mr-2"/>
                     {Intl.DateTimeFormat(astroI18n.locale, {
                         day: "numeric",