feat: enhance post listing and reading time display

- Implement dynamic post listing grouped by year with improved date formatting
- Add reading time display for each post
- Update index pages for both default and localized routes
- Modify content utility functions to support reading time metadata
- Refactor global styles and type definitions to support new features

src/pages/index.astro

@@ -1,9 +1,9 @@
 ---
 import Layout from '@/layouts/Layout.astro'
-import { getPinnedPosts, getPosts } from '@/utils/content'
+import { getPinnedPosts, getPostsByYear } from '@/utils/content'
 
-const posts = await getPosts()
 const pinnedPosts = await getPinnedPosts()
+const postsByYear = await getPostsByYear()
 ---
 
 <Layout>
@@ -15,7 +15,10 @@ const pinnedPosts = await getPinnedPosts()
             <li>
               <a href={`/posts/${post.data.slug || post.slug}/`}>
                 {post.data.title}
-                <time>({post.data.published.toISOString().split('T')[0]})</time>
+                <time class="block lg:inline lg:before:content-['_']">
+                  {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
+                  {post.remarkPluginFrontmatter?.minutes && <span>  {post.remarkPluginFrontmatter.minutes} min</span>}
+                </time>
               </a>
             </li>
           ))}
@@ -23,17 +26,27 @@ const pinnedPosts = await getPinnedPosts()
       </section>
     )}
 
-    <section>
-      <ul>
-        {posts.map(post => (
-          <li>
-            <a href={`/posts/${post.data.slug || post.slug}/`}>
-              {post.data.title}
-              <time>({post.data.published.toISOString().split('T')[0]})</time>
-            </a>
-          </li>
-        ))}
-      </ul>
-    </section>
+    {[...postsByYear.entries()].map(([year, posts]) => (
+      // Year Group
+      <section class="mt-8">
+        {/* Year */}
+        <time class="text-8 font-date">{year}</time>
+        {/* Posts List */}
+        <ul>
+          {posts.map(post => (
+            // Single Post
+            <li class="mt-6">
+              {/* Post Title */}
+              <a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}/`}>{post.data.title}</a>
+                {/* Post Date */} 
+                <time class="text-5.6 leading-7 font-date block lg:inline lg:before:content-['_'] opacity-30" aria-hidden="true">
+                  {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
+                  {post.remarkPluginFrontmatter?.minutes &&  <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
+                </time>
+            </li>
+          ))}
+        </ul>
+      </section>
+    ))}
   </main>
 </Layout>