Add button “Edit on GitHub”

[vrifox]

This adds the button “Edit on GitHub” on single pages in the Mumble documentation.

Before	After

[vrifox]

Maybe it’s not such a great idea to insert the link into the heading. 🤔

[Kissaki]

An edit link like this would definitely be nice, thanks for your suggestion.

Layout aside, looking at markup, the link should not be text within h1 semantically.

Style-wise putting it into the top right in a mute style like this seems fine. But maybe a less prominent/promoted link at the bottom would be more fitting for such an viewing edge case. I am still thinking about it. 🤔

MS docs has an icon toolbar at the top right, with an edit icon. Hugo docs puts a last commit information and "Improve this page" button below the content. Starship docs puts an “Edit this page on GitHub” link at the bottom. I think I have seen this style most often.

Maybe some context on what "edit" means could also be helpful. (I like this partially descriptive aspect of the "Improve this page" link on Hugo docs.)

Maybe an aside / aside-styled paragraph like

Found any issues on this page? You can [suggest changes on GitHub](link].

[vrifox]

Layout aside, looking at markup, the link should not be text within h1 semantically.

I agree, thats what I meant in my comment. :)

Style-wise putting it into the top right in a mute style like this seems fine. But maybe a less prominent/promoted link at the bottom would be more fitting for such an viewing edge case. I am still thinking about it. 🤔

MS docs has an icon toolbar at the top right, with an edit icon. Hugo docs puts a last commit information and "Improve this page" button below the content. Starship docs puts an “Edit this page on GitHub” link at the bottom. I think I have seen this style most often.

Maybe some context on what "edit" means could also be helpful. (I like this partially descriptive aspect of the "Improve this page" link on Hugo docs.)

Sounds good, I am open for suggestions and a discussion. :)

[vrifox]

@Kissaki I’ve just looked at your examples and in my opinion the style of Microsoft Learn is the most intuitive one.

I use Hugo Docs on a regular basis and have never spotted the edit button at the bottom of the page. I think this solution lacks user-friendliness. And I had problems to even locate the contribution button on the Starship site.

Regarding the choice of words however, I like the Hugo Docs variant the most. “Improve this Site” is so much clearer than just “Edit on GitHub”.

That’s, however, just my opinion. I would like more input on this. :)

[Krzmbrzl]

I would also vote for having the button in the top (right) corner of the page. Having it at the bottom will make it visible only to those who actively search for something like this (normally, nobody reads the footer).

In terms of style, the ones that I usually like best are those that really fit within the corner, most often by rotating the button a bit. See for instance https://docs.pylonsproject.org/en/latest/

(imo the button could include the GitHub logo as well, but that is only a minor style thing - and idk what kind of license the GitHub icon is under)

[vrifox]

In terms of style, the ones that I usually like best are those that really fit within the corner, most often by rotating the button a bit. See for instance https://docs.pylonsproject.org/en/latest/

Maybe in a not-so-prominent way. 🤔

I will do a little mockup to have the different ideas better visualized. :)

[Krzmbrzl]

Maybe in a not-so-prominent way.

I'm actually rather fond of the prominent presentation ^^ But I'm looking forward to seeing alternative mockups :+1:

[Kissaki]

A simple icon (like on the MS site) with an explanative tooltip on hover could also be viable/good.

The pylons edit on github label breaks out of the page layout; is far off the content on a wide screen. I would like to evade that. It loses the direct correlation to the content through spacing distance.

[vrifox]

I have (hopefully) improved it. :)

[Krzmbrzl]

Thanks! :+1: