Unable to render js in website

support
1

I have a few posts on my website where I am using JS to render some d3js visualization. Here is the link for the post on my website : http://www.stencilled.me/post/2017-05-02-harry-potter-characters/

Also following are the links to the post which I have on github and the wrecker.yml: https://github.com/senthilthyagarajan/stencilled.me/blob/master/wercker.yml

https://raw.githubusercontent.com/senthilthyagarajan/stencilled.me/master/content/post/2017-05-02-Harry-Potter-Characters.md

The hugo version I am using is 0.46

box: debian
build:
  steps:
    - arjen/hugo-build:
        version: "0.46"
        theme: "beautifulhugo"
        disable_pygments: true
        flags: --buildDrafts=true

The same post was able to render the js till hugo version 0.19.My concern is if it has something to do with disable_pygments or some other param which I am missing in the wrecker.yml

2

Thanks for including a lot of information. What is your question?

3

@maiki If you see my post it shows the javascript code and it doesnt render it actually. This same post was working till my previous Hugo version 0.19

4

@senthil_thyagarajan I’m having trouble figuring out what’s wrong here. Is the issue that with 0.19 you used to have the D3JS display on that same post?

Not that it matters, but you have an extra closing </script> tag in your codeblock as well. Just FYI :smile:

Also, did you notice that you are using both chroma and highlight.js (hljs) on your code blocks?

5

@rdwatters All the d3js visualizations(on other posts too) used to work till hugo version was 0.19 but doesnt work once its been changed to 0.46 now.

6

@senthil_thyagarajan the jump between 0.19 and 0.46 is substantial, I am sure there are many, many options that will cause you trouble.

Does it work when you switch back to 0.19? If you change that back and publish it, I’d love to see how the page renders.

7

@maiki Can I switch back to 0.19 on local(mac). I cant do it via my deploy process because I am using @ArjenSchwarz hugo build and if I use 0.19 I cant deploy my website .

8

Please don’t @-mention people if we don’t need their attention.

Um, hmmm. I don’t know, I am not setup to run multiple Hugo versions. @rdwatters any ideas?

I’d probably just start over with the d3js stuff, and create a theme component. Maybe a shortcode or something.

I know it is possible to use HTML in your posts, but I don’t think many folks do that, and it definitely makes it harder to troubleshoot; I can’t see how your code works in the first place, since you are highlighting it (it should work at all because you are wrapping it in a highlight shortcode).

Hopefully someone less defeatist comes along and has advice. I’d build out that shortcode so it is easier to resuse and update as Hugo moves forward. :slight_smile:

9

I’m with ya. I can’t seem to figure out where this D3JS is supposed to write to since I’m not seeing it on the D3 posts (e.g. http://www.stencilled.me/post/2017-05-10-states-to-shapes/). I see that you have the actual code in a code block, but I don’t see how this is supposed to be executable within your page templates, especially within single.html. If your goal is to have these visualizations render, you’re going to need to run the actual JS and not just in the code block. I agree with @maiki that a shortcode could help here.

Also, why the additional directories inside your content that mirror the individual pages? Wouldn’t it be easier to keep these .json files elsewhere? I wonder if this is part of the issue since the Tableau embeds seem to be working just fine on your most recent post…

10

So I did change my posts from markdown to .html and these d3js scripts render work now. Is it a right way to do it ?

11

It seems like you are trying to insert js on a markdown file so it actually renders on the page if thats what you want you can either make a shotcode for your js and insert it in the markdown file or use some logic in you template to include it for that specific page.

Right now the code is rendering as a code sample using the highlight shortcode so it is rendering it’s just not rendering the way you want it to. There is no issue here, you just need to do one of the 2 options I mentioned above.

2 Likes
12

While it’s probably best to get your code fixed to work with future versions of Hugo, you can still use 0.19 in Wercker. You’ll need to update your wercker config to use version 1.29 of the build step for that. Using your above code that then becomes:

box: debian
build:
   steps:
      - arjen/hugo-build@1.29:
        version: "0.19"
        theme: "beautifulhugo"
        disable_pygments: true
         flags: --buildDrafts=true
2 Likes
13

Nicely done, @benmarte, and something I wouldn’t have thought of :smile: Maybe the issue is that Hugo has since moved to Chroma, so denoting disable_pygments isn’t making a difference, since it looks like the current site is using both chrome and highlight.js. But .19 was a loooong time ago…

1 Like