Jade and whitespaces - node.js

I'm starting to play with jade and got stuck with this:
I want to output something like:
hey! this
is pre
text!!!
I use tabs for indentation in templates and if I write spaces at the beginning of lines I get not both tabs & spaces indentation error.
My jade template:
div
pre. hey! this
is pre
text!!!
Have also tried with "|" syntax.
So, how can I output this? Thanks in advance ^_^

My mistake, was simple or just mistyped something:
pre
| hey! this
| is pre
| text!!!
Also got it to work using as the first "space" character and "." syntax
pre.
hey! this
is pre
text!

I came up with this:
view.jade
a.nav
i.user
nbsp
| Me
style.css
nbsp {
width: 0.5em;
display: inline-block;
white-space: nowrap;
}

Related

node.js - Regex: Put space between triple mustaches ( {{{ => { {{ )

I have a String which contains minified CSS and handlebars.js notations (if statements, variables and so on). Because that the String is minified, it also contains stuff like '{{{' or '}}}' which I need to replace with '{ {{' or '}} }' (put one space between) in order to compile it correctly through handlebars.
Trouble is that I cannot manage to put the correct Regex together for this simple task. I guess the { symbols make the whole thing difficult since its a Regex-specific character.
String:
.class1{{{#if style.textColor}}color:{{style.textColor}};{{/if}}}item-price{{{#if style.showPrice}}display:block;{{else}}display:none;{{/if}}{{#if style.fontSizeItemPrice}}font-size:{{style.fontSizeItemPrice}}px;{{/if}}}
Expected output:
.class1{ {{#if style.textColor}}color:{{style.textColor}};{{/if}} }item-price{ {{#if style.showPrice}}display:block;{{else}}display:none;{{/if}}{{#if style.fontSizeItemPrice}}font-size:{{style.fontSizeItemPrice}}px;{{/if}} }
Simply substituting triple mustaches works, but only for the first occurance:
css = css.replace("{{{", "{ {{");
css = css.replace("}}}", "}} }")
String.replace function automatically converts the first string param to regex (without the global option set). That's why only the first occurrence is replaced. If you want to replace all occurrences of the pattern, you can create a regex with global option set. Try the following snippet.
css = css.replace(/{{{/g, '{ {{').replace(/}}}/g, '}} }')

How to apply text object commands to one level upper?

I have a template tag in my HTML like this:
<span>Hello, {{ customer.name| truncatewords: 1, "" | capitalize }}</span>
I want to cut the tag. If I use da{ when cursor inside of the template tag, it looks like this:
<span>Hello, {}</span>
This is what I want:
<span>Hello, </span>
And the {{ customer.name| truncatewords: 1, "" | capitalize }} part must be yanked of course.
I tried da{{ but it doesn't works. How I do this?
ps: I have problem with y c or v commands too of course.
You can use a count before the text-object:
d2a{
or, in most cases, before the operator:
2da{
From :help a{:
a} *v_a}* *a}* *a{*
a{ *v_aB* *v_a{* *aB*
aB "a Block", select [count] Blocks, from "[count] [{" to
the matching '}', including the '{' and '}' (see
|[{|).
When used in Visual mode it is made characterwise.
In addition to the accepted answer it's worth noting that if you're selecting objects with visual mode you can always repeat it to select the next level. In your case, va{ would select the inner set of {}, but repeating a{ would expand this to include the outer set as well.

Kentico Tag output but not links

With help from Branded, i have tag working. At this point, we don't need tags to link, so i have tags being displayed like this (in an ascx transformation):
<p class='date'><%# IfEmpty(Eval("DocumentTags"),"",Eval("DocumentTags").ToString() + " | ") %><%# FormatDateTime(Eval("Date"),"MMM d, yyyy") %></p>
This works, but i get the tags wrapped in double quotes. I'm traying TrimEnd, or LastIndexOf, but just getting errors.
Use the method Replace() on the double quotes. Something like Eval<string>("DocumentTags").Replace("\"", "") should work.

Make span come before text in Jade

I'm working on a navbar and I'm trying to have a button on the bar be in the format:
(icon)(text)
Here's the excerpt from the jade file:
a(href="/signup")
h3 Sign Up
span(style="font-size: 1.25em; margin-top:2%" href="/graphing").glyphicon.glyphicon-pencil
Currently this produces:
(text)(icon)
How can I have it so the span is inside the h3, but is BEFORE the text in jade?
You should use a piped text:
a(href="/signup")
h3
span(style="font-size: 1.25em; margin-top:2%" href="/graphing").glyphicon.glyphicon-pencil
| Sign Up
From The documentation:
Piped Text
The simplest way of adding plain text to templates is to prefix the line with a | character (pronounced "pipe").

Jade: Links inside a paragraph

I'm trying to author a few paragraphs with Jade, but finding it difficult when there are links inside a paragraph.
The best I can come up with, and I'm wondering if there's a way to do it with less markup:
p
span.
this is the start
of the para.
a(href="http://example.com") a link
span.
and this is the rest of
the paragraph.
As of jade 1.0 there's an easier way to deal with this, unfortunately I can't find it anywhere in the official documentation.
You can add inline elements with the following syntax:
#[a.someClass A Link!]
So, an example without going into multiple lines in a p, would be something like:
p: #[span this is the start of the para] #[a(href="http://example.com") a link] #[span and this is the rest of the paragraph]
You can also do nested inline elements:
p: This is a #[a(href="#") link with a nested #[span element]]
You can use a markdown filter and use markdown (and allowed HTML) to write your paragraph.
:markdown
this is the start of the para.
[a link](http://example.com)
and this is the rest of the paragraph.
Alternatively it seems like you can simply ouput HTML without any problems:
p
| this is the start of the para.
| a link
| and this is he rest of the paragraph
I wasn't aware of this myself and just tested it using the jade command line tool. It seems to work just fine.
EDIT:
It seems it can actually be done entirely in Jade as follows:
p
| this is the start of the para
a(href='http://example.com;) a link
| and this is the rest of the paragraph
Don't forget an extra space at the end of para (although you can't see it. and between | and. Otherwise it will look like this para.a linkand not para a link and
Another way to do it:
p
| this is the start of the para
a(href="http://example.com") a link
|
| this is the rest of the paragraph.
Another completely different approach, would be to create a filter, which has first stab at replacing links, and then renders with jade second
h1 happy days
:inline
p this can have [a link](http://going-nowhere.com/) in it
Renders:
<h1>happy days</h1><p>this can have <a href='http://going-nowhere.com/'>a link</a> in it</p>
Full working example: index.js (run with nodejs)
var f, jade;
jade = require('jade');
jade.filters.inline = function(txt) {
// simple regex to match links, might be better as parser, but seems overkill
txt = txt.replace(/\[(.+?)\]\((.+?)\)/, "<a href='$2'>$1</a>");
return jade.compile(txt)();
};
jadestring = ""+ // p.s. I hate javascript's non-handling of multiline strings
"h1 happy days\n"+
":inline\n"+
" p this can have [a link](http://going-nowhere.com/) in it"
f = jade.compile(jadestring);
console.log(f());
A more general solution would render mini sub-blocks of jade in a unique block (maybe identified by something like ${jade goes here}), so...
p some paragraph text where ${a(href="wherever.htm") the link} is embedded
This could be implemented in exactly the same way as above.
Working example of general solution:
var f, jade;
jade = require('jade');
jade.filters.inline = function(txt) {
txt = txt.replace(/\${(.+?)}/, function(a,b){
return jade.compile(b)();
});
return jade.compile(txt)();
};
jadestring = ""+ // p.s. I hate javascript's non-handling of multiline strings
"h1 happy days\n"+
":inline\n"+
" p this can have ${a(href='http://going-nowhere.com/') a link} in it"
f = jade.compile(jadestring);
console.log(f());
If your links come from a data source you can use:
ul
each val in results
p
| blah blah
a(href="#{val.url}") #{val.name}
| more blah
See interpolation
Edit: This feature was implemented and issue closed, see answer above.
I've posted an issue to get this feature added into Jade
https://github.com/visionmedia/jade/issues/936
Haven't had time to implement it though, more +1s may help !
This is the best I can come up with
-var a = function(href,text){ return "<a href='"+href+"'>"+text+"</a>" }
p this is an !{a("http://example.com/","embedded link")} in the paragraph
Renders...
<p>this is an <a href='http://example.com/'>embedded link</a> in the paragraph</p>
Works ok, but feels like a bit of a hack - there really should be a syntax for this!
I did not realize that jade requires a line per tag. I thought we can save space. Much better if this can be understood ul>li>a[class="emmet"]{text}
I had to add a period directly behind a link, like this:
This is your test [link].
I solved it like this:
label(for="eula").lbl.lbl-checkbox.lbl-eula #{i18n.signup.text.accept_eula}
| #{i18n.signup.links.eula}.
As suggested by Daniel Baulig, used below with dynamic params
| <a href=!{aData.link}>link</a>
Turns out there is (now at least) a perfectly simple option
p Convert a .fit file using Garmin Connect's export functionality.
p
| At Times Like These We Suggest Just Going:
a(ui-sref="app") HOME
|
Most simplest thing ever ;) but I was struggling with this myself for a few seconds. Anywho, you need to use an HTML entity for the "#" sign -> #
If you want to in include a link, let's say your/some email address use this:
p
a(href="mailto:me#myemail.com" target="_top") me#myemail.com

Resources