Hugo, Asciidoc & charts
chart as code
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
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
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
- Size of charts is not honored
- multi-type charts syntax?
- experiment with the other engines