Mineral

Mineral is a language that compiles to markup or dom. It's similar to Jade (aka Pug). Its goal is to be much smaller and simpler than pug, and integrate well with modern client side frameworks.

tags

Lowercase text at the start of a line (or after only white space) is considered an html tag. Indenting a tag will nest it, creating the tree-like structure that can be rendered into html. Tag attributes look similar to html (with optional comma), but their values are regular javascript.

html
head
  link(href="index.css" rel="stylesheet")
body
  h1 Hello World

the above code will produce the following html

<html>
  <head>
    <link href="index.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

note It's ideal to disambiguate expressions or declarations when using them as attribute values.

a(href='/save' data-date=(new Date()))

A tag that starts with a dot will be considered a div, and the name will be used as the class.

.band The Misfits

<div class="band">The Misfits</div>

note Unlike Jade or Pug, Mineral does not support the (rather superfluous) class-after-attribute syntax.

a(href='/save').button save // Bad
a.button(href='/save') // Good

A tag that starts with a hash will be considered a div, and the name will be used as the id. It's fine for the id to come before or after the class.

#danzig.band The Misfits

<div id="danzig" class="band">The Misfits</div>

mixins

All html is lowercase, anything starting with an uppercase letter is a mixin. arguments and parens are optional. mixins are global (less fiddling with paths).

Person(firstName, lastName)
  h1= firstName
  h2= lastName

use mixins by putting a `+` before the name of the mixin. Arguments and parens are optional.

+Person('Jello', 'Biafra')

conditionals

Conditional statements (`if`, `else if` and `else`) have no parenthesis. They will evaluate a javascript expression to determine truthyness. Mineral does not implement `case` or `unless` statements.

if 1 === 'x'
  p this statement is false
else if 100 > 99
  p this statement is also false, and optional
else
  p this is the final branch of this logic

iteration

Iterate over objects or arrays using `for` or `while`. Mineral does not implelent the `each` statement. Here are some examples using the following JSON data.

{
  count: 2,
  people: [
    { first: 'Tom', last: 'Waits' },
    { first: 'Dick', last: 'Dale' }
  ]
}

A for loop provides the key (or index) and optionally the value for each item in an array or object.

for key, val in people
  +Foo(val.first, val.last)

The value variable is optional.

for p in people
  +Foo(people[p].first, people[p].last)

while loops evaluate a javascript expression until it becomes falsey.

ul
  while count--
    span.name= people[count].first

values

When the `=` symbol follows a tag, it indicates that the value should be an expression. An expression can include values from the data passed to the template or any valid javascript.

h1 = 'Hello, ' + name

Mineral detects `console.log`-like statements.

h1 = 'Hello %s', foo

text

To continue the text content of a tag, you can use the `|` symbol.

p Danzig is an American heavy metal band, formed in 1987 in Lodi,
| New Jersey, United States. The band is the musical outlet for singer
| and songwriter Glenn Danzig, preceded by the horror punk bands the
| Misfits and Samhain. They play in a bluesy doom-driven heavy metal
| style influenced by the early sound of Black Sabbath.[1]

For multiline textblocks, add a `.` after the tag. The compiler wont evaluate any code inside these blocks. It will also preserve whitespace.

.foo.
  Hello
  world.

<div class="foo">
  Hello
  world.
</div>

This feature is pretty important when adding javascript to a script tag.

script.
  var s = 'hello, world'
  alert(s)
h1 I sent you an alert.

comments

Single-line

// single line

Multi-line (`.beep` and `.boop` are commented)

.foo1
//
  .beep
    .boop
.foo2

note Comments have no business in compiled code, so they are removed entirely. Conditional comments are no longer supported by any IE version, so they wont be supported. If for some reason you really want comments, you can use the comment tag.

comment Hey good lookin'

<!-- Hey good lookin' -->

mineral