Armadillo Additions - Snugug/gulp-armadillo GitHub Wiki

Armadillo has added a number of additions to Markdown and Nunjucks rendering to make your life happier while using. The following is a list of goodies Armadillo comes with.

Markdown

Markdown is fantastic, and Armadillo supports all of GitHub Flavored Markdown. In addition, the following additions and configuration have been made to enhance Markdown rendering.

Multimedia Embedding

A new video syntax @[url] has been added to support embedding videos. If the URL included is from YouTube or Vimeo, video embeds will automatically be generated, wrapped in <div class="flexible-video"> for making flexible with intrinsic ratios. If an .mp4 or a a .webm is included, <video> tags with proper sources will be added.

@[https://www.youtube.com/watch?v=dQw4w9WgXcQ]
<!-- Output
<div class="flexible-video">
  <iframe width="560" height="315" src="//.www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
-->

Markdown Rendering Options

All of GitHub flavored markdown, as well as smart typographic punctuation (like quotes and dashed) are automatically rendered.

Nunjucks

Armadillo supplies some custom Nunjucks Filters and some default variables to help make your output awesome

Filters

The following filters are available.

Attributes

The attributes filter will read a in a file path passed in (relative to your Gulpfile) and return a JSON representation of that file's front matter. Useful to use with set in a loop to get and use a file's attributes. You can also pass in the name of a specific attribute you'd like and it will return just that.

{{ foo/bar.html|attributes }}
<!-- {title: 'Bar', template: '_layout.html'} -->
{{ foo/bar.html|attributes('title') }}
<!-- 'Bar' -->

Body

The body filter will read a in a file path passed in (relative to your Gulpfile) and return the raw (not rendered) content of the file, with that file's front matter removed.

<!-- <h1>Hello World, from {{file}}</h1> --> <!--(raw)-->

{{ foo/bar.html|body }}
<!-- <h1>Hello World, from {{file}}</h1> --> <!--(output)-->

Render

The render filter will read a in a file path passed in (relative to your Gulpfile) and return the rendered file (either HTML or Markdown) with the front matter removed. Should be used with the safe filter to ensure the HTML is rendered.

<!-- <h1>Hello World, from {{file}}</h1> --> <!--(raw)-->

{{ foo/bar.html|render|safe }}
<!-- <h1>Hello World, from Bar</h1> --> <!--(output)-->

Markdown

The markdown filter will render the contents passed in using the same Markdown rendering engine that is used to render pages.

{{ 'I _love_ **markdown**'|markdown }}
<!-- <p>I <em>love</em> <strong>markdown</strong> -->

Date

The date filter will render the contents passed in to it using the provided dateformat mask. Can also pass it 'now' to use the current timestamp.

{{ 1451056382324|date('YYYY') }}
<!-- 2015 -->

Variables

The following variables are available.

Stats

The stats variable will provide you with the Node stats output for the page being rendered.

Front Matter

Armadillo provides front matter as a way of passing variables in to the page you're working on. There are, however, some special front matter variables that you can pass in that will generate unique variables out the other side.

Listing

The listing attribute will generate recursive lists of files (their stats info, plus final relative path and front matter) in a provided folder. There are multiple configuration options, the only required one is folders. Results are placed in the listing variable for you to use.

  • folders - (Array Required) Listing of folders to walk. Each set of results will be placed in listing.{{folder}} with the {{folder}} being the basename of that folder. In the example below, you will have listing.bar and listing.baz
  • sort - (created/modified/published/updated) One of the provided options. Will sort the listing of files based on one of the provided sorting methods. Not including will default to alphabetical sort.
  • reverse - (Boolean) Whether to reverse the list of files or not.
  • ignore - (Array of Objects) Files to ignore based on given frontmatter attribute (v2.4+). Object should have the following keys:
    • attribute - (String Required) Name of attribute being looked for.
    • operator - (has/missing/is/is not/gt/lt/gte/lte Required) One of the provided options. has will ignore if attribute is present, missing will ignore if attribute is not present, is will ignore if attribute's value equals value, is not will ignore if attribute's value does not equal value, gt will ignore if attribute's value is greater than value, lt will ignore if attribute's value is less than value, gte will ignore if attribute's value is greater than or equal to value, and lte will ignore if attribute's value is less than or equal to value.
    • value - (Mixed) The value looked for by operator. Required if operator is not has or missing.
listing:
  folders:
    - bar
    - baz
  sort: published
  reverse: true
  ignore:
    - attribute: draft
      operator: is
      value: true
⚠️ **GitHub.com Fallback** ⚠️