<div dir="ltr"><br><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Dec 28, 2015 at 5:24 PM, Rory McGuire <span dir="ltr"><<a href="mailto:rjmcguire@gmail.com" target="_blank">rjmcguire@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left-width:1px;border-left-color:rgb(204,204,204);border-left-style:solid;padding-left:1ex"><p dir="ltr"><span class=""><br>
On 27 Dec 2015 6:25 PM, "Andrei Alexandrescu via Digitalmars-d-announce" <<a href="mailto:digitalmars-d-announce@puremagic.com" target="_blank">digitalmars-d-announce@puremagic.com</a>> wrote:<br>
><br>
> On 12/27/15 1:27 AM, Rory McGuire via Digitalmars-d-announce wrote:<br></span>
[snip]<span class=""><br>
>> Vibe.d had a template engine called diet which is almost like Jade. It<br>
>> is also completed so you might prefer that as an example.<br>
><br>
><br>
> Either or both would be awesome to express with Pegged. -- Andrei<br>
></span></p>
<p dir="ltr"> 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. </p>
</blockquote></div>A little teaser, this is the output of the app and runtime and/or compile time:</div><div class="gmail_extra"><div class="gmail_extra"><!DOCTYPE html><!--[if IE 8]><html lang="en" class="lt-ie9"></html><![endif]--><html lang="en"><head><title>Index of Demo</title><style>body {</div><div class="gmail_extra"><span class="" style="white-space:pre"> </span>margin: 0px;</div><div class="gmail_extra"><span class="" style="white-space:pre"> </span>background-color: #eee;</div><div class="gmail_extra">}</style></head><body class="base-css" ng-app="MyApp" ng-controller="CtrlII"><span class="" style="white-space:pre"> </span><!-- 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="<a href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade</a>">Jade Reference</a><span class="" style="white-space:pre"> </span><!-- TODO: should allow empty lines in PipedText or at least show an error --><span class="" style="white-space:pre"> </span><!-- | -->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="{"e;active"e;: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="<a href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade</a>">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 <- <a href="#">upper case</a> characters</p><!-- Following is as4df, its the last tag --><as4df></as4df></div><div><br></div><div>Translated from these files:</div><div><div><b>=========================</b></div><div>extends second_layout.jade</div><div><br></div><div>block title</div><div><span class="" style="white-space:pre"> </span>title Index of Demo</div><div><br></div><div>block content</div><div><span class="" style="white-space:pre"> </span>// this is the actual displayed content</div><div><span class="" style="white-space:pre"> </span>p(id="", p-form-hook=some_d_var ? "yes" :"no", marked) This is the index.jade #[i paragraph] that</div><div><span class="" style="white-space:pre"> </span>| #[b test] continues #[i on] multiple</div><div><span class="" style="white-space:pre"> </span>| lines goto #[a(target="_blank", href="<a href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade</a>") Jade Reference]</div><div><span class="" style="white-space:pre"> </span>// TODO: should allow empty lines in PipedText or at least show an error</div><div><span class="" style="white-space:pre"> </span>//|</div><div><span class="" style="white-space:pre"> </span>| to see examples of interpolation</div><div><span class="" style="white-space:pre"> </span>ul(isit=some_other_d_var == "woot")</div><div><span class="" style="white-space:pre"> </span>li.one-css.two-css: a(href!="#"): a(href!="#")!= clickme2</div><div><span class="" style="white-space:pre"> </span>.img-holder</div><div><span class="" style="white-space:pre"> </span>img.image(src="logo2.gif", style={background: "red", padding: "0px"})/</div></div><div><b>============================</b></div><div><div>extends second_layout.jade</div><div><br></div><div>block title</div><div><span class="" style="white-space:pre"> </span>title Index of Demo</div><div><br></div><div>block content</div><div><span class="" style="white-space:pre"> </span>// this is the actual displayed content</div><div><span class="" style="white-space:pre"> </span>p(id="", p-form-hook=some_d_var ? "yes" :"no", marked) This is the index.jade #[i paragraph] that</div><div><span class="" style="white-space:pre"> </span>| #[b test] continues #[i on] multiple</div><div><span class="" style="white-space:pre"> </span>| lines goto #[a(target="_blank", href="<a href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade</a>") Jade Reference]</div><div><span class="" style="white-space:pre"> </span>// TODO: should allow empty lines in PipedText or at least show an error</div><div><span class="" style="white-space:pre"> </span>//|</div><div><span class="" style="white-space:pre"> </span>| to see examples of interpolation</div><div><span class="" style="white-space:pre"> </span>ul(isit=some_other_d_var == "woot")</div><div><span class="" style="white-space:pre"> </span>li.one-css.two-css: a(href!="#"): a(href!="#")!= clickme2</div><div><span class="" style="white-space:pre"> </span>.img-holder</div><div><span class="" style="white-space:pre"> </span>img.image(src="logo2.gif", style={background: "red", padding: "0px"})/</div><div>rmcguire@rmcguire-hx:~/Projects/jade$ cat views/second_layout.jade </div><div>extends base_layout.jade</div><div>block footer</div><div><span class="" style="white-space:pre"> </span>p This is the text in footer block</div></div><div><b>===================================</b></div><div><div>doctype html</div><div>- auto currentUrl = "/";</div><div>- auto riskyBusiness = "<b>risky</b>";</div><div><!--[if IE 8]></div><div>html(lang="en", class="lt-ie9")</div><div><![endif]--></div><div>- bool some_d_var = true;</div><div>- string some_other_d_var = "woot";</div><div>html(lang="en")</div><div><span class="" style="white-space:pre"> </span>head</div><div><span class="" style="white-space:pre"> </span>block title</div><div><span class="" style="white-space:pre"> </span>title Page Title Here</div><div><span class="" style="white-space:pre"> </span>style</div><div><span class="" style="white-space:pre"> </span>include style.css</div><div><span class="" style="white-space:pre"> </span>body.base-css(ng-app="MyApp", ng-controller="CtrlII")</div><div><span class="" style="white-space:pre"> </span>block content</div><div><span class="" style="white-space:pre"> </span>// this is the displayed content</div><div><span class="" style="white-space:pre"> </span>p(id="", p-form-hook=some_d_var ? "yes" :"no", marked) This is a paragraph</div><div><span class="" style="white-space:pre"> </span>| That continues on</div><div><span class="" style="white-space:pre"> </span>| multiple lines</div><div><span class="" style="white-space:pre"> </span>ul(isit=some_other_d_var == "woot")</div><div><span class="" style="white-space:pre"> </span>li.one-css.two-css: a(href!="#"): a(href!="#")!= clickme</div><div><span class="" style="white-space:pre"> </span>.img-holder</div><div><span class="" style="white-space:pre"> </span>img.image(src="logo.gif", style={background: "red", padding: "0px"})/</div><div><span class="" style="white-space:pre"> </span>woot#content1 as2df</div><div><span class="" style="white-space:pre"> </span>#woot2(class=["c1", "c2"]) as3dfas3df</div><div><span class="" style="white-space:pre"> </span>woot3(class={active: currentUrl == "/about"})</div><div><span class="" style="white-space:pre"> </span>block footer</div><div><span class="" style="white-space:pre"> </span>p Placeholder footer block</div><div>- var host = "remotehost";</div><div>- var user = var.emptyObject;</div><div>if "localhost" == host</div><div><span class="" style="white-space:pre"> </span>div#foo(data-bar="foo", goot-one)&attributes({"data-cew": "baer", "ng-show": 1234})</div><div><span class="" style="white-space:pre"> </span>//- include:markdown ./includes/footer.jade</div><div>else</div><div><span class="" style="white-space:pre"> </span>merrrt</div><div>unless user.isAnonymous</div><div><span class="" style="white-space:pre"> </span>p You are logged in</div><div>//- :markdown</div><div>//- <span class="" style="white-space:pre"> </span>### Markdown Need dedent support to parse this</div><div>//- <span class="" style="white-space:pre"> </span>I often like including markdown documents.</div><div>ul</div><div><span class="" style="white-space:pre"> </span>- import std.conv;</div><div><span class="" style="white-space:pre"> </span>each index, val in [1:"one",2:"two",3:"three"]</div><div><span class="" style="white-space:pre"> </span>li= to!string(index) ~": "~ val</div><div>- int n=1;</div><div>while n < 4</div><div><span class="" style="white-space:pre"> </span>li= n++</div><div><br></div><div>- auto friends = 42;</div><div>case friends</div><div><span class="" style="white-space:pre"> </span>when 0</div><div><span class="" style="white-space:pre"> </span>when 1</div><div><span class="" style="white-space:pre"> </span>p you have very few friends</div><div><span class="" style="white-space:pre"> </span>default: p you have #{friends} friends</div><div>//- Declaration</div><div>mixin list</div><div><span class="" style="white-space:pre"> </span>ul</div><div><span class="" style="white-space:pre"> </span>li foo</div><div><span class="" style="white-space:pre"> </span>li bar</div><div><span class="" style="white-space:pre"> </span>li baz</div><div>//- Use</div><div>+list</div><div>+list</div><div>mixin pet(name)</div><div><span class="" style="white-space:pre"> </span>li.pet= name</div><div>ul</div><div><span class="" style="white-space:pre"> </span>+pet("cat")</div><div><span class="" style="white-space:pre"> </span>+pet("dog")</div><div><span class="" style="white-space:pre"> </span>+pet("pig")</div><div>mixin article(title)</div><div><span class="" style="white-space:pre"> </span>.article</div><div><span class="" style="white-space:pre"> </span>.article-wrapper</div><div><span class="" style="white-space:pre"> </span>h1= title</div><div><span class="" style="white-space:pre"> </span>if block</div><div><span class="" style="white-space:pre"> </span>block</div><div><span class="" style="white-space:pre"> </span>else</div><div><span class="" style="white-space:pre"> </span>p No content provided</div><div><br></div><div>+article("Hello world")</div><div><br></div><div>+article("Hello world")</div><div><span class="" style="white-space:pre"> </span>p This is my</div><div><span class="" style="white-space:pre"> </span>p Amazing article</div><div>mixin link(href, name)</div><div><span class="" style="white-space:pre"> </span>//- attributes == {class: "btn"}</div><div><span class="" style="white-space:pre"> </span>a(class!=attributes["class"], href=href)= name</div><div>+link("/foo", "foo")(class="btn")</div><div>mixin link2(href, name)</div><div><span class="" style="white-space:pre"> </span>a(href=href)&attributes(attributes)= name</div><div><br></div><div>+link2("/foo", "foo")(class="btn")</div><div>mixin list2(id, ...items)</div><div><span class="" style="white-space:pre"> </span>ul(id=id)</div><div><span class="" style="white-space:pre"> </span>each item in items</div><div><span class="" style="white-space:pre"> </span>li= item</div><div><br></div><div>+list2("my-list", 1, 2, 3, 4)</div><div><br></div><div>p.</div><div><span class="" style="white-space:pre"> </span>If you take a look at this page's source #[a(target="_blank", href="<a href="https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade">https://github.com/jadejs/jade/blob/master/docs/views/reference/interpolation.jade</a>") on GitHub],</div><div><span class="" style="white-space:pre"> </span>you'll see several places where the tag interpolation operator is</div><div><span class="" style="white-space:pre"> </span>used like so.</div><div><span class="" style="white-space:pre"> </span>.quote // this is raw text so the .quote means nothing to jade, only string and tag interpolation works here</div><div><span class="" style="white-space:pre"> </span>p Joel: !{riskyBusiness}</div><div>p.</div><div><span class="" style="white-space:pre"> </span>This is supposed to just be text inside a p tag.</div><div>- import std.uni : toUpper;</div><div>- string msg = "not my inside voice";</div><div>p This is #{msg.toUpper()} <- #[a(href="#") upper case] characters</div><div><br></div><div>// Following is as4df, its the last tag</div><div>as4df</div></div><div><br></div><div><br></div><div><br></div></div></div>