feat: enhance typography and image handling

- Add Heti typography plugin for improved Chinese text layout
- Implement rehype plugin to convert images to figure elements with captions
- Update UnoCSS configuration by removing typography preset
- Modify file extensions for consistency (.mjs to .js)
- Add new plugins for admonition, GitHub card, and reading time components
- Improve image and text styling with Heti CSS

src/pages/index.astro

@@ -37,9 +37,17 @@ const postsByYear = await getPostsByYear()
             // Single Post
             <li class="mt-7">
               {/* Post Title */}
-              <a class="hover:c-primary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
+              <a
+              class="hover:c-primary"
+              href={`/posts/${post.data.slug || post.slug}`}
+              transition:name={`post-title-${post.data.slug}`}>
+                {post.data.title}
+              </a>
                 {/* Post Date */}
-                <div class="mb-9 block text-5.6 leading-11 font-time lg:ml-4 lg:inline">
+                <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.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>