Free Nodelet gets templating features

[tye]

I've hacked together some quick enhancements for the Free Nodelet. Go to Nodelet Settings and enable the Free Nodelet if you haven't already.

The main features are:

• No longer foul up square brackets in JavaScript inside HTML comments.
• A way to get JavaScript square brackets even outside of HTML comments.
• A way to "Add this node" similar to what the "Personal Nodelet" has, but more powerful.
• Simple templates for making interesting links like "How AnonyMonk sees this node" or "This node's author's most-recent write-ups".

This enhancement should be considered experimental, as it was a quick hack and a much better design may be proposed after we get more experience with it. But I wanted to actually deploy it so anyone could play with it in order to encourage feedback on how to improve it. So, please try it out, but realize that we might announce major changes sooner or later that may break some of what you write.

All of the features (except the first) are provided by a simple templating system that uses ` (backtick) as the only metacharacter. This was chosen because it is a character that is not useful in JavaScript nor HTML.

Only in the Free Nodelet, `id` gets replaced with the current node's node_id. `title` gets replaced with the current node's title. If using the title in HTML (almost always), use `title&` instead to get the title with &, <, >, [, and ] characters escaped as HTML entities. To use a title in a URL, use `title%` to have it URL-escaped (using %xx).

The following items get expanded if put between a pair of backticks (`) in the Free Nodelet:

• id - current node's ID
• title - current node's title
• author_id - current node's author's user ID number
• author_name - current node's author's name
• author_title - same as author_name ("title" of their home node)
• user_id - your ID (useful for writing macros that another user can paste into their nodelet)
• user_name - your monk name
• user_title - same as user_name
• _arg - the value of the CGI parameter '_arg' or 'arg' ("arg" can be anything, but the leading _ is required).

Each of the above can have a & or % on the end (just before the closing backtick). Other items like root_id, root_title, sect_id, and sect_title may be added in future. You don't need to use & nor % on *id items, since they expand to just digits and digits don't need to be escaped.

The above expansions happen before [...] links are processed, so you can make a link like [id://`id`|Bookmark node `id`].

The following substitutions are also made:

• `[ becomes [
• `] becomes ]
• `` becomes `
• ``` becomes ``
• ```` becomes ```
• etc.

Note that `[ gets expanded in such a way that the resulting [ will not be processed as a PerlMonk's link specification. So the resulting [ can be part of some JavaScript. Inside of HTML comments, either `[ or just [ can be used.

Note that "HTML comments" at PerlMonks simply start with "<!--" and simply end with "-->". In real HTML comments, whitespace is allowed inside these start/end sequences and occurrences of "--" inside the comments have special meaning. Since the Free Nodelet's HTML is not filtered by PerlMonks, if you put "--" inside your HTML comments there, you might "confuse" your browser, but PerlMonks doesn't care about any appearances of "--" in your HTML comments when it comes to deciding where to not process [...] as a link.

A `_foo` gets expanded to whatever the _foo parameter was set to in the URL (or POST) used to fetch the page, such as via ;_foo=bar. If the no "_foo" parameter exists, then the value of the "foo" parameter is used instead. If not even a "foo" parameter exists, then the item is left as `_foo`, just as is done with any unrecognized template-like item.

Below I'll include a couple of annoted examples of how to use these features and even the source code I used to implement the features. I look forward to your feedback.

[tye]

Here is a simple example of how to use (part of) your Free Nodelet to collect links to nodes, just like the Personal Nodelet can do. Go to Free Nodelet Settings and paste this into your Free Nodelet:

<ul>
<!--todo-<li>[id://`id`]
</li>-->
</ul>
[href://?node_id=`id`;op=_freer;at=todo|Add]
"`title&`" above.

Read more... (3 kB)

Then the node gets displayed to the browser with the newly updated Free Nodelet.

[tye]

Here we have a more advanced example to show more of the power available.

Paste the following into your Free Nodelet (at Free Nodelet Settings) and you'll have a numbered list of favorite nodes where you can add nodes either to the top of the list or the bottom:

[href://?node_id=`author_id`;op=_freer;at=first;_id=`id`|
`author_name&` rocks!]
<ol>
<!--<li>[id://`_id`] by `title&`
</li>-first-->
<!--last-<li>[id://`_id`] by `_who&`
</li>-->
</ol>
[href://?node=free nodelet settings;op=_freer;at=last;_id=`id`;_who=`a
+uthor_name%`|
Append `author_name&` above]

Read more... (3 kB)

So click the first link to add the current node to the top of your numbered list and jump to the author's node. Click on the second link to add the current node to the bottom of your numbered list and jump to Free Nodelet Settings in case you want to move it up higher in the list or otherwise adjust your Free Nodelet contents.

Updated: s/User Settings/Free Nodelet Settings/g.

[tye]

First, here is the updated (again) code for the Free Nodelet:

[%
    my $html = $VARS->{freenodelet}
      ||  'Visit [Free Nodelet Settings]'
         .' to enter HTML to go here.';
    $html= htmlcode( 'expandfreenodelet','', $html );
    return $html;
%]

Next, is the expandfreenodelet code that gets used above and below:

Read more... (2 kB)

Finally, here is the _freer opcode:

Read more... (919 Bytes)

[naChoZ]

Just in case this helps anyone trying out various things in their freenode, you may find my little snippet useful: pm-freenode-update.pl

[ikegami]

Oddly enough for templating features destined to be used in JavaScript, there's no modifier to interpolate a variable (say `title`) as a JavaScript literal.

For example, neither

var title = '`title`';  # Fails for titles containing ' or \.

nor

var title = "`title`";  # Fails for titles containing " or \.

work for all titles. The workaround:

var title = decodeURIComponent('`title%`');

Update: tye suggested `title"` in a later post.

[imp]

The templating is a nice addition. To satisfy my curiosity on people's XP changes I added the following, which displays a link to the XP Graph for the author of the current node:

`author_name` 
<a href="http://tinymicros.com/pm/index.php?goto=PlotChart&start=0&nod
+eid=`author_id`">
XP Graph
</a><br>