mirror of
https://github.com/valentineus/popov.link.git
synced 2025-07-03 08:00:26 +03:00
feat: create PostElement component for blog post display
- Added a new PostElement component to render individual blog posts with title, publication date, and reading time. - Updated the blog index page to utilize PostElement instead of PostSummary for improved post presentation.
This commit is contained in:
32
src/components/PostElement.astro
Normal file
32
src/components/PostElement.astro
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
import { type CollectionEntry } from "astro:content";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
type Props = {
|
||||
readonly post: CollectionEntry<"blog">;
|
||||
};
|
||||
|
||||
const { post } = Astro.props;
|
||||
const { remarkPluginFrontmatter } = await post.render();
|
||||
const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
|
||||
---
|
||||
|
||||
<style lang="scss">
|
||||
@import "../scss/_variables.scss";
|
||||
|
||||
small {
|
||||
font-size: $fontSizeBase * 0.75;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<li>
|
||||
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
|
||||
<div>
|
||||
<small>
|
||||
<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
|
||||
<span>•</span>
|
||||
<span>{remarkPluginFrontmatter.minutesRead}</span>
|
||||
</small>
|
||||
</div>
|
||||
</li>
|
@ -1,7 +1,7 @@
|
||||
---
|
||||
import { getCollection } from "astro:content";
|
||||
import Layout from "../../layouts/BaseLayout.astro";
|
||||
import PostSummary from "../../components/PostSummary.astro";
|
||||
import PostElement from "../../components/PostElement.astro";
|
||||
|
||||
const posts = await getCollection("blog", ({ data }) => {
|
||||
return data.draft !== true;
|
||||
@ -12,6 +12,8 @@ posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
|
||||
|
||||
<Layout>
|
||||
<section style={{ "margin-top": "3rem" }}>
|
||||
{posts.map((post) => <PostSummary post={post} />)}
|
||||
<ul>
|
||||
{posts.map((post) => <PostElement post={post} />)}
|
||||
</ul>
|
||||
</section>
|
||||
</Layout>
|
||||
|
Reference in New Issue
Block a user