kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(swup): upgrade to swup 4 with Astro integration

Browse Source
This commit is contained in:
Stefan Imhoff
2024-03-12 20:46:09 +01:00
parent d8adbaf7d8
commit 983cef3cad
4 changed files with 327 additions and 1267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
astro.config.mjs
View File

@@ -3,6 +3,7 @@ import preact from '@astrojs/preact';
import prefetch from '@astrojs/prefetch'; import prefetch from '@astrojs/prefetch';
import sitemap from '@astrojs/sitemap'; import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind'; import tailwind from '@astrojs/tailwind';
import swup from '@swup/astro';
import { astroImageTools } from 'astro-imagetools'; import { astroImageTools } from 'astro-imagetools';
import pagefind from 'astro-pagefind'; import pagefind from 'astro-pagefind';
import webmanifest from 'astro-webmanifest'; import webmanifest from 'astro-webmanifest';
@@ -31,6 +32,7 @@ export default defineConfig({
preact({ preact({
compat: true, compat: true,
}), }),
swup({ globalInstance: true }),
astroImageTools, astroImageTools,
prefetch(), prefetch(),
pagefind(), pagefind(),

2
package.json
View File

@@ -59,7 +59,7 @@
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"sal.js": "^0.8.5", "sal.js": "^0.8.5",
"sharp": "^0.33.2", "sharp": "^0.33.2",
"swup": "^3.1.1", "swup": "^4.6.0",
"tailwindcss": "^3.4.1", "tailwindcss": "^3.4.1",
"unist-util-visit": "^5.0.0" "unist-util-visit": "^5.0.0"
}, },

1565
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

25
src/components/Scripts.astro
View File

@@ -14,8 +14,11 @@ import '../styles/sal.css';
declare const sal: any; declare const sal: any;
const hasWindow =
'querySelector' in document && 'localStorage' in window && 'addEventListener' in window;
const swup = new Swup({ const swup = new Swup({
ignoreVisit: (url, { el } = {}) => el?.closest('[data-pagefind-ui] a'), containers: ['#swup'],
plugins: [ plugins: [
new SwupFadeTheme(), new SwupFadeTheme(),
new SwupHeadPlugin(), new SwupHeadPlugin(),
@@ -34,7 +37,7 @@ import '../styles/sal.css';
], ],
}); });
if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { if (hasWindow) {
if (typeof sal !== 'undefined') { if (typeof sal !== 'undefined') {
sal({ sal({
threshold: 0.1, threshold: 0.1,
@@ -43,17 +46,19 @@ import '../styles/sal.css';
} }
// Register scripts after swup page transition // Register scripts after swup page transition
swup.on('pageView', () => { swup.hooks.on('page:view', () => {
setActiveLink();
setUpLink();
setEmailLink();
setSearchModalLink();
setSearchLink();
});
swup.hooks.on('visit:end', () => {
if (typeof sal !== 'undefined') { if (typeof sal !== 'undefined') {
sal({ sal({
threshold: 0.1, threshold: 0.1,
}); });
setActiveLink();
setUpLink();
setEmailLink();
setSearchModalLink();
setSearchLink();
} }
}); });
@@ -88,7 +93,7 @@ import '../styles/sal.css';
const openDialogLink = document.getElementById('search-link'); const openDialogLink = document.getElementById('search-link');
const closeDialogLink = document.getElementById('close-search'); const closeDialogLink = document.getElementById('close-search');
dialog.addEventListener('close', () => { dialog?.addEventListener('close', () => {
body.style.overflow = 'auto'; body.style.overflow = 'auto';
}); });