Components (shortcodes)

Intro

To separate structure from content you can use the short codes. In other words, shortcodes allow you to stop littering the markdown with html tags. It also allows you to change the appearance of the components by editing them in one place.

Table of Contents

• Table
• Letter
• Pull quote

Table

Creates a wrapper around a table so it gets sized properly, and will be scrollable in viewports that are smaller than its width.

Wrap your markdown table with :

{% table %}
...
{% endtable %}

And, that’s it.

Here’s a real example.

Letter

Shows the enclosed content on a mildly skeuomorphic letter. Retro!

Wrap your markdown with :

{% letter %}
...
{% endletter %}

Here’s a real example

Pull quote

This one is a little different. Start by adding the data for the the pull quote to your yaml.

pullQuote:
  author: Marylin vos Savant
  imgUrl: /assets/img/marylin-and-the-goats/marilyn-vos-savant.jpg
  imgAlt: Headshot of Marylin vos Savant.
  quote: To acquire knowledge, one must study; but to acquire wisdom, one must observe.

In your markdown you can now call the {% pullquote %} shortcode and pass the yaml data as the arguments.

⚠️ Since they aren’t named arguments, the order matters.

⚠️ Make sure you have a comma after each argument, save the last one. Again, it matters.

⚠️ It doesn’t seem to be possible to pass in the pullQuote object with all its properties, so the properties need to be individually passed in as arguments.

here is the preceeding paragraph.

{% pullquote  
  pullQuote.quote,
  pullQuote.author,
  pullQuote.imgUrl,
  pullQuote.imgAlt
%}

here is the following paragraph.

A few more things to consider:

If you have multiple pullquotes for an article you can change the name in the yaml. E.g. to pullQuote-1 and then use {% pullquote pullQuote-1.quote, pullQuote-1.author, pullQuote-1.imgUrl, pullQuote-1.imgAlt %} in the markdown.

Here’s a real example.

---

Issues with shortcodes (developer notes)

1. Markdown wrapped in <pre><code> can be avoided by returning your html like this: return html.replace(/(\r\n|\n|\r)(\s\s)*/gm, "");
2. You can use markdown in paired short codes when you call the markdown parser (markdown-it). E.g.

const parsedMarkdown = markdownLib.render(contents);

If you do not need block rendering use markdownLib.renderInline() instead.

Eleventy reference links

• Template Language—Nunjucks | Eleventy, a simpler static site generator.
• Template Shortcodes | Eleventy, a simpler static site generator.