Add a limit prop to PostList component

This commit is contained in:
Maciej Pędzich 2023-05-22 21:32:01 +02:00
parent 25329b9f61
commit 6365a30bfe
3 changed files with 11 additions and 18 deletions

View File

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

View File

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

View File

@ -1,4 +1,5 @@
--- ---
import PostList from '../components/PostList.astro';
import { SITE_DESCRIPTION } from '../consts'; import { SITE_DESCRIPTION } from '../consts';
import BaseLayout from '../layouts/BaseLayout.astro'; 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 workings of <a href="/projects">my applications</a>. Check out the latest
posts below: posts below:
</p> </p>
<ul class="post-list"> <PostList limit={3} />
<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>
</section> </section>
<section> <section>
<h3>Enjoy my work?</h3> <h3>Like my work?</h3>
<p> <p>
If so, make sure to follow me on <a If so, make sure to follow me on <a
href="https://github.com/maciejpedzich" href="https://github.com/maciejpedzich"