Open in GitHub sticky button

[arnaudmiribel]

Would be great to have an extra that makes an app play well with GitHub, and:

• adds a sticky github button to reach the source code of an app Open in GitHub sorta
• optionally adds the . trigger to open github.dev, too

API:

• add_sticky_github_button(label="Open in GitHub", owner="arnaudmiribel", repository="streamlit-extras")
• add_sticky_github_button(label="Open in GitHub", repository="arnaudmiribel/streamlit-extras")

[arnaudmiribel]

<div class="stActionButton">
    <a href="http://www.example.com" style="text-decoration:none; color:inherit; background:inherit;" target="_blank" rel="noopener noreferrer"><button class="css-9s5bis edgvbvh3"><div class="css-1wbqy5l e10z71041"><img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" style="width: 1em; height: 1em; vertical-align: -0.15em; border-radius: 3px; margin-right: 0em;"> 
<span>arnaudmiribel/markdownlit</span></div></button></a></div>

• some JS to add it to the right place (first child in <div data-testid="stToolbar" ...> </div>)

Example:

[arnaudmiribel]

Could also just be generalized for any icon/label/link actually, and calling it twice just adds two buttons:

add_button_to_toolbar(icon="github", label="Open in GitHub", url="foo")
add_button_to_toolbar(icon="https://link_to_twitter_logo.png", label="arnaudmiribel", url="foo")

[arnaudmiribel]

Unsuccessful trial so far:

from streamlit.components.v1 import html
html(
    """
<script>

var newButtonHtmlString = `
<div class="stActionButton">
    <button class="css-9s5bis edgvbvh3"><div class="css-1wbqy5l e10z71041"><img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" style="width: 1em; height: 1em; vertical-align: -0.15em; border-radius: 3px; margin-right: 0em;">
<span>🐙 Open code</span></div></button></a></div>
`;

var newButton = new DOMParser().parseFromString(newButtonHtmlString, "text/html");
var toolBar = document.querySelector('div[data-testid="stToolbar"]');
toolBar.insertBefore(newButton.body.firstChild, toolBar.firstChild);
</script>
"""
)

While this JS works in the console, it doesn't in the Streamlit app. Probably need to wait for the DOM to load before throwing it...

Actually even with

window.addEventListener('load', function () {
    var toolBar = document.querySelector('div[data-testid="stToolbar"]');
    toolBar.insertBefore(newButton.body.firstChild, toolBar.firstChild);
})