Buttons are not styled when page loads

Hi there, super cool project.

I’m trying to use your buttons on my deployed documentation site: https://willcarhart.dev/docs/koi. Unfortunately, I can’t get them to load properly.

I am using them in a div to center them, like so:

<div align="center">
  <a class="github-button ghbns" href="https://github.com/wcarhart/koi/subscription" data-icon="octicon-eye" data-size="large" data-show-count="true" aria-label="Watch wcarhart/koi on GitHub">Watch</a>
  <a class="github-button ghbns" href="https://github.com/wcarhart/koi" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star wcarhart/koi on GitHub">Star</a>
  <a class="github-button ghbns" href="https://github.com/wcarhart/koi/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork wcarhart/koi on GitHub">Fork</a>
  <a class="github-button ghbns" href="https://github.com/wcarhart" data-size="large" data-show-count="true" aria-label="Follow @wcarhart on GitHub">Follow @wcarhart</a>
</div>

Where the only additional styling I’ve applied is:

.ghbns {
	padding-left: 1rem;
	padding-right: 1rem;
}

I see in my browser that https://buttons.github.io/buttons.js is loading, but I don’t see the buttons being styled properly. Network graph:

Web page:

I have tested in Chrome, Safari, and Brave, with localhost and on the live deployed site. I have also tried without the additional CSS styling, and loading the script without async and defer. Have you ever had this occur before? If so, do you have any hints?

[ntkme]

I don’t have time to test it, but something like this should work (make sure you use rollup or webpack to take care of the import and generate a bundled script).

import { render } from 'github-buttons'

function handleGitHubButtons() {
  const container = Docsify.dom.getNode('#main')
  const buttons = Docsify.dom.findAll(container, 'a.github-button')

  for (let i = buttons.length; i--; ) {
    const button = buttons[i];
    render(button, function (el) {
      button.parentNode.replaceChild(el, button)
    })
  }
}

const install = function(hook) {
  hook.doneEach(handleGitHubButtons)
}

window.$docsify.plugins = [].concat(install, window.$docsify.plugins)

[ntkme]

I never used or tested this on docsify. However, by reading the documentation I think you can probably use external script plugin. With this plugin, you would need to add buttons.js script to .md file that contains the button rather than the index.html. That may just work.

Now, the proper way to do it is to write a docsify plugin that import this library and run its render function on Docsify.dom.findAll('a.github-button'), it should be very similar to external script plugin (source code) in general structure.