The great @lpil discovered that, if the calendar links have no link provided on Prismic they still have the same hover state and link react.london.
This was fixed in this PR but, even though I attempted to not use yavascript at all, some yavascript was required.
Not to fear dear reader, I only write simple yavascript! I created a simple component called 'ExternalLink'. This component is passed is passed a className and href. If the href does not exist, it is not passed through to the link. If the href exists but does not include http, this is added. If it does exist, well, business as usual.
Don't be bored dear reader, to keep you motivated I have included a second gif!
But how do we let the css know that the link has no link so there are no hover/active states? Look at this:
&[href] {
//css here
}
This selects for elements which have an href, and an href that starts with "http". Isn't that simply marvellous?
Motivation
The great @lpil discovered that, if the calendar links have no link provided on Prismic they still have the same hover state and link react.london.
This was fixed in this PR but, even though I attempted to not use yavascript at all, some yavascript was required.
Not to fear dear reader, I only write simple yavascript! I created a simple component called 'ExternalLink'. This component is passed is passed a className and href. If the href does not exist, it is not passed through to the link. If the href exists but does not include http, this is added. If it does exist, well, business as usual.
Don't be bored dear reader, to keep you motivated I have included a second gif!
But how do we let the css know that the link has no link so there are no hover/active states? Look at this:
This selects for elements which have an href, and an href that starts with "http". Isn't that simply marvellous?