P5 Div Shortcode

Source

Table of Contents

This is a test of the p5div shortcode. For it to work (assuming you're using mako) you need to:

  • set up the p5.tmpl template (in themes/custom-mako/templates/)
  • have ..template: p5.tmpl in the metadata for this post
  • have p5divmako.tmpl in a folder named shortcodes at the root of the nikola folder

Note:

I'll be using the names based on the idea that we're using the mako template engine. If we were using jinja the path for the templates would be themes/custom-jinja/templates/ or whatever else name we used.

The Shortcodes

There actually needs to be two different shortcodes, one for jinja and one for mako. This repository is using mako (as does https://necromuralist.github.io) but ape-iron is using jinja. It's a little too convoluted to keep switching back and forth so I'm mostly going to be relying on ape-iron to test the jinja version (although I really should figure out an easy way to test both).

The shortcode creates two HTML tags:

  • a script tag that needs the path to the source p5js file
  • a div tag that needs the ID to use so that the p5 sketch can be put inside it

I was originally setting the type and language attributes of the script tag, but apparently, according to the Mozilla Developers Network (MDN) the language attribute was deprecated a long time ago:

Like the type attribute, this attribute identifies the scripting language in use. Unlike the type attribute, however, this attribute's possible values were never standardized. The type attribute should be used instead.

And the default type is javascript so you don't need to use it if it's a regular script. Quoting the MDN again on what it means when type isn't set or is set to an empty string:

[It] indicates that the script is a "classic script", containing JavaScript code. Authors are encouraged to omit the attribute if the script refers to JavaScript code rather than specify a MIME type.

Note:

I was setting the class for the div to "p5js" but it turns out that p5 already adds a class, "p5Canvas", so w can add the styling to that class instead and don't need another class.

Mako

I don't see an easy way to set which shortcodes folder to use so I'm going to go with adding "mako" to the end of the shortcodes meant for the mako engine and not putting a suffix on the ones meant for jinja. This shortcode will go into shortcodes/p5divmako.tmpl: 

<script src="${source}"></script>

<div class="p5js" id="${divid}"></div>

To use this shortcode you add something that looks like this to a page or post. 

{{% p5divmako divid="e70fd042-noise-graph" source="noise_graph.js" %}}

This assumes that the sketch is in files/posts/<slug>/noise_graph.js and that the p5 code is adding the sketch to "e70fd042-noise-graph". Meaning that there's something like this in the in the noise_graph.js file: 

p5(noise_graph, "e70fd042-noise-graph")

Where noise_graph is the name of the function in noise_graph.js that runs the sketch.

Jinja

Here's the jinja version of the shortcode. It's going to go into shortcodes/p5div.tmpl. 

<script src="{{ source }}"></script>

<div class="p5js" id="{{ divid }}"></div>

To use it you use the same syntax as the mako-based shortcode, just change the name of the shortcode to p5div.tmpl. 

{{% p5div divid="e70fd042-noise-graph" source="noise_graph.js" %}}

Links