From a7312cb106d60b698793327d9f730aec6d0f7de9 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <gpg@kogakure.8shield.net>
Date: Sat, 4 Jan 2025 17:25:09 +0100
Subject: [PATCH] fix: JavaScript errors

---
 src/components/Pagination.astro  | 50 +++++++++++++++++++-------------
 src/components/ThemeToggle.astro | 39 +++++++++++++------------
 src/layouts/BaseLayout.astro     |  3 +-
 3 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index 7424d65..0ba2610 100644
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@@ -45,29 +45,39 @@ const { nextText, nextUrl, previousText, previousUrl } = Astro.props;
 	)
 }
 
-<script is:inline>
-	const body = document.body;
-	const scrollUp = 'scroll-up';
-	const scrollDown = 'scroll-down';
-	let lastScroll = 0;
+<script>
+	function initializeScrollListener() {
+		const body = document.body;
+		const scrollUp = 'scroll-up';
+		const scrollDown = 'scroll-down';
+		let lastScroll = 0;
 
-	window.addEventListener('scroll', () => {
-		const currentScroll = window.pageYOffset;
+		const scrollHandler = () => {
+			const currentScroll = window.pageYOffset;
 
-		if (currentScroll <= 0) {
-			body.classList.remove(scrollUp);
-			return;
-		}
+			if (currentScroll <= 0) {
+				body.classList.remove(scrollUp);
+				return;
+			}
 
-		if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
-			body.classList.remove(scrollUp);
-			body.classList.add(scrollDown);
-		} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
-			body.classList.remove(scrollDown);
-			body.classList.add(scrollUp);
-		}
-		lastScroll = currentScroll;
-	});
+			if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
+				body.classList.remove(scrollUp);
+				body.classList.add(scrollDown);
+			} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
+				body.classList.remove(scrollDown);
+				body.classList.add(scrollUp);
+			}
+			lastScroll = currentScroll;
+		};
+
+		window.addEventListener('scroll', scrollHandler);
+	}
+
+	// Initialize on load
+	initializeScrollListener();
+
+	// Re-initialize after view transitions
+	document.addEventListener('astro:after-swap', initializeScrollListener);
 </script>
 
 <style is:global>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 880d4e9..0eac421 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -23,29 +23,32 @@ import { Circle } from './icons';
 		// Remove no-js class after transitions
 		document.documentElement.classList.remove('no-js');
 
-		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));
-				};
+		// Only define the custom element if it hasn't been defined yet
+		if (!customElements.get('theme-toggle')) {
+			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));
+					};
 
-				button.addEventListener('click', () => {
-					setTheme(!this.isDark());
-					button.blur();
-				});
+					button.addEventListener('click', () => {
+						setTheme(!this.isDark());
+						button.blur();
+					});
 
-				setTheme(this.isDark());
+					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
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index f7802ed..b54a8c1 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -155,7 +155,7 @@ const webManifest = isProduction && {
 			document.documentElement.classList.remove('no-js');
 			document.documentElement.classList.add('js');
 		</script>
-
+		<ViewTransitions />
 		<ThemeProvider />
 		{
 			isProduction && (
@@ -166,7 +166,6 @@ const webManifest = isProduction && {
 				/>
 			)
 		}
-		<ViewTransitions />
 		<Scripts />
 	</head>
 	<body