Filters

Maizzle includes filters that enable you to do anything you want to text inside elements that you mark with custom attributes.

Usage

Add a filters object to your Maizzle config:

config.js

module.exports = {
  filters: {}
}

Each entry in this object is made up of a key: value pair.

key represents a custom HTML attribute name
value is a function that accepts two arguments, and must return a string

Example:

config.js

module.exports = {
  filters: {
    uppercase: str => str.toUpperCase()
  }
}

Used in a Template:

src/templates/example.html

<p uppercase>Here is some foo.</p>

Result:

<p>HERE IS SOME FOO BAR.</p>

Of course, this is just a dumb example - you could imagine more complex scenarios where you pull in packages and do stuff like:

compile CSS in some <style> tag with Sass or others
normalize html whitespace in parts of your code
create various content filters
...

Default filters

The following filters are included by default.

append

Append text to the end of the string.

example.html

<div append=" bar">foo</div>
<!-- <div>foo bar</div> -->

prepend

Prepend text to the beginning of the string.

example.html

<div prepend="foo ">bar</div>
<!-- <div>foo bar</div> -->

uppercase

Uppercase the string.

example.html

<div uppercase>foo</div>
<!-- <div>FOO</div> -->

lowercase

Lowercase the string.

example.html

<div lowercase>FOO</div>
<!-- <div>foo</div> -->

capitalize

Uppercase the first letter of the string.

example.html

<div capitalize>foo</div>
<!-- <div>Foo</div> -->

ceil

Round up to the nearest integer.

example.html

<div ceil>1.2</div>
<!-- <div>2</div> -->

floor

Round down to the nearest integer.

example.html

<div ceil>1.2</div>
<!-- <div>1</div> -->

round

Round to the nearest integer.

example.html

<div round>1234.567</div>
<!-- <div>1235</div> -->

escape

Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example).

example.html

<div escape>"&'<></div>
<!-- <div>&#34;&amp;&#39;&lt;&gt;</div> -->

escape-once

Escapes a string without changing existing escaped entities.

example.html

<div escape-once>1 &lt; 2 &amp; 3</div>
<!-- <div>1 &lt; 2 &amp; 3</div> -->

lstrip

Remove leading whitespace from the string.

example.html

<div lstrip> test </div>
<!-- <div>test </div> -->

rstrip

Remove trailing whitespace from the string.

example.html

<div rstrip> test </div>
<!-- <div> test</div> -->

trim

Remove leading and trailing whitespace from the string.

example.html

<div trim> test </div>
<!-- <div>test</div> -->

minus

Subtracts one number from another.

example.html

<div minus="2">3</div>
<!-- <div>1</div> -->

plus

Adds one number to another.

example.html

<div plus="2">3</div>
<!-- <div>5</div> -->

multiply

Alias: times

example.html

<div multiply="2">1.2</div>
<!-- 2.4 -->

divide-by

Alias: divide

example.html

<div divide-by="2">1.2</div>
<!-- 0.6 -->

modulo

Returns the remainder of one number divided by another.

example.html

<div modulo="2">3</div>
<!-- 1 -->

newline-to-br

Insert an HTML line break (<br />) in front of each newline (\n) in a string.

example.html

<div newline-to-br>
  test
  test
</div>
<!-- <div><br>  test<br>  test<br></div> -->

strip-newlines

Remove any newline characters (line breaks) from the string.

example.html

<div strip_newlines>
  test
  test
</div>
<!-- <div>  test  test</div> -->

remove

Remove every occurrence of text from the string.

example.html

<div remove="rain">I strained to see the train through the rain</div>
<!-- <div>I sted to see the t through the </div> -->

remove-first

Remove the first occurrence of text from the string.

example.html

<div remove-first="rain">I strained to see the train through the rain</div>
<!-- <div>I sted to see the train through the rain</div> -->

replace

Replace every occurrence of the first argument with the second argument.

You must separate arguments with a pipe character (|).

example.html

<div replace="1|test">test</div>
<div>1es1</div>

replace-first

Replace the first occurrence of the first argument with the second argument.

You must separate arguments with a pipe character (|).

example.html

<div replace-first="t|b">test</div>
<div>best</div>

size

Return the number of characters in the string.

example.html

<div size>one</div>
<!-- <div>3</div> -->

slice

Return a slice of the string starting at the provided index.

example.html

<div slice="1">test</div>
<!-- <div>est</div> -->

You may pass a startIndex and endIndex:

example.html

<div slice="0,-1">test</div>
<!-- <div>tes</div> -->

truncate

Shorten a string down to the number of characters passed as the argument.

example.html

<div truncate="17">Ground control to Major Tom.</div>
<!-- <div>Ground control to...</div> -->

You may pass a custom ellipsis as the second argument.

Separate arguments with a comma:

example.html

<div truncate="17, no one">Ground control to Major Tom.</div>
<!-- <div>Ground control to no one</div> -->

truncate-words

Shorten a string down to the number of words passed as the argument.

example.html

<div truncate-words="2">Ground control to Major Tom.</div>
<!-- <div>Ground control...</div> -->

You may pass a custom ellipsis as the second argument.

Separate arguments with a comma:

example.html

<div truncate-words="2, over and out">Ground control to Major Tom.</div>
<!-- <div>Ground control over and out</div> -->

url-decode

Decode a string that has been encoded as a URL.

example.html

<div url-decode>%27Stop%21%27+said+Fred</div>
<!-- <div>'Stop!' said Fred</div> -->

url-encode

Convert any URL-unsafe characters in a string into percent-encoded characters.

example.html

<div url-encode>user@example.com</div>
<!-- <div>user%40example.com</div> -->