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; return scheme;
} }
document.addEventListener( 'themeVariantLoaded', function( e ){ function githubButtonsInit(){
// we get the scheme for initial loading if( !window.githubButtons ){
// wait for the script to load
setTimeout( githubButtonsInit, 50 );
return;
}
var scheme = githubButtonsScheme(); var scheme = githubButtonsScheme();
var githubButtonsHTML = ` 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> <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> <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; document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
if( window.githubButtons ){ document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
setTimeout( function(){ anchor.dataset.colorScheme = scheme;
// we have to wait until the CSS class .default-animation has settled and recalculate the scheme again window.githubButtons.render( anchor, function( el ){
var scheme = githubButtonsScheme(); anchor.parentNode.replaceChild( el, anchor );
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){ });
anchor.dataset.colorScheme = scheme; });
window.githubButtons.render( anchor, function( el ){ }
anchor.parentNode.replaceChild( el, anchor ); 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 );
}, 400 );
}
}); });
</script> </script>
<script async src="{{"js/github-buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script> <script async src="{{"js/github-buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>