From 6c7d04fa12d006379157cf876c2826f606f124e9 Mon Sep 17 00:00:00 2001
From: Tanishq Manuja <tanishqmanuja@gmail.com>
Date: Mon, 18 Sep 2023 14:24:16 +0530
Subject: [PATCH] feat: add view transitions for card on search page (#118)

* feat: use predictable slug for card transition

* feat: enable view transitions in search card

* refactor: use Card.tsx instead of Card.astro

* refactor: handle card styling in component

* refactor: remove unused class name

---------

Co-authored-by: Sat Naing <satnaingdev@gmail.com>
---
 src/components/Card.astro     | 22 ----------------------
 src/components/Card.tsx       | 20 ++++++++++++++++++--
 src/layouts/PostDetails.astro |  2 +-
 src/layouts/Posts.astro       |  2 +-
 src/pages/index.astro         |  2 +-
 src/pages/tags/[tag].astro    |  2 +-
 src/styles/base.css           | 12 ------------
 7 files changed, 22 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/Card.astro

diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index 97fdeac..0000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -1,22 +0,0 @@
----
-import Datetime from "@components/Datetime";
-import type { BlogFrontmatter } from "@content/_schemas";
-
-export interface Props {
-  href?: string;
-  frontmatter: BlogFrontmatter;
-  secHeading?: boolean;
-}
-
-const { href, frontmatter, secHeading = true } = Astro.props;
-
-const { title, pubDatetime, description } = frontmatter;
----
-
-<li class="list-card">
-  <a href={href} transition:name={title}>
-    {secHeading ? <h2>{title}</h2> : <h3>{title}</h3>}
-  </a>
-  <Datetime datetime={pubDatetime} />
-  <p>{description}</p>
-</li>
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 02b6d07..ca0fe43 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -1,3 +1,4 @@
+import { slugifyStr } from "@utils/slugify";
 import Datetime from "./Datetime";
 import type { BlogFrontmatter } from "@content/_schemas";
 
@@ -9,9 +10,24 @@ export interface Props {
 
 export default function Card({ href, frontmatter, secHeading = true }: Props) {
   const { title, pubDatetime, description } = frontmatter;
+
+  const headerProps = {
+    style: { viewTransitionName: slugifyStr(title) },
+    className: "text-lg font-medium decoration-dashed hover:underline",
+  };
+
   return (
-    <li className="list-card">
-      <a href={href}>{secHeading ? <h2>{title}</h2> : <h3>{title}</h3>}</a>
+    <li className="my-6">
+      <a
+        href={href}
+        className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
+      >
+        {secHeading ? (
+          <h2 {...headerProps}>{title}</h2>
+        ) : (
+          <h3 {...headerProps}>{title}</h3>
+        )}
+      </a>
       <Datetime datetime={pubDatetime} />
       <p>{description}</p>
     </li>
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index 4bad68e..6552f3e 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -43,7 +43,7 @@ const ogUrl = new URL(ogImage ? ogImage : `${post.slug}.png`, Astro.url.origin)
     </button>
   </div>
   <main id="main-content">
-    <h1 transition:name={title} class="post-title">{title}</h1>
+    <h1 transition:name={slugifyStr(title)} class="post-title">{title}</h1>
     <Datetime datetime={pubDatetime} size="lg" className="my-2" />
     <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
       <Content />
diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
index e1b7cf0..c9cc585 100644
--- a/src/layouts/Posts.astro
+++ b/src/layouts/Posts.astro
@@ -4,7 +4,7 @@ import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-import Card from "@components/Card.astro";
+import Card from "@components/Card";
 import LinkButton from "@components/LinkButton.astro";
 import slugify from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8697eae..faab2f6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,7 +5,7 @@ import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
 import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
-import Card from "@components/Card.astro";
+import Card from "@components/Card";
 import Socials from "@components/Socials.astro";
 import getSortedPosts from "@utils/getSortedPosts";
 import slugify from "@utils/slugify";
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
index 8253fba..1477328 100644
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -4,7 +4,7 @@ import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-import Card from "@components/Card.astro";
+import Card from "@components/Card";
 import getUniqueTags from "@utils/getUniqueTags";
 import getPostsByTag from "@utils/getPostsByTag";
 import slugify from "@utils/slugify";
diff --git a/src/styles/base.css b/src/styles/base.css
index 7842c8e..a3af9a0 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -128,16 +128,4 @@
   .focus-outline {
     @apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
   }
-
-  /* Card */
-  .list-card {
-    @apply my-6;
-  }
-  .list-card > a {
-    @apply inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0;
-  }
-  .list-card h2,
-  .list-card h3 {
-    @apply text-lg font-medium decoration-dashed hover:underline;
-  }
 }