refactor: split parts into standalone components

src/pages/categories/[...category].astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 import {getCollection} from "astro:content";
+import ArticleList from "../../components/ArticleList.astro";
 
 export async function getStaticPaths() {
     const allPosts = await getCollection('posts');
@@ -25,12 +26,7 @@ const { posts } = Astro.props;
 <Layout title={`posts tagged with ${category}`} description={`Posts tagged with ${category}`}>
     <h1 class="title">ls ~/blog | grep "{category}"</h1>
     <ul>
-        {posts.map((post: any) =>
-            <p>
-                <span class="list-date">{new Date(post.data.pubDate).toISOString().split('T')[0]}</span>
-                <a href={`/blog/${post.slug}`}>{post.data.title}</a>
-            </p>
-        )}
+        <ArticleList posts={posts} displayDate={true} />
     </ul>
 </Layout>