feat: move script handling to use swup instead of astro transitions, move animations to baselayout

src/components/Header.astro

@@ -95,5 +95,3 @@ const currentPath = pathname.slice(1);
     </div>
   </nav>
 </header>
-
-<script is:inline src="/vendor/preline/collapse2.1.0.min.js"></script>

src/components/buttons/ThemeToggleButton.astro

@@ -49,100 +49,88 @@
       (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
     document.documentElement.classList.toggle('dark', isDark);
   };
-
   applyTheme();
-
-  document.addEventListener('astro:after-swap', applyTheme);
 </script>
 
 <script>
-  function setupThemeToggle() {
-    const themeToggles = document.querySelectorAll('[data-theme-toggle]');
-
-    // Create theme switch overlay element
-    if (!document.querySelector('.theme-switch-overlay')) {
-      const overlay = document.createElement('div');
-      overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
-      overlay.style.opacity = '0';
-      overlay.style.transition = 'opacity 0.15s ease-out';
-      document.body.appendChild(overlay);
-    }
-
-    themeToggles.forEach((toggle) => {
-      ['click', 'touchend'].forEach((eventType) => {
-        toggle.addEventListener(
-          eventType,
-          (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-
-            // Get click/touch position for radial animation
-            let x, y;
-            if (e.type === 'touchend' && e.changedTouches && e.changedTouches[0]) {
-              const rect = toggle.getBoundingClientRect();
-              x = e.changedTouches[0].clientX - rect.left;
-              y = e.changedTouches[0].clientY - rect.top;
-            } else {
-              const rect = toggle.getBoundingClientRect();
-              x = e.clientX - rect.left;
-              y = e.clientY - rect.top;
-            }
-
-            document.documentElement.style.setProperty('--x', `${x}px`);
-            document.documentElement.style.setProperty('--y', `${y}px`);
-
-            const overlay = document.querySelector('.theme-switch-overlay');
-            const isDark = document.documentElement.classList.contains('dark');
-            const newTheme = isDark ? 'light' : 'dark';
-
-            // Show overlay during transition
-            if (overlay) {
-              overlay.style.backgroundColor =
-                newTheme === 'dark' ? 'rgba(24, 24, 27, 0.3)' : 'rgba(255, 255, 255, 0.3)';
-              overlay.style.opacity = '1';
-            }
-
-            document.documentElement.classList.add('theme-switching');
-
-            // Force a reflow to ensure all elements update
-            document.body.offsetHeight;
-
-            // Toggle dark mode with a slight delay to allow overlay to appear
-            setTimeout(() => {
-              if (isDark) {
-                document.documentElement.classList.remove('dark');
-              } else {
-                document.documentElement.classList.add('dark');
-              }
-
-              localStorage.setItem('theme', newTheme);
-              document.dispatchEvent(
-                new CustomEvent('themeChanged', {
-                  detail: { isDark: newTheme === 'dark' },
-                })
-              );
-
-              // Force another reflow to ensure all elements update
-              document.body.offsetHeight;
-
-              setTimeout(() => {
-                if (overlay) {
-                  overlay.style.opacity = '0';
-                }
-                document.documentElement.classList.remove('theme-switching');
-              }, 150);
-            }, 50);
-          },
-          { passive: false }
-        );
-      });
-    });
+  if (!document.querySelector('.theme-switch-overlay')) {
+    const overlay = document.createElement('div');
+    overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
+    overlay.style.opacity = '0';
+    overlay.style.transition = 'opacity 0.15s ease-out';
+    document.body.appendChild(overlay);
   }
+  ['click', 'touchend'].forEach((eventType) => {
+    document.addEventListener(
+      eventType,
+      (e) => {
+        const target = e.target as HTMLElement;
+        const toggle = target.closest('[data-theme-toggle]');
+        
+        if (!toggle) return;
 
-  // Run setup on load
-  document.addEventListener('astro:page-load', setupThemeToggle);
+        e.preventDefault();
+
+        let x, y;
+        const rect = toggle.getBoundingClientRect();
+        
+        if (eventType === 'touchend') {
+          const touchEvent = e as TouchEvent;
+          if (touchEvent.changedTouches && touchEvent.changedTouches[0]) {
+            x = touchEvent.changedTouches[0].clientX - rect.left;
+            y = touchEvent.changedTouches[0].clientY - rect.top;
+          }
+        } else {
+          const mouseEvent = e as MouseEvent;
+          x = mouseEvent.clientX - rect.left;
+          y = mouseEvent.clientY - rect.top;
+        }
+
+        document.documentElement.style.setProperty('--x', `${x}px`);
+        document.documentElement.style.setProperty('--y', `${y}px`);
+
+        const overlay = document.querySelector('.theme-switch-overlay') as HTMLElement;
+        const isDark = document.documentElement.classList.contains('dark');
+        const newTheme = isDark ? 'light' : 'dark';
+
+        if (overlay) {
+          overlay.style.backgroundColor =
+            newTheme === 'dark' ? 'rgba(24, 24, 27, 0.3)' : 'rgba(255, 255, 255, 0.3)';
+          overlay.style.opacity = '1';
+        }
+
+        document.documentElement.classList.add('theme-switching');
+
+        document.body.offsetHeight;
+
+        setTimeout(() => {
+          if (isDark) {
+            document.documentElement.classList.remove('dark');
+          } else {
+            document.documentElement.classList.add('dark');
+          }
+
+          localStorage.setItem('theme', newTheme);
+          document.dispatchEvent(
+            new CustomEvent('themeChanged', {
+              detail: { isDark: newTheme === 'dark' },
+            })
+          );
+
+          document.body.offsetHeight;
+
+          setTimeout(() => {
+            if (overlay) {
+              overlay.style.opacity = '0';
+            }
+            document.documentElement.classList.remove('theme-switching');
+          }, 150);
+        }, 50);
+      },
+      { passive: false }
+    );
+  });
 
-  // Also run on page visibility change to ensure theme is consistent
   document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible') {
       const currentTheme = localStorage.getItem('theme');
@@ -154,7 +142,6 @@
     }
   });
 
