From 62b4c105a951b08669093b41267affed5ebf3174 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Tue, 2 Apr 2024 10:30:51 -0500
Subject: [PATCH] style

---
 src/components/PostList.astro  | 13 ++++++++++---
 src/components/Timestamp.astro | 12 +++++-------
 src/pages/index.astro          |  2 +-
 src/styles/home.scss           |  4 ++++
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/components/PostList.astro b/src/components/PostList.astro
index 72c0518..e384449 100644
--- a/src/components/PostList.astro
+++ b/src/components/PostList.astro
@@ -5,14 +5,21 @@ import { sortBy } from "lodash-es";
 import TagList from "./TagList.astro";
 
 interface Props {
-  className: string;
+  class: string;
   basePath: string;
   drafts?: "exclude" | "include" | "only";
   filteredPosts?: Post[];
+  timeFormat?: string;
 }
 
 type Post = CollectionEntry<"posts">;
-const { className, basePath, drafts: includeDrafts, filteredPosts } = Astro.props;
+const {
+  class: className,
+  basePath,
+  drafts: includeDrafts,
+  filteredPosts,
+  timeFormat,
+} = Astro.props;
 
 type FilterFn = (_: Post) => boolean;
 
@@ -49,7 +56,7 @@ const sortedPosts = sortBy(allPosts, (post) => -post.data.date);
           <tr class="row">
             <td class="info">
               <span class="spacer" />
-              <Timestamp timestamp={post.data.date} />
+              <Timestamp timestamp={post.data.date} format={timeFormat} />
             </td>
             <td>
               <div class="title">
diff --git a/src/components/Timestamp.astro b/src/components/Timestamp.astro
index 00aab82..51b02f1 100644
--- a/src/components/Timestamp.astro
+++ b/src/components/Timestamp.astro
@@ -1,15 +1,13 @@
 ---
 interface Props {
   timestamp: Date;
+  format: string | undefined;
 }
 
-const { timestamp } = Astro.props;
+const { timestamp, format: customFormat } = Astro.props;
 import { format } from "date-fns";
-// const datestamp = timestamp.toLocaleDateString(undefined, {
-//   year: "numeric",
-//   month: "short",
-//   day: "numeric",
-// });
 ---
 
-<span title={timestamp.toISOString()}>{format(timestamp, "yyyy MMM d")}</span>
+<span class="timestamp" title={timestamp.toISOString()}>
+  {format(timestamp, customFormat ?? "yyyy MMM d")}
+</span>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9b75ea5..ba876db 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,5 +10,5 @@ const currentUrl = Astro.url;
 <BaseLayout>
   <h2>Blog</h2>
 
-  <PostList className="home" basePath={join(currentUrl.pathname, "posts")} />
+  <PostList class="home" timeFormat="yyyy-MM-dd" basePath={join(currentUrl.pathname, "posts")} />
 </BaseLayout>
diff --git a/src/styles/home.scss b/src/styles/home.scss
index 84e30c7..bbd9860 100644
--- a/src/styles/home.scss
+++ b/src/styles/home.scss
@@ -1,4 +1,8 @@
 .home.postListing {
+  .timestamp {
+    font-family: var(--monofont);
+  }
+
   .tags {
     gap: 4px;