Fix date format example in reading settings

.changeset/fix-admin-date-format-example.md

@@ -0,0 +1,5 @@
+---
+"@emdash-cms/admin": patch
+---
+
+Fixes the reading settings date format example so it follows the configured format string.

packages/admin/package.json

@@ -68,6 +68,7 @@
     "@tiptap/starter-kit": "catalog:",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "dompurify": "^3.3.2",
     "marked": "^17.0.3",
     "react-hotkeys-hook": "^5.2.4",

packages/admin/src/components/settings/GeneralSettings.tsx

@@ -12,6 +12,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as React from "react";
 
 import { fetchSettings, updateSettings, type SiteSettings, type MediaItem } from "../../lib/api";
+import { DEFAULT_DATE_FORMAT, formatDateFormatExample } from "../../lib/date-format-example";
 import { EditorHeader } from "../EditorHeader";
 import { MediaPickerModal } from "../MediaPickerModal";
 import { BackToSettingsLink } from "./BackToSettingsLink.js";
@@ -69,6 +70,9 @@ export function GeneralSettings() {
 		setFormData((prev) => ({ ...prev, [key]: value }));
 	};
 
+	const dateFormat = formData.dateFormat || DEFAULT_DATE_FORMAT;
+	const dateFormatExample = formatDateFormatExample(dateFormat);
+
 	const handleLogoSelect = (media: MediaItem) => {
 		setFormData((prev) => ({
 			...prev,
@@ -302,9 +306,13 @@ export function GeneralSettings() {
 						/>
 						<Input
 							label={t`Date Format`}
-							value={formData.dateFormat || "MMMM d, yyyy"}
+							value={dateFormat}
 							onChange={(e) => handleChange("dateFormat", e.target.value)}
-							description={`Example: ${formData.dateFormat || "MMMM d, yyyy"} → January 23, 2026`}
+							description={
+								dateFormatExample
+									? t`Example: ${dateFormat} → ${dateFormatExample}`
+									: t`Example: ${dateFormat} → Invalid date format`
+							}
 						/>
 						<Input
 							label={t`Timezone`}

packages/admin/src/lib/date-format-example.ts

@@ -0,0 +1,13 @@
+import { format } from "date-fns";
+
+const DATE_FORMAT_EXAMPLE_DATE = new Date(2026, 0, 23, 12);
+
+export const DEFAULT_DATE_FORMAT = "MMMM d, yyyy";
+
+export function formatDateFormatExample(dateFormat: string): string | null {
+	try {
+		return format(DATE_FORMAT_EXAMPLE_DATE, dateFormat || DEFAULT_DATE_FORMAT);
+	} catch {
+		return null;
+	}
+}

packages/admin/tests/date-format-example.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+
+import { DEFAULT_DATE_FORMAT, formatDateFormatExample } from "../src/lib/date-format-example";
+
+describe("formatDateFormatExample", () => {
+	it("formats the default date format example", () => {
+		expect(formatDateFormatExample(DEFAULT_DATE_FORMAT)).toBe("January 23, 2026");
+	});
+
+	it("formats ISO-style date format examples", () => {
+		expect(formatDateFormatExample("yyyy-MM-dd")).toBe("2026-01-23");
+	});
+
+	it("returns null for invalid date formats", () => {
+		expect(formatDateFormatExample("yyyy-MM-dd nope")).toBeNull();
+	});
+});