diff options
| -rw-r--r-- | src/components/PostElement.astro | 32 | ||||
| -rw-r--r-- | src/pages/blog/index.astro | 6 |
2 files changed, 36 insertions, 2 deletions
diff --git a/src/components/PostElement.astro b/src/components/PostElement.astro new file mode 100644 index 0000000..703189e --- /dev/null +++ b/src/components/PostElement.astro @@ -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> diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro index 210a7a1..48d33e8 100644 --- a/src/pages/blog/index.astro +++ b/src/pages/blog/index.astro @@ -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> |