aboutsummaryrefslogtreecommitdiff
path: root/src/components/PostSummary.astro
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/PostSummary.astro')
-rw-r--r--src/components/PostSummary.astro51
1 files changed, 51 insertions, 0 deletions
diff --git a/src/components/PostSummary.astro b/src/components/PostSummary.astro
new file mode 100644
index 0000000..2f98130
--- /dev/null
+++ b/src/components/PostSummary.astro
@@ -0,0 +1,51 @@
+---
+import { type CollectionEntry } from "astro:content";
+import dayjs from "dayjs";
+
+type Props = {
+ readonly post: CollectionEntry<"blog">;
+};
+
+const { post } = Astro.props;
+---
+
+<style lang="scss">
+ @import "../scss/_variables.scss";
+
+ /* Post */
+ .post {
+ padding-bottom: 3rem;
+ }
+
+ .link {
+ color: $colorText;
+ }
+
+ /* Meta */
+ .meta {
+ padding-bottom: 1.5rem;
+ }
+
+ .date {
+ 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>