Skip to content

Commit 661fd8b

Browse files
RadaplsRadapls
committed
JFRA-00: Improve ViewTransitions.
1 parent 4d230f5 commit 661fd8b

File tree

5 files changed

+59
-14
lines changed

5 files changed

+59
-14
lines changed

‎src/components/Experience/ExperienceContent.astro‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
import type { ImageMetadata } from 'astro';
33
import { Image } from 'astro:assets';
4+
import { getRelativeLocaleUrl } from 'astro:i18n';
5+
import { DEFAULT_LOCALE, type Lang } from 'src/i18n';
46
57
interface Props {
68
image: {
@@ -16,6 +18,9 @@ interface Props {
1618
link?: string;
1719
}
1820
21+
const currentLocale =
22+
(Astro.currentLocale as Lang | undefined) ?? DEFAULT_LOCALE;
23+
1924
const { image, title, organization, relativeTime, isEven, link } = Astro.props;
2025
---
2126

@@ -34,7 +39,7 @@ const { image, title, organization, relativeTime, isEven, link } = Astro.props;
3439
/>
3540
<h3 class="qualification__title">{title}</h3>
3641
{link ? (
37-
<a href={link} data-astro-reload>
42+
<a href={getRelativeLocaleUrl(currentLocale, link)}>
3843
<span class="qualification__subtitle">{organization}</span>
3944
</a>
4045
) : (
@@ -68,7 +73,7 @@ const { image, title, organization, relativeTime, isEven, link } = Astro.props;
6873
/>
6974
<h3 class="qualification__title">{title}</h3>
7075
{link ? (
71-
<a href={link}>
76+
<a href={getRelativeLocaleUrl(currentLocale, link)}>
7277
<span class="qualification__subtitle">{organization}</span>
7378
</a>
7479
) : (

‎src/components/Header.astro‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@ import type { BrandType } from 'src/types/variants';
44
55
import Birdi from '@assets/img/brands/birdi.webp';
66
import LocaleSelect from './i18n/LocaleSelect.astro';
7-
8-
import { useTranslations, type Lang } from 'src/i18n';
7+
import { getRelativeLocaleUrl } from 'astro:i18n';
8+
import { DEFAULT_LOCALE, useTranslations, type Lang } from 'src/i18n';
99
import { Image } from 'astro:assets';
1010
import ThemeIcon from './ThemeIcon.astro';
1111
1212
const t = useTranslations(Astro.currentLocale as Lang);
1313
14+
const currentLocale =
15+
(Astro.currentLocale as Lang | undefined) ?? DEFAULT_LOCALE;
16+
1417
interface Props {
1518
variant?: BrandType;
1619
noLinks?: boolean;
@@ -23,7 +26,7 @@ const { variant, noLinks = false } = Astro.props;
2326
variant === 'radapls' ? (
2427
<header class="header" id="header">
2528
<nav class="nav container">
26-
<a href="/" class="nav__logo" data-astro-reload>
29+
<a href={getRelativeLocaleUrl(currentLocale, '/')} class="nav__logo">
2730
<Image
2831
class="radapls-brand"
2932
src={Logo}
@@ -38,7 +41,7 @@ const { variant, noLinks = false } = Astro.props;
3841
<div class="nav__menu" id="nav-menu">
3942
<ul class="nav__list grid">
4043
<li class="nav__item">
41-
<a href="#About" class="nav__link" data-astro-reload>
44+
<a href="#About" class="nav__link">
4245
<svg
4346
class="nav__icon"
4447
width="20"
@@ -64,7 +67,7 @@ const { variant, noLinks = false } = Astro.props;
6467
</a>
6568
</li>
6669
<li class="nav__item">
67-
<a href="#Skills" class="nav__link" data-astro-reload>
70+
<a href="#Skills" class="nav__link">
6871
<svg
6972
class="nav__icon"
7073
width="20"
@@ -90,7 +93,7 @@ const { variant, noLinks = false } = Astro.props;
9093
</a>
9194
</li>
9295
<li class="nav__item">
93-
<a href="#Portfolio" class="nav__link" data-astro-reload>
96+
<a href="#Portfolio" class="nav__link">
9497
<svg
9598
class="nav__icon"
9699
width="20"
@@ -116,7 +119,7 @@ const { variant, noLinks = false } = Astro.props;
116119
</a>
117120
</li>
118121
<li class="nav__item">
119-
<a href="#Contact" class="nav__link" data-astro-reload>
122+
<a href="#Contact" class="nav__link">
120123
<svg
121124
class="nav__icon"
122125
width="20"
@@ -142,7 +145,7 @@ const { variant, noLinks = false } = Astro.props;
142145
</a>
143146
</li>
144147
<li class="nav__item">
145-
<a href="/blog" class="nav__link" data-astro-reload>
148+
<a href={getRelativeLocaleUrl(currentLocale, 'blog')}class="nav__link">
146149
<svg
147150
class="nav__icon"
148151
width="20"
@@ -210,7 +213,7 @@ const { variant, noLinks = false } = Astro.props;
210213
<header class="header" id="header">
211214
<nav class="nav container">
212215
<div class="co-brand">
213-
<a href="/">
216+
<a href={getRelativeLocaleUrl(currentLocale, '/')}>
214217
<Image
215218
class="radapls-brand"
216219
src={Logo}

‎src/components/ThemeIcon.astro‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@
2121
</style>
2222

2323
<script is:inline>
24+
const applyThemeFromLocalStorage = () => {
25+
const theme =
26+
(typeof localStorage !== 'undefined' && localStorage.getItem('theme')) ||
27+
'light';
28+
if (theme === 'dark') {
29+
document.documentElement.classList.add('dark');
30+
} else {
31+
document.documentElement.classList.remove('dark');
32+
}
33+
};
34+
35+
2436
const theme = (() => {
2537
const localStorageTheme = localStorage?.getItem("theme") ?? '';
2638
if (['dark', 'light'].includes(localStorageTheme)) {
@@ -49,4 +61,29 @@
4961
}
5062

5163
document.getElementById("themeToggle")?.addEventListener("click", handleToggleClick);
52-
</script>
64+
65+
66+
const setupThemeToggleButton = () => {
67+
const toggleButton = document.getElementById("themeToggle");
68+
if (toggleButton) {
69+
toggleButton.removeEventListener('click', handleToggleClick); // Prevent duplicate listeners
70+
toggleButton.addEventListener('click', handleToggleClick);
71+
}
72+
};
73+
74+
// For View Transitions: Apply theme *immediately* after new DOM is swapped.
75+
document.addEventListener('astro:after-swap', applyThemeFromLocalStorage);
76+
77+
// For initial load and re-attaching button listener after page transitions:
78+
if (document.readyState === 'loading') {
79+
// Ensures button listener is attached after initial DOM is ready.
80+
// Theme is already applied by the inline script in <head> of BaseLayout.astro for initial paint.
81+
document.addEventListener('DOMContentLoaded', setupThemeToggleButton);
82+
} else {
83+
setupThemeToggleButton(); // If script loads after DOMContentLoaded.
84+
}
85+
// astro:page-load is for scripts that need to run after the page is fully loaded and painted.
86+
// Good for re-attaching listeners to elements that might have been re-rendered.
87+
document.addEventListener('astro:page-load', setupThemeToggleButton);
88+
89+
</script>

‎src/pages/[lang]/blog/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const t = useTranslations(Astro.currentLocale as Lang);
4040
const [, ...id] = post.id.split('/');
4141
return (
4242
<li>
43-
<a href={`/${locale}/blog/${id.join('/')}/`} data-astro-reload>
43+
<a href={`/${locale}/blog/${id.join('/')}/`}>
4444
{post.data.cover && <Image src={post.data.cover} alt={post.data.title} />}
4545
<h3>{post.data.title}</h3>
4646
</a>

‎src/pages/[lang]/experience/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const getStaticPaths = () =>
4646
const [, ...id] = post.id.split('/');
4747
return (
4848
<li>
49-
<a href={`/${locale}/experience/${id.join('/')}/`} data-astro-reload>
49+
<a href={`/${locale}/experience/${id.join('/')}/`}>
5050
{post.data.gif && <Image src={post.data.gif} alt={post.data.title} />}
5151
<h3>{post.data.title}</h3>
5252
</a>

0 commit comments

Comments
 (0)