Add a limit prop to PostList component

src/components/PostList.astro

@@ -3,17 +3,21 @@ import { CollectionEntry, getCollection } from 'astro:content';
 
 export interface Props {
   filterFn?: (entry: CollectionEntry<'blog'>) => unknown;
+  limit?: number;
 }
 
-const defaultFilterFn = (entry: CollectionEntry<'blog'>) => true;
-const { filterFn = defaultFilterFn } = Astro.props;
+const defaultFilterFn = (_entry: CollectionEntry<'blog'>) => true;
+
+const { filterFn = defaultFilterFn, limit } = Astro.props;
 
 const posts = (
   await getCollection(
     'blog',
     (entry) => filterFn(entry) && (import.meta.env.DEV || !entry.data.draft)
   )
-).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+)
+  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
+  .slice(0, limit);
 ---
 
 {

src/pages/blog/index.astro

@@ -7,5 +7,5 @@ import PostList from '../../components/PostList.astro';
   title="blog"
   description="blog about the making of maciej's projects and more"
 >
-  <PostList />
+  <PostList limit={10} />
 </BlogSubpage>

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import PostList from '../components/PostList.astro';
 import { SITE_DESCRIPTION } from '../consts';
 import BaseLayout from '../layouts/BaseLayout.astro';
 ---
@@ -23,22 +24,10 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       workings of <a href="/projects">my applications</a>. Check out the latest
       posts below:
     </p>
-    <ul class="post-list">
-      <li>
-        <a href="#">This link leads nowhere</a>
-      </li>
-      <li>
-        <a href="#"
-          >And so does this one. But why is that, some of you may ask</a
-        >
-      </li>
-      <li>
-        <a href="#">The answer is simple. They're placeholders</a>
-      </li>
-    </ul>
+    <PostList limit={3} />
   </section>
   <section>
-    <h3>Enjoy my work?</h3>
+    <h3>Like my work?</h3>
     <p>
       If so, make sure to follow me on <a
         href="https://github.com/maciejpedzich"