Enable client side view transitions

Comet-Robotics · Jun 27, 2024 · 46d741f · 46d741f
1 parent 6d4dc22
commit 46d741f
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/src/components/footer.astro b/src/components/footer.astro
@@ -18,6 +18,7 @@ const hash = childProcess
 
 <footer
   style="display: flex; flex-direction: column; gap: 1rem; align-items: center; padding: 3rem 5rem; width: 100%; background-color: var(--text-dark); font-size:0.8rem;" class="font-unbounded"
+  transition:persist
 >
   <style>
     .sponsor:hover {

diff --git a/src/components/join.astro b/src/components/join.astro
@@ -75,7 +75,7 @@ const options: {title: string, description: string, url: string}[] = [
           boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.25)'
         }}
       >
-        <h3 class="font-unbounded">{title}</h3>
+        <h3 class="font-unbounded">{title} &rarr;</h3>
         <span>
           {description}
         </span>

diff --git a/src/components/navbar.astro b/src/components/navbar.astro
@@ -8,7 +8,7 @@ import { HOME_LINK, discordInvite, mainNavLinks, instagramURL } from '../data'
   }
 </style>
 
-<div style={{ position: 'fixed', top: '0', left: '0', width: '100%',zIndex: 100, }}>
+<div transition:persist style={{ position: 'fixed', top: '0', left: '0', width: '100%',zIndex: 100, }}>
 
   <div
     style={{

diff --git a/src/layouts/base.astro b/src/layouts/base.astro
@@ -18,9 +18,10 @@ let ogImage = (url.origin + '/og' + (url.pathname === '/' ? '/index' : url.pathn
 
 const site = 'Comet Robotics at UT Dallas'
 const { title } = Astro.props
+import { ViewTransitions } from 'astro:transitions';
 ---
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" transition:animate="none">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -38,6 +39,7 @@ const { title } = Astro.props
       image={ogImage}
       astroGenerator={true}
     />
+    <ViewTransitions />
   </head>
   <Navbar />
   <main>
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ const hash = childProcess @@
     <footer
       style="display: flex; flex-direction: column; gap: 1rem; align-items: center; padding: 3rem 5rem; width: 100%; background-color: var(--text-dark); font-size:0.8rem;" class="font-unbounded"
+      transition:persist
     >
       <style>
         .sponsor:hover {
@@ Expand Down @@