From 14f53a979a2c7ea6342e6d43faa5da249d88b1f4 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Sun, 16 Feb 2025 01:58:01 +0000
Subject: [PATCH] fix: view transition error with title

- Add `data-disable-transition-on-theme` to post titles and dates
- Improve view transition handling for theme changes
- Ensure consistent transition behavior across post list and individual post pages
---
 src/pages/index.astro        | 2 ++
 src/pages/posts/[slug].astro | 6 +++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index d0148d1..d4f5ecf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -41,6 +41,7 @@ const postsByYear = await getPostsByYear()
                 class="hover:c-primary"
                 href={`/posts/${post.data.slug || post.slug}`}
                 transition:name={`post-${post.data.slug || post.slug}`}
+                data-disable-transition-on-theme
               >
                 {post.data.title}
               </a>
@@ -48,6 +49,7 @@ const postsByYear = await getPostsByYear()
               <div
                 class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline"
                 transition:name={`time-${post.data.slug || post.slug}`}
+                data-disable-transition-on-theme
               >
                 <time>
                   {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index 8002f7d..10a5429 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -26,7 +26,10 @@ const { Content, remarkPluginFrontmatter } = await post.render()
 >
   <article class="heti">
     <h1 class="post-title">
-      <span transition:name={`post-${post.data.slug || post.slug}`}>
+      <span
+        transition:name={`post-${post.data.slug || post.slug}`}
+        data-disable-transition-on-theme
+      >
         {post.data.title}
       </span>
     </h1>
@@ -34,6 +37,7 @@ const { Content, remarkPluginFrontmatter } = await post.render()
     <div
       class="mb-23.4 block c-primary font-time"
       transition:name={`time-${post.data.slug || post.slug}`}
+      data-disable-transition-on-theme
     >
       <time>
         {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}