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/components/MainHeader.astro

@@ -14,8 +14,9 @@ const marginBottom = {
   }[titleSpace] || 'mb-3'
 ---
 
-<header>
+<header class="mb-17">
   <h1 class={`${marginBottom} text-12.8 c-primary font-bold font-title`}>
+    <!-- Fix text cut issue on ios by adding a div tag -->
     <div
       class="box-content inline-block pr-2"
       transition:name="site-title"

src/components/MobileHeader.astro

@@ -7,7 +7,8 @@ const currentPath = Astro.url.pathname
 const { getLocalizedPath } = getPagePath(currentPath)
 ---
 
-<header class="mt-4.7 text-8.6 c-secondary font-bold font-title lg:hidden">
+<header class="mt-4.7 mb-17 text-8.6 c-secondary font-bold font-title lg:hidden">
+  <!-- Fix text cut issue on ios by adding a div tag -->
   <div
     class="box-content inline-block pr-2"
     transition:name="site-title"

src/components/Navbar.astro

@@ -12,7 +12,7 @@ const isTagActive = isTag
 const isAboutActive = isAbout;
 ---
 
-<nav class="mb-17 mt-17 text-5.84 font-semibold leading-14 font-navbar">
+<nav class="mb-17 text-5.84 font-semibold leading-14 font-navbar">
   <ul>
     <li>
       <a