Invoke "markdownify" in a Jekyll Plugin - plugins

I am trying to manually call the markdownify filter in a Jekyll plugin. Here is what I have:
module Jekyll
class ColumnBlock < Liquid::Block
include Jekyll::Filters
def initialize(tag_name, markup, tokens)
super
#col = markup
end
def render(context)
text = super
'<div class="col-md-' + #col + '">' + markdownify(text) + '</div>'
end
end
end
Liquid::Template.register_tag('column', Jekyll::ColumnBlock)
I get the following error: Liquid Exception: undefined method 'registers' for nil:NilClass
I am very new to Jekyll and Ruby. What do I have to include when I want to use the markdownify filter?

Why do not call directly the converter??
See the source code
def render(context)
text = super
site = context.registers[:site]
converter = site.getConverterImpl(Jekyll::Converters::Markdown)
'<div class="col-md-' + #col + '">' + converter.convert(text) + '</div>'
end

Update - getConverterImpl is deprecated in Jekyll 3, you should use find_converter_instance instead :
def render(context)
text = super
site = context.registers[:site]
converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
'<div class="col-md-' + #col + '">' + converter.convert(text) + '</div>'

Related

Magento 2 - how to load JS template from filesystem in jquery widget

For example, native Magento theme-frontend-blank\web\js\navigation-menu.js has such code:
$.widget('mage.navigationMenu', {
options: {
...
collapsableDropdownTemplate:
'<script type="text/x-magento-template">' +
'<li class="level0 level-top more parent">' +
'<div class="submenu">' +
'<ul><%= elems %></ul>' +
'</div>' +
'</li>' +
'</script>'
And then they do
this.collapsableDropdown = $(
mageTemplate(
this.options.collapsableDropdownTemplate,
{elems: this.elemsToCollapseClone}
)
);
Is it possible to do something like this
collapsableDropdownTemplate: getTemplate(some_relative_path_to_template) ?
instead of
collapsableDropdownTemplate:
'<script type="text/x-magento-template">' +
'<li class="level0 level-top more parent">' +
'<div class="submenu">' +
'<ul><%= elems %></ul>' +
'</div>' +
'</li>' +
'</script>'
My template is a little bit bigger and I want to allow frontend developers to modify it.

Play framework template cannot escape URL

I have this Play template, dynamicLink.scala.html...
#( urlWithQuotes: Html, id: Html, toClick: Html )
#uniqueId_With_Quotes() = {
Html("\"" + (#id) + "_" + scala.util.Random.nextInt.toString + "\"")
}
#defining(uniqueId_With_Quotes()) { uniqueID =>
<a id=#uniqueID class="dynamicLink" href=#urlWithQuotes> #toClick </a>
<script><!--Do stuff with dynamic link using jQuery--></script>
}
It generates a special link with some Javascript. I render this link like so...
#dynamicLink(
Html("#{routes.Controller.action()}"),
Html("MyID"),
Html("Click Me")
)
When I render it, I get...
<a id=
Html("\"" + (MyID) + "_" + scala.util.Random.nextInt.toString + "\"")
class="dynamicLink" href=#{routes.Controler.action()}> Click Me </a>
This is not what I want to render. I want to render this...
<a id="MyID_31734697" class="dynamicLink" href="/path/to/controller/action"> Click Me </a>
How do I make this HTML escape correctly?
* Take #2 - replacing Html params with String *
#(urlWithQuotes: String, id: String, toClickOn: String)
#uniqueId_With_Quotes() = {
Html("\"" + (#id) + "_" + scala.util.Random.nextInt.toString + "\"")
}
#defining(uniqueId_With_Quotes) { uniqueID =>
<a id=#uniqueID class="dynamicLink" href=#urlWithQuotes> #toClickOn </a>
...
}
With...
#dynamicLink2(
"#{routes.Controller.action()}",
"MyID",
"Click Me"
)
Renders...
<a id=
Html("\"" + (MyID) + "_" + scala.util.Random.nextInt.toString + "\"")
class="dynamicLink" href=#{routes.Controller.action()}> Click Me </a>
<script>
...
</script>
* Changing Html to String didn't work *
* Note that " #uniqueId_With_Quotes() " expands into " Html("\"" + (MyID) + "_" + scala.util.Random.nextInt.toString + "\"") ". I want it to actually execute string concatenation. *
Also, this should be obvious, but I want each link and the accompanying jquery to be rendered with an ID that is unique to that link and I don't want the controller to have to worry about assigning these unique id's. My way of doing that is by appending a random number to each id (although it might just be better for the view to have a count). I need to have this stateful behavior in the view because I need "dynamicLink" to be totally transparent to the controller.
Did you tried to use the variables as String types?
#( urlWithQuotes: String, id: String, toClick: String )
I find the solution. You have to pass a Call object.
#dynamicLink(
({routes.Controller.action()}),
"MyID",
"Click Me"
)
Pass those parameters into...
#(urlNoQuotes: Call, id: String = "", toClickOn: String = "")
#uniqueId_With_Quotes() = #{
Html("\"" + (id) + "_" + scala.util.Random.nextInt.toString + "\"")
}
#url() = #{
Html("\"" + urlNoQuotes + "\"")
}
#defining( url() ) { processedURL =>
#defining(uniqueId_With_Quotes()) { uniqueID =>
...
}
}
^ Now it works.

