Add edit link to workshops

[jessicard]

Position is fixed so it scrolls with you.

[jessicard]

Not super pumped about how it looks yet though. @exu3 do you have any ideas/advice for how this should look?

[jessicard]

One other question: right now it goes to https://github.com/hackclub/hackclub/tree/main/workshops/gamelab. Should it actually go to https://github.com/hackclub/hackclub/edit/main/workshops/gamelab/README.md?

[jessicard]

@maxwofford agreed about going directly to the edit page, done in 5b27be2

[lachlanjc]

📝 Changed routes:

/[slug]
(view full size)

Commit 16b0ba5f5af2b76c3d586a6321ecc1cfa8e511dc (https://workshops-2lu6rd3g5.hackclub.dev).

[exu3]

Not super pumped about how it looks yet though. @exu3 do you have any ideas/advice for how this should look?

Maybe a Button or Badge reading something like "Edit this page!" with the GitHub icon?

[cjdenio]

Here's an idea:

[jessicard]

@exu3 Great idea!

@cjdenio That's perfect!! pls feel free to push to the branch 🙏

[sampoder]

This PR looks sick!! Some text on mobile is a bit difficult to read though:

Maybe we could remove the transparent background or make it just the icon on mobile?

[jessicard]

@sampoder Ooooh good catch!! I added a bg color in 72e9445.

I like the idea of potentially shortening it to just the icon. Is there another place in this app where we check for mobile/screen size you could point me to?

[sampoder]

On the train rn so I don't have a super easy way of Browsing the code but check out https://theme-ui.com/sx-prop/ (the responsive values section)

[sampoder]

Also for the background colour, instead of "white" let's use "background" which will change based on dark/light mode

[sampoder]

for responsive thing you'll want the text to have something like: display: ["none", "inline"] replace inline with what ever it currently is and it will hide on mobile but show on tablets and anything larger

[jessicard]

Thanks y'all!

[sampoder]

YAY!