February 2007 – Page 6 – Weapon of Choice

2007-02-042018-06-14

HTML Recipe: Dashed Attributes

Another little improvement for the HTML recipe. This time is for properly highlighting attributes whose name contains a dash, like “http-equiv”. I also touched the tag rule, so that the DOCTYPE is recognized now:

/*
===============================================================================
Chili Recipe for the XHTML language
...............................................................................

Version: 1.5b - 2007/02 - http://noteslog.com/chili/

-------------------------------------------------------------------------------
Copyright (c) 2006 Andrea Ercolino
http://www.opensource.org/licenses/mit-license.php
===============================================================================
*/

{
	steps: {
		  mlcom : { exp: /<!--(?:.|n)*?-->/ }
		, tag   : { exp: /(?:<!?w+)|(?:>)|(?:</w+>)|(?:/>)/ }
		, aname : { exp: /s+[w-]+(?=s*=)/ }
        , avalue: { exp: /(["'])(?:(?:[^1\]*?(?:11|\.))*[^1\]*?)1/ }
		, entity: { exp: /&[w#]+?;/ }
	}
}

2007-02-022018-06-08

HTML Recipe: Multiline Attributes

Some days ago I discovered that an HTML tag can have attributes whose values span multiple lines. This is very useful when the value is a piece of javascript code, which in fact is immune to white space.

The HTML recipe I bundled to Chili 1.5 is a bit wrong, though, because it doesn’t consider that possibility. This is one that does:

/*  
===============================================================================
Chili Recipe for the HTML language
...............................................................................

Version: 1.5a - 2007/02 - http://noteslog.com/chili/

-------------------------------------------------------------------------------
Copyright (c) 2006 Andrea Ercolino
http://www.opensource.org/licenses/mit-license.php
===============================================================================
*/

{
	steps: {		
		  mlcom : { exp: /<!--(?:.|n)*?-->/ }
		, tag   : { exp: /(?:<w+)|(?:>)|(?:</w+>)|(?:/>)/ }
		, aname : { exp: /s+w+(?=s*=)/ }
        , avalue: { exp: /(["'])(?:(?:[^1\]*?(?:11|\.))*[^1\]*?)1/ }
		, entity: { exp: /&[w#]+?;/ }
	}
}

2007-02-012018-06-08

How to add a PunchCard to each WordPress post

What you find in the PunchCard Manual is valid in general for any html page and blog system, but if you need a 5 minutes guide for adding a properly formatted PunchCard to each WordPress post, here it is.

download PunchCard 1.2, and extract it to a local folder
locate the file jquery-1.1.1.pack.js and upload it to the remote folder / wp-content / jquery /
upload all the other files to the remote folder / wp-content / jquery / punchcard /

edit the remote file / wp-content / themes / default / header.php,
locate the </head> tag, add the following code right before it, and then close and save the file:

<script type="text/javascript" 
	src="<?php bloginfo('siteurl'); ?>/wp-content/jquery/jquery-1.1.1.pack.js">
	</script>

<script type="text/javascript" 
	src="<?php bloginfo('siteurl'); ?>/wp-content/jquery/punchcard/punchcard-1.2.pack.js">
	</script>

<script type="text/javascript">
PunchCard.icons = "/aercolino/punchcard/icons/";
PunchCard.styles = "<?php bloginfo('siteurl'); ?>/wp-content/jquery/punchcard/";
</script>

edit the remote file / wp-content / themes / default / index.php,
locate the <p class="postmetadata"> tag, add the following code right before it, and then close and save the file:

<?php 
ob_start();
the_title();
$title = ob_get_contents();
ob_clean();
the_permalink();
$permalink = ob_get_contents();
ob_end_clean();
?>

<div style="text-align:center;" class="pc_MINI"><div class="punchcard">
	<object>
	<param name="punchcard" value='{
		title: "<?php echo $title; ?>"
		, url: "<?php echo $permalink; ?>"
		, id : "<?php $pieces = explode( "?", $permalink ); echo $pieces[1]; ?>"
	}'/>
	</object>
</div></div>

That’s all.

you can repeat step 5. for the file / wp-content / themes / default / single.php
if you are not using the default theme, remember to appropriately change the path to the theme folder in the previous steps

Following this fast guide you’ll get a PunchCard at the bottom of each post, like mine. Each PunchCard will reference your post (title and URL).

Feel free to play with the PunchCard stylesheet and setup for customizing your punchcards.