Dates displaying off by 1 from shows.yml

[charles-hood]

I am running into a weird bug, the dates for the shows are off by one. For example, if I edit shows.yml with an event with a date of 2019-09-01, it shows up as Aug 31st.

thomashindsmedia.netlify.com

[ekafyi]

Ooh that's curious. Thanks for taking the time to check and report it @charles-hood!

Unfortunately I cannot check right now as I'm occupied with work stuff right now--the only explanation I could think of is time zone but not sure how exactly (GraphQL uses different time zone setting?).

If you open the GraphiQL explorer at localhost:8000/___graphql, do you see the correct date or the wrong one?

[charles-hood]

The query shows the same "wrong" date that is displayed by the website. (In other words, not the date that is configured in shows.yml) It is off by one. The file contains 2019-09-01 but the query returns August 31st.

{
"data": {
"showsYaml": {
"children": [],
"date": "Sat Aug 31 2019 20:00:00 GMT-0400 (Eastern Daylight Time)",
"id": "63b8fe67-b68d-51f8-8089-8c56de753d5d",
"info_url": "https://www.traegersbar.com/upcomingevents",
"location": "Traegers, 5170 College Blvd, Farmington, NM 87402",
"map_url": null,
"name": "Traeger's Bar",
"parent": {
"children": [
{
"id": "63b8fe67-b68d-51f8-8089-8c56de753d5d"
},
{
"id": "b0d7a350-ff8b-511d-abbe-e78fff6e10ed"
},
{
"id": "194f8fd3-2297-5826-913b-55186030f39b"
}
]
}
}
}
}

[charles-hood]

https://github.com/thmshinds/starter-musician-theme/blob/master/content/shows.yml

[charles-hood]

closed by mistake

[TBT2017]

I wonder if this has to do with how dates are handled by YAML?

https://yaml.org/type/timestamp.html

[charles-hood]

New website using this theme: https://www.thebluebirdtwo.com also experiencing the dates being off by one from what is configured in the shows.yml file.

[charles-hood]

Even the sample site exhibits this behavior.
I think the bug is with the ShowItem code in this file:
gatsby-theme-musician/theme/src/components/show-item.js

Unfortunately, for a site deployed to Netlify using the starter, there doesn't appear to be any way to modify the underlying code for the theme itself. (This code is not copied to my local GitHub repository when deployed using the starter. I should probably open a separate issue for this.)

const ShowItem = ({ id, name, date, location, info_url, map_url }) => {
return (
<li key={id} className="GtmShowItem" sx={{ variant: "components.show" }}>
<time
dateTime={date}
aria-label={new Date(date).toLocaleDateString("en-GB", {
day: "numeric",
month: "long",
year: "numeric",
})}
className="GtmShowItem__date"
sx={{ variant: "components.show.date" }}
>
<span
className="GtmShowItem__month"
sx={{ variant: "components.show.date.month" }}
>
{" "}
{new Date(date).toLocaleDateString("en-GB", {
month: "short",
})}{" "}

<span
className="GtmShowItem__day"
sx={{ variant: "components.show.date.day" }}
>
{new Date(date).toLocaleDateString("en-GB", {
day: "numeric",
})}


<div sx={{ variant: "components.show.colWrapper" }}>
<div sx={{ variant: "components.show.desc" }}>
<Styled.h4
className="GtmShowItem__title"
sx={{
m: 0,
pt: [0, 2],
pb: [1, 2],
}}
>
{name}
</Styled.h4>
<div sx={{ variant: "textStyles.itemSubheading" }}>
{location}
{map_url && (
<>
{" "}
·{" "}
<Styled.a href={info_url} rel="external nofollow">
Map
</Styled.a>
</>
)}


<div sx={{ variant: "components.show.rsvpLink" }}>
{info_url ? (
<a
href={info_url}
rel="external nofollow"
sx={{ variant: "textStyles.button" }}
>
Detail / RSVP

) : (
<small
sx={{
color: "muted",
}}
>
No RSVP info

)}



)
}