-  // Listen for system preference changes
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
     if (!localStorage.getItem('theme')) {
       if (matches) {

src/components/sections/SelectedPostsSection.astro

@@ -11,7 +11,7 @@ interface Props {
 const { posts } = Astro.props;
 ---
 
-<section class="smooth-reveal flex flex-col gap-4 md:mb-20">
+<section class="smooth-reveal-cards flex flex-col gap-4 md:mb-20">
   {posts.map((post, index) => index % 2 === 0 ? (
   <LargeBlogLeftCard post={post}/>
   ) : (

src/layouts/BaseLayout.astro

@@ -58,6 +58,12 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
       window.localStorage.setItem('theme', theme);
     </script>
 
+    <!-- Preline -->
+    <script
+      src="/vendor/preline/collapse2.1.0.min.js"
+      is:inline
+    />
+
     <!-- Rybbit Tracking Snippet -->
     <script
       src="https://rybbit.alexlebens.dev/api/script.js"
@@ -102,7 +108,52 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
     }
   };
   resetScroll();
-  document.addEventListener('astro:after-swap', resetScroll);
+
+  document.addEventListener('swup:page:view', () => {
+    resetScroll();
+    if (typeof (window as any).HSStaticMethods !== 'undefined') {
+      (window as any).HSStaticMethods.autoInit();
+    }
+    if (typeof (window as any).rybbit === 'function') {
+      (window as any).rybbit('trackPageview'); 
+    }
+  });
+</script>
+
+<script>
+  const animateContent = () => {
+    const smoothReveal = document.querySelectorAll('.smooth-reveal');
+    smoothReveal.forEach((el, index) => {
+      setTimeout(() => {
+        el.classList.add('animate-reveal');
+      }, 50 + index * 100);
+    });
+
+    const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+    smoothReveal2.forEach((el, index) => {
+      setTimeout(() => {
+        el.classList.add('animate-reveal');
+      }, 200 + index * 250);
+    });
+
+    const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+    smoothRevealCards.forEach((el, index) => {
+      setTimeout(() => {
+        el.classList.add('animate-reveal');
+      }, 400 + index * 250);
+    });
+
+    const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+    smoothRevealFade.forEach((el, index) => {
+      setTimeout(() => {
+        el.classList.add('animate-reveal-fade');
+      }, 100 + index * 250);
+    });
+  };
+
+  animateContent();
+
+  document.addEventListener('swup:page:view', animateContent);
 </script>
 
 <style>

src/pages/404.astro

@@ -86,24 +86,6 @@ const global = await directus.request(readSingleton('site_global'));
     const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
     funFactElement.textContent = randomFact;
   }
-
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 150
-        );
-      });
-    };
-
-    animateContent();
-  });
 </script>
 
 <style>

