From e3ffc262a0cd7046a030c95e7e17e4f3f23ba0e5 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <gpg@kogakure.8shield.net>
Date: Fri, 3 Jan 2025 15:54:26 +0100
Subject: [PATCH] refactor: replace Swup page transitions with native
 transitions

---
 astro.config.mjs                   |  1 +
 src/components/Scripts.astro       | 17 +++++++----
 src/components/ThemeProvider.astro | 12 ++++++--
 src/components/ThemeToggle.astro   | 46 +++++++++++++++++++-----------
 src/layouts/BaseLayout.astro       |  2 ++
 src/styles/global.css              | 11 +++----
 6 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 621c0b0..7d77292 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -15,6 +15,7 @@ import customTheme from './shiki-theme.json';
 // https://astro.build/config
 export default defineConfig({
 	site: 'https://www.stefanimhoff.de',
+	viewTransitions: true,
 	markdown: {
 		shikiConfig: {
 			theme: customTheme,
diff --git a/src/components/Scripts.astro b/src/components/Scripts.astro
index 9dce4a3..8ad731f 100644
--- a/src/components/Scripts.astro
+++ b/src/components/Scripts.astro
@@ -116,9 +116,16 @@
 		});
 	}
 
-	setActiveLink();
-	setUpLink();
-	setEmailLink();
-	setSearchLink();
-	setSearchModalLink();
+	function initializeScripts() {
+		setActiveLink();
+		setEmailLink();
+		setSearchLink();
+		setSearchModalLink();
+		setUpLink();
+	}
+
+	// Initialize on first load
+	initializeScripts();
+
+	document.addEventListener('astro:after-swap', initializeScripts);
 </script>
diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro
index 1fa5534..fcd528f 100644
--- a/src/components/ThemeProvider.astro
+++ b/src/components/ThemeProvider.astro
@@ -1,8 +1,9 @@
 ---
+
 ---
 
 <script is:inline>
-	(function () {
+	function initializeTheme() {
 		const getThemePreference = () => {
 			if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
 				return localStorage.getItem('theme');
@@ -11,7 +12,6 @@
 		};
 
 		const isDark = getThemePreference() === 'dark';
-
 		document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
 
 		if (typeof localStorage !== 'undefined') {
@@ -24,5 +24,11 @@
 				attributeFilter: ['class'],
 			});
 		}
-	})();
+	}
+
+	// Run on initial load
+	initializeTheme();
+
+	// Re-run on view transitions
+	document.addEventListener('astro:after-swap', initializeTheme);
 </script>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index dc41ef4..880d4e9 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -19,32 +19,44 @@ import { Circle } from './icons';
 </theme-toggle>
 
 <script>
-	class ThemeToggle extends HTMLElement {
-		constructor() {
-			super();
-			const button = this.querySelector('button')!;
-			const setTheme = (dark: boolean) => {
-				document.documentElement.classList[dark ? 'add' : 'remove']('dark');
-				button.setAttribute('aria-pressed', String(dark));
-			};
+	function initializeThemeToggle() {
+		// Remove no-js class after transitions
+		document.documentElement.classList.remove('no-js');
 
-			button.addEventListener('click', () => {
-				setTheme(!this.isDark());
-				button.blur();
-			});
+		class ThemeToggle extends HTMLElement {
+			constructor() {
+				super();
+				const button = this.querySelector('button')!;
+				const setTheme = (dark: boolean) => {
+					document.documentElement.classList[dark ? 'add' : 'remove']('dark');
+					button.setAttribute('aria-pressed', String(dark));
+				};
 
-			setTheme(this.isDark());
+				button.addEventListener('click', () => {
+					setTheme(!this.isDark());
+					button.blur();
+				});
+
+				setTheme(this.isDark());
+			}
+
+			isDark() {
+				return document.documentElement.classList.contains('dark');
+			}
 		}
 
-		isDark() {
-			return document.documentElement.classList.contains('dark');
-		}
+		customElements.define('theme-toggle', ThemeToggle);
 	}
 
-	customElements.define('theme-toggle', ThemeToggle);
+	// Run on initial load
+	initializeThemeToggle();
+
+	// Re-run on view transitions
+	document.addEventListener('astro:after-swap', initializeThemeToggle);
 </script>
 
 <style>
+	/* Turn off toggle if JavaScript is disabled */
 	:global(.no-js) theme-toggle {
 		display: none;
 	}
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index b9f4dec..f7802ed 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,6 +1,7 @@
 ---
 // Cspell:words astro noindex pagefind stylesheet favicons secuela imhoff sketchnotes shibui
 import '../styles/global.css';
+import { ViewTransitions } from 'astro:transitions';
 import { SEO } from 'astro-seo';
 import { site } from '../data/site';
 import { isProduction } from '../utils';
@@ -165,6 +166,7 @@ const webManifest = isProduction && {
 				/>
 			)
 		}
+		<ViewTransitions />
 		<Scripts />
 	</head>
 	<body
diff --git a/src/styles/global.css b/src/styles/global.css
index 3ce8499..0850ca9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -18,6 +18,12 @@
 		color: #ffffff;
 	}
 
+	/* Page Transitions */
+	::view-transition-old(root),
+	::view-transition-new(root) {
+		animation-duration: 300ms;
+	}
+
 	/** Critic Markup */
 	del {
 		@apply decoration-[0.15em];
@@ -171,11 +177,6 @@
 	.icon {
 		@apply fill-shibui-950 dark:fill-shibui-200/[0.87];
 	}
-
-	/** Swup */
-	main[tabindex='-1'] {
-		outline: none;
-	}
 }
 
 @layer components {