Buttons.js set body white-space to nowrap and it breaks Firefox

[TomasHubelbauer]

On top of that the GitHub button ends up being visually broken too in FF.

I'll investigate if this is a (known?) issue with them or if we can work around it.

[billiegoose]

Is this the little # of github stars widget? I'm sure we could find a better one than the "official" github one.

[TomasHubelbauer]

Yeah. It's text is white and it also downloads buttons.css asynchronously which messes with the body.

[TomasHubelbauer]

This might be nice, it uses the user's IP to talk to the GitHub rate-limited API to get the stars. We could rebuilt the design statically and just load in the number. And if the rate limit is exceeded, it's just for that user.

I'll spike that and if it looks okay will suggest we migrate to it.

[TomasHubelbauer]

Woot I just noticed Zeit covered the surprise charge, I'm super duper glad for that! 🎉 😃

[billiegoose]

HA!

HTMLElement.prototype.attachShadow)

It's the same issue as #19. They're attempting to use the Shadow DOM.

[TomasHubelbauer]

Yup. #19 works for me as it probably just doesn't pull any styles and the rest of the shadow DOM features works in latest FF. Maybe it can be worked around by !importanting (yeah I said it) the white-space on our end so they can't break it and then we can just wait out proper shadow DOM support so it fixes itself in time.

[billiegoose]

@TomasHubelbauer Let's build our own Github Star Count!

I've simplified and modernized stretchr/github-stars. Here we are:

githubStars = async (repo) =>
  (await fetch(`https://api.github.com/repos/${repo}',
  {headers:{accept:'application/vnd.github.v3+json'}}).then(x => x.json())).stargazers_count

[TomasHubelbauer]

LOL we don't even need to !imporant it because attribute style beats the weakass stylesheet file rule. I'll add it.

[TomasHubelbauer]

Sure I'll do that in a separate PR and fix the overflow with the trick above first.

[TomasHubelbauer]

🤦‍♂️ (No need to fix this since we are going to be replacing GitHub buttons… Don't mind me…)

[billiegoose]

I mean... we could try to fix Github's CSS. But they have all the resources of Microsoft and they still make a bloated Buttons.js that could easily have a tracker in there for all we know.

[TomasHubelbauer]

It's an unofficial 3rd party thingy, not GitHub's own CSS (but that only reinforces the point about it containing a tracker for all we know).

[billiegoose]

Docusaurus uses React, so if you know React you could make a little React component.

Or we could just file the issue on ... wait it is? (double checks) oh mtsdfkljer. You're right LOL. It's just a github.IO page

[billiegoose]

Well heck, let's just open an issue there

[billiegoose]

It looks like the Shadow DOM thing was added less than 24 hours ago.

[billiegoose]

So I propose we sit on our butt for a day and see if somebody else will fix this problem. 😁 hint hint button breaker

[billiegoose]

Unless you feel like making your own. 👌

[billiegoose]

Eh... IDK it is really broken. 🤕
I think I'll yank the Github Stars widget temporarily.

[TomasHubelbauer]

Give me 5 to learn Docusaurus and add our own counter - still good you filed the issue with them though you'll save other sites!

[billiegoose]

👍 Alright, I'm hands off! If it doesn't work out, you can merge the backup plan.

[billiegoose]

I actually like this even better than what we had before! It's got a consistent look & feel with the other links.