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: add page transitions with Swup

Browse Source
This commit is contained in:
Stefan Imhoff
2023-06-14 15:55:53 +02:00
parent 6f0b121915
commit 7f2470157d
6 changed files with 1170 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -24,6 +24,11 @@
"@astrojs/rss": "^2.4.3", "@astrojs/rss": "^2.4.3",
"@astrojs/sitemap": "^1.3.3", "@astrojs/sitemap": "^1.3.3",
"@astrojs/tailwind": "^3.1.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": "^2.6.4",
"astro-compress": "^1.1.47", "astro-compress": "^1.1.47",
"astro-critters": "^1.1.38", "astro-critters": "^1.1.38",
@@ -51,6 +56,7 @@
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"sal.js": "^0.8.5", "sal.js": "^0.8.5",
"sharp": "^0.32.1", "sharp": "^0.32.1",
"swup": "^3.1.0",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"unist-util-visit": "^4.1.2" "unist-util-visit": "^4.1.2"
}, },

1107
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

28
src/components/Sal.astro
View File

@@ -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
View 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>

26
src/layouts/BaseLayout.astro
View File

@@ -8,8 +8,7 @@ import { isProduction } from '../utils';
import ThemeProvider from '../components/ThemeProvider.astro'; import ThemeProvider from '../components/ThemeProvider.astro';
import PageHeader from '../components/PageHeader.astro'; import PageHeader from '../components/PageHeader.astro';
import PageFooter from '../components/PageFooter.astro'; import PageFooter from '../components/PageFooter.astro';
import Sal from '../components/Sal.astro'; import Scripts from '../components/Scripts.astro';
import ActiveNavigationCheck from '../components/ActiveNavigationCheck.astro';
export interface Props { export interface Props {
backLink?: string; backLink?: string;
@@ -152,23 +151,24 @@ const webManifest = isProduction && {
document.documentElement.classList.add('js'); document.documentElement.classList.add('js');
</script> </script>
<Sal /> <Scripts />
<ActiveNavigationCheck />
<ThemeProvider /> <ThemeProvider />
</head> </head>
<body <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]" 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> <div class="flex grow flex-col" id="swup">
{header && <PageHeader backLink={backLink} />} <Sprite.Provider>
<div class="page-content flex grow"> {header && <PageHeader backLink={backLink} />}
<main class="h-full w-full"> <div class="page-content flex grow">
<slot /> <main class="h-full w-full">
</main> <slot />
</div> </main>
{footer && <PageFooter />} </div>
</Sprite.Provider> {footer && <PageFooter />}
</Sprite.Provider>
</div>
<script> <script>
console.info( 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' '👋 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
View 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';