Añadir Astro View Transitions, Corregir Idioma HTML y Añadir ImagePlaceholder en Novas

src/components/Card.astro

@@ -51,12 +51,14 @@ const CardTag = href ? "a" : "div";
         src={image}
         alt={imageAlt}
         class="aspect-video rounded-lg"
+        transition:name={`img-${title}`}
       />
     ) : (
       <ImagePlaceholder
         height="200px"
         alt={imageAlt}
         className="aspect-video rounded-lg"
+        transition:name={`img-${title}`}
       />
     )
   }
@@ -66,7 +68,7 @@ const CardTag = href ? "a" : "div";
       tags.length > 0 && (
         <div class="flex flex-wrap gap-2 mb-3">
           {tags.map((tag) => (
-            <span class="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-blue-800 text-xs font-semibold rounded-full">
+            <span transition:name={`tag-${title}-${tag}`} class="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-blue-800 text-xs font-semibold rounded-full">
               {tag}
             </span>
           ))}
@@ -76,6 +78,7 @@ const CardTag = href ? "a" : "div";
 
     <h3
       class="text-xl font-semibold text-gray-900 dark:text-white mb-3 line-clamp-2 h-13"
+      transition:name={`title-${title}`}
     >
       {title}
     </h3>

src/components/ContactForm.astro

@@ -97,7 +97,7 @@ const { class: className } = Astro.props;
 </div>
 
 {/* Send form data and animate form */}
-<script is:inline defer>
+<script is:inline defer data-astro-rerun>
   {
     const form = document.querySelector("#contact-form");
     const loader = form.querySelector(".loader");
@@ -140,7 +140,7 @@ const { class: className } = Astro.props;
 </script>
 
 {/* Set the subject of the select automatically from the url params */}
-<script is:inline defer>
+<script is:inline defer data-astro-rerun>
   {
     /** @type {HTMLSelectElement} */
     const select = document.querySelector("#subject select");
@@ -157,7 +157,7 @@ const { class: className } = Astro.props;
 </script>
 
 {/* React to subject changes */}
-<script is:inline defer>
+<script is:inline defer data-astro-rerun>
   {
     /** @type {HTMLSelectElement} */
     const select = document.querySelector("#subject select");

src/components/ContentTeaser.astro

@@ -9,7 +9,7 @@ const sizes = ["", "hidden md:block", "hidden lg:block"]
       <slot name="title"/>
       <slot name="more"/>
     </div>
-    
+
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {contents.slice(0,3).map( (content: any, i: number) =>
         <Card

src/components/Filter.astro

@@ -7,7 +7,7 @@ const { tags } = Astro.props;
 
 const tagClass = `
     block px-4 py-2 border rounded-full whitespace-nowrap h-max text-sm
-    transition-colors cursor-pointer 
+    transition-colors cursor-pointer
     bg-white dark:bg-neutral-700 dark:text-white dark:border-neutral-500 has-checked:bg-blue-600 dark:has-checked:bg-blue-500 dark:hover:has-checked:bg-blue-400 dark:hover:bg-neutral-500
     text-gray-700 has-checked:text-white
     hover:bg-gray-100 has-checked:hover:bg-blue-700`;
@@ -34,7 +34,7 @@ const tagClass = `
   </div>
 
   <script is:inline defer>
-    window.addEventListener("load", () => {
+    document.addEventListener("astro:page-load", () => {
       const allCheckbox = document.querySelector('[data-filter="all"]');
       const otherCheckboxes = document.querySelectorAll(
         '[data-filter]:not([data-filter="all"])'

src/components/Navigation.astro

@@ -26,7 +26,7 @@ const currentPath = "/" + Astro.url.pathname.split("/")[1];
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="flex items-center justify-between h-16">
       <!-- Logo/Brand -->
-      <div class="flex items-center">
+      <div class="flex items-center" transition:persist="logo">
         <a href="/" class="flex items-center space-x-3">
           <Image
             src={logoSmall}
@@ -104,11 +104,13 @@ const currentPath = "/" + Astro.url.pathname.split("/")[1];
 </nav>
 
 <script>
-  // Mobile menu toggle
-  const mobileMenuButton = document.getElementById("mobile-menu-button");
-  const mobileMenu = document.getElementById("mobile-menu");
+  document.addEventListener("astro:page-load", () => {
+    // Mobile menu toggle
+    const mobileMenuButton = document.getElementById("mobile-menu-button");
+    const mobileMenu = document.getElementById("mobile-menu");
 
-  mobileMenuButton?.addEventListener("click", () => {
-    mobileMenu?.classList.toggle("hidden");
+    mobileMenuButton?.addEventListener("click", () => {
+      mobileMenu?.classList.toggle("hidden");
+    });
   });
 </script>

src/layouts/BaseLayout.astro

@@ -1,4 +1,5 @@
 ---
+import { ClientRouter } from "astro:transitions";
 import "../styles/global.css";
 
 interface Props {
@@ -14,7 +15,7 @@ const imageUrl = `${siteUrl}${image}`;
 ---
 
 <!doctype html>
-<html lang="en" class="h-full">
+<html lang="gl" class="h-full" transition:name="root" transition:animate="none">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
@@ -24,6 +25,7 @@ const imageUrl = `${siteUrl}${image}`;
     <script
       is:inline
       defer
+      data-astro-rerun
       src="https://umami.gpul.org/script.js"
       data-website-id="a9895841-f600-4828-924a-4f15ef96c429"></script>
 
@@ -55,6 +57,9 @@ const imageUrl = `${siteUrl}${image}`;
     <meta property="twitter:title" content={title} />
     <meta property="twitter:description" content={description} />
     <meta property="twitter:image" content={imageUrl} />
+
+    <!-- View Transitions -->
+    <ClientRouter />
   </head>
   <body class="h-full bg-white dark:bg-neutral-900">
     <slot />

src/layouts/PageLayout.astro

@@ -17,11 +17,11 @@ const { title, description, image } = Astro.props;
     <header>
       <Navigation />
     </header>
-    
-    <main class="flex-1 pt-16">
+
+    <main class="flex-1 pt-16" transition:animate="fade">
       <slot />
     </main>
-    
-    <Footer />
+
+    <Footer transition:persist="footer"/>
   </div>
 </BaseLayout>

src/pages/eventos/[...id].astro

@@ -30,12 +30,12 @@ const { Content } = await render(evento);
     class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 space-y-3 dark:text-white"
     id="event-body"
   >
-    <h1 class="text-5xl font-semibold dark:text-white">{evento.data.title}</h1>
+    <h1 class="text-5xl font-semibold dark:text-white" transition:name={`title-${evento.data.title}`}>{evento.data.title}</h1>
     {
       evento.data.tags.length > 0 && (
         <div class="flex flex-wrap gap-2 mb-4 mt-2">
           {evento.data.tags.map((tag) => (
-            <span class="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-blue-800 text-xs font-semibold rounded-full">
+            <span transition:name={`tag-${evento.data.title}-${tag}`} class="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-blue-800 text-xs font-semibold rounded-full">
               {tag}
             </span>
           ))}
@@ -48,6 +48,7 @@ const { Content } = await render(evento);
           src={"/media/eventos/"+evento.id+".png"}
           alt="Póster do evento"
           class="aspect-video rounded-lg"
+          transition:name={`img-${evento.data.title}`}
         />
 
     <div class="bg-orange-100 border border-orange-500 p-4 rounded-md dark:bg-orange-950">

src/pages/novas/[...id].astro

@@ -2,6 +2,7 @@
 import { getCollection, render } from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
 import Card from "../../components/Card.astro";
+import ImagePlaceholder from "../../components/ImagePlaceholder.astro";
 import Prose from "../../components/Prose.astro";
 
 export async function getStaticPaths() {
@@ -33,15 +34,15 @@ const formatDate = (date: Date) => {
     class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-3 mt-8 dark:text-white"
     id="post-body"
   >
-    <h1 class="text-5xl font-semibold">{nova.data.title}</h1>
+    <h1 class="text-5xl font-semibold" transition:name={`title-${nova.data.title}`}>{nova.data.title}</h1>
     <p class="text-gray-500 italic dark:text-neutral-300">
       {nova.data.excerpt}
     </p>
     {
       nova.data.tags.length > 0 && (
         <div class="flex flex-wrap gap-2 mb-4 mt-2">
           {nova.data.tags.map((tag) => (
-            <span class="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-blue-800 text-xs font-semibold rounded-full">
+            <span transition:name={`tag-${nova.data.title}-${tag}`} class="px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-300 dark:text-blue-800 text-xs font-semibold rounded-full">
               {tag}
             </span>
           ))}
@@ -58,12 +59,14 @@ const formatDate = (date: Date) => {
           height="200px"
           src={nova.data.image.src}
           class="aspect-video rounded-lg "
+          transition:name={`img-${nova.data.title}`}
         />
       ) : (
         <ImagePlaceholder
           height="200px"
-          alt={imageAlt}
+          alt={nova.data.title}
           className="aspect-video rounded-lg"
+          transition:name={`img-${nova.data.title}`}
         />
       )
     }