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

refactor: replace Swup page transitions with native transitions

Browse Source
This commit is contained in:
Stefan Imhoff
2025-01-03 15:54:26 +01:00
parent e88fff7207
commit e3ffc262a0
6 changed files with 59 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
astro.config.mjs
View File

@@ -15,6 +15,7 @@ import customTheme from './shiki-theme.json';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: 'https://www.stefanimhoff.de', site: 'https://www.stefanimhoff.de',
viewTransitions: true,
markdown: { markdown: {
shikiConfig: { shikiConfig: {
theme: customTheme, theme: customTheme,

17
src/components/Scripts.astro
View File

@@ -116,9 +116,16 @@
}); });
} }
setActiveLink(); function initializeScripts() {
setUpLink(); setActiveLink();
setEmailLink(); setEmailLink();
setSearchLink(); setSearchLink();
setSearchModalLink(); setSearchModalLink();
setUpLink();
}
// Initialize on first load
initializeScripts();
document.addEventListener('astro:after-swap', initializeScripts);
</script> </script>

12
src/components/ThemeProvider.astro
View File

@@ -1,8 +1,9 @@
--- ---
--- ---
<script is:inline> <script is:inline>
(function () { function initializeTheme() {
const getThemePreference = () => { const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme'); return localStorage.getItem('theme');
@@ -11,7 +12,6 @@
}; };
const isDark = getThemePreference() === 'dark'; const isDark = getThemePreference() === 'dark';
document.documentElement.classList[isDark ? 'add' : 'remove']('dark'); document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
if (typeof localStorage !== 'undefined') { if (typeof localStorage !== 'undefined') {
@@ -24,5 +24,11 @@
attributeFilter: ['class'], attributeFilter: ['class'],
}); });
} }
})(); }
// Run on initial load
initializeTheme();
// Re-run on view transitions
document.addEventListener('astro:after-swap', initializeTheme);
</script> </script>

46
src/components/ThemeToggle.astro
View File

@@ -19,32 +19,44 @@ import { Circle } from './icons';
</theme-toggle> </theme-toggle>
<script> <script>
class ThemeToggle extends HTMLElement { function initializeThemeToggle() {
constructor() { // Remove no-js class after transitions
super(); document.documentElement.classList.remove('no-js');
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', () => { class ThemeToggle extends HTMLElement {
setTheme(!this.isDark()); constructor() {
button.blur(); super();
}); const button = this.querySelector('button')!;
const setTheme = (dark: boolean) => {
document.documentElement.classList[dark ? 'add' : 'remove']('dark');
button.setAttribute('aria-pressed', String(dark));
};
setTheme(this.isDark()); button.addEventListener('click', () => {
setTheme(!this.isDark());
button.blur();
});
setTheme(this.isDark());
}
isDark() {
return document.documentElement.classList.contains('dark');
}
} }
isDark() { customElements.define('theme-toggle', ThemeToggle);
return document.documentElement.classList.contains('dark');
}
} }
customElements.define('theme-toggle', ThemeToggle); // Run on initial load
initializeThemeToggle();
// Re-run on view transitions
document.addEventListener('astro:after-swap', initializeThemeToggle);
</script> </script>
<style> <style>
/* Turn off toggle if JavaScript is disabled */
:global(.no-js) theme-toggle { :global(.no-js) theme-toggle {
display: none; display: none;
} }

2
src/layouts/BaseLayout.astro
View File

@@ -1,6 +1,7 @@
--- ---
// Cspell:words astro noindex pagefind stylesheet favicons secuela imhoff sketchnotes shibui // Cspell:words astro noindex pagefind stylesheet favicons secuela imhoff sketchnotes shibui
import '../styles/global.css'; import '../styles/global.css';
import { ViewTransitions } from 'astro:transitions';
import { SEO } from 'astro-seo'; import { SEO } from 'astro-seo';
import { site } from '../data/site'; import { site } from '../data/site';
import { isProduction } from '../utils'; import { isProduction } from '../utils';
@@ -165,6 +166,7 @@ const webManifest = isProduction && {
/> />
) )
} }
<ViewTransitions />
<Scripts /> <Scripts />
</head> </head>
<body <body

11
src/styles/global.css
View File

@@ -18,6 +18,12 @@
color: #ffffff; color: #ffffff;
} }
/* Page Transitions */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 300ms;
}
/** Critic Markup */ /** Critic Markup */
del { del {
@apply decoration-[0.15em]; @apply decoration-[0.15em];
@@ -171,11 +177,6 @@
.icon { .icon {
@apply fill-shibui-950 dark:fill-shibui-200/[0.87]; @apply fill-shibui-950 dark:fill-shibui-200/[0.87];
} }
/** Swup */
main[tabindex='-1'] {
outline: none;
}
} }
@layer components { @layer components {