feat: implement isNew utility function and update Posts component to display "New" badge conditionally

Author: hrgui

src/components/app/blog/Posts.test.tsx

@@ -1,8 +1,46 @@
 import { render, screen } from "@testing-library/preact";
-import { test } from "vitest";
+import { test, vi, afterEach } from "vitest";
 
 import Posts from "./Posts";
 
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+test("shows the New badge when the featured post was published within the last 24 hours", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2026-03-27T12:00:00Z"));
+  render(
+    <Posts
+      posts={[
+        {
+          title: "Brand New Post",
+          slug: "brand-new",
+          date: "2026-03-27T10:00:00Z",
+        },
+      ]}
+    />
+  );
+  expect(screen.getByText("New")).toBeInTheDocument();
+});
+
+test("does not show the New badge when the featured post is older than 24 hours", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2026-03-27T12:00:00Z"));
+  render(
+    <Posts
+      posts={[
+        {
+          title: "Old Post",
+          slug: "old-post",
+          date: "2026-03-25",
+        },
+      ]}
+    />
+  );
+  expect(screen.queryByText("New")).not.toBeInTheDocument();
+});
+
 test("should be able to render no posts without crashing", () => {
   render(<Posts posts={[]} />);
   expect(screen.getByText(/No posts available/)).toBeInTheDocument();

src/components/app/blog/Posts.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 
 import { type Frontmatter } from "~/types/frontmatter";
 
-import { toDisplayDate } from "./utils";
+import { toDisplayDate, isNew } from "./utils";
 
 interface Props {
   posts?: Frontmatter[];
@@ -36,9 +36,11 @@ const Posts = ({ posts }: Props) => {
             >
               <div className="mb-7 flex items-center justify-between gap-4 font-mono text-xs uppercase tracking-[0.18em] text-outline">
                 <div className="inline-flex items-center gap-3">
-                  <span className="rounded bg-secondary/18 px-2 py-1 font-mono text-xs font-semibold uppercase tracking-[0.16em] text-secondary">
-                    New
-                  </span>
+                  {isNew(featuredPost.date) && (
+                    <span className="rounded bg-secondary/18 px-2 py-1 font-mono text-xs font-semibold uppercase tracking-[0.16em] text-secondary">
+                      New
+                    </span>
+                  )}
                   <p className="font-mono text-sm text-on-surface-muted">
                     {toDisplayDate(featuredPost.date)}
                   </p>

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

@@ -1,6 +1,45 @@
-import { describe, expect, test } from "vitest";
+import { describe, expect, test, vi, afterEach } from "vitest";
 
-import { toDisplayDate } from "./utils";
+import { toDisplayDate, isNew } from "./utils";
+
+describe("isNew", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test("returns false when no date is provided", () => {
+    expect(isNew()).toBe(false);
+    expect(isNew(undefined)).toBe(false);
+  });
+
+  test("returns false for an invalid date string", () => {
+    expect(isNew("not-a-date")).toBe(false);
+  });
+
+  test("returns true when post date is exactly now", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-03-27T12:00:00Z"));
+    expect(isNew("2026-03-27")).toBe(true);
+  });
+
+  test("returns true when post date is 23 hours ago", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-03-27T12:00:00Z"));
+    expect(isNew("2026-03-26T13:00:00Z")).toBe(true);
+  });
+
+  test("returns false when post date is more than 24 hours ago", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-03-27T12:00:00Z"));
+    expect(isNew("2026-03-26T11:59:59Z")).toBe(false);
+  });
+
+  test("returns false when post date is in the future", () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-03-27T12:00:00Z"));
+    expect(isNew("2026-03-28")).toBe(false);
+  });
+});
 
 describe("toDisplayDate", () => {
   test("returns UNKNOWN when no date is provided", () => {

src/components/app/blog/utils.ts

@@ -1,3 +1,11 @@
+export const isNew = (rawDate?: string) => {
+  if (!rawDate) return false;
+  const postDate = new Date(rawDate);
+  if (Number.isNaN(postDate.getTime())) return false;
+  const diffMs = Date.now() - postDate.getTime();
+  return diffMs >= 0 && diffMs <= 24 * 60 * 60 * 1000;
+};
+
 export const toDisplayDate = (rawDate?: string) => {
   if (!rawDate) {
     return "UNKNOWN";