From e07210638e3f130756dbe658558ecf3b4f95d92b Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Tue, 15 Jul 2025 21:56:33 -0500
Subject: [PATCH] add astro native SPA transition

---
 src/components/Background.astro  |  2 +-
 src/components/Footer.astro      |  1 +
 src/components/Navigation.astro  |  3 ++-
 src/components/ThemeToggle.astro | 16 +++++++++++++++-
 src/layouts/Layout.astro         |  4 +++-
 src/pages/404.astro              |  1 +
 src/pages/about.astro            |  7 +++++--
 src/pages/blog/[...slug].astro   |  3 ---
 src/pages/blog/index.astro       |  4 ++--
 src/pages/index.astro            |  7 +++++--
 src/pages/topics/index.astro     |  7 +++++--
 11 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/src/components/Background.astro b/src/components/Background.astro
index b09228d..cdb5113 100644
--- a/src/components/Background.astro
+++ b/src/components/Background.astro
@@ -29,7 +29,7 @@
 
 <script>
   // Theme transition script
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const themeToggle = document.querySelector('[data-theme-toggle]');
     const overlay = document.getElementById('theme-transition-overlay');
 
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index a8cc6e8..63f2f84 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -35,6 +35,7 @@ const socialLinks = [
 
 <footer
   class="theme-transition-all relative mt-20 overflow-hidden border-t border-zinc-100 dark:border-zinc-800"
+  transition:animate="none"
 >
   <div class="pointer-events-none absolute inset-0 overflow-hidden">
     <div
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 45eb856..5437845 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -20,6 +20,7 @@ const currentPath = pathname.slice(1);
 
 <header
   class="fixed top-0 right-0 left-0 z-40 border-b border-zinc-100 bg-white py-4 dark:border-zinc-800 dark:bg-zinc-900"
+  transition:animate="none"
 >
   <div class="mx-auto flex max-w-3xl items-center justify-between px-4">
     <!-- Logo -->
@@ -121,7 +122,7 @@ const currentPath = pathname.slice(1);
 
 <script>
   // Mobile menu toggle with animations
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const mobileMenuButton = document.getElementById('mobile-menu-button');
     const closeMenuButton = document.getElementById('close-menu-button');
     const mobileMenu = document.getElementById('mobile-menu');
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 7e1c85e..3ebe56c 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -47,6 +47,20 @@
   ></span>
 </button>
 
+<script is:inline>
+  // Use a function to persist theme when using SPA transitions
+  // https://docs.astro.build/en/guides/view-transitions/#script-re-execution
+  function applyTheme() {
+    localStorage.theme === 'dark'
+      ? document.documentElement.classList.add('dark')
+      : document.documentElement.classList.remove('dark');
+  }
+
+  document.addEventListener('astro:after-swap', applyTheme);
+
+  applyTheme();
+</script>
+
 <script>
   // Use a function to handle theme toggle to ensure it can be called from anywhere
   function setupThemeToggle() {
@@ -171,7 +185,7 @@
   }
 
   // Run setup on load
-  document.addEventListener('DOMContentLoaded', setupThemeToggle);
+  document.addEventListener('astro:page-load', setupThemeToggle);
 
   // Also run on page visibility change to ensure theme is consistent
   document.addEventListener('visibilitychange', () => {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f7a995a..7b20d9b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import { ClientRouter } from 'astro:transitions';
+
 import Navigation from '../components/Navigation.astro';
 import Footer from '../components/Footer.astro';
 import Background from '../components/Background.astro';
@@ -47,11 +49,11 @@ const { title, description } = Astro.props;
       }
       window.localStorage.setItem('theme', theme);
     </script>
+    <ClientRouter />
   </head>
   <body
     class="flex min-h-screen flex-col bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100"
   >
-
     <Background />
 
     <div class="mx-auto w-full max-w-3xl grow px-4 sm:px-6">
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 58a39f6..c1b85a1 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -5,6 +5,7 @@ import Layout from '../layouts/Layout.astro';
 <Layout title="404 - Page Not Found">
   <div
     class="relative flex min-h-[80vh] flex-col items-center justify-center overflow-hidden px-4 py-20 text-center"
+    transition:animate="slide"
   >
     <!-- Animated background elements -->
     <div class="absolute inset-0 overflow-hidden">
diff --git a/src/pages/about.astro b/src/pages/about.astro
index f9d7f38..c347186 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -16,7 +16,10 @@ const skills = await directus.request(
 ---
 
 <BaseLayout title="About Me" description={global.description}>
-  <div class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16">
+  <div
+    class="theme-transition-all mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-12 md:py-16"
+    transition:animate="slide"
+  >
     <!-- Hero Section -->
     <div class="relative mb-12 sm:mb-16 md:mb-20">
       <!-- Decorative elements -->
@@ -366,7 +369,7 @@ const skills = await directus.request(
 </style>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const sliderTrack = document.querySelector('.slider-track');
 
     // Create seamless infinite scrolling effect
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 6074889..0303910 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -196,9 +196,6 @@ const { post, nextPost, prevPost } = Astro.props;
     }
   }
 
-  // Initialize on first load
-  document.addEventListener('DOMContentLoaded', initializeBlogPost);
-
   // Re-initialize when content changes via Astro's view transitions
   document.addEventListener('astro:page-load', initializeBlogPost);
 </script>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index b6a551c..fa59d44 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -25,7 +25,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
 ---
 
 <BaseLayout title="Blog">
-  <div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16">
+  <div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16" transition:animate="slide">
     <div class="relative mb-12 sm:mb-20">
       <div
         class="animate-blob absolute -top-10 -left-10 h-48 w-48 rounded-full bg-zinc-100 opacity-30 blur-3xl sm:-top-20 sm:-left-20 sm:h-72 sm:w-72 dark:bg-zinc-800/30"
@@ -307,7 +307,7 @@ const years = Object.keys(postsByYear).sort((a, b) => b - a);
 </style>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const backToTopButton = document.getElementById('back-to-top');
 
     if (backToTopButton) {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index eb56af8..de026f2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -23,7 +23,10 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
 
 <Layout title=`Home | ${global.name}`>
   <!-- Hero Section with mobile responsiveness -->
-  <section class="theme-transition-all px-4 py-10 sm:px-6 sm:py-16 md:py-20">
+  <section
+    class="theme-transition-all px-4 py-10 sm:px-6 sm:py-16 md:py-20"
+    transition:animate="slide"
+  >
     <div class="relative mx-auto max-w-2xl">
       <!-- Adjusted blob positions and sizes for mobile appearance -->
       <div
@@ -278,7 +281,7 @@ const allTags = [...new Set(posts.flatMap((post) => post.tags || []))].slice(0,
 
 <script>
   // Add hover effect for cards on touch devices
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
 
     if (isTouchDevice) {
diff --git a/src/pages/topics/index.astro b/src/pages/topics/index.astro
index 615d9fe..59539b7 100644
--- a/src/pages/topics/index.astro
+++ b/src/pages/topics/index.astro
@@ -30,7 +30,10 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
 ---
 
 <BaseLayout title="Explore Tags">
-  <div class="theme-transition-all mx-auto w-full px-3 py-6 sm:px-6 sm:py-12 md:py-16">
+  <div
+    class="theme-transition-all mx-auto w-full px-3 py-6 sm:px-6 sm:py-12 md:py-16"
+    transition:animate="slide"
+  >
     <div class="theme-transition-element relative mb-8 text-center sm:mb-12 md:mb-16">
       <div
         class="animate-blob theme-transition-bg absolute -top-16 -left-16 h-36 w-36 rounded-full bg-zinc-100 opacity-50 blur-3xl sm:h-48 sm:w-48 md:h-72 md:w-72 dark:bg-zinc-800/50"
@@ -145,7 +148,7 @@ const sortedTags = [...tagObjects].sort((a, b) => b.count - a.count);
 </BaseLayout>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
+  document.addEventListener('astro:page-load', () => {
     const fixViewportWidth = () => {
       // Force the viewport to be exactly the width of the device
       const viewport = document.querySelector('meta[name="viewport"]');