style

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">

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>

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>

src/styles/home.scss

@@ -1,4 +1,8 @@
 .home.postListing {
+  .timestamp {
+    font-family: var(--monofont);
+  }
+
   .tags {
     gap: 4px;