install/setup sass

src/components/Blog/BlogHeader.astro

@@ -0,0 +1,43 @@
+---
+import { add, format } from "date-fns";
+
+import CalendarIcon from "@assets/svg/calendar.svg";
+
+interface Props {
+  title: string;
+  date: Date;
+  slug?: string;
+}
+
+const { title, date, slug } = Astro.props;
+---
+
+<div class="blog-header">
+  {slug ? <a href={`/blog/${slug}`}>{title}</a> : <h1>{title}</h1>}
+  <div>
+    <CalendarIcon class="calendar-icon" width={24} height={24} />
+    <strong>{format(add(new Date(date), { hours: 6 }), "MMM do, y")}</strong>
+  </div>
+</div>
+
+<style lang="scss">
+  a {
+    font-size: 1.3rem;
+  }
+
+  strong {
+    font-weight: bolder;
+  }
+
+  .blog-header {
+    margin: 1rem 0;
+  }
+
+  .blog-header > h2 {
+    margin: 0;
+  }
+
+  .calendar-icon {
+    transform: translateY(0.3rem);
+  }
+</style>

src/components/Blog/BlogSidebar.astro

@@ -0,0 +1,25 @@
+---
+
+---
+
+<div class="sidebar">
+  <section>
+    <h2>Tags</h2>
+    <ul>
+      <li>Hello</li>
+      <li>Hello</li>
+      <li>Hello</li>
+      <li>Hello</li>
+    </ul>
+  </section>
+</div>
+
+<style lang="scss">
+  .sidebar {
+    padding: 16px;
+    border: var(--border);
+    min-width: 140px;
+    margin-left: 14px;
+    height: fit-content;
+  }
+</style>

src/components/Blog/PostPreview.astro

@@ -0,0 +1,26 @@
+---
+import type { CollectionEntry } from "astro:content";
+import BlogHeader from "./BlogHeader.astro";
+import Tags from "./Tags.astro";
+
+interface Props {
+  post: CollectionEntry<"blog">;
+}
+
+const { post } = Astro.props;
+---
+
+<article>
+  <BlogHeader title={post.data.title} date={post.data.pubDate} slug={post.id} />
+  <Tags tags={post.data.tags} />
+</article>
+
+<style lang="scss">
+  article {
+    padding-bottom: 20px;
+  }
+
+  article:not(:first-child) {
+    border-top: var(--border);
+  }
+</style>

src/components/Blog/Tags.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  tags: string[];
+}
+
+const { tags } = Astro.props;
+---
+
+<span>
+  {
+    tags.sort().map((tag: string, index: number) => (
+      <>
+        <a class="tag" href={`/blog/tag/${tag}`}>
+          {tag}
+        </a>
+        {index < tags.length - 1 ? " | " : ""}
+      </>
+    ))
+  }
+</span>