Hugo Future Imperfect Slim

Holistic questioning

a blog by D.Buret about Life, the Universe and Everything

Hugo, Asciidoc & charts

chart as code

D.Buret

3 minutes read

docascode

asciidoctor has some plugins under development. chart-block-macro extension allows to do chart-as-code

Let’s try to use it in the hugo generated blog:

chart-block-macro extension

allows to use various engines

  • c3js
  • chartist
  • chartjs

let’s try with c3js (just because I’m using it in revaljs)

c3js in asciidoc

inline
 [chart,bar]
 ....
 data1, 30, 200, 100, 400, 150, 250
 data2, 130, 100, 140, 200, 150, 50
 data3, 130, -150, 200, 300, -200, 100
 ....
include
 chart::content/blog/2020-01-22-adoc-chart-spline.csv[spline,600,350,engine=c3js]

Hugo setup

Asciidoctor’s extension

files

in /lib of the rep: /lib/c3js-block-macro.rb

asciidoctor command

just add -r $PWD/lib/c3js-block-macro.rb to the usual command

js & css loading

I tried various approach to lad the js & css of c3js.

I’m not satisfied with by current solution. I feel it is dirty, but it works.

first attempt, KO: ask hugo to load JS/CSS for every post

Add the needed js and css to /static/js and /static/css
  • /css/c3.v0-6-11.min.css
  • /js/c3.v0-6-11.min.js
  • /js/d3.v5-7-0.min.js
  • update config.toml to load

KO: It seems that loading of added js is at the end of the generated HTML, so we have a "c3 is not defined".

2nd attempt, KO: loading css/js from frontmatter

KO: Same issue when putting js and css in the front matter:

+++
js = [ "/js/c3.v0-6-11.min.js", "/js/d3.v5-7-0.min.js" ]
css = ["/css/c3.v0-6-11.min.css"]
+++

3rd attempt, KO: loading css/js from asciidoctor docinfo-header

Add the needed js and css to /static/js and /static/css
  • /css/c3.v0-6-11.min.css
  • /js/c3.v0-6-11.min.js
  • /js/d3.v5-7-0.min.js
in the adoc file
:docinfo: shared
sidecar html file docinfo-header.html
 <link rel="stylesheet" href="/css/c3.v0-6-11.min.css">
 <script src="/js/d3.v5-7-0.min.js" charset="utf-8"></script>
 <script src="/js/c3.v0-6-11.min.js"></script>

KO: since hugo calls asciidoctor with --no-header-footer the section of the HTML where asciidoctor wrote the loading of js is stripped.

4th attempt, OK: loading css/js from asciidoctor passthrough block

  • Add the needed js and css to /static/js and /static/css
    • /css/c3.v0-6-11.min.css
    • /js/c3.v0-6-11.min.js
    • /js/d3.v5-7-0.min.js

put the follwing at benning of the blog post:

++++
<link rel="stylesheet" href="/css/c3.v0-6-11.min.css">
<script src="/js/d3.v5-7-0.min.js" charset="utf-8"></script>
<script src="/js/c3.v0-6-11.min.js"></script>
++++

I do not like passthrough. but:

  • js and css are loaded only for post that need them
  • I do not have another solution for the time being

5th attempt - work in progress

I will try ti improve my 3rd attempt, by forcing the call to asciidoctor with --no-footer instead of --no-header-footer.

I think it will work for charts, but I need to check if it works without breaking other things if hugo.

Things to study in the future

  1. Size of charts is not honored
  2. multi-type charts syntax?
  3. experiment with the other engines
comments powered by Disqus

Recent posts

See more

Categories

About

Opinions expressed on this site are solely my own and do not express the views or opinions of my employer.