From a6d03c605aed8adf810819818505918573893b63 Mon Sep 17 00:00:00 2001
From: Adam Matthiesen <amatthiesen@outlook.com>
Date: Wed, 13 Mar 2024 23:17:34 -0700
Subject: [PATCH] Add better transition animations

---
 package/src/components/Author.astro      | 16 ++++++---
 package/src/components/Header.astro      | 41 ++++++++++++++++++++++--
 package/src/components/PostCard.astro    |  1 +
 package/src/layouts/Layout.astro         |  2 +-
 package/src/pages/blog/[slug].astro      |  3 +-
 package/src/pages/ssr-pages/[slug].astro |  1 +
 6 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/package/src/components/Author.astro b/package/src/components/Author.astro
index 921856c..ee74a3c 100644
--- 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>
\ No newline at end of file
diff --git a/package/src/components/Header.astro b/package/src/components/Header.astro
index c26e0a5..31b4f67 100644
--- 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
index c99b358..187c17b 100644
--- 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
index 48a157f..dd00a18 100644
--- 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
index 2ee3792..90300a0 100644
--- 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>
     <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/ssr-pages/[slug].astro b/package/src/pages/ssr-pages/[slug].astro
index 5f46421..efbb822 100644
--- 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>