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
export default defineConfig({
site: 'https://www.stefanimhoff.de',
viewTransitions: true,
markdown: {
shikiConfig: {
theme: customTheme,

17
src/components/Scripts.astro
View File

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

12
src/components/ThemeProvider.astro
View File

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

46
src/components/ThemeToggle.astro
View File

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

2
src/layouts/BaseLayout.astro
View File

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

11
src/styles/global.css
View File

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