refactor: refactoring project structure and components, optimizing internationalization and page presentation

src/components/PostTitleList.astro

@@ -0,0 +1,61 @@
+---
+// Define props received by the component
+interface Post {
+  data: {
+    title: string;
+    slug?: string;
+    published: Date;
+  };
+  slug?: string;
+  remarkPluginFrontmatter?: {
+    minutes?: number;
+  };
+}
+
+// Receive posts parameter passed from outside
+const { posts } = Astro.props;
+
+// Declare the type of props
+export interface Props {
+  posts: Post[];
+}
+---
+<ul>
+  {posts.map(post => (
+    // Single Post
+    <li class="mt-4.375">
+
+      <a
+        class="hover:c-primary"
+        href={`/posts/${post.data.slug || post.slug}`}
+        transition:name={`post-${post.data.slug || post.slug}`}
+        data-disable-transition-on-theme
+      >
+        {post.data.title}
+      </a>
+
+      <div
+        class="uno-mobile-time"
+        transition:name={`time-${post.data.slug || post.slug}`}
+        data-disable-transition-on-theme
+      >
+        <time>
+          {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+        </time>
+        <span class="ml-1.25">
+          {post.remarkPluginFrontmatter?.minutes} min
+        </span>
+      </div>
+
+      <div class="uno-desktop-time">
+        <time>
+          {post.data.published.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')}
+        </time>
+        <span class="ml-1.25">
+          {post.remarkPluginFrontmatter?.minutes} min
+        </span>
+      </div>
+
+    </li>
+  ))}
+</ul>