Add view transitions to post index/detail

solomonhawk · Oct 25, 2023 · 6307535 · 6307535
1 parent fa5933d
commit 6307535
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/src/components/Post.astro b/src/components/Post.astro
@@ -3,14 +3,18 @@ export interface Props {
   title: string;
   publishDate: Date;
   tags: string[];
+  slug: string;
 }
 
-const { title, publishDate, tags } = Astro.props;
+const { title, publishDate, tags, slug } = Astro.props;
 ---
 
 <article>
   <header>
-    <p class="mb-1 font-mono text-gray-400 sm:mb-2">
+    <p
+      class="mb-1 font-mono text-gray-400 sm:mb-2"
+      transition:name={`post-date-${slug}`}
+    >
       {
         publishDate.toLocaleDateString('en-US', {
           month: 'long',
@@ -20,11 +24,21 @@ const { title, publishDate, tags } = Astro.props;
       }
     </p>
 
-    <h2 class="h1 mb-2 text-yellow-400">{title}</h2>
+    <h2
+      class="h1 mb-2 text-yellow-400"
+      transition:name={`post-title-${slug}`}
+      transition:animate="initial"
+    >
+      {title}
+    </h2>
 
     {
       tags ? (
-        <div class="blog-tags my-4 md:my-6">
+        <div
+          class="blog-tags my-4 md:my-6"
+          transition:name={`post-tags-${slug}`}
+          transition:animate="initial"
+        >
           {tags.map(
             (tag: string) =>
             <a class="blog-tag" rel="prefetch" href={`/writing/tags/${tag}`}>{tag}</a>, // prettier-ignore

diff --git a/src/components/PostPreview.astro b/src/components/PostPreview.astro
@@ -17,6 +17,7 @@ const { post } = Astro.props;
     <header>
       <p
         class="mb-1 font-mono text-sm text-gray-400 group-hover:text-green-500 md:mb-2"
+        transition:name={`post-date-${post.slug}`}
       >
         {
           new Date(post.data.publishDate).toLocaleDateString('en-US', {
@@ -27,14 +28,17 @@ const { post } = Astro.props;
         }
       </p>
 
-      <h1 class="h1 mb-2 decoration-green-500 group-hover:underline">
+      <h1
+        class="h1 mb-2 decoration-green-500 group-hover:underline"
+        transition:name={`post-title-${post.slug}`}
+      >
         {post.data.title}
       </h1>
     </header>
 
     {
       post.data.tags ? (
-        <div class="blog-tags my-2">
+        <div class="blog-tags my-2" transition:name={`post-tags-${post.slug}`}>
           {post.data.tags.map((tag) => (
             <span class="blog-tag">{tag}</span>
           ))}

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -1,4 +1,6 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
+
 import BaseHead from '@/components/BaseHead.astro';
 import PageHeader from '@/components/PageHeader.astro';
 
@@ -9,6 +11,7 @@ const { title, description } = content;
 <html lang="en">
   <head>
     <BaseHead {title} {description} />
+    <ViewTransitions />
   </head>
 
   <body>

diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro
@@ -1,5 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content';
+import { ViewTransitions } from 'astro:transitions';
 
 import BaseHead from '@/components/BaseHead.astro';
 import Logo from '@/components/Logo.astro';
@@ -10,21 +11,23 @@ type Props = {
   frontmatter: CollectionEntry<'posts'>['data'];
 };
 
+const { slug } = Astro.params as { slug: string };
 const { frontmatter } = Astro.props;
 const { title, description, publishDate, tags } = frontmatter;
 ---
 
 <html lang="en">
   <head>
     <BaseHead {title} {description} />
+    <ViewTransitions />
   </head>
 
   <body>
     <PageHeader />
 
     <main id="content" class="container mx-auto my-4 max-w-3xl px-4">
       <div class="mt-8 sm:mt-12 md:mt-16">
-        <Post {title} {publishDate} {tags}>
+        <Post {title} {publishDate} {tags} {slug}>
           <slot />
         </Post>
       </div>