nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
https://content.nuxt.com
MIT License
3.08k stars 624 forks source link

Respect datetime format used in markdown file frontmatter YAML #2617

Closed wadclapp closed 5 months ago

wadclapp commented 5 months ago

Is your feature request related to a problem? Please describe

If I have a date saved in the format YYYY-MM-DD in a md file's frontmatter, like so

---
dateCreated: 2024-04-21T00:00:00.000Z
dateModified: 2024-04-21
---

{{ dateCreated }} <-- prints as 2024-04-21T00:00:00.000Z
{{ dateModified }} <-- also prints as 2024-04-21T00:00:00.000Z

and in queryContent(path).findOne() result all dates have time (T00:00:00.000Z) added.

The CMS I use has a datepicker UI, and saves it as a datetime, so I can't save '2024-04-21' as a string or else I don't get the UI functionality.

Describe the solution you'd like

Print the date as the format it's saved in the md file as, i.e. dateModified would be 2024-04-21, not 2024-04-21T00:00:00.000Z

Describe alternatives you've considered

I'm currently just replacing all T00:00:00.000Z occurrences from the queryContent result.

Additional context

farnabaz commented 5 months ago

Content module uses js-yaml under the hood to parse front-matter and js-yaml converts time/date into Date object. That's why different formats will end up with same result.

I'm currently just replacing all T00:00:00.000Z occurrences from the queryContent result.

I would create a component and pass the variable via props to it. This way you can render custom tags and custom formats too.

---
dateCreated: 2024-04-21T00:00:00.000Z
dateModified: 2024-04-21
---

:pretty-time{:date="dateCreated"}

:pretty-time{:date="dateModified"}
wadclapp commented 5 months ago

that'll work, I'll close the issue