Skip to content

fix: blog post published date#1892

Closed
alex-key wants to merge 1 commit intonpmx-dev:mainfrom
alex-key:fix/blog-comments-and-date-format
Closed

fix: blog post published date#1892
alex-key wants to merge 1 commit intonpmx-dev:mainfrom
alex-key:fix/blog-comments-and-date-format

Conversation

@alex-key
Copy link
Copy Markdown
Contributor

@alex-key alex-key commented Mar 3, 2026

🔗 Linked issue

Partially resolves #1887

📚 Description

Format date of blog in blog post list to human-friendly format.

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Mar 3, 2026 3:15pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Mar 3, 2026 3:15pm
npmx-lunaria Ignored Ignored Mar 3, 2026 3:15pm

Request Review

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 3, 2026

Codecov Report

❌ Patch coverage is 87.50000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
app/utils/formatters.ts 80.00% 1 Missing ⚠️

📢 Thoughts on this report? Let us know!

@alex-key alex-key marked this pull request as ready for review March 3, 2026 15:18
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Mar 3, 2026

📝 Walkthrough

Walkthrough

This change introduces a new date formatting utility function and updates components to use consistent date formatting. A new toLocaleDateString function was added to the formatters module that converts date strings to locale-formatted strings using en-US formatting with short month names. The BlogPostListCard and OgImage/BlogPost components were updated to use this function via a computed property, replacing previous inline date handling. The changes standardise how published dates are displayed across blog components.

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description accurately relates to the changeset, detailing the formatting of blog post published dates to a human-friendly format across multiple files.
Linked Issues check ✅ Passed The pull request addresses only the date formatting requirement from issue #1887 but does not address the comments loading issue, partially resolving the linked issue as intended.
Out of Scope Changes check ✅ Passed All changes are directly related to formatting blog post dates; no extraneous modifications were introduced beyond the stated objectives.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1


ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f8dff44 and 9b2f0d2.

📒 Files selected for processing (3)
  • app/components/BlogPostListCard.vue
  • app/components/OgImage/BlogPost.vue
  • app/utils/formatters.ts

Comment on lines +11 to +17
try {
return new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
})
} catch {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

JavaScript new Date('invalid').toLocaleDateString() behaviour throw exception or Invalid Date

💡 Result:

new Date("invalid") creates a Date object whose internal time value is NaN (an “Invalid Date”).

For toLocaleDateString(), the ECMAScript Internationalization (ECMA‑402) spec says:

  • If the Date’s internal time value is NaN, return the string "Invalid Date" (no exception). [1]

So:

new Date("invalid").toLocaleDateString()  // "Invalid Date"

When you do see an exception with date formatting APIs, it’s typically a RangeError due to invalid locales/options (e.g., an invalid timeZone), not because the Date is invalid. [1]

(Separately: toISOString() does throw on an invalid date, which is a different method and behavior.) [2]

Sources: [1] [2]


🌐 Web query:

JavaScript Date.toLocaleDateString() timezone day shift date-only strings timeZone UTC

💡 Result:

Date.prototype.toLocaleDateString() formats the same instant in time in whatever time zone you tell it (default: the user’s local time zone). If that instant crosses midnight in that zone, the calendar day can shift. (developer.mozilla.org)

Why it happens with date-only strings ("YYYY-MM-DD")

In JavaScript, an ISO date-only string like "2026-03-03" is parsed as UTC midnight (2026-03-03T00:00:00.000Z). (stackoverflow.com)
If you then format it in a negative-offset time zone (e.g., America/Los_Angeles), that UTC midnight is still the previous local evening, so the displayed date becomes the day before. (developer.mozilla.org)

const d = new Date("2026-03-03");        // 2026-03-03T00:00:00.000Z (UTC)
d.toLocaleDateString("en-US");           // may show 3/2/2026 in US time zones west of UTC
d.toLocaleDateString("en-US", { timeZone: "UTC" }); // 3/3/2026

Fixes (pick based on what your string means)

  1. If the string is a UTC date (common for APIs): format in UTC
new Date("2026-03-03").toLocaleDateString("en-US", { timeZone: "UTC" });

timeZone is an Intl.DateTimeFormat option used by toLocaleDateString. (developer.mozilla.org)

  1. If the string is a “local calendar date” (e.g., user picked March 3): construct it as local midnight (avoid ISO-string parsing)
const [y, m, d] = "2026-03-03".split("-").map(Number);
new Date(y, m - 1, d).toLocaleDateString("en-US");  // won’t shift by timezone
  1. If you must keep it ISO but want consistent display: store/transport an ISO date-time with an explicit offset (e.g., Z or -05:00) rather than date-only strings. (stackoverflow.com)

Citations:


🏁 Script executed:

cd app/utils && cat -n formatters.ts | head -25

Repository: npmx-dev/npmx.dev

Length of output: 705


Stabilise date parsing and timezone to prevent incorrect published dates.

The try/catch fallback is ineffective: invalid dates do not throw exceptions—toLocaleDateString() returns the string "Invalid Date" instead. Additionally, ISO date-only strings (e.g. "2026-03-01") are parsed as UTC midnight and will display as the previous day in western timezones unless formatted with timeZone: 'UTC'.

Proposed fix
 export function toLocaleDateString(date: string): string {
   if (!date) return ''
 
-  try {
-    return new Date(date).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    })
-  } catch {
-    return date
-  }
+  const parsed = new Date(date)
+  if (Number.isNaN(parsed.getTime())) return date
+
+  return parsed.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC',
+  })
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
try {
return new Date(date).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
})
} catch {
export function toLocaleDateString(date: string): string {
if (!date) return ''
const parsed = new Date(date)
if (Number.isNaN(parsed.getTime())) return date
return parsed.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
timeZone: 'UTC',
})
}

@danielroe
Copy link
Copy Markdown
Member

oops - merged #1891 - but it looks like you also have some more fixes - would you mind resolving conflicts once that merges? 🙏

@alex-key
Copy link
Copy Markdown
Contributor Author

alex-key commented Mar 3, 2026

Fix already inplemented in #1891

@alex-key alex-key closed this Mar 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Blog has issue with loading comments and date

2 participants