On Mon, Dec 28, 2015 at 5:24 PM, Rory McGuire <rjmcguire@gmail.com> wrote:


On 27 Dec 2015 6:25 PM, "Andrei Alexandrescu via Digitalmars-d-announce" <digitalmars-d-announce@puremagic.com> wrote:
>
> On 12/27/15 1:27 AM, Rory McGuire via Digitalmars-d-announce wrote:
 [snip]
>> Vibe.d had a template engine called diet which is almost like Jade. It
>> is also completed so you might prefer that as an example.
>
>
> Either or both would be awesome to express with Pegged. -- Andrei
>

I'm working on the output part now while it's the holidays. Will share once I've got my test template translating to html as a demo.

A little teaser, this is the output of the app and runtime and/or compile time:
<!DOCTYPE html><!--[if IE 8]><html lang="en" class="lt-ie9"></html><![endif]--><html lang="en"><head><title>Index of Demo</title><style>body {
margin: 0px;
background-color: #eee;
}</style></head><body class="base-css" ng-app="MyApp" ng-controller="CtrlII"> <!--  this is the actual displayed content --><p id="" p-form-hook="yes" marked="null">This is the index.jade <i>paragraph</i> that<b>test</b> continues <i>on</i> multiplelines goto <a target="_blank" href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">Jade Reference</a> <!--  TODO: should allow empty lines in PipedText or at least show an error --> <!-- | -->to see examples of interpolation</p><ul isit="true"><li class="one-css two-css"></li></ul><div class="img-holder"><img class="image" src="logo2.gif" style="padding: 0px;background: red"></img></div></body><woot id="content1">as2df<woot2 id="woot2" class="c1,c2">as3dfas3df</woot2><woot3 class="{&quote;active&quote;:false}"></woot3><p>This is the text in footer block</p></woot></html><merrrt></merrrt><p>You are logged in</p><ul><li>3: three</li><li>2: two</li><li>1: one</li></ul><li>1</li><li>2</li><li>3</li><p>you have 42 friends</p><ul><li>foo</li><li>bar</li><li>baz</li></ul><ul><li>foo</li><li>bar</li><li>baz</li></ul><ul><li class="pet">cat</li><li class="pet">dog</li><li class="pet">pig</li></ul><div class="article"><div class="article-wrapper"><h1>Hello world</h1><p>No content provided</p></div></div><div class="article"><div class="article-wrapper"><h1>Hello world</h1><p>This is my</p><p>Amazing article</p></div></div><a class="btn" href="/foo">foo</a><a href="/foo">foo</a><ul id="my-list"><li>1</li><li>2</li><li>3</li><li>4</li></ul><p>If you take a look at this page's source <a target="_blank" href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">on GitHub</a>, you'll see several places where the tag interpolation operator is used like so. .quote // this is raw text so the .quote means nothing to jade, only string and tag interpolation works here p Joel: <b>risky</b></p><p>This is supposed to just be text inside a p tag.</p><p>This is NOT MY INSIDE VOICE &lt;- <a href="#">upper case</a> characters</p><!--  Following is as4df, its the last tag --><as4df></as4df>

Translated from these files:
=========================
extends second_layout.jade

block title
title Index of Demo

block content
// this is the actual displayed content
p(id="", p-form-hook=some_d_var ? "yes" :"no", marked) This is the index.jade #[i paragraph] that
| #[b test] continues #[i on] multiple
| lines goto #[a(target="_blank", href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade") Jade Reference]
// TODO: should allow empty lines in PipedText or at least show an error
//|
| to see examples of interpolation
ul(isit=some_other_d_var == "woot")
li.one-css.two-css: a(href!="#"): a(href!="#")!= clickme2
.img-holder
img.image(src="logo2.gif", style={background: "red", padding: "0px"})/
============================
extends second_layout.jade

block title
title Index of Demo

block content
// this is the actual displayed content
p(id="", p-form-hook=some_d_var ? "yes" :"no", marked) This is the index.jade #[i paragraph] that
| #[b test] continues #[i on] multiple
| lines goto #[a(target="_blank", href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade") Jade Reference]
// TODO: should allow empty lines in PipedText or at least show an error
//|
| to see examples of interpolation
ul(isit=some_other_d_var == "woot")
li.one-css.two-css: a(href!="#"): a(href!="#")!= clickme2
.img-holder
img.image(src="logo2.gif", style={background: "red", padding: "0px"})/
rmcguire@rmcguire-hx:~/Projects/jade$ cat views/second_layout.jade 
extends base_layout.jade
block footer
p This is the text in footer block
===================================
doctype html
- auto currentUrl = "/";
- auto riskyBusiness = "<b>risky</b>";
<!--[if IE 8]>
html(lang="en", class="lt-ie9")
<![endif]-->
- bool some_d_var = true;
- string some_other_d_var = "woot";
html(lang="en")
head
block title
title Page Title Here
style
include style.css
body.base-css(ng-app="MyApp", ng-controller="CtrlII")
block content
// this is the displayed content
p(id="", p-form-hook=some_d_var ? "yes" :"no", marked) This is a paragraph
| That continues on
| multiple lines
ul(isit=some_other_d_var == "woot")
li.one-css.two-css: a(href!="#"): a(href!="#")!= clickme
.img-holder
img.image(src="logo.gif", style={background: "red", padding: "0px"})/
woot#content1 as2df
#woot2(class=["c1", "c2"]) as3dfas3df
woot3(class={active: currentUrl == "/about"})
block footer
p Placeholder footer block
- var host = "remotehost";
- var user = var.emptyObject;
if "localhost" == host
div#foo(data-bar="foo", goot-one)&attributes({"data-cew": "baer", "ng-show": 1234})
//- include:markdown ./includes/footer.jade
else
merrrt
unless user.isAnonymous
p You are logged in
//- :markdown
//- ### Markdown Need dedent support to parse this
//- I often like including markdown documents.
ul
- import std.conv;
each index, val in [1:"one",2:"two",3:"three"]
li= to!string(index) ~": "~ val
- int n=1;
while n < 4
li= n++

- auto friends = 42;
case friends
when 0
when 1
p you have very few friends
default: p you have #{friends} friends
//- Declaration
mixin list
ul
li foo
li bar
li baz
//- Use
+list
+list
mixin pet(name)
li.pet= name
ul
+pet("cat")
+pet("dog")
+pet("pig")
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided

+article("Hello world")

+article("Hello world")
p This is my
p Amazing article
mixin link(href, name)
//- attributes == {class: "btn"}
a(class!=attributes["class"], href=href)= name
+link("/foo", "foo")(class="btn")
mixin link2(href, name)
a(href=href)&attributes(attributes)= name

+link2("/foo", "foo")(class="btn")
mixin list2(id, ...items)
ul(id=id)
each item in items
li= item

+list2("my-list", 1, 2, 3, 4)

p.
If you take a look at this page's source #[a(target="_blank", href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade") on GitHub],
you'll see several places where the tag interpolation operator is
used like so.
.quote // this is raw text so the .quote means nothing to jade, only string and tag interpolation works here
p Joel: !{riskyBusiness}
p.
This is supposed to just be text inside a p tag.
- import std.uni : toUpper;
- string msg = "not my inside voice";
p This is #{msg.toUpper()} &lt;- #[a(href="#") upper case] characters

// Following is as4df, its the last tag
as4df