11ty Paired Shortcode with Markup

Continuing the theme of tiny 11ty shortcodes, using Bulma as my preferred css framework I needed a way to hide some boilerplate html markup behind a shortcode so that the markdown is a little nicer and I can pass some variables to the function for customization.

In this example, the shortcode is a warning box: a div with some bulma-specific styling so that it can create a border, change the background colour and add a nice icon to top left. The title table and content of the div are supplied by the caller. In a paired shortcode, the content comes from whatever is in between the start and end tags of the shortcode and whatever else needs to be passed in comes as arguments after the start of the shortcode markup, within the moustache.

_1tty/shortcodes/warning.js

/\*\*

- Warning - box with an icon, title and content used to call out specific issues to the developer.
-
- e.g.
- warning 'Watch out for this'
- Don't write broken code!
- endwarning
- \*/
  module.exports = function (content, label) {
  return `<div class="notification is-warning warning-box"><p class="title is-4">${label}</p>${content}</div>`;
  };

I am formatting html here directly because, as I understand it, shortcodes get translated fairly late in the build so that the markdown transformation has already taken place by the time the shortcode is executed so what we return has to be html. In experimenting with this earlier, I returned markdown simply because it was easier and neater to write and the build output contained literal, untransformed markdown with the correct label and content substituted :/.