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>

src/pages/posts/[slug].astro

@@ -24,9 +24,9 @@ const { Content, remarkPluginFrontmatter } = await post.render()
   postDescription={post.data.description}
   postImage={post.data.image}
 >
-  <article>
-    <h1>{post.data.title}</h1>
-    <time>
+  <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>}
     </time>