2018-11-10

Writing JS posts with JBake

Intro

During this year I’ve been working as a front-end developer, and now that I’ve revamped the blog I was wondering how to include blog entries with embedded html + js.

Change Jbake templates

In order to load extra custom js scripts in the document header of the blog entry, I’ve changed the template responsible for rendering the footer part.

footer.tpl
script(src:"${config.site_contextPath}js/jquery.min.js"){} newLine()
script(src:"${config.site_contextPath}js/browser.min.js"){} newLine()
script(src:"${config.site_contextPath}js/breakpoints.min.js"){} newLine()
script(src:"${config.site_contextPath}js/util.js"){} newLine()
script(src:"${config.site_contextPath}js/main.js"){} newLine()
script(src:"${config.site_contextPath}js/highlight.pack.js"){} newLine()
script(type: "text/javascript") {
    yieldUnescaped """
        document.addEventListener('DOMContentLoaded', (event) => {
            document.querySelectorAll('pre code').forEach((block) => {
                hljs.highlightBlock(block);
            });
        });
    """
}

content.scripts?.split('\\|')?.each { uri -> (1)
    script(src: uri ==~ 'http.*'
        ? uri
        : "${config.site_contextPath}${uri}", type="javascript") {}
}

Takes content.scripts variable’s uris (in case there’s any)o and creates script tags.

Basically if the entry has a scripts variable with a list of scripts uris, the html document will render them within the head tag.

Add extra JS uris to the blog entry

Then it’s up to us to use the scripts tag adding as many script uris as we need.

Post entry header
= Title of the new entry
@bla
2018-11-09
:jbake-type: post
:jbake-status: published
:jbake-tags: js, jbake
:scripts: https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.js|https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js
:idprefix:

== Intro
...

You can add as many script entries just separated by the | character.

Add embedded html with Asciidoctor

To include raw html in asciidoctor you have to use a special block delimited by ++++ rows.

Embedded html
++++
<div id="echarts_main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    window.onload = () => {
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('echarts_main'));

        // specify chart configuration item and data
        var option = {
            tooltip: {},
            legend: {
                data:['Sales']
            },
            xAxis: {
                data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
            },
            yAxis: {},
            series: [{
                name: 'Sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    }
</script>
++++

Result

As an example I’m showing a basic example of Echarts. Echarts is a charting js library from the chinese search engine Baidu.

References