From 7861156651f4c0710da636f2fa83014ee13d64d3 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Sat, 15 Feb 2025 22:09:14 +0000
Subject: [PATCH] test: post title view transition

- Remove transition names from date and reading time spans
- Wrap post title in a span for view transition
- Add font-bold utility to h1 in Heti CSS
- Simplify reading time display logic
---
 src/pages/index.astro        | 10 ++++------
 src/pages/posts/[slug].astro | 14 ++++++++------
 src/styles/heti.css          |  1 +
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 207a4a0..c657f8e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -46,14 +46,12 @@ const postsByYear = await getPostsByYear()
               </a>
               {/* Post Date */}
               <div class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline">
-                <span transition:name={`date-${post.data.slug || post.slug}`}>
+                <span>
                   {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
                 </span>
-                {post.remarkPluginFrontmatter?.minutes && (
-                  <span class="ml-2" transition:name={`time-${post.data.slug || post.slug}`}>
-                    {post.remarkPluginFrontmatter.minutes} min
-                  </span>
-                )}
+                <span class="ml-2" transition:name={`time-${post.data.slug || post.slug}`}>
+                  {post.remarkPluginFrontmatter?.minutes} min
+                </span>
               </div>
             </li>
           ))}
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index 8958334..5bfd5e0 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -25,16 +25,18 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postImage={post.data.image}
 >
   <article class="heti">
-    <h1 transition:name={`post-${post.data.slug || post.slug}`}>{post.data.title}</h1>
+    <h1>
+      <span transition:name={`post-${post.data.slug || post.slug}`}>
+        {post.data.title}
+      </span>
+    </h1>
     <time>
-      <span transition:name={`date-${post.data.slug || post.slug}`}>
+      <span>
         {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
       </span>
-      {remarkPluginFrontmatter.minutes && (
-        <span transition:name={`time-${post.data.slug || post.slug}`}>
-          · {remarkPluginFrontmatter.minutes} min
+        <span>
+          {remarkPluginFrontmatter.minutes} min
         </span>
-      )}
     </time>
     <Content />
   </article>
diff --git a/src/styles/heti.css b/src/styles/heti.css
index 68c8756..84cefee 100644
--- a/src/styles/heti.css
+++ b/src/styles/heti.css
@@ -116,6 +116,7 @@
 	font-weight:600
 }
 .heti h1 {
+  --at-apply: 'font-bold';
 	margin-block-end:24px;
 	font-size:32px;
 	line-height:48px