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

@@ -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}`}>
-                  <span class="ml-2" transition:name={`time-${post.data.slug || post.slug}`}>
+                  {post.remarkPluginFrontmatter?.minutes} min
-                    {post.remarkPluginFrontmatter.minutes} min
+                </span>
-                  </span>
-                )}
               </div>
             </li>
           ))}

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>
-        <span transition:name={`time-${post.data.slug || post.slug}`}>
+          {remarkPluginFrontmatter.minutes} min
-          · {remarkPluginFrontmatter.minutes} min
         </span>
-      )}
     </time>
     <Content />
   </article>

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