🚕 feat: view transitions

jamerrq · Jan 9, 2024 · 2707101 · 2707101
1 parent 2fcdc02
commit 2707101
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 80 deletions.
diff --git a/readme.md b/readme.md
@@ -50,3 +50,5 @@ Source code for my personal website, [jamerrq.dev](https://jamerrq.dev).
 - [Typed CSS](https://typedcss.com/)
 - [CSS Peeps](https://css-peeps.com/)
 - [Tailwind Cheat Sheet](https://tailwindcomponents.com/cheatsheet/)
+- [Astro View Transitions](https://docs.astro.build/en/guides/view-transitions/)
+- [Astro View Transitions - Lifecycle Events](https://docs.astro.build/en/guides/view-transitions/#lifecycle-events)
diff --git a/src/components/buttons.astro b/src/components/buttons.astro
@@ -76,69 +76,81 @@ const BUTTON_STYLES = [
 </article>
 
 <script defer>
-  const darkIcon = document.getElementById('theme-toggle-dark-icon')
-  const lightIcon = document.getElementById('theme-toggle-light-icon')
+  function setDarkTheme() {
+    const darkIcon = document.getElementById('theme-toggle-dark-icon')
+    const lightIcon = document.getElementById('theme-toggle-light-icon')
 
-  // Cambia los iconos dentro del botón en función de la configuración anterior
-  if (
-    localStorage.getItem('color-theme') === 'dark' ||
-    (!('color-theme' in localStorage) &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches)
-  ) {
-    lightIcon.classList.remove('hidden')
-    // en caso que se haya configurado previamente
-    document.documentElement.classList.add('dark')
-  } else {
-    darkIcon.classList.remove('hidden')
-  }
+    // Cambia los iconos dentro del botón en función de la configuración anterior
+    if (
+      localStorage.getItem('color-theme') === 'dark' ||
+      (!('color-theme' in localStorage) &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      lightIcon.classList.remove('hidden')
+      // en caso que se haya configurado previamente
+      document.documentElement.classList.add('dark')
+    } else {
+      darkIcon.classList.remove('hidden')
+    }
 
-  const themeToggleBtn = document.getElementById('theme-toggle')
+    const themeToggleBtn = document.getElementById('theme-toggle')
 
-  themeToggleBtn.addEventListener('click', function () {
-    darkIcon.classList.toggle('hidden')
-    lightIcon.classList.toggle('hidden')
+    themeToggleBtn.addEventListener('click', function () {
+      darkIcon.classList.toggle('hidden')
+      lightIcon.classList.toggle('hidden')
 
-    // se comprueba si se ha configurado previamente
-    if (localStorage.getItem('color-theme')) {
-      if (localStorage.getItem('color-theme') === 'light') {
-        document.documentElement.classList.add('dark')
-        localStorage.setItem('color-theme', 'dark')
+      // se comprueba si se ha configurado previamente
+      if (localStorage.getItem('color-theme')) {
+        if (localStorage.getItem('color-theme') === 'light') {
+          document.documentElement.classList.add('dark')
+          localStorage.setItem('color-theme', 'dark')
+        } else {
+          document.documentElement.classList.remove('dark')
+          localStorage.setItem('color-theme', 'light')
+        }
+
+        // se comprueba si el sistema operativo tiene configurado el tema oscuro
       } else {
-        document.documentElement.classList.remove('dark')
-        localStorage.setItem('color-theme', 'light')
+        if (document.documentElement.classList.contains('dark')) {
+          document.documentElement.classList.remove('dark')
+          localStorage.setItem('color-theme', 'light')
+        } else {
+          document.documentElement.classList.add('dark')
+          localStorage.setItem('color-theme', 'dark')
+        }
       }
+    })
+  }
+
+  setDarkTheme()
+  document.addEventListener('astro:after-preparation', setDarkTheme)
+  document.addEventListener('astro:after-swap', setDarkTheme)
 
-      // se comprueba si el sistema operativo tiene configurado el tema oscuro
+  // Home & Random Place buttons
+  const setHomeRandomButton = () => {
+    const homeButton = document.getElementById('home-button')
+    const randomPlaceButton = document.getElementById('random-place-button')
+
+    // Mediante la ruta se comprueba si se está en la página principal
+    if (window.location.pathname === '/') {
+      homeButton.classList.add('hidden')
+      randomPlaceButton.classList.remove('hidden')
     } else {
-      if (document.documentElement.classList.contains('dark')) {
-        document.documentElement.classList.remove('dark')
-        localStorage.setItem('color-theme', 'light')
-      } else {
-        document.documentElement.classList.add('dark')
-        localStorage.setItem('color-theme', 'dark')
-      }
+      homeButton.classList.remove('hidden')
+      randomPlaceButton.classList.add('hidden')
     }
-  })
 
-  // Home & Random Place buttons
-  const homeButton = document.getElementById('home-button')
-  const randomPlaceButton = document.getElementById('random-place-button')
+    // Agrega el evento de click a los botones
+    homeButton.addEventListener('click', function () {
+      window.location.href = '/'
+    })
 
-  // Mediante la ruta se comprueba si se está en la página principal
-  if (window.location.pathname === '/') {
-    homeButton.classList.add('hidden')
-    randomPlaceButton.classList.remove('hidden')
-  } else {
-    homeButton.classList.remove('hidden')
-    randomPlaceButton.classList.add('hidden')
+    randomPlaceButton.addEventListener('click', function () {
+      const places = ['/blog', '/tech-stack', '/featured']
+      window.location.href = places[Math.floor(Math.random() * places.length)]
+    })
   }
 
-  // Agrega el evento de click a los botones
-  homeButton.addEventListener('click', function () {
-    window.location.href = '/'
-  })
-  randomPlaceButton.addEventListener('click', function () {
-    const places = ['/blog', '/tech-stack', '/featured']
-    window.location.href = places[Math.floor(Math.random() * places.length)]
-  })
+  setHomeRandomButton()
+  document.addEventListener('astro:after-preparation', setHomeRandomButton)
 </script>
diff --git a/src/layouts/layout.astro b/src/layouts/layout.astro
@@ -29,37 +29,36 @@ const BODY_CLASS = import.meta.env.MODE === 'development' ? 'debug-screens' : ''
   </head>
   <body class={BODY_CLASS}>
     <slot />
-  </body>
-</html>
-<style is:global>
-  @import url('https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap');
-  @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
-  @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
+  </body><style is:global>
+    @import url('https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
 
-  @font-face {
-    src: url('/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Medium.otf')
-      format('opentype');
-    font-family: 'Fira';
-  }
+    @font-face {
+      src: url('/fonts/FiraMonoNerd/FiraMonoNerdFontMono-Medium.otf')
+        format('opentype');
+      font-family: 'Fira';
+    }
 
-  .responsive-text {
-    font-size: clamp(1.5rem, 8vw - 2rem, 3rem);
-  }
+    .responsive-text {
+      font-size: clamp(1.5rem, 8vw - 2rem, 3rem);
+    }
 
-  .responsive-text-xs {
-    font-size: clamp(1rem, 8vw - 2rem, 2rem);
-  }
+    .responsive-text-xs {
+      font-size: clamp(1rem, 8vw - 2rem, 2rem);
+    }
 
-  .responsive-text-sm {
-    font-size: clamp(0.75rem, 8vw - 2rem, 1.5rem);
-  }
+    .responsive-text-sm {
+      font-size: clamp(0.75rem, 8vw - 2rem, 1.5rem);
+    }
 
-  .responsive-text-xxs {
-    font-size: clamp(0.5rem, 8vw - 2rem, 1rem);
-  }
+    .responsive-text-xxs {
+      font-size: clamp(0.5rem, 8vw - 2rem, 1rem);
+    }
 
-  main#background {
-    background-image: url('/pizarra.webp');
-    background-size: fill;
-  }
-</style>
+    main#background {
+      background-image: url('/pizarra.webp');
+      background-size: fill;
+    }
+  </style>
+</html>