docs: make scheme switch of github butons reliable #640

This commit is contained in:
Sören Weber 2023-09-13 23:29:04 +02:00
parent 82ba045702
commit 4921ec0583
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D

View file

@ -12,8 +12,12 @@
}
return scheme;
}
document.addEventListener( 'themeVariantLoaded', function( e ){
// we get the scheme for initial loading
function githubButtonsInit(){
if( !window.githubButtons ){
// wait for the script to load
setTimeout( githubButtonsInit, 50 );
return;
}
var scheme = githubButtonsScheme();
var githubButtonsHTML = `
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
@ -21,18 +25,16 @@
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
`;
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
if( window.githubButtons ){
setTimeout( function(){
// we have to wait until the CSS class .default-animation has settled and recalculate the scheme again
var scheme = githubButtonsScheme();
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
anchor.dataset.colorScheme = scheme;
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
});
});
}, 400 );
}
document.addEventListener( 'themeVariantLoaded', function( e ){
// we have to wait until the CSS class .default-animation has settled and and the buttons have loaded to recalculate the scheme again
setTimeout( githubButtonsInit, 400 );
});
</script>
<script async src="{{"js/github-buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>