view transition updates (#18)

Adammatthiesen · web-flow · commit 784cb63fcb09 · 2024-03-14T03:04:22.000-07:00
diff --git a/.changeset/friendly-pets-boil.md b/.changeset/friendly-pets-boil.md
@@ -0,0 +1,5 @@
+---
+"@matthiesenxyz/astro-hashnode": patch
+---
+
+view transition updates
diff --git a/package/src/components/Author.astro b/package/src/components/Author.astro
@@ -20,16 +20,24 @@ const { post } = Astro.props;
         height={50}
         class="rounded-3xl mr-3" 
         loading="eager"
+        transition:animate={"fade"} 
+        transition:name={'author:' + post.author.profilePicture}
       />
       <div class="mt-3 flex">  
-        <span>{post.author.name}</span>
+        <span transition:animate={"fade"} 
+        transition:name={'author:' + post.author.name} 
+        >{post.author.name}</span>
         <span class="mx-3 block font-bold text-slate-500">.</span>
       </div>
     </div>
   </div>
-  <div class="mb-5 flex w-full flex-row items-center justify-center md:mb-0 md:w-auto md:justify-start">
-    <span>{getFormattedDate(post.publishedAt)}</span>
+  <div class="mb-5 flex w-full flex-row items-center justify-center md:mb-0 md:w-auto md:justify-start" >
+    <span transition:animate={"fade"} 
+    transition:name={'hero:' + post.publishedAt}
+    >{getFormattedDate(post.publishedAt)}</span>
     <span class="mx-3 block font-bold text-slate-500">.</span>
-    <span>{post.readTimeInMinutes} min read</span>
+    <span transition:animate={"fade"} 
+    transition:name={'hero:' + post.readTimeInMinutes}
+    >{post.readTimeInMinutes} min read</span>
   </div>
 </div>
diff --git a/package/src/components/Header.astro b/package/src/components/Header.astro
@@ -7,6 +7,27 @@ const aboutPageData = await getAboutPage();
 
 const baseURL = import.meta.env.BASE_URL;
 
+const pathname = new URL(Astro.request.url).pathname;
+
+// remove leading and trailing slash
+const removeTrailingAndLeadingSlash = (str:string) => {
+  // define checked string as the original string
+  let checkedStr = str;
+
+  // remove leading slash
+  if (str.startsWith("/")) {
+    checkedStr = str.slice(1);
+  }
+  // remove trailing slash
+  if (str.endsWith("/")) {
+    checkedStr = str.slice(0, -1);
+  }
+  // return checked string
+  return checkedStr;
+}
+
+const currentPath = removeTrailingAndLeadingSlash(pathname);
+
 ---
 <header class="flex bg-blue-200 w-full p-3">
   <h1 class="text-2xl">
@@ -35,8 +56,22 @@ const baseURL = import.meta.env.BASE_URL;
     </a>
   </h1>
   <div class="ml-5 pt-0.5 text-lg">
-    <a class="mr-3" href={baseURL}>Home</a>
-    <a class="mr-3" href={`${baseURL}blog`}>Blog</a>
-    {aboutPageData && <a href={`${baseURL}blog/about/`}>About</a>}
+    <a 
+      class=`mr-3 ${currentPath === "" ? "font-bold" : ""}` 
+      href={baseURL}
+      >Home
+    </a>
+    <a 
+      class=`mr-3 ${currentPath === "blog" ? "font-bold" : ""}` 
+      href={`${baseURL}blog`}
+      >Blog
+    </a>
+    { aboutPageData && ( 
+      <a 
+        class=`mr-3 ${currentPath === "blog/about" ? "font-bold" : ""}`
+        href={`${baseURL}blog/about`}
+        >About
+      </a>
+       ) }
   </div>
 </header>
diff --git a/package/src/components/PostCard.astro b/package/src/components/PostCard.astro
@@ -26,6 +26,7 @@ const p = await getPost(post.slug);
         src={p.coverImage.url} 
         alt={post.title} 
         inferSize={true} 
+        transition:name={'hero:' + p.coverImage.url}
       />
       <div class="flex flex-col m-4">
         <p class="mb-2 text-lg">{post.brief}</p>
diff --git a/package/src/layouts/Layout.astro b/package/src/layouts/Layout.astro
@@ -62,7 +62,7 @@ const { pageTitle, hideFooter, hideHeader, ogImage } = Astro.props as AstroHashn
   </head>
   <body>
     <div class="flex flex-col">
-      {!hideHeader && <Header />}
+      {!hideHeader && <Header transition:animate="none" />}
       <div class="flex flex-wrap flex-col mt-0 mr-auto mb-0 ml-auto lg:w-[60%]">
         <slot />
       </div>
diff --git a/package/src/pages/blog/[slug].astro b/package/src/pages/blog/[slug].astro
@@ -28,11 +28,12 @@ const post = await getPost(slug);
       alt={post.title} 
       inferSize={true} 
       loading="eager"
+      transition:name={'hero:' + post.coverImage.url}
     />
-    <h1 class="text-4xl font-bold pt-5">{post.title}</h1>
+    <h1 class="text-4xl font-bold pt-5" transition:name={'banner'} transition:animate={'fade'}>{post.title}</h1>
     <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>
 
-    <Author post={post} />
+    <Author post={post}/>
     
     <div class="flex flex-wrap justify-center items-center mt-5 mb-5">
       {post.tags && post.tags.map((tag) => <Tag tag={tag} />)}
diff --git a/package/src/pages/blog/about.astro b/package/src/pages/blog/about.astro
@@ -9,7 +9,9 @@ const data = await getAboutPage();
 
 <Layout pageTitle="About">
   <div class="flex flex-col justify-center p-2">
-    <h2 class="text-3xl mb-3">{data.title} Page</h2>
+    <h2 class="text-3xl mb-3" 
+    transition:name={'banner'}
+    transition:animate={'fade'}>{data.title}</h2>
     <div class="about-content">
       <Markdown content={data.content.markdown} 
       components={{
diff --git a/package/src/pages/blog/index.astro b/package/src/pages/blog/index.astro
@@ -10,7 +10,7 @@ const allPosts = data.publication.posts.edges;
 ---
 <Layout pageTitle="Blog">
 	<div class="flex flex-col justify-center items-center p-2">
-		<h2 class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
+		<h2 transition:animate={'fade'} transition:name={'banner'} class="text-2xl pt-2 font-semibold">{`Welcome to ${pub.displayTitle || pub.title}`}</h2>
 		<Posts allPosts={allPosts}/>
 
 	</div>
diff --git a/package/src/pages/index.astro b/package/src/pages/index.astro
@@ -13,8 +13,14 @@ import background from "../assets/blog.jpg";
 			height={1080}
 			width={1920}
 			loading="eager"
+			transition:name={'background:' + background}
+			transition:animate={'fade'}
 		/>
-		<div class="absolute p-2 flex flex-col justify-center items-center z-10 bg-purple-50 lg:w-2/5 h-1/4 rounded-md">
+		<div 
+			class="absolute p-2 flex flex-col justify-center items-center z-10 bg-purple-50 lg:w-2/5 h-1/4 rounded-md"
+			transition:name={'banner'}
+			transition:animate={'fade'}
+		>
 			<div class="flex pb-5 mb-5 text-5xl text-purple-800">
 				<p>Hashnode Blog</p>
 			</div>
diff --git a/package/src/pages/ssr-pages/[slug].astro b/package/src/pages/ssr-pages/[slug].astro
@@ -27,6 +27,7 @@ const post = await getPost(checkSlug(slug));
       alt={post.title} 
       inferSize={true} 
       loading="eager"
+      transition:name={'hero:' + post.coverImage.url}
     />
     <h1 class="text-4xl font-bold pt-5">{post.title}</h1>
     <h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@matthiesenxyz/astro-hashnode": patch
 +---
++
 +view transition updates