Added page transitions

skyeto · Jan 4, 2024 · 272df87 · 272df87
1 parent 0b64e0c
commit 272df87
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import { ViewTransitions } from "astro:transitions";
+
 export interface Props {
 	title: string;
 }
@@ -38,6 +40,8 @@ const { title, description, pubDate } = Astro.props;
     <!-- preload custom fonts -->
     <link rel="preload" as="font" href="/fonts/RobotoSlab-Regular.woff2" type="font/woff2" crossorigin="anonymous">
     <link rel="preload" as="font" href="/fonts/CascadiaCode.woff2" type="font/woff2" crossorigin="anonymous">
+
+        <ViewTransitions />
 	</head>
   <body>
     <div class="rainbow flex flex-row w-3/4 lg:w-2/4 h-1/4 gap-6 blur-3xl absolute right-0 left-0 mx-auto -top-48" style="z-index: -1;">

diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
@@ -10,9 +10,9 @@ const { frontmatter } = Astro.props;
     description={frontmatter.description}
     pubDate={frontmatter.pubDate}>
   <Navbar />
-  <article class="container justify-center gap-2 text-base mt-8">
+  <article class="container justify-center gap-2 text-base" transition:name="content">
+    <h1 transition:name="title">{ frontmatter.title }</h1>
     <p class="pubdate">published { frontmatter.pubDate.slice(0, 10) }</p>
-    <h1>>{ frontmatter.title }</h1>
     <p class="ingress">{ frontmatter.description }</p>
     <slot />
   </article>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,8 +12,8 @@ const posts = await Astro.glob("./p/*.{md,mdx}");
 
   <Navbar />
 
-  <main class="container justify-center">
-    <h1>hi there!</h1>
+  <main class="container justify-center" transition:name="content" transition:type="slide">
+    <h1 transition:name="title">hi there!</h1>
     <p>I'm <span class="italic">/skaɪ-tuː/</span>. This blog is mostly a rambly collection of posts on different topics.</p>
 
     <p>
@@ -31,7 +31,7 @@ const posts = await Astro.glob("./p/*.{md,mdx}");
     <ul class="posts">
       {posts.sort((a,b) => { return Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate); }).filter((post) => post.frontmatter.publish === true || post.frontmatter.publish === undefined).map((post) =>
       <li>
-        <a class="block w-full" href={post.url} rel="prefetch">
+        <a class="block w-full" href={post.url}>
           <div class="inline-block">{post.frontmatter.title}</div>
           <div class="inline-block monospace float-right">[{post.frontmatter.pubDate.slice(0,10)}]</div>
         </a>