feat: implement toDisplayDate utility function and integrate it into BlogSubHeader and Posts components

Author: hrgui

src/components/app/blog/BlogSubHeader.tsx

@@ -1,3 +1,5 @@
+import { toDisplayDate } from "./utils";
+
 type Props = {
   hidden?: boolean;
   date?: string;
@@ -12,7 +14,7 @@ const BlogSubHeader = ({ hidden, date, title, excerpt }: Props) => {
         {date && (
           <div className="mb-8 flex items-center gap-4">
             <div className="flex items-center gap-2 whitespace-nowrap font-mono text-sm text-primary bg-primary/10 px-2 py-1 rounded tracking-widest">
-              <span>{date} //</span>
+              <span className={"uppercase"}>{toDisplayDate(date)} //</span>
               <span className="text-primary">ENTRY_RECORD</span>
               {hidden && process.env.NODE_ENV === "development" && (
                 <span className="rounded bg-tertiary/18 px-2 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-tertiary">

src/components/app/blog/Posts.tsx

@@ -2,29 +2,15 @@ import classNames from "classnames";
 
 import { type Frontmatter } from "types/frontmatter";
 
+import { toDisplayDate } from "./utils";
+
 interface Props {
   posts?: Frontmatter[];
 }
 
 const postCardClassName =
   "group flex h-full flex-col rounded-2xl border border-outline-variant bg-surface-container-low px-7 py-8 transition-all duration-150 ease-out hover:border-primary/70 hover:bg-surface-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-[0.995]";
 
-const toDisplayDate = (rawDate?: string) => {
-  if (!rawDate) {
-    return "UNKNOWN";
-  }
-
-  const parsedDate = new Date(rawDate);
-  if (Number.isNaN(parsedDate.getTime())) {
-    return rawDate;
-  }
-
-  const year = parsedDate.getFullYear();
-  const month = String(parsedDate.getMonth() + 1).padStart(2, "0");
-  const day = String(parsedDate.getDate()).padStart(2, "0");
-  return `${year}.${month}.${day}`;
-};
-
 const toNodeId = (index: number) =>
   `SYSLOG_${String(index + 1).padStart(2, "0")}`;
 

src/components/app/blog/utils.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from "vitest";
+
+import { toDisplayDate } from "./utils";
+
+describe("toDisplayDate", () => {
+  test("returns UNKNOWN when no date is provided", () => {
+    expect(toDisplayDate()).toBe("UNKNOWN");
+    expect(toDisplayDate(undefined)).toBe("UNKNOWN");
+  });
+
+  test("returns the raw string when it cannot be parsed as a date", () => {
+    expect(toDisplayDate("not-a-date")).toBe("not-a-date");
+  });
+
+  test("formats a valid ISO date string as a US long-form date", () => {
+    expect(toDisplayDate("2026-03-23")).toBe("March 23, 2026");
+  });
+
+  test("formats January correctly", () => {
+    expect(toDisplayDate("2024-01-01")).toBe("January 1, 2024");
+  });
+
+  test("formats December correctly", () => {
+    expect(toDisplayDate("2023-12-31")).toBe("December 31, 2023");
+  });
+
+  test("does not shift the day due to timezone offset", () => {
+    // Dates stored as YYYY-MM-DD should not drift to the previous day
+    expect(toDisplayDate("2025-07-04")).toBe("July 4, 2025");
+  });
+});

src/components/app/blog/utils.ts

@@ -0,0 +1,17 @@
+export const toDisplayDate = (rawDate?: string) => {
+  if (!rawDate) {
+    return "UNKNOWN";
+  }
+
+  const parsedDate = new Date(rawDate);
+  if (Number.isNaN(parsedDate.getTime())) {
+    return rawDate;
+  }
+
+  return parsedDate.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: "UTC",
+  });
+};