Leaflet - UTFGrid - add popup

I know it's a beginner question and probably very easy but I can't get it to work. I have a map with 2 utfgrids which show an information about bicycle and hiking routes. It is based on this example:
http://bl.ocks.org/milkbread/6449317
It works fine but I would like to change it this way. When hoovering the existing infobox should show up but when clicking on the route the popup should show up in the place where I clicked (with the same information that shows up in the infobox).
I tried different ways to apply it but I always get an error. Here's a link to my working webiste and a part of the code responsible for the infobox window.
http://wojtas82.zrujnowane.pl/utf2.html#15/54.5027/18.4886/osm-rowerowe-piesze
And the code:
utfGrid2.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();})
utfGrid1.on('mouseover', function(e){ info.update(e);}).on('mouseout', function(e){ info.update();})
var info = L.control();
info.options.position = 'bottomleft';
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = (props ?
'<img src="img/' + props.data.route +'_'+ props.data.osmc_color +'_'+ props.data.osmc_background +'_'+ props.data.osmc_foreground + '.png" ><br /> ' + "<b>" + props.data.name + "</b><br />" + 'Długość: ' + (props.data.distance ? props.data.distance : '') + ' km' + "<br />" + 'Opis szlaku: ' + (props.data.description ? props.data.description : '') : '');
};
I will be very greatful for help.
Thank you very much.
Have you tried using
L.popup for your popup? Something like
utfGrid1.on('click', function(e) {
if (e.data) {
L.popup()
.setLatLng(e.latlng)
.setContent(e ? '<img src="img/' + e.data.route + '_' + e.data.osmc_color + '_' + e.data.osmc_background + '_' + e.data.osmc_foreground + '.png" ><br /> ' + "<b>" + e.data.name + "</b><br />" + 'Długość: ' + (e.data.distance ? e.data.distance : '') + ' km' + "<br />" + 'Opis szlaku: ' + (e.data.description ? e.data.description : '')).openOn(map);
}
});

Displaying images in atom feed

