feat: remove Swup

astro.config.mjs

@@ -3,7 +3,6 @@ import prefetch from '@astrojs/prefetch';
 import react from '@astrojs/react';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
-import swup from '@swup/astro';
 import pagefind from 'astro-pagefind';
 import webmanifest from 'astro-webmanifest';
 import { defineConfig } from 'astro/config';
@@ -29,7 +28,6 @@ export default defineConfig({
 		}),
 		tailwind(),
 		react(),
-		swup({ globalInstance: true }),
 		prefetch(),
 		pagefind(),
 		sitemap({

package.json

@@ -22,13 +22,6 @@
 		"@astrojs/rss": "^4.0.7",
 		"@astrojs/sitemap": "^3.1.6",
 		"@astrojs/tailwind": "^5.1.0",
-		"@swup/a11y-plugin": "^4.5.2",
-		"@swup/astro": "^1.4.1",
-		"@swup/fade-theme": "^2.0.0",
-		"@swup/head-plugin": "^2.2.0",
-		"@swup/preload-plugin": "^3.2.10",
-		"@swup/scripts-plugin": "^2.1.0",
-		"@swup/scroll-plugin": "^3.3.2",
 		"astro": "^4.13.0",
 		"astro-pagefind": "^1.5.0",
 		"astro-seo": "^0.8.3",
@@ -49,7 +42,6 @@
 		"react-chartjs-2": "^5.2.0",
 		"react-dom": "^18.3.1",
 		"reading-time": "^1.5.0",
-		"swup": "^4.6.1",
 		"tailwindcss": "^3.4.3",
 		"unist-util-visit": "^5.0.0"
 	},

src/components/Scripts.astro

@@ -1,48 +1,8 @@
 ---
-// Cspell:words astro swup animationend keydown
+// Cspell:words astro animationend keydown
 ---
 
 <script>
-	import Swup from 'swup';
-	import SwupFadeTheme from '@swup/fade-theme';
-	import SwupHeadPlugin from '@swup/head-plugin';
-	import SwupA11yPlugin from '@swup/a11y-plugin';
-	import SwupPreloadPlugin from '@swup/preload-plugin';
-	import SwupScrollPlugin from '@swup/scroll-plugin';
-	import SwupScriptsPlugin from '@swup/scripts-plugin';
-
-	const hasWindow =
-		'querySelector' in document && 'localStorage' in window && 'addEventListener' in window;
-
-	const swup = new Swup({
-		containers: ['#swup'],
-		plugins: [
-			new SwupFadeTheme(),
-			new SwupHeadPlugin(),
-			new SwupA11yPlugin(),
-			new SwupPreloadPlugin(),
-			new SwupScriptsPlugin({
-				head: true,
-				body: true,
-			}),
-			new SwupScrollPlugin({
-				doScrollingRightAway: true,
-				animateScroll: false,
-				scrollFriction: 0.3,
-				scrollAcceleration: 0.04,
-			}),
-		],
-	});
-
-	// Register scripts after swup page transition
-	swup.hooks.on('page:view', () => {
-		setActiveLink();
-		setUpLink();
-		setEmailLink();
-		setSearchModalLink();
-		setSearchLink();
-	});
-
 	function setActiveLink() {
 		const links = document.querySelectorAll('.navigation a');
 		const currentPath = window.location.pathname;

src/components/SearchModal.astro

@@ -1,12 +1,12 @@
 ---
-// Cspell:words astro pagefind swup shibui minmax
+// Cspell:words astro pagefind shibui minmax
 import Search from 'astro-pagefind/components/Search';
 
 import Link from './Link.astro';
 import { Close } from './icons';
 ---
 
-<dialog data-no-swup>
+<dialog>
 	<header
 		class="flex h-[clamp(3rem,_5.55vw,_9rem)] w-full items-center justify-end block-start-0 md:pie-gap md:pis-gap"
 	>

src/content/journal/2023/website-relaunch-astro-preact-tailwind.mdx

@@ -47,4 +47,4 @@ I opted for [Preact](https://preactjs.com/) for components, even though many did
 
 It was my first time using [Tailwind CSS](https://tailwindcss.com/). Initially, I was skeptical because I didn’t like the idea of writing CSS in HTML. But after using it, I really like it. Writing CSS is much faster and I don’t have to think about naming classes. Additionally, I reduced the CSS size by 30%.
 
-I used [Swup](https://swup.js.org/) for page transitions. If you're interested in the plugins, tools, and libraries I used, take a look at the [Colophon](/colophon/) page or the [source code](https://github.com/kogakure/website-astro-stefanimhoff.de) on GitHub.
+If you're interested in the plugins, tools, and libraries I used, take a look at the [Colophon](/colophon/) page or the [source code](https://github.com/kogakure/website-astro-stefanimhoff.de) on GitHub.

src/layouts/BaseLayout.astro

@@ -1,5 +1,5 @@
 ---
-// Cspell:words astro noindex pagefind stylesheet favicons secuela imhoff sketchnotes shibui swup
+// Cspell:words astro noindex pagefind stylesheet favicons secuela imhoff sketchnotes shibui
 import '../styles/global.css';
 import { SEO } from 'astro-seo';
 import { site } from '../data/site';
@@ -170,7 +170,7 @@ const webManifest = isProduction && {
 	<body
 		class="flex grow flex-col bg-shibui-100 font-sans font-normal leading-relaxed text-shibui-950 common-ligatures dark:bg-shibui-900 dark:text-shibui-200/[0.87]"
 	>
-		<div class="flex h-screen grow flex-col" id="swup">
+		<div class="flex h-screen grow flex-col">
 			{header && <PageHeader backLink={backLink} />}
 			<div class="page-content flex grow">
 				<main class="h-full w-full" {...pagefind}>

src/pages/colophon.mdx

@@ -26,7 +26,6 @@ The source code of this website is available on [GitHub](https://github.com/koga
 - The layouts, templates, and components are written in Astro and [Preact](https://preactjs.com/).
 - My content is written in [MDX](https://mdxjs.com/), which allows using components in the [Markdown](https://daringfireball.net/projects/markdown/).
 - I use [Tailwind CSS](https://tailwindcss.com/) for my styling and [tailwindcss-logical](https://stevecochrane.github.io/tailwindcss-logical/) to get logical properties.
-- The page transitions are created with [Swup](https://swup.js.org/).
 - My site search is build with [Pagefind](https://pagefind.app/) using the [Astro-Pagefind](https://github.com/shishkin/astro-pagefind) integration.
 - I use YouTube Lite, provided by [Astro Embed](https://github.com/astro-community/astro-embed).
 - [Astro SEO](https://github.com/jonasmerlin/astro-seo) makes it easy to add the SEO relevant information.

types/swup.d.ts

@@ -1,6 +0,0 @@
-declare module '@swup/a11y-plugin';
-declare module '@swup/fade-theme';
-declare module '@swup/head-plugin';
-declare module '@swup/preload-plugin';
-declare module '@swup/scripts-plugin';
-declare module '@swup/scroll-plugin';