diff options
| author | Valentin Popov <valentin@popov.link> | 2024-09-18 01:27:55 +0300 |
|---|---|---|
| committer | Valentin Popov <valentin@popov.link> | 2024-09-18 01:27:55 +0300 |
| commit | cf85f107245fd40f7b453d30790a8649eb972083 (patch) | |
| tree | a7959cec4f2b692da7791f8a014bfdbfc9e531d7 /src/components/PostSummary.astro | |
| parent | 43f80a7b6ee32f721b5685a206cae78f9f625a12 (diff) | |
| download | popov.link-cf85f107245fd40f7b453d30790a8649eb972083.tar.xz popov.link-cf85f107245fd40f7b453d30790a8649eb972083.zip | |
Update launch configuration and enhance PostSummary component layout
Diffstat (limited to 'src/components/PostSummary.astro')
| -rw-r--r-- | src/components/PostSummary.astro | 50 |
1 files changed, 22 insertions, 28 deletions
diff --git a/src/components/PostSummary.astro b/src/components/PostSummary.astro index 2f98130..59d7683 100644 --- a/src/components/PostSummary.astro +++ b/src/components/PostSummary.astro @@ -7,45 +7,39 @@ type Props = { }; 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"; - /* Post */ - .post { - padding-bottom: 3rem; - } - - .link { + a { color: $colorText; + display: block; + padding-bottom: 3rem; } - /* Meta */ - .meta { - padding-bottom: 1.5rem; + h2 { + color: $colorBlossom; + font-size: 1.25em; + margin: 0.5em 0; } - .date { + div { + font-size: $fontSizeBase * 0.75; opacity: 0.5; } - - .tag { - display: none; - } </style> -<article class="post"> - <h2><a class="link" href={`/blog/${post.slug}`}>{post.data.title}</a></h2> - <div class="meta"> - <time class="date" datetime={post.data.pubDate.toISOString()}> - {dayjs(post.data.pubDate.toString()).format("YYYY-MM-DD")} - </time> - <ul class="tag"> - <li><a href="#">tag1</a></li> - <li><a href="#">tag2</a></li> - </ul> - </div> - <p>{post.data.description}</p> - <a href={`/blog/${post.slug}`}>Read More</a> -</article> +<a href={`/blog/${post.slug}`}> + <article> + <div> + <time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time> + <span>•</span> + <span>{remarkPluginFrontmatter.minutesRead}</span> + </div> + <h2>{post.data.title}</h2> + <p>{post.data.description}</p> + </article> +</a> |