I am trying to use the Icomoon icon font with Haml and can't seem to find a way to escape the & so that it stays just an & instead of &.
The Icomoon font allows you to use HTML entities with a data-icon="" attribute. Works smooth as butter in HTML and even in a Haml file if I just do a straight HTML link.
However, since I'm learning Haml I thought I'd see if anyone on here would like to recommend the best way to approach this.
Here's a sample of what happens.
This is the original Haml:
%a(href='/posts' data-icon="&" aria-hidden='true')
This is how it compiles:
<a aria-hidden='true' data-icon='&' href='/posts'>
This is how it needs to compile for the icon font to work:
<a aria-hidden='true' data-icon='&' href='/posts'>
and here is a codepen where you can see how the icon renders due to the amp; addition: http://codepen.io/dandenney/pen/3/6
I didn't like the top poster's way of completing this question. So far the best way I've found is to do:
- foo = "&".html_safe
%a(href='/posts' data-icon=foo aria-hidden='true')
I'm not fully happy with this, but think it's better for rails apps rather than turning off HTML escaping everywhere.
You can use the :escape_attrs option to control whether HTML sensitive characters in attributes are escaped:
require 'haml'
haml = "%a(href='/posts' data-icon=\"&\" aria-hidden='true')"
puts Haml::Engine.new(haml, :escape_attrs => false).to_html
Output:
<a aria-hidden='true' data-icon='&' href='/posts'></a>
Note that this will apply to all attributes in your Haml template.
In my opinion, I don't like the idea to disable the feature to escape the characters generally. Maybe you use relay at some point in your application on it.
For me the best way to do it is:
%a{ href: '/', 'data-icon' => "✐".html_safe }
Related
I have a pug view
section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text !{about}
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume
In express server I render it with "about", "works" and "reviewsAmount" variables.
The "about" variable value is
const about = `
<p>
I have #{works.length} works and #{reviewsAmount} reviews.
</p>
`;
But in page it renders like "I have #{works.length} works and #{reviewsAmount} reviews.". Variable values do not interpolate in paragraph tag. So, how to do that?
You are mixing up pug interpolation and JavaScript template strings. When the code is in your node/express route (and not in the template) you need to use JavaScript template strings.
If you use the ${} syntax this will fix it.
const about = `
<p>
I have ${works.length} works and ${reviewsAmount} reviews.
</p>
`;
With that said, I'd recommend against doing this and leaving all of your HTML in pug and not moving it into the node/express code. This will make your web pages more difficult to debug when something goes wrong, and also require more effort to maintain longer term.
Just pass those variables on to Pug and do the interpolation there:
section#about.about
.container
.about__inner
.about__content
h3.about__title About me
h2.about__bigtitle Who am I
.about__text
p I have #{works.length} works and #{reviewsAmount} reviews.
a.btn(href="#" data-modal="#modal_hire_me") Hire me
button.btn(type="button" data-modal="#modal_resume") My resume
How can I use vue.js with the dust template engine? Both are using {{}} as placeholders, are there any options to say dust: Hey, this part is especially for vue?
I got no idea since I haven't had found anything in the documentations.
https://vuejs.org/api/#delimiters
Vue.config.delimiters = ['!v', 'v!']
You can set the delimiters for Vue to whatever you'd like to avoid conflict. Also see Vue.config.unsafeDelimiters - https://vuejs.org/api/#unsafeDelimiters
The converse answer for Dust is that you can wrap a block in {` tags to tell Dust not to parse that block.
context = { "dust": "DUST!", "vue": "error" }
{dust} says {` hello {vue}! `}
will render to
DUST! says hello {vue}!
Such structure is given
<div class="user-number">123</div>
<div class="user-state">
<span class="u-state-icon icon icon-1"></span>
<span> User1</span>
</div>
I've tried such (incorrect) xpath for locating User1 by user-number and do not understand where is the problem..
xpath=//*[#class='user-number' and text() = '123']/following-sibling::*[contains(#class,'user-state')]/descendant::*[contains(#text,'User1')]
What is the best way to debug it?
For example, if
xpath=//*[#class='user-number' and text() = '123']/following-sibling::*[contains(#class,'user-state')]
locates some element - how to print out its text property - to check which element is actually located?
Your xpath expression is, surely, incorrect - #text should be replaced with text() (or just .):
//*[#class='user-number' and . = '123']/following-sibling::*[contains(#class,'user-state')]/descendant::*[contains(.,'User1')]
Debugging xpath expressions is usually done using the browser developer tools: in the firebug, or inside a browser console. For instance, in the google-chrome console, you can execute the following:
$x("//*[#class='user-number' and . = '123']/following-sibling::*[contains(#class,'user-state')")
And see if there is a match.
Or, you can also debug it inside your code. For example (using python), find the first div element and print out it's text:
element = driver.find_element_by_xpath("//*[#class='user-number' and . = '123']")
print(element.text)
The meta-question is, how to debug XPath expressions?
Well, for simple ones like these, it's really best to just stare at them till you see the problem. Check the spelling of names, check namespaces, check whitespace issues. At least it's easier than debugging regular expressions.
For more complex XPaths, try breaking them up. Remove a predicate and see if that makes a difference. Or work in reverse, build up the path expression by adding conditions, checking at each stage that it still finds something.
If you're really seriously into XPath, consider schema-aware processing: this will match your XPath expression against a schema to make sure it makes sense.
Consider using a visual XPath processor for debugging. There are a number around. I use the XPath processor in oXygen (though not really for debugging the XPath, more for discovering the content of the document, but those tasks often need to be done together.)
jQuery UI starting from version 1.8.4 html-encodes Autocomplete suggestions (according to this issue).
This became a problem for me now. I used to theme the output for the suggestions, but now (if I use version 1.8.4 or higher) Autocomplete just html-encodes my theming. All tags like <b>, <span> are being printed to the user instead of displaying the actual styling.
So the suggestions now look like:
<b>su<b>suggestion
another <b>su<b>suggestion
instead of:
suggestion
another suggesion
I've read about custom data, but I use Yii framework and the output is being generated from certain actions (PHP code).
So, how do I theme the output now?
Thank you!
Better use a HTML plugin
You can use open function from jQuery UI to replace the encoded text.
Here's an example:
$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
'name'=>"bug",
'source'=>$this->createUrl('/autocomplete'),
// additional javascript options for the autocomplete plugin
'options'=>array(
'open'=> 'js:function(event, ui){
$("ul.ui-autocomplete li a").each(function(){
var htmlString = $(this).html().replace(/</g, "<");
htmlString = htmlString.replace(/>/g, ">");
$(this).html(htmlString);
});
}'
),
));
I am having a problem getting Haml to close br tags. I have tried the following with no luck:
%br
%br/
I expect this to result in <br />, but it always outputs as <br>, even with the slash character on the end. I have also tried adding the following options to application.rb (and I tried environment.rb)
Haml::Template.options[:autoclose] = ['meta', 'img', 'link', 'br', 'hr', 'input', 'area', 'param', 'col', 'base']
Am I missing something? I though Haml was supposed to autoclose these tags by default??
Ok, I found out the problem. Haml outputs HTML5 by default when using Rails 3. I didn't realize that <br> was valid syntax in HTML5. I was trying to get this to pass the W3C semantic extractor, so I need <br /> instead. In order to get this to work, you will need to update the Haml options for autoclose and set it to xhtml. Drop this code into your application.rb inside the class.
Haml::Template.options[:format] = :xhtml
More info here:
http://github.com/nex3/haml/issuesearch?state=closed&q=close#issue/155
But, if I want xhtml5 (i.e. html5 with autoclose) there's no way to do it! I, like many other users, have tried overriding the :autoclose list and it just doesn't work.
According to the haml docs:
Haml::Template.options[:format] = :xhtml
should be placed in config/environment.rb.
Placing it in environment.rb works for me.