I have problems with displaying images in atom file. It doesn't include images in feed in google reader, opera or firefox.
As a starting point I did everything like in Listing 6. at [An overview of the Atom 1.0 Syndication Format] But it doesn't work.
Update
It is not problem with hotlink protected images. Described here: How to display item photo in atom feed?
Later I changed feed according to description posted here.
I added:
<media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="path_to_image.jpg" />
But still it doesn't work
I had the same problem when trying to include images as enclosure, but it seemed that the easiest way for me was to include the image with the normal img tag to the html content.
(It's also wrapped in CDATA, which might affect the way Google Reader handles the content. I haven't tried without.)
The following example works for me to make atom feed images visible in Google Reader:
<content type="html">
<![CDATA[
<a href="http://test.lvh.me:3000/listings/341-test-pics?locale=en">
<img alt="test_pic" src="http://test.lvh.me:3000/system/images/20/medium/test_pic.jpg?1343246102" />
</a>
]]>
</content>
Wordpress uses the metafield enclosure to set the medias. This is the correct tag according to RSS specification. I have seen people suggest using media:content but if using that make sure to set the XML namespace for it.
Unfortunately due to some dodgy Wordpress code you can not set this dynamically. (Wordpress gets all metafields and then loops through them instead of calling the enclosure directly)
You can set the enclosure on save post. It should be an array with entries of the form "$url\n$length\n$type"
If you want to add the enclosure tags yourself you can do the following:
RSS
add_action( 'rss2_item', 'hughie_rss2_item_enclosure' );
function hughie_rss2_item_enclosure():void
{
$id = get_post_thumbnail_id();
$url = wp_get_attachment_url($id);
$length = filesize(get_attached_file($id));
$type = get_post_mime_type($id);
echo apply_filters( 'rss_enclosure', '<enclosure url="' . esc_url( $url ) . '" length="' . absint( $length ) . '" type="' . esc_attr( $type ) . '" />' . "\n" );
}
ATOM:
add_action( 'atom_entry', 'hughie_atom_entry_enclosure' );
function hughie_atom_entry_enclosure():void
{
$id = get_post_thumbnail_id();
$url = wp_get_attachment_url($id);
$length = filesize(get_attached_file($id));
$type = get_post_mime_type($id);
echo apply_filters( 'atom_enclosure', '<link rel="enclosure" href="' . esc_url( $url ) . '" length="' . absint( $length ) . '" type="' . esc_attr( $type ) . '" />' . "\n" );
}
The only way I found to set the enclosure dynamically is short-circuiting the get_metadata call. You can add checks to make sure that you are in a feed or even the check the stacktrace to make sure.
add_filter('get_post_metadata', 'hughie_get_post_metadata', 10, 5 );
function hughie_get_post_metadata($value, int $object_id, string $meta_key, bool $single, string $meta_type)
{
if (is_feed() && $meta_key === '') {
$backtrace = debug_backtrace();
if (isset($backtrace[7]['function']) && ( $backtrace[7]['function'] === 'rss_enclosure' || $backtrace[7]['function'] === 'atom_enclosure' ) ) {
if (!isset($value['enclosure'])) {
$value['enclosure'] = [];
}
$id = get_post_thumbnail_id();
$url = wp_get_attachment_url($id);
$length = filesize(get_attached_file($id));
$type = get_post_mime_type($id);
$value['enclosure'][] = "$url\n$length\n$type";
}
}
return $value;
}

need help Displaying more than 1 response from FQL query is_app_user Or Similar solutions

I am currently trying to get a list of friends who have added the same app via the FQL query.
I am actually doing this for a school project, and apparently, the server where this is going to be saved is not supported via PHP.That is why i am using the JavaScript SDK to code this.
This is actually the first time that I am doing a project in Facebook and everything is extremely new to me and having the graph api is not helping with me with any old documentations at all since many things have been changed and documentation is very scarce >.<.
Currently, I am having problems displaying multiple results (i am only able to do so if i hard code the response)
I've tried using a for loop to print the result but to no avail.
FB.api('/me', function(response) {
showLoader(false);
var query = FB.Data.query('SELECT uid, name, pic_square FROM user WHERE uid
IN (SELECT uid2 FROM friend WHERE uid1 = me()) AND is_app_user');
query.wait(function(rows) {
for(var i = 0; i< rows.length;i++)
{
document.getElementById('debug').innerHTML =
''+ rows[i].name +"<br />" + "<img src=\""+ rows[i].pic_square +"\" /><br />";
}
});
});
am i doing this wrong in any way? >.<. Any help would be reallllly great!!
Thanks!
Maybe it is the fact that you are stepping over what you are placing in the debug div. Try
document.getElementById('debug').innerHTML +=
Also, you do not have to have a for loop. You can have facebook do it for you by using their forEach function.
To get multiple results returned, I do this:
var linkquery = FB.Data.query('select owner, owner_comment, url from link where owner={0}', response.id);
FB.Data.waitOn([linkquery], function() {
FB.Array.forEach(linkquery.value, function(row) {
document.getElementById('debug').innerHTML += 'FQL Information: '+ "<br />" +
'Your name: ' + row.owner + "<br />" +
'Your comment: ' + row.owner_comment + "<br />" +
'Your link: ' + "<a href='" + row.url + "'>" + row.url + "</a><br /><br />";
});
});
The FB.Array.forEach gets each row.owner and they are being added to the debug div -
document.getElementById('debug').innerHTML +=
with each row that is returned.
Hope that helps