Adding Page Specific JavaScript & CSS

Tue 08 November 2016
Category: meta

An experiment

I think I’d like to be able to add page specific JavaScript & CSS to a pelican page. Others seem to think that’s useful. I tend to agree.

There are two plugins that already do this, but the license to one is unclear, and I’d like to expand on what the other does.

The idea is to enable Pelican to recognize special headers in a markdown or rst page to add style or import stylesheets, or to link to or add javascript code to a single page. The goal is to let specific Pelican pages demonstrate some idea using embedded javascript which might be of help in a tutorial or piece of documentation.

In Markdown, one can already plunk in raw html, including javascript, but any block of html will no longer have Markdown styling added to it. It’s impossible in Markdown as it is, to import any stylesheet.

It also might be especially nice to let a page easily reference a “standard” JavaScript library with special tags, ie, reference jquery in a header to pull in the latest jquery from a cdn from a cdn, threejs for three.js, etc.

It’s not clear how useful such an addition would be, I am pretty sure the way pelican works and the way these existing plugins work, the additional stylings and javascript would only be included and rendered on the page itself, not in the index page to blog.

This page (should) look different from other pages in this blog as I’ve built a small extension and am using it on this page.

It’s easy to include javascript into a page, just embed the html.

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = document.getElementById("demo").innerHTML + " click() ";
}
</script>

<p id="demo"></p>

produces:


But it’s more difficult to add page specific CSS since stylesheets need be included in the header and loaded before the page starts rendering.

I’d like a plugin to define new headers that will let me

  • include specific google fonts in the page
  • include stylesheets that are served from the blog
  • add css style information in header blocks
  • reference external JavaScript libraries by URL
  • reference standard JavaScript libraries (jQuery, Three.js, D3.js, etc) by tags and have the correct links for those added to the HEAD

Two libraries do similar things, I think I’ll try to unify what they do and then extend

The idea is to support these additional header keywords

  • stylesheet to include an external stylesheet
  • style or css to inject style blocks into a page’s head
  • javascript or script to add a block of javascript into a page
  • lib to link to external javascript libraries
  • google-font or font to link to external fonts

In addition, if the specification of lib is a single word, the dictionary EXTERNAL_PAGE_LIBS will be examined. If lib is a key in EXTERNAL_PAGE_LIBS, the value of that key will be referenced. In this way, a user of this plugin can create a set of tags referencing commonly used javascript libraries.

The implementation of this can be found at github

A simple jquery example:

In the header of this page, I’ve placed:

lib: zingchart
<div id="output"></div>
<button id="increment">Increment</button>
<script>
  var counter = 0;
  $(document).ready(function() {
    $output = $("#output");
    $('#increment').click(function() {
      counter++;
      $output.html(counter);
    });
    $output.html(counter);
  });
</script>

Here is an example of the use of zingchart.

In the header of this page, I’ve placed:

lib: zingchart

which will load https://cdn.zingchart.com/zingchart.min.js

Then in the md file itself, I have

<div id='myChart'></div>

<script>
  zingchart.render({
    id: 'myChart',
    data: {
      type: 'line',
      series: [{
        values: [54,23,34,23,43],
      }, {
        values: [10,15,16,20,40]
      }]
    }
  });
</script>

Category: meta Tagged: pelican todo foo bar

Comments