mirror of
https://github.com/valentineus/popov.link.git
synced 2025-07-04 00:20:26 +03:00
feat: add LatestPosts section to homepage
- Introduced a new LatestPosts component to display the five most recent blog posts. - Updated the index page to include the LatestPosts section, enhancing content visibility. - Made minor text adjustments in the Welcome section for clarity.
This commit is contained in:
35
src/components/Sections/LatestPosts.astro
Normal file
35
src/components/Sections/LatestPosts.astro
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const posts = await getCollection("blog", ({ data }) => {
|
||||
return data.draft !== true;
|
||||
});
|
||||
|
||||
posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
|
||||
|
||||
const latestPosts = posts.slice(0, 5);
|
||||
---
|
||||
|
||||
<style lang="scss">
|
||||
@use "../../scss/variables" as *;
|
||||
|
||||
small {
|
||||
font-size: $fontSizeBase * 0.75;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<h2>Latest posts</h2>
|
||||
<ul>
|
||||
{
|
||||
latestPosts.map((post) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
|
||||
<small>{dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY")}</small>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
Reference in New Issue
Block a user