On Mon, Dec 28, 2015 at 5:24 PM, Rory McGuire <rjmcgu...@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="{"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="
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 <- <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()} <- #[a(href="#") upper case] characters
// Following is as4df, its the last tag
as4df
