Testing gist.github.com as a blog code pastebin
I’m new to github, so therefore I’m also new to gist. At first I couldn’t figure out what they were, but then I watched this great intro video by ByanL which explains it all quite well.
Github seems a bit too command line focused for my taste, but Gist looks useful by itself.
Below I’m going to embed the source for my Twitter Conversations test page, which I copied into my very first Gist – whoa! it loads immediately in the edit panel in Live Writer, nicely color-coded and everything. Nice!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>Twitter Conversations</title> | |
| <!-- Include jQuery --> | |
| <script type="text/javascript"> | |
| document.write(unescape("%3Cscript src='" + document.location.protocol + "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); | |
| document.write(unescape("%3Cscript src='" + document.location.protocol + "//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'%3E%3C/script%3E")); | |
| </script> | |
| <!--Get the base theme firectly from the SVN trunk (cheating, I know)--> | |
| <link type="text/css" href="http://jquery-ui.googlecode.com/svn/trunk/themes/base/ui.all.css" rel="Stylesheet" /> | |
| <style type="text/css"> | |
| img | |
| { | |
| border: 0px; | |
| } | |
| input | |
| { | |
| width: 75px; | |
| } | |
| .ui-datepicker | |
| { | |
| font-size: 62.5%; | |
| } | |
| #searchFrame | |
| { | |
| width: 840px; | |
| height: 600px; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| String.prototype.format = function(tokens) { | |
| ///<summary> | |
| ///This is an extension method for strings, using string or numeric tokens (e.g. {foo} or {0}) to format the string. | |
| ///<summary> | |
| ///<param name="tokens">One or more replacement values | |
| ///if a single object is passed, expects to match tokens with object property names, | |
| ///if a single string, number or boolean, replaces any and all tokens with the string | |
| ///if multiple arguments are passed, replaces numeric tokens with the arguments, in the order passed | |
| ///</param> | |
| ///<returns>the string with matched tokens replaced</returns> | |
| var text = this; | |
| try { | |
| if (!tokens) { | |
| retun this; | |
| } | |
| switch (arguments.length) { | |
| case 0: { | |
| return this; | |
| }; | |
| case 1: | |
| { | |
| switch (typeof tokens) { | |
| case "object": | |
| { | |
| //loop through all the properties in the object and replace tokens matching the names | |
| var token; | |
| for (token in tokens) { | |
| if (!tokens.hasOwnProperty(token) || typeof tokens[token] === 'function') { | |
| break; | |
| } | |
| //else | |
| text = text.replace(new RegExp("\\{" + token + "\\}", "gi"), tokens[token]) | |
| } | |
| return text; | |
| }; | |
| case "string": | |
| case "number": | |
| case "boolean": | |
| { | |
| return text.replace(/{[a-z0-9]*}/gi, tokens.toString()); | |
| }; | |
| default: | |
| return text; | |
| }; | |
| }; | |
| default: | |
| { | |
| //if multiple parameters, assume numeric tokens, where each number matches the argument position | |
| for (var i = 0; i < arguments.length; i++) { | |
| text = text.replace(new RegExp("\\{" + i + "\\}", "gi"), arguments[i].toString()); | |
| } | |
| return text; | |
| }; | |
| }; | |
| } catch (e) { | |
| return text; | |
| } | |
| }; | |
| //jQuery manipulations | |
| $(function() { | |
| //default values | |
| $("#p1").attr("value", "jaketapper"); | |
| $("#p2").attr("value", "senjohnmccain"); | |
| //add datepickers | |
| $("#d1").datepicker({altField: '#d1alt', altFormat: 'yy-mm-dd'}).change(function(){ | |
| if ($.trim($(this).val()) == "") $("#d1alt").val(""); | |
| }); | |
| $("#d2").datepicker({altField: '#d2alt', altFormat: 'yy-mm-dd'}).change(function(){ | |
| if ($.trim($(this).val()) == "") $("#d2alt").val(""); | |
| }); | |
| //Get the conversation | |
| $("#showConversation").click(function() { | |
| $("#results").empty(); | |
| var url = "http://search.twitter.com/search.json?q=from:{p1}+to:{p2}+OR+from:{p2}+to:{p1}&since={d1}&until={d2}&rpp=50".format({ | |
| p1: $("#p1").val(), | |
| p2: $("#p2").val(), | |
| d1: $("#d1alt").val(), | |
| d2: $("#d2alt").val() | |
| }); | |
| $("#results").html("Loading data from " + url + "..."); | |
| $.getJSON(url + "&callback=?", function(data) { | |
| $.each(data.results, function(i, result) { | |
| content = ' \ | |
| <p> \ | |
| <a href="http://twitter.com/{from_user}"><img src="{profile_image_url}" />{from_user}</a> \ | |
| (<a href="http://twitter.com/{from_user}/statuses/{id}">{created_at}</a>): \ | |
| {text} \ | |
| </p>'.format(result); | |
| $(content).appendTo("#results"); | |
| }); //each | |
| }); //callback | |
| }); //click | |
| }); //jQuery onReady | |
| </script> | |
| <p>Show conversation between <input id="p1" type="text" /> and <input id="p2" type="text" /></p> | |
| <p>(Optional, and slow...) Restrict to dates between <input id="d1" type="text" class="dates" /> and <input id="d2" type="text" class="dates" /> | |
| <input type="hidden" id="d1alt" /><input type="hidden" id="d2alt" /> | |
| </p> | |
| <p><button id="showConversation">Show Conversation</button></p> | |
| <div id="results"></div> | |
| Example query: http://search.twitter.com/search?q=from:jaketapper+to:senjohnmccain+OR+from:senjohnmccain+to:jaketapper&since=2009-06-16&until=2009-06-16&rpp=50 | |
| </body> | |
| </html> |
Thanks to Rob Conery for moving Subsonic 3 to github, which made me look in the first place. I’ll be using this.
Labels: experiment, howto, me-me-me, rant, tools
0 Comments:
Post a Comment
<< Home