src/pages/about.astro

@@ -47,33 +47,3 @@ const global = await directus.request(readSingleton('site_global'));
   </section>
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

src/pages/all.astro

@@ -52,56 +52,3 @@ const posts = await directus.request(
   </section>
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 150
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          500 + index * 100
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

src/pages/apps.astro

@@ -37,23 +37,3 @@ const global = await directus.request(readSingleton('site_global'));
   <ApplicationSection className="smooth-reveal-2" />
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

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

@@ -174,21 +174,4 @@ const content = marked.parse(post.content || '');
 
     lightbox.init();
   }
-
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          100 + index * 100
-        );
-      });
-    };
-
-    animateContent();
-  });
 </script>

src/pages/blog/index.astro

@@ -57,56 +57,3 @@ const recentPosts: Post[] = posts.filter(
   />
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 300
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          500 + index * 100
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          1000 + index * 250
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

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

@@ -75,56 +75,3 @@ const categoriesPosts = posts
   </section>
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 150
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          500 + index * 100
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

src/pages/categories/index.astro

@@ -37,56 +37,3 @@ const global = await directus.request(readSingleton('site_global'));
   <CategorySection />
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 150
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          500 + index * 100
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-  });
-</script>

src/pages/index.astro

@@ -80,62 +80,3 @@ const recentPosts = posts
   />
 
 </BaseLayout>
-
-<script>
-  // Add smooth reveal animations for content after loading
-  document.addEventListener('astro:page-load', () => {
-    const animateContent = () => {
-      // Animate group 1
-      const smoothReveal = document.querySelectorAll('.smooth-reveal');
-      smoothReveal.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          50 + index * 100
-        );
-      });
-
-      // Animate group 2
-      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-      smoothReveal2.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          200 + index * 250
-        );
-      });
-
-      // Animate topic cards with staggered delay
-      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-      smoothRevealCards.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal');
-          },
-          400 + index * 250
-        );
-      });
-
-      // Animate with just fade in with staggered delay
-      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-      smoothRevealFade.forEach((el, index) => {
-        setTimeout(
-          () => {
-            el.classList.add('animate-reveal-fade');
-          },
-          100 + index * 250
-        );
-      });
-    };
-
-    animateContent();
-
-    const observer = new MutationObserver(() => {
-      animateContent();
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true });
-  });
-</script>

src/support/animation.ts

@@ -1,50 +0,0 @@
-// Add smooth reveal animations for content after loading
-document.addEventListener('astro:page-load', () => {
-  const animateContent = () => {
-    // Animate group 1
-    const smoothReveal = document.querySelectorAll('.smooth-reveal');
-    smoothReveal.forEach((el, index) => {
-      setTimeout(
-        () => {
-          el.classList.add('animate-reveal');
-        },
-        50 + index * 100
-      );
-    });
-
-    // Animate group 2
-    const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
-    smoothReveal2.forEach((el, index) => {
-      setTimeout(
-        () => {
-          el.classList.add('animate-reveal');
-        },
-        200 + index * 250
-      );
-    });
-
-    // Animate topic cards with staggered delay
-    const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
-    smoothRevealCards.forEach((el, index) => {
-      setTimeout(
-        () => {
-          el.classList.add('animate-reveal');
-        },
-        400 + index * 250
-      );
-    });
-
-    // Animate with just fade in with staggered delay
-    const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
-    smoothRevealFade.forEach((el, index) => {
-      setTimeout(
-        () => {
-          el.classList.add('animate-reveal-fade');
-        },
-        100 + index * 250
-      );
-    });
-  };
-
-  animateContent();
-});