Merge pull request #496 from Trombach/feature/native-vt

Switch to native VT
Trombach · Dec 1, 2024 · 22eeb0b · 22eeb0b · vercel · Dec 1, 2024
2 parents beac0b9 + 05956d6
commit 22eeb0b
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 9 deletions.
diff --git a/.changeset/blue-birds-greet.md b/.changeset/blue-birds-greet.md
@@ -0,0 +1,5 @@
+---
+"homepage": minor
+---
+
+Remove ViewTransitions polyfill and move to native transitions
diff --git a/src/components/About/MeCard/Avatar.astro b/src/components/About/MeCard/Avatar.astro
@@ -11,7 +11,6 @@ const { image, class: className } = Astro.props;
 
 <Image
   src={image}
-  transition:name="avatar"
   alt="Lukas"
   widths={[96, 128, 256]}
   loading="eager"

diff --git a/src/components/Nav/Navbar.astro b/src/components/Nav/Navbar.astro
@@ -4,7 +4,7 @@ import NavigationMenu from "./NavigationMenu.astro";
 import ThemeSwitcher from "./ThemeSwitcher.astro";
 ---
 
-<header data-header="collapsed" class="group fixed top-0 z-50 w-full px-5 py-3">
+<header data-header="collapsed" transition:name="header" class="group fixed top-0 z-50 w-full px-5 py-3">
   <div
     class="relative mx-auto flex w-full max-w-screen-xl flex-wrap items-center justify-between lg:flex-nowrap lg:items-center"
   >

diff --git a/src/components/ProjectPage/Aside.astro b/src/components/ProjectPage/Aside.astro
@@ -11,7 +11,6 @@ type Props = {
 <aside
   id="toc-aside"
   popover="auto"
-  transition:animate="slide"
   class:list={[
     "bg-background max-w-[500px] p-5 my-0 border rounded-xl grow self-start w-auto right-0 sticky",
     "top-[calc(var(--header-height)+var(--offset))] [--offset:theme(spacing.2)] left-2 right-2",

diff --git a/src/components/ProjectPage/PageBody.astro b/src/components/ProjectPage/PageBody.astro
@@ -31,7 +31,7 @@ const dashedTitle = dash(title);
         loading="eager"
         sizes={`(max-width: 360px) 240px, (max-width: 480px) 480px, (min-width: 850px) 850px`}
         class="aspect-[21/9] w-full rounded-t-xl object-cover"
-        transition:name={cover.image.src}
+        transition:name={cover.image?.src}
       />
     )
   }

diff --git a/src/components/ViewTransitions/NativeViewTransitions.astro b/src/components/ViewTransitions/NativeViewTransitions.astro
@@ -0,0 +1,5 @@
+<style is:inline>
+  @view-transition {
+    navigation: auto;
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,16 +1,16 @@
 ---
-import Background from "@components/Background/Background.astro";
 import Footer from "@components/Footer/Footer.astro";
 import Favicon from "@components/Head/Favicon.astro";
 import Preload from "@components/Head/Preload.astro";
 import Webmentions from "@components/Head/Webmentions.astro";
 import Navbar from "@components/Nav/Navbar.astro";
 import ThemeProvider from "@components/Nav/ThemeProvider.astro";
 import SEO from "@components/SEO.astro";
+import NativeViewTransitions from "@components/ViewTransitions/NativeViewTransitions.astro";
+
 import "@fontsource-variable/inter";
 import "@fontsource-variable/jetbrains-mono";
 import "@fontsource/lobster";
-import { ViewTransitions } from "astro:transitions";
 
 interface Props {
   title: string;
@@ -39,14 +39,13 @@ const { title, description = "Lukas' Homepage" } = Astro.props;
     <slot name="seo">
       <SEO {title} {description} />
     </slot>
-    <ViewTransitions />
+    <NativeViewTransitions />
     <ThemeProvider />
   </head>
   <body class="antialiased">
-    <Background />
     <Navbar />
     <main
-      transition:name="main-content"
+      transition:name="main"
       class="flex w-full flex-col items-center mt-[--header-height]"
     >
       <slot />
@@ -57,6 +56,14 @@ const { title, description = "Lukas' Homepage" } = Astro.props;
       @tailwind base;
       @tailwind utilities;
 
+      ::view-transition-group(*) {
+        animation-duration: 500ms;
+      }
+
+      ::view-transition-group(header) {
+        z-index: 999;
+      }
+
       @layer base {
         :root {
           --background: 0 0% 100%;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,11 +1,13 @@
 ---
 import AboutMe from "@components/About/AboutMe.astro";
 import Tech from "@components/About/Tech.astro";
+import Background from "@components/Background/Background.astro";
 import Hero from "@components/Home/Hero/Hero.astro";
 import Layout from "@layouts/Layout.astro";
 ---
 
 <Layout title="Lukas Trombach | Software Engineer">
+  <Background />
   <Hero />
   <AboutMe />
   <Tech />