refactor: improve view transition naming and post metadata handling

- Remove hardcoded 'theme-introduction' slug from multilingual post files
- Update view transition names to be more consistent and dynamic
- Separate date and reading time into individual transition elements
- Ensure fallback for slug in transition and link generation

src/content/posts/retypeset_en.md

@@ -3,7 +3,6 @@ title: Retypeset Theme Introduction
 published: 2024-01-25
 tags: ["Astro", "Blog Theme"]
 lang: en
-slug: theme-introduction
 ---
 
 Retypeset, an Astro-powered blog theme with the Chinese name "Recomposition", draws initial inspiration from typographic artistry. While preserving the quintessential charm of movable-type printing, it revolutionizes all page layouts with meticulous typographic design. This theme crafts a minimalist modern aesthetic that simultaneously resonates with the humanistic elegance inherent in traditional printing craftsmanship.

src/content/posts/retypeset_es.md

@@ -3,7 +3,6 @@ title: Retypeset Presentación del Tema
 published: 2024-01-25
 tags: ["Astro", "Tema para blogs"]
 lang: es
-slug: theme-introduction
 ---
 
-Retypeset, un tema para blogs basado en Astro cuyo nombre chino es "Recomposición", se inspiró originalmente en el arte tipográfico. Conservando la esencia del estilo de impresión tipográfica tradicional, este tema reinventa todas las páginas mediante un diseño editorial meticuloso, creando una estética moderna y minimalista que fluye con el encanto humanístico de la impresión clásica.
+Retypeset, un tema para blogs basado en Astro cuyo nombre chino es "Recomposición", se inspiró originalmente en el arte tipográfico. Conservando la esencia del estilo de impresión tipográfica tradicional, este tema reinventa todas las páginas mediante un diseño editorial meticuloso, creando una estética moderna y minimalista que fluye con el encanto humanístico de la impresión clásica.

src/content/posts/retypeset_ja.md

@@ -3,7 +3,6 @@ title: Retypeset テーマ紹介
 published: 2024-01-25
 tags: ["Astro", "ブログテーマ"]
 lang: ja
-slug: theme-introduction
 ---
 
-RetypesetはAstroベースのブログテーマで、中国語名「再編成」はタイポグラフィから着想を得ています。活版印刷のスタイルを継承しつつ、レイアウトデザインを中核に全ページを再構成。モダンでミニマルな視覚効果を創出するとともに、伝統的な印刷文化の人文的趣きを脈々と流れさせています。
+RetypesetはAstroベースのブログテーマで、中国語名「再編成」はタイポグラフィから着想を得ています。活版印刷のスタイルを継承しつつ、レイアウトデザインを中核に全ページを再構成。モダンでミニマルな視覚効果を創出するとともに、伝統的な印刷文化の人文的趣きを脈々と流れさせています。

src/content/posts/retypeset_ru.md

@@ -3,7 +3,6 @@ title: Retypeset Описание темы
 published: 2024-01-25
 tags: ["Astro", "Тема блога"]
 lang: ru
-slug: theme-introduction
 ---
 
-Retypeset — блог-тема на базе Astro с китайским названием «Переосмысленная композиция». Вдохновлённая искусством типографики, тема сохраняет очарование традиционной наборной печати, полностью перерабатывая вёрстку всех страниц. Современный минималистичный дизайн гармонично сочетается с гуманистическим духом, присущим классическому книгопечатанию.
+Retypeset — блог-тема на базе Astro с китайским названием «Переосмысленная композиция». Вдохновлённая искусством типографики, тема сохраняет очарование традиционной наборной печати, полностью перерабатывая вёрстку всех страниц. Современный минималистичный дизайн гармонично сочетается с гуманистическим духом, присущим классическому книгопечатанию.

src/content/posts/retypeset_zh-tw.md

@@ -3,7 +3,6 @@ title: Retypeset 主題介紹
 published: 2024-01-25
 tags: ["Astro", "部落格主題"]
 lang: zh-tw
-slug: theme-introduction
 ---
 
-Retypeset 是一款基於 Astro 的部落格主題，中文名為「重新編排」，其設計靈感源自活字印刷術。本主題在保留原有「活字印刷」風格精髓的基礎上，以版面編排設計為核心，對所有頁面進行全新演繹，既營造出簡約現代的視覺風格，又流淌著傳統印刷工藝的人文氣韻。
+Retypeset 是一款基於 Astro 的部落格主題，中文名為「重新編排」，其設計靈感源自活字印刷術。本主題在保留原有「活字印刷」風格精髓的基礎上，以版面編排設計為核心，對所有頁面進行全新演繹，既營造出簡約現代的視覺風格，又流淌著傳統印刷工藝的人文氣韻。

src/pages/index.astro

@@ -38,19 +38,23 @@ const postsByYear = await getPostsByYear()
             <li class="mt-7">
               {/* Post Title */}
               <a
-              class="hover:c-primary"
-              href={`/posts/${post.data.slug || post.slug}`}
-              transition:name={`post-title-${post.data.slug}`}>
+                class="hover:c-primary"
+                href={`/posts/${post.data.slug || post.slug}`}
+                transition:name={`post-${post.data.slug || post.slug}`}
+              >
                 {post.data.title}
               </a>
-                {/* Post Date */}
-                <div
-                class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline"
-                transition:name={`post-time-${post.data.slug}`}
-                >
+              {/* 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}`}>
                   {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
-                  {post.remarkPluginFrontmatter?.minutes && <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
-                </div>
+                </span>
+                {post.remarkPluginFrontmatter?.minutes && (
+                  <span class="ml-2" transition:name={`time-${post.data.slug || post.slug}`}>
+                    {post.remarkPluginFrontmatter.minutes} min
+                  </span>
+                )}
+              </div>
             </li>
           ))}
         </ul>

src/pages/posts/[slug].astro

@@ -25,10 +25,16 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postImage={post.data.image}
 >
   <article class="heti">
-    <h1 transition:name={`post-title-${post.data.slug}`}>{post.data.title}</h1>
-    <time transition:name={`post-time-${post.data.slug}`}>
-      {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
-      {remarkPluginFrontmatter.minutes && <span> · {remarkPluginFrontmatter.minutes} min</span>}
+    <h1 transition:name={`post-${post.data.slug || post.slug}`}>{post.data.title}</h1>
+    <time>
+      <span transition:name={`date-${post.data.slug || post.slug}`}>
+        {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>
+      )}
     </time>
     <Content />
   </article>