hero image test transition

Author: nemanjam

src/components/BaseHead.astro

@@ -106,5 +106,5 @@ const ogImageUrl = new URL(image, baseUrl);
   <script src="set-url-here" crossorigin="anonymous"></script>
  -->
 
-  <ViewTransitions fallback="none" />
+  <ViewTransitions />
 </head>

src/components/PostCard.astro

@@ -58,7 +58,7 @@ const { lastAccessDate, isUpdatedDate } = getPublishedOrUpdatedDate({
           alt={heroAlt}
           itemprop="image"
           class="w-full h-[168px] xs:h-[250px] md:h-[168px] md:max-w-[298px] object-cover rounded-box"
-          transition:name={`hero-${heroImage.src}`}
+          transition:name={`hero-image-${slug}`}
         />
       </div>
     )

src/pages/blog/[slug].astro

@@ -91,6 +91,7 @@ const metadata: Metadata = { title, description, image };
           loading="eager"
           itemprop="image"
           class="block max-w-full h-auto aspect-[16/8] object-cover"
+          transition:name={`hero-image-${slug}`}
         />
       )
     }