timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 11:03:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile optimizations

Browse Source
This commit is contained in:
Timothy Pidashev
2026-04-06 14:21:03 -07:00
parent dc7ca40b9b
commit 1a445548f2
4 changed files with 116 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/animate-in.tsx
View File

@@ -25,8 +25,9 @@ export function AnimateIn({ children, delay = 0, threshold = 0.15 }: AnimateInPr
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const inView = rect.top < window.innerHeight && rect.bottom > 0; const inView = rect.top < window.innerHeight && rect.bottom > 0;
const isReload = (performance.getEntriesByType?.("navigation")?.[0] as PerformanceNavigationTiming)?.type === "reload"; const isReload = (performance.getEntriesByType?.("navigation")?.[0] as PerformanceNavigationTiming)?.type === "reload";
const isSpaNav = !!(window as any).__astroNavigation;
if (inView && isReload) { if (inView && (isReload || isSpaNav)) {
setSkip(true); setSkip(true);
setVisible(true); setVisible(true);
return; return;

47
src/layouts/content.astro
View File

@@ -40,28 +40,51 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
handleFocus={false} handleFocus={false}
/> />
<style> <style>
::view-transition-new(:root) { ::view-transition-new(:root),
animation: none;
}
::view-transition-old(:root) { ::view-transition-old(:root) {
animation: none; animation: none;
} }
#nav-mask {
position: fixed;
inset: 0;
z-index: 9999;
background: rgb(var(--color-background));
pointer-events: none;
opacity: 0;
transition: none;
}
#nav-mask.active {
opacity: 1;
}
</style> </style>
<script is:inline set:html={THEME_LOADER_SCRIPT} /> <script is:inline set:html={THEME_LOADER_SCRIPT} />
<script is:inline set:html={ANIMATION_LOADER_SCRIPT} /> <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
<script is:inline>
<script> (function() {
document.addEventListener('astro:before-swap', (e) => { function getMask() {
// Instantly hide old page to prevent flash var m = document.getElementById('nav-mask');
document.documentElement.style.opacity = '0'; if (!m) {
m = document.createElement('div');
m.id = 'nav-mask';
document.documentElement.appendChild(m);
}
return m;
}
document.addEventListener('astro:before-preparation', function() {
getMask().classList.add('active');
}); });
document.addEventListener('astro:after-swap', () => { document.addEventListener('astro:after-swap', function() {
// Show new page immediately var m = getMask();
document.documentElement.style.opacity = '1'; setTimeout(function() { m.classList.remove('active'); }, 50);
}); });
</script> document.addEventListener('astro:after-swap', function() {
window.__astroNavigation = true;
});
})();
</script>
</head> </head>
<body class="bg-background text-foreground min-h-screen flex flex-col"> <body class="bg-background text-foreground min-h-screen flex flex-col">
<div id="nav-mask"></div>
<Header client:load /> <Header client:load />
<main class="flex-1 flex flex-col"> <main class="flex-1 flex flex-col">
<div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 pb-20 lg:pb-8 flex-1 relative z-10"> <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 pb-20 lg:pb-8 flex-1 relative z-10">

49
src/layouts/index.astro
View File

@@ -39,28 +39,53 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
<link rel="sitemap" href="/sitemap-index.xml" /> <link rel="sitemap" href="/sitemap-index.xml" />
<ClientRouter /> <ClientRouter />
<style> <style>
::view-transition-new(:root) { ::view-transition-new(:root),
animation: none;
}
::view-transition-old(:root) { ::view-transition-old(:root) {
animation: none; animation: none;
} }
#nav-mask {
position: fixed;
inset: 0;
z-index: 9999;
background: rgb(var(--color-background));
pointer-events: none;
opacity: 0;
transition: none;
}
#nav-mask.active {
opacity: 1;
}
</style> </style>
<script is:inline set:html={THEME_LOADER_SCRIPT} /> <script is:inline set:html={THEME_LOADER_SCRIPT} />
<script is:inline set:html={ANIMATION_LOADER_SCRIPT} /> <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
<script is:inline>
<script> (function() {
document.addEventListener('astro:before-swap', (e) => { function getMask() {
// Instantly hide old page to prevent flash var m = document.getElementById('nav-mask');
document.documentElement.style.opacity = '0'; if (!m) {
m = document.createElement('div');
m.id = 'nav-mask';
document.documentElement.appendChild(m);
}
return m;
}
document.addEventListener('astro:before-preparation', function() {
getMask().classList.add('active');
}); });
document.addEventListener('astro:after-swap', () => { document.addEventListener('astro:after-swap', function() {
// Show new page immediately var m = getMask();
document.documentElement.style.opacity = '1'; // Wait for React to hydrate before revealing
setTimeout(function() { m.classList.remove('active'); }, 50);
}); });
</script> // Mark SPA navigations so AnimateIn can detect them
document.addEventListener('astro:after-swap', function() {
window.__astroNavigation = true;
});
})();
</script>
</head> </head>
<body class="bg-background text-foreground overflow-hidden h-screen"> <body class="bg-background text-foreground overflow-hidden h-screen">
<div id="nav-mask"></div>
<Header client:load transparent /> <Header client:load transparent />
<main> <main>
<Background layout="index" client:only="react" transition:persist /> <Background layout="index" client:only="react" transition:persist />

47
src/layouts/resource.astro
View File

@@ -40,28 +40,51 @@ const ogImage = "https://timmypidashev.dev/og-image.jpg";
handleFocus={false} handleFocus={false}
/> />
<style> <style>
::view-transition-new(:root) { ::view-transition-new(:root),
animation: none;
}
::view-transition-old(:root) { ::view-transition-old(:root) {
animation: none; animation: none;
} }
#nav-mask {
position: fixed;
inset: 0;
z-index: 9999;
background: rgb(var(--color-background));
pointer-events: none;
opacity: 0;
transition: none;
}
#nav-mask.active {
opacity: 1;
}
</style> </style>
<script is:inline set:html={THEME_LOADER_SCRIPT} /> <script is:inline set:html={THEME_LOADER_SCRIPT} />
<script is:inline set:html={ANIMATION_LOADER_SCRIPT} /> <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
<script is:inline>
<script> (function() {
document.addEventListener('astro:before-swap', (e) => { function getMask() {
// Instantly hide old page to prevent flash var m = document.getElementById('nav-mask');
document.documentElement.style.opacity = '0'; if (!m) {
m = document.createElement('div');
m.id = 'nav-mask';
document.documentElement.appendChild(m);
}
return m;
}
document.addEventListener('astro:before-preparation', function() {
getMask().classList.add('active');
}); });
document.addEventListener('astro:after-swap', () => { document.addEventListener('astro:after-swap', function() {
// Show new page immediately var m = getMask();
document.documentElement.style.opacity = '1'; setTimeout(function() { m.classList.remove('active'); }, 50);
}); });
</script> document.addEventListener('astro:after-swap', function() {
window.__astroNavigation = true;
});
})();
</script>
</head> </head>
<body class="bg-background text-foreground min-h-screen flex flex-col"> <body class="bg-background text-foreground min-h-screen flex flex-col">
<div id="nav-mask"></div>
<main class="flex-1 flex flex-col"> <main class="flex-1 flex flex-col">
<div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 flex-1 relative z-10"> <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 flex-1 relative z-10">
<Background layout="content" position="right" client:only="react" transition:persist /> <Background layout="content" position="right" client:only="react" transition:persist />