Add a link to the GitHub repository on www.gitpod.io

[gtsiolis]

Problem

We want to add a link to the GitHub repository for the gitpod-io/gitpod project on www.gitpod.io.

See relevant discussion in https://github.com/gitpod-io/website/pull/862#issuecomment-740449229.

Proposal

Plan A / Option A: The first MVC (minimum viable change) could include only adding a static link as described in https://github.com/gitpod-io/website/pull/862#issuecomment-740449229:

If there isn't an easy fix for the dynamically created GitHub star reference, let's start with a static link

Plan A / Option B: The second iteration could include a dynamic link which contains the number of stars of the gitpod-io/gitpod project on GH.

---

For future reference, I'm pasting below the plan from https://github.com/gitpod-io/website/pull/862#issuecomment-739907446.

Plan A

We could have an extra item for the GitHub repository but not sure if the current design (font family, spacing, etc) helps.

The design proposal also changes the top right action to a primary action button which would allow adding the secondary button for GitHub with no hierarchy conflict, see https://github.com/gitpod-io/website/issues/876 for more context.

Option A	Option B

Plan B

Alternatively, we could introduce a secondary button on the body to link to the repository as described in https://github.com/gitpod-io/website/issues/876, which I would strongly recommend regardless if we use this secondary button for linking to the repository.

To demonstrate this in action, here's how this could look like.

We could also skip the GitHub icon or rephrase the button label to View on GitHub.

BEFORE	AFTER

[chrifro]

I'm a bit afraid that having two buttons in the navigation bar might be confusing and visually a bit too much/ too heavy. If we have several highlighted options to click on the users might be confused and don't click anywhere.

Alternatively we could use a similar button as we're using on https://theia-ide.org/ or the GitHub Star button.
What do you think?

[JohannesLandgraf]

@ChristinFrohne I actually like your suggestion for now and we could deploy that even before universe today as we can copy the code from Theia. Would be great to immediately tell new website visitors that we are open source

@gtsiolis Wdyt?

[gtsiolis]

Regarding multiple buttons, we should try to always have one primary button (blue button) as a CTA in any given context. Having one primary button on the header and one on the hero section is fine as they are in a different context.

In this extend, having a primary and a secondary button on both header and hero section could be ok but probably not recommended because as you said in https://github.com/gitpod-io/website/pull/862#issuecomment-740570435 it might be confusing and visually a bit too much.

FWIW, since this could be related or helpful here, adding a secondary button button on the hero section is strongly suggested, see https://github.com/gitpod-io/website/issues/876.

---

As for the GitHub embedded button, adding this sounds good and a great next MVC (minimum viable change). /cc @ChristinFrohne @JohannesLandgraf

Question: Do we want to add this near the logo? Alternatively, it could also fit below the CTA button on the middle of the screen.

Things to consider:

1. It could be worth checking out if this will add any performance cost, although it seems quite light, as we recently tried to remove the Twitter embeds in https://github.com/gitpod-io/website/pull/828.
2. If we add this near the logo we'll have to figure out how this adapts on small viewports (mobile). If we add this below the CTA button it should be fine as is.

[chrifro]

If we add this near the logo we'll have to figure out how this adapts on small viewports (mobile)

For mobile devices it'd list the GitHub stars in the burger menu. Otherwise, the navigation bar gets too cramped

[JohannesLandgraf]

@ChristinFrohne I would rather put the Log In in the burger menu, no? I mean everybody who is (seriously) coding on her phone will accept the extra click on the burger.

More likely that sb stumbles upon our side on his phone, sees we are open source and as a result bookmarks us for the next day.

[chrifro]

Okay makes sense :)
On the tablet there should be enough space to display the login buttonand the Github stars

[JohannesLandgraf]

@gtsiolis Any updates on that one? I think this is a nice MVC we could land 🤽‍♂️

[gtsiolis]

Hey @JohannesLandgraf! Let's merge the MVC in https://github.com/gitpod-io/website/pull/884 as discussed in the relevant discussion (internal).