mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 12:05:28 +00:00
feat: add page transitions with Swup
This commit is contained in:
Stefan Imhoff
@@ -24,6 +24,11 @@
|
||||
"@astrojs/rss": "^2.4.3",
|
||||
"@astrojs/sitemap": "^1.3.3",
|
||||
"@astrojs/tailwind": "^3.1.3",
|
||||
"@swup/a11y-plugin": "^3.0.0",
|
||||
"@swup/fade-theme": "^1.0.5",
|
||||
"@swup/head-plugin": "^1.3.0",
|
||||
"@swup/preload-plugin": "^2.2.0",
|
||||
"@swup/scroll-plugin": "^2.0.3",
|
||||
"astro": "^2.6.4",
|
||||
"astro-compress": "^1.1.47",
|
||||
"astro-critters": "^1.1.38",
|
||||
@@ -51,6 +56,7 @@
|
||||
"reading-time": "^1.5.0",
|
||||
"sal.js": "^0.8.5",
|
||||
"sharp": "^0.32.1",
|
||||
"swup": "^3.1.0",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"unist-util-visit": "^4.1.2"
|
||||
},
|
||||
|
||||
1107
pnpm-lock.yaml
generated
1107
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,28 +0,0 @@
|
||||
---
|
||||
import '../styles/sal.css';
|
||||
---
|
||||
|
||||
<script src="/assets/scripts/sal.js" defer></script>
|
||||
<script type="module">
|
||||
if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) {
|
||||
sal({
|
||||
threshold: 0.1,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style is:global>
|
||||
.no-js [data-sal|='fade'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.no-js [data-sal|='slide'],
|
||||
.no-js [data-sal|='zoom'] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.no-js [data-sal|='flip'] {
|
||||
transform: none;
|
||||
}
|
||||
</style>
|
||||
79
src/components/Scripts.astro
Normal file
79
src/components/Scripts.astro
Normal file
@@ -0,0 +1,79 @@
|
||||
---
|
||||
import '../styles/sal.css';
|
||||
---
|
||||
|
||||
<script src="/assets/scripts/sal.js" defer></script>
|
||||
<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';
|
||||
|
||||
declare const sal: any;
|
||||
|
||||
const swup = new Swup({
|
||||
plugins: [
|
||||
new SwupFadeTheme(),
|
||||
new SwupHeadPlugin(),
|
||||
new SwupA11yPlugin(),
|
||||
new SwupPreloadPlugin(),
|
||||
new SwupScrollPlugin({
|
||||
doScrollingRightAway: true,
|
||||
animateScroll: false,
|
||||
scrollFriction: 0.3,
|
||||
scrollAcceleration: 0.04,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) {
|
||||
if (typeof sal !== 'undefined') {
|
||||
sal({
|
||||
threshold: 0.1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
swup.on('pageView', () => {
|
||||
if (typeof sal !== 'undefined') {
|
||||
sal({
|
||||
threshold: 0.1,
|
||||
});
|
||||
|
||||
setActiveLink();
|
||||
}
|
||||
});
|
||||
|
||||
function setActiveLink() {
|
||||
const links = document.querySelectorAll('.navigation a');
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
links.forEach((link) => {
|
||||
if (link.getAttribute('href') === currentPath) {
|
||||
link.classList.add('is-active');
|
||||
} else {
|
||||
link.classList.remove('is-active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setActiveLink();
|
||||
</script>
|
||||
|
||||
<style is:global>
|
||||
.no-js [data-sal|='fade'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.no-js [data-sal|='slide'],
|
||||
.no-js [data-sal|='zoom'] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.no-js [data-sal|='flip'] {
|
||||
transform: none;
|
||||
}
|
||||
</style>
|
||||
@@ -8,8 +8,7 @@ import { isProduction } from '../utils';
|
||||
import ThemeProvider from '../components/ThemeProvider.astro';
|
||||
import PageHeader from '../components/PageHeader.astro';
|
||||
import PageFooter from '../components/PageFooter.astro';
|
||||
import Sal from '../components/Sal.astro';
|
||||
import ActiveNavigationCheck from '../components/ActiveNavigationCheck.astro';
|
||||
import Scripts from '../components/Scripts.astro';
|
||||
|
||||
export interface Props {
|
||||
backLink?: string;
|
||||
@@ -152,23 +151,24 @@ const webManifest = isProduction && {
|
||||
document.documentElement.classList.add('js');
|
||||
</script>
|
||||
|
||||
<Sal />
|
||||
<ActiveNavigationCheck />
|
||||
<Scripts />
|
||||
|
||||
<ThemeProvider />
|
||||
</head>
|
||||
<body
|
||||
class="flex h-screen 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]"
|
||||
>
|
||||
<Sprite.Provider>
|
||||
{header && <PageHeader backLink={backLink} />}
|
||||
<div class="page-content flex grow">
|
||||
<main class="h-full w-full">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
{footer && <PageFooter />}
|
||||
</Sprite.Provider>
|
||||
<div class="flex grow flex-col" id="swup">
|
||||
<Sprite.Provider>
|
||||
{header && <PageHeader backLink={backLink} />}
|
||||
<div class="page-content flex grow">
|
||||
<main class="h-full w-full">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
{footer && <PageFooter />}
|
||||
</Sprite.Provider>
|
||||
</div>
|
||||
<script>
|
||||
console.info(
|
||||
'👋 I see you’re interested in the source code of this site? You can find it here 👉 https://github.com/kogakure/website-astro-stefanimhoff.de'
|
||||
|
||||
5
types/swup.d.ts
vendored
Normal file
5
types/swup.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
declare module '@swup/fade-theme';
|
||||
declare module '@swup/head-plugin';
|
||||
declare module '@swup/a11y-plugin';
|
||||
declare module '@swup/preload-plugin';
|
||||
declare module '@swup/scroll-plugin';
|
||||
Reference in New Issue
Block a user