Day 002

11 Aug 2020 by Shane Robinson

Main task for today was to learn about and write 11ty Paired Shortcodes to make it easier for non-technical users/editors to create multi-column layouts when writing posts in markdown in 11ty.

Code Additions Today

New file: /utils/paired-shortcodes.js
(NOTE: the ‘grid’ and ‘gap’ used in the following classes only work because I’m using TailwindCSS. I haven’t covered that yet.)

module.exports = {
  columns: function (content) {
    return `<div class="grid grid-cols-1 gap-6 md:grid-cols-2">${content}</div>`
  },
  cols: function (content, bgcolor) {
    return `<div class="${bgcolor}">${content}</div>`
  },  
}

File update: .eleventy.js

/**
 * Paired Shortcodes
 * @link https://www.11ty.dev/docs/languages/nunjucks/#paired-shortcode
 */
Object.keys(pairedshortcodes).forEach((shortcodeName) => {
  eleventyConfig.addPairedShortcode(shortcodeName, pairedshortcodes[shortcodeName])
})

Then to replicate the left and right gray columns above, the user/editor would enter the following into this post:
(indented and spaced for easy reading)

{% columns %}

  {% cols "bg-gray-200" %}
    This text is on the left. 
  {% endcols %}

  {% cols "bg-gray-200" %}
    This text is on the right. 
  {% endcols %}

{% endcolumns %}