curiositry/mnml-ghost-theme

Feature req: Add support for the code injections

Closed this issue · 5 comments

It looks as though the current theme will not display data inserted in {{ghost_head}} and {{ghost_foot}} from the code injection page.

Hmm, can you give any more details?

The {{ghost_head}} and {{ghost_foot}} helpers are on line 24 and 69 of https://github.com/curiositry/mnml-ghost-theme/blob/master/default.hbs, where they should be, and it seems to work fine on my demo instance (I injected a style to turn the middle link in the footer navigation teal).

Are you seeing any errors in the console?

I was attempting to add this bit of javascript into the {{ghost_head}} section and it wouldn't show up with this theme but did with the original casper theme:

<script src="https://assets.ubuntu.com/v1/juju-cards-v1.0.9.js"></script>
<div class="juju-card" data-id="~adam-stokes/bundle/ghost-mysql-6"></div>

Which I pulled from https://jujucharms.com/u/adam-stokes/ghost-mysql/bundle/6, I'll look at the console and see if there are any errors here. Thanks!

I'm also not seeing anything in the console output that would indicate an error. I do use the free cloudflare cdn in front of this blog as well. I'm going to try and disable their rocket pre-loader and a few other options to see if that's the case.

@battlemidget

A quick update on my investigation:

  1. The code is being correctly injected, both into your blog header (http://blog.astokes.org), and in my testing environment;
  2. However, the window.onload event in the Juju cards js (lines 223-229 over here) is not firing.
  3. I noticed that if I opened up the console and ran the same code that was in a window.onload function in juju-cards-v1.0.9.js attached to a DOMContentLoaded event listener … it worked fine.
  4. Therefore, everything should work if you replace what you’re currently injecting with:

<script src="https://assets.ubuntu.com/v1/juju-cards-v1.0.9.js"></script>
<div class="juju-card" data-id="~adam-stokes/bundle/ghost-mysql-6"></div>
<script>
    function activateJuju(){
    if (jujuCards.onload) {
      jujuCards.onload(); 
    }
    jujuCards();
    jujuCards.updateHead();
}

document.addEventListener('DOMContentLoaded', activateJuju());
</script>

  1. I haven’t found out why onload isn’t firing, but this is a temporary solution that you can get working now.

Perfect! Thank you!