fix: duplicate transition id

pages/src/components/Card.tsx

@@ -3,20 +3,21 @@ import { slugifyStr } from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";
 
 export interface Props {
+  id?: string;
   href?: string;
   frontmatter: CollectionEntry<"posts">["data"];
   secHeading?: boolean;
   body?: string;
 }
 
-export default function Card({ href, frontmatter, secHeading = true, body }: Props) {
+export default function Card({ id, href, frontmatter, secHeading = true, body }: Props) {
   const {
     title,
     status,
   } = frontmatter;
 
   const headerProps = {
-    style: { viewTransitionName: slugifyStr(title) },
+    style: { viewTransitionName: slugifyStr(id) },
     className: "text-lg font-medium decoration-dashed hover:underline",
   };
 

pages/src/layouts/PostDetails.astro

@@ -13,6 +13,8 @@ export interface Props {
 
 const { post } = Astro.props;
 
+const { id } = post;
+
 const { title, author, collected_date, collector, translated_date, translator, link, proofreader, proofread_date, publisher, published_date } = post.data;
 
 const { Content } = await post.render();
@@ -51,7 +53,7 @@ const layoutProps = {
     </button>
   </div>
   <main id="main-content">
-    <h1 transition:name={slugifyStr(title)} class="post-title">{title}</h1>
+    <h1 transition:name={slugifyStr(id)} class="post-title">{title}</h1>
     <!-- <Datetime -->
     <!--   pubDatetime={pubDatetime} -->
     <!--   modDatetime={modDatetime} -->

pages/src/layouts/Posts.astro

@@ -45,8 +45,8 @@ function getStyle(tabStatus: string) {
     </nav>
     <ul>
       {
-        paginatedPosts.map(({ data, slug, body }) => (
-          <Card href={`/posts/${slug}/`} frontmatter={data} body={body} />
+        paginatedPosts.map(({ id, data, slug, body }) => (
+          <Card id={id} href={`/posts/${slug}/`} frontmatter={data} body={body} />
         ))
       }
     </ul>