Show dates default to en-GB?!

[TheRobBrennan]

Eek. I can define show dates just fine in shows.yml but since I'm in Seattle, they need to be defined one day in the future since all dates are being represented as en-GB locale strings.

Can this be fixed?

[charles-hood]

I’m having the exact same problem on multiple websites. Hope this is fixed soon.

[thmshinds]

I am also experiencing this issue on https://thomashindsmedia.com/

[charles-hood]

I wonder if Component Shadowing could be used to work around this problem? Find/Replace all instances of en-GB with en-US? https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/

[charles-hood]

I've confirmed that simply shadowing "show-item.js" locally and changing en-GB to en-US does not fix the problem. Apparently it's more complex than that.

[thmshinds]

I have no idea what that means...

…

On Fri, Jan 3, 2020, 3:59 PM Charles Hood ***@***.***> wrote: I've confirmed that simply shadowing "show-item.js" locally and changing en-GB to en-US does not fix the problem. Apparently it's more complex than that. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5?email_source=notifications&email_token=AM6HKI77J7YTBDMDZOGZGR3Q36RMTA5CNFSM4J7BE6Z2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEICCGWA#issuecomment-570696536>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM6HKI5T36NLQOUGY5CC5SLQ36RMTANCNFSM4J7BE6ZQ> .

[charles-hood]

Sorry, you could ignore that – – I was supposed to be logged in as me when I posted that bug report. Thanks, ~C.H.

…

On Jan 3, 2020, at 4:51 PM, thmshinds ***@***.***> wrote: I have no idea what that means... On Fri, Jan 3, 2020, 3:59 PM Charles Hood ***@***.***> wrote: > I've confirmed that simply shadowing "show-item.js" locally and changing > en-GB to en-US does not fix the problem. Apparently it's more complex than > that. > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > <#5?email_source=notifications&email_token=AM6HKI77J7YTBDMDZOGZGR3Q36RMTA5CNFSM4J7BE6Z2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEICCGWA#issuecomment-570696536>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AM6HKI5T36NLQOUGY5CC5SLQ36RMTANCNFSM4J7BE6ZQ> > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[charles-hood]

Okay, first of all, Thanks to @TheRobBrennan for putting me on the right track! I did not implement the fix the same way he did, mine is more of a hack -- but I was able to use component shadowing, which is something I've been wanting to try. I created a src/gatsby-theme-musician/components/ folder and put my modified copy of show-item.js in there. (Again, based heavily on @TheRobBrennan 's work, but I am the lazy so I hardcoded mine to en-US. Here is the new show-item.js:

/** @jsx jsx /
/ eslint-disable camelcase */
// eslint-disable-next-line no-unused-vars
import React from "react"
import { Styled, jsx } from "theme-ui"

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

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


<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={map_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" }}
>
RSVP

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

)}



)
}

export default ShowItem