Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: dv/hookscope
base: fdc9e24d48
...
head fork: dv/hookscope
compare: a08bbf1a69
Checking mergeability… Don't worry, you can still create the pull request.
  • 4 commits
  • 7 files changed
  • 0 commit comments
  • 1 contributor
Commits on Jan 18, 2012
@dv Ignore run.sh 5f37f9b
@dv Move static files to /static 9b209bc
Commits on Jan 19, 2012
@dv Fix persistence not receiving requests 27e3caa
@dv Design Update
Humanized dates, nice sliding action of new requests, and a bit more
description. Also moved JS logic to seperate file.
a08bbf1
View
1  .gitignore
@@ -1 +1,2 @@
node_modules
+run.sh
View
2  config.js
@@ -44,7 +44,7 @@ exports.config = {
"polling duration": 10 },
// The directory from which to serve the static files
- webRoot: path.join(path.dirname(__filename), '')
+ webRoot: path.join(path.dirname(__filename), 'static')
}
View
2  main.js
@@ -90,7 +90,7 @@ if (config.persist) {
persistence.touch(channel);
});
- sockets.on("publish", function(channel, data) {
+ sockets.on("request", function(channel, data) {
persistence.pushRequest(channel, data);
});
View
66 index.html → static/hookscope.js
@@ -1,53 +1,3 @@
-<html>
-<head>
- <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
- <script src="/socket.io/socket.io.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
- <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
- <script type="text/x-jquery-tmpl" id="request-tmpl">
- <li>
- <table>
- <tr>
- <td>${method} ${url.href}</td>
- </tr>
- <tr>
- <td><em>${datetime}</em></td>
- </tr>
- </table>
- </li>
- </script>
-</head>
-<body>
-
- <div class="container">
-
- <div class="content">
- <div class="page-header">
- <h1>HookScope <small>Debugging Webhooks</small></h1>
- </div>
- <div class="row">
- <div class="span10">
- <h2>Requests received.</h2>
- <ul id="requests">
- </ul>
- </div>
- <div class="span4">
- <h3>Status (<span data-label="channelname">...</span>)</h3>
- <span data-label="status">Connecting...</span>
- <h4>URL:</h4>
- <span data-label="url"></span>
- <a id="clear" href="#">clear</a>
- </div>
- </div>
- </div>
- <footer>
- <p>&copy; David Verhasselt 2011</p>
- </footer>
-
- </div> <!-- /container -->
-
- <script>
function label(value) {
return $("[data-label=" + value + "]");
}
@@ -61,15 +11,15 @@
label("channelname").html(window.location.hash);
- var socket = io.connect();
+ var socket = io.connect();
socket.on('connect', function() {
- label("status").html("Connected.");
+ label("status").html("connected");
socket.emit("set channel", window.location.hash.slice(1));
});
socket.on('disconnect', function() {
- label("status").html("Disconnected.");
+ label("status").html("disconnected");
});
socket.on('history', function(data) {
@@ -77,11 +27,15 @@
if (console) { console.log(data[i]); }
$("#request-tmpl").tmpl(data[i]).appendTo("#requests");
}
+
+ $(".easydate").easydate();
});
socket.on('request', function(data) {
console.log(data);
- $("#request-tmpl").tmpl(data).hide().prependTo("#requests").animate({ opacity: 'toggle', height: 'toggle' }, "slow");
+ $("#request-tmpl").tmpl(data).hide().prependTo("#requests").show("customSlide", { direction: "up" }, 1000);
+
+ $(".easydate").easydate();
});
socket.on('setUrls', function(urls) {
@@ -122,6 +76,4 @@
word += i*2<length-1 ? randVowel : '';
}
return word;
- }
- </script>
-</body>
+ }
View
119 static/index.html
@@ -0,0 +1,119 @@
+<html>
+<head>
+ <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
+ <script src="/socket.io/socket.io.js"></script>
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+ <script src="jquery.customslide.js"></script>
+ <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
+ <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js"></script>
+ <script src="jquery.easydate-0.2.4.min.js"></script>
+ <script src="hookscope.js"></script>
+ <style type="text/css">
+ body {
+ padding-top: 60px;
+ }
+ </style>
+ <script type="text/x-jquery-tmpl" id="request-tmpl-old">
+ <li>
+ <table>
+ <tr>
+ <td>${method} ${url.href}</td>
+ </tr>
+ <tr>
+ <td><em>${datetime}</em></td>
+ </tr>
+ </table>
+ </li>
+ </script>
+
+ <script type="text/x-jquery-tmpl" id="request-tmpl">
+ <div class="row">
+ <div class="span4">
+ <h2>${method}</h2>
+ <p>
+ <code class="easydate">${datetime}</code>
+ <code>http/${httpVersion}</code>
+ </p>
+ </div>
+ <div class="span12">
+ <h3>${url.href}</h3>
+ <p>To include a blockquote, wrap <code>&lt;blockquote&gt;</code> around <code>&lt;p&gt;</code> and <code>&lt;small&gt;</code> tags. Use the <code>&lt;small&gt;</code> element to cite your source and youll get an em dash <code>&amp;mdash;</code> before it.</p>
+ <blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+ <small>Dr. Julius Hibbert</small>
+ </blockquote>
+<pre class="prettyprint linenums">
+&lt;blockquote&gt;
+ &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.&lt;/p&gt;
+ &lt;small&gt;Dr. Julius Hibbert&lt;/small&gt;
+&lt;/blockquote&gt;
+</pre>
+ </div>
+ </div>
+ </script>
+
+
+</head>
+<body>
+
+ <div class="topbar">
+ <div class="fill">
+ <div class="container">
+ <a class="brand" href="#">Hookscope</a>
+ <ul class="nav">
+ <li><a href="#" data-label="channelname"></a></li>
+ <li class="active"><a href="#">Channel</a></li>
+ <li><a href="https://github.com/dv/hookscope">About</a></li>
+ <li><a href="mailto:david@crowdway.com">Contact</a></li>
+ </ul>
+ <ul class="nav secondary-nav">
+ <li><a href="#">Listening to <span data-label="url"></span></a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+
+
+
+ <div class="container">
+
+ <section id="requests">
+ </section>
+
+ <div class="hero-unit">
+ <h1>Webhook Debugging</h1>
+ <p>Working with webhooks is awesome, but sometimes it's hard to know what data is sent along. Use Hookscope to find out!</p>
+ <p><a class="btn primary large">Learn more &raquo;</a></p>
+ </div>
+
+ <div class="row">
+ <div class="span6">
+ <h2>Localhost</h2>
+ <p>Hookscope is very easy to set up on your own PC. The only thing you need is Node.js. If you want the requestlog to persist when you shut down the page, you can use an optional Redis database, but Hookscope works fine without as well.</p>
+ <p><a class="btn" href="#">View details &raquo;</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heroku</h2>
+ <p>Hookscope has sensible default settings out of the box and runs straight from Github on Heroku. You can just do a pull+push. If you add the Redis-To-Go Heroku Add-on, Hookscope will automatically detect and use it to save and receive requests without having to be opened in a browser.</p>
+ <p><a class="btn" href="#">View details &raquo;</a></p>
+ </div>
+ <div class="span5">
+ <h2>Heading</h2>
+ <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+ <p><a class="btn" href="#">View details &raquo;</a></p>
+ </div>
+ </div>
+ <footer>
+ <p>&copy; David Verhasselt 2011</p>
+ |
+ <span data-label="status">connecting...</span>
+ </footer>
+
+ </div> <!-- /container -->
+
+ <script>
+
+ </script>
+</body>
View
56 static/jquery.customslide.js
@@ -0,0 +1,56 @@
+// Thanks to "jnn" for this code
+// http://stackoverflow.com/a/7266950/154399
+$.effects.customSlide = function(o) {
+
+ return this.queue(function() {
+
+ // Create element
+ var el = $(this),
+ props = ['position', 'top', 'bottom', 'left', 'right'];
+
+ // Set options
+ var mode = $.effects.setMode(el, o.options.mode || 'show'); // Set Mode
+ var direction = o.options.direction || 'left'; // Default Direction
+ // Adjust
+ $.effects.save(el, props);
+ el.show(); // Save & Show
+ $.effects.createWrapper(el).css({
+ overflow: 'hidden'
+ }); // Create Wrapper
+ var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
+ var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
+ var distance = o.options.distance || (ref == 'top' ? el.outerHeight({
+ margin: true
+ }) : el.outerWidth({
+ margin: true
+ }));
+ if (mode == 'show') el.parent().css('height', 0);
+
+ if (mode == 'show') el.css(ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance); // Shift
+ // Animation
+ var animation = {};
+ animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
+
+ el.parent().animate({
+ height: (mode == 'show' ? distance : 0)
+ }, {
+ queue: false,
+ duration: o.duration,
+ easing: o.options.easing
+ });
+ el.animate(animation, {
+ queue: false,
+ duration: o.duration,
+ easing: o.options.easing,
+ complete: function() {
+ if (mode == 'hide') el.hide(); // Hide
+ $.effects.restore(el, props);
+ $.effects.removeWrapper(el); // Restore
+ if (o.callback) o.callback.apply(this, arguments); // Callback
+ el.dequeue();
+ }
+ });
+
+ });
+
+};
View
6 static/jquery.easydate-0.2.4.min.js
@@ -0,0 +1,6 @@
+/*
+ * jQuery EasyDate 0.2.4 ($Rev: 54 $)
+ * Copyright (c) 2009 Parsha Pourkhomami (parshap@gmail.com)
+ * Licensed under the MIT license.
+ */
+(function(e){e.easydate={};e.easydate.locales={};e.easydate.locales.enUS={future_format:"%s %t",past_format:"%t %s",second:"second",seconds:"seconds",minute:"minute",minutes:"minutes",hour:"hour",hours:"hours",day:"day",days:"days",week:"week",weeks:"weeks",month:"month",months:"months",year:"year",years:"years",yesterday:"yesterday",tomorrow:"tomorrow",now:"just now",ago:"ago","in":"in"};var d={live:true,set_title:true,format_future:true,format_past:true,units:[{name:"now",limit:5},{name:"second",limit:60,in_seconds:1},{name:"minute",limit:3600,in_seconds:60},{name:"hour",limit:86400,in_seconds:3600},{name:"yesterday",limit:172800,past_only:true},{name:"tomorrow",limit:172800,future_only:true},{name:"day",limit:604800,in_seconds:86400},{name:"week",limit:2629743,in_seconds:604800},{name:"month",limit:31556926,in_seconds:2629743},{name:"year",limit:Infinity,in_seconds:31556926}],uneasy_format:function(p){return p.toLocaleDateString()},locale:e.easydate.locales.enUS};var f=0;var k={};var h={};var a={};function l(r,q,p){if(!isNaN(q)&&q!=1){r=r+"s"}return p.locale[r]||r}var o=e.easydate.pause=function(q){var s=function(p){clearTimeout(k[p]);delete k[p];h[p]=true};if(!q){for(var r in k){s(r)}}else{e(q).each(function(){var p=jQuery.data(this);if(!isNaN(k[p])){s(p)}})}};var c=e.easydate.resume=function(p){var s=function(r){delete h[r];b(a[r])};if(!p){for(var q in h){s(q)}}else{e(p).each(function(){var r=jQuery.data(this);if(!isNaN(h[r])){s(r)}})}};var g=e.easydate.set_now=function(q){var r;if(q instanceof Date){r=q.getTime()}else{r=Date.parse(q)}if(isNaN(r)){return}f=r-(new Date()).getTime();for(var p in a){if(!isNaN[k[p]]){clearTimeout(k[p])}b(a[p])}};var n=e.easydate.get_now=function(){var p=new Date();p.setTime(p.getTime()+f);return p};var j=e.easydate.format_date=function(q,x){var r=e.extend({},d,x);var v=((n().getTime()-q.getTime())/1000);var u=Math.abs(v);if(isNaN(v)){return}if((!r.format_future&&v<0)||(!r.format_past&&v>0)){return}for(var s in r.units){var w=r.units[s];if((w.past_only&&v<0)||(w.future_only&&v>0)){continue}if(u<w.limit){if(isNaN(w.in_seconds)){return l(w.name,NaN,r)}var p=u/w.in_seconds;p=Math.round(p);var t;if(v<0){t=l("future_format",NaN,r).replace("%s",l("in",NaN,r))}else{t=l("past_format",NaN,r).replace("%s",l("ago",NaN,r))}return t.replace("%t",p+" "+l(w.name,p,r))}}return r.uneasy_format(q)};function m(r,t){var q=n();var w=((q.getTime()-r.getTime())/1000);var p=Math.abs(w);if(isNaN(w)){return}var v=0;for(var s in t.units){var u=t.units[s];if((u.past_only&&w<0)||(u.future_only&&w>0)){continue}if(p<u.limit){if(isNaN(u.in_seconds)){if(w<0){return(v-p)*1000+100}else{return(u.limit-p)*1000+100}}else{if(w<0){return(p%u.in_seconds)*1000+100}else{return(u.in_seconds-(p%u.in_seconds))*1000+100}}}v=u.limit}if(w<0){for(var s=t.units.length-1;s>=0;s--){var u=t.units[s];if(u.past_only){continue}return(u.limit-p)*1000+100}}}function i(q,r){var p=q.data("easydate.date");if(isNaN(p)){var s;var t=Date.parse(s=q.attr("title"))||Date.parse(s=q.html());if(!isNaN(t)){p=new Date();p.setTime(t);q.data("easydate.date",p);if(r.set_title&&!q.attr("title")){q.attr("title",s)}}}return p}function b(r){var s=r.data("easydate.settings");var p=e.data(r[0]);a[p]=r;delete k[p];var q=i(r,s);if(isNaN(q)){return}r.html(j(q,s));if(s.live){var t=m(q,s);if(!isNaN(t)){if(t>2147483647){t=2147483647}var u=setTimeout(function(){b(r)},Math.round(t));k[p]=u}}}e.fn.easydate=function(p){var q=e.extend({},d,p);this.data("easydate.settings",q);this.removeData("easydate.date");this.each(function(){var r=e.data(this);if(!isNaN(k[r])){clearTimeout(k[r]);delete k[r]}b(e(this))})}})(jQuery);

No commit comments for this range

Something went wrong with that request. Please try again.