adding a caption block to custom syntax highlighting blocks and giving the example blocks some baseline styling. update ajax content to reflect new example convention (and remove redundant header from content)

Author: ajpiano

Rules

@@ -27,15 +27,15 @@ class Nanoc3::Filter
       languages = LANGUAGES.keys.join("|")
 
       until @string.empty?
-        match = scan_until /(\+(\S.*?\S?)\+|<(#{languages})(?: filename=["']([^"']*)["'])?>|\z)/m
+        match = scan_until /(\+(\S.*?\S?)\+|<(#{languages})(?: filename=["']([^"']*)["'])?(?: caption=["']([^"']*)["'])?>|\z)/m
 
         @pending << match.pre_match
 
         if match[2]    # +foo+
           @pending << "<notextile><tt>#{CGI.escapeHTML(match[2])}</tt></notextile>" if match[2]
         elsif match[3] # <language>
           flush
-          generate_brushes match[3], LANGUAGES[match[3]], match[4]
+          generate_brushes match[3], LANGUAGES[match[3]], match[4], match[5]
         end
       end
 
@@ -51,12 +51,14 @@ class Nanoc3::Filter
       match
     end
 
-    def generate_brushes(tag, replace, filename)
+    def generate_brushes(tag, replace, filename, caption)
       match = scan_until %r{</#{tag}>}
-      @output << %{<div class="code_container">\n}
+      @output << %{<div class="example">\n}
       @output << %{<div class="filename">#{filename}</div>\n} if filename
-      @output << %{<pre class="brush: #{replace}; gutter: false; toolbar: false">\n} <<
-                 CGI.escapeHTML(match.pre_match) << %{</pre></div>}
+      @output << %{<pre class="brush: #{replace}; gutter: false; toolbar: false"><code>} <<
+                 CGI.escapeHTML(match.pre_match) << %{</code></pre>}
+      @output << %{<div class="caption">#{caption}</div>\n} if caption
+      @output << %{</div>\n}
     end
 
     def flush
@@ -96,7 +98,6 @@ end
 compile '*' do
   filter :code_blocks
   filter filters[item[:extension].to_sym] || item[:extension].to_sym
-  p item.identifier
   if item[:homepage]
     layout 'home'
   elsif item.identifier.match /\/dex\/$/

content/ajax/ajax-and-forms.md

@@ -4,8 +4,6 @@ section : 4
 title   : Ajax and Forms
 attribution:  jQuery Fundamentals
 ---
-## Ajax and Forms
-
 jQuery’s ajax capabilities can be especially useful when dealing with forms.
 The [jQuery Form Plugin](http://jquery.malsup.com/form/) is a well-tested tool
 for adding Ajax capabilities to forms, and you should generally use it for
@@ -14,20 +12,16 @@ anything remotely complex.  That said, there are a two jQuery methods you
 should know that relate to form processing in jQuery: `$.fn.serialize` and
 `$.fn.serializeArray`.
 
-<div class="example" markdown="1">
-Turning form data into a query string
-
-    $('#myForm').serialize();
-</div>
-
-<div class="example" markdown="1">
-Creating an array of objects containing form data
+<javascript caption="Turning form data into a query string">
+$('#myForm').serialize();
+</javascript>
 
-    $('#myForm').serializeArray();
+<javascript caption="Creating an array of objects containing form data">
+$('#myForm').serializeArray();
 
-    // creates a structure like this:
-    [
-        { name : 'field1', value : 123 },
-        { name : 'field2', value : 'hello world' }
-    ]
-</div>
+// creates a structure like this:
+[
+  { name : 'field1', value : 123 },
+  { name : 'field2', value : 'hello world' }
+]
+</javascript>

content/ajax/ajax-events.md

@@ -4,19 +4,14 @@ section : 6
 title   : Ajax Events
 attribution:  jQuery Fundamentals
 ---
-## Ajax Events
-
 Often, you’ll want to perform an operation whenever an Ajax requests starts or
 stops, such as showing or hiding a loading indicator.  Rather than defining
 this behavior inside every Ajax request, you can bind Ajax events to elements
 just like you'd bind other events.  For a complete list of Ajax events, visit
-[http://docs.jquery.com/Ajax_Events](http://docs.jquery.com/Ajax_Events "Ajax
-Events documentation on docs.jquery.com").
-
-Setting up a loading indicator using Ajax Events
+[ Ajax Events documentation on docs.jquery.com ]( http://docs.jquery.com/Ajax_Events ).
 
-<javascript>
+<javascript caption="Setting up a loading indicator using Ajax Events">
 $('#loading_indicator')
-    .ajaxStart(function() { $(this).show(); })
-    .ajaxStop(function() { $(this).hide(); });
+  .ajaxStart(function() { $(this).show(); })
+  .ajaxStop(function() { $(this).hide(); });
 </javascript>

content/ajax/ajax-excercises.md

@@ -4,8 +4,6 @@ section : 7
 title   : Exercises
 attribution:  jQuery Fundamentals
 ---
-## Exercises
-
 ### Load External Content
 
 Open the file `/exercises/index.html` in your browser. Use the file
@@ -24,11 +22,11 @@ need to leverage the href of that link to get the proper content from
 blog.html.  Once you have the href, here's one way to process it into an ID
 that you can use as a selector in `$.fn.load`:
 
-<div class="example" markdown="1">
-    var href = 'blog.html#post1';
-    var tempArray = href.split('#');
-    var id = '#' + tempArray[1];
-</div>
+<javascript>
+  var href = 'blog.html#post1';
+  var tempArray = href.split('#');
+  var id = '#' + tempArray[1];
+</javascript>
 
 Remember to make liberal use of `console.log` to make sure you're on the right
 path!

content/ajax/jquery-ajax-methods.md

@@ -4,8 +4,6 @@ section : 3
 title   : jQuery's Ajax-Related Methods
 attribution:  jQuery Fundamentals
 ---
-## jQuery's Ajax-Related Methods
-
 While jQuery does offer many Ajax-related convenience methods, the core
 `$.ajax` method is at the heart of all of them, and understanding it is
 imperative.  We'll review it first, and then touch briefly on the convenience
@@ -27,44 +25,42 @@ documentation of the configuration options, visit
 [http://api.jquery.com/jQuery.ajax/](http://api.jquery.com/jQuery.ajax/ "$.ajax
 documentation on api.jquery.com").
 
-<div class="example" markdown="1">
-Using the core `$.ajax` method
-
-    $.ajax({
-        // the URL for the request
-        url : 'post.php',
-
-        // the data to send
-        // (will be converted to a query string)
-        data : { id : 123 },
-
-        // whether this is a POST or GET request
-        type : 'GET',
-
-        // the type of data we expect back
-        dataType : 'json',
-
-        // code to run if the request succeeds;
-        // the response is passed to the function
-        success : function(json) {
-            $('&lt;h1/>').text(json.title).appendTo('body');
-            $('&lt;div class="content"/>')
-                .html(json.html).appendTo('body');
-        },
-
-        // code to run if the request fails;
-        // the raw request and status codes are
-        // passed to the function
-        error : function(xhr, status) {
-            alert('Sorry, there was a problem!');
-        },
-
-        // code to run regardless of success or failure
-        complete : function(xhr, status) {
-            alert('The request is complete!');
-        }
-    });
-</div>
+<javascript caption="Using the core `$.ajax` method">
+$.ajax({
+    // the URL for the request
+    url : 'post.php',
+
+    // the data to send
+    // (will be converted to a query string)
+    data : { id : 123 },
+
+    // whether this is a POST or GET request
+    type : 'GET',
+
+    // the type of data we expect back
+    dataType : 'json',
+
+    // code to run if the request succeeds;
+    // the response is passed to the function
+    success : function(json) {
+        $('&lt;h1/>').text(json.title).appendTo('body');
+        $('&lt;div class="content"/>')
+            .html(json.html).appendTo('body');
+    },
+
+    // code to run if the request fails;
+    // the raw request and status codes are
+    // passed to the function
+    error : function(xhr, status) {
+        alert('Sorry, there was a problem!');
+    },
+
+    // code to run regardless of success or failure
+    complete : function(xhr, status) {
+        alert('The request is complete!');
+    }
+});
+</javascript>
 
 <div class="note" markdown="1">
 ### Note
@@ -220,26 +216,24 @@ The type of data you expect back from the server. Optional.
 This option is only applicable for methods that don't already specify the data
 type in their name.  </div>
 
-<div class="example" markdown="1">
-Using jQuery's Ajax convenience methods
-
-    // get plain text or html
-    $.get('/users.php', { userId : 1234 }, function(resp) {
-        console.log(resp);
-    });
-
-    // add a script to the page, then run a function defined in it
-    $.getScript('/static/js/myScript.js', function() {
-        functionFromMyScript();
-    });
-
-    // get JSON-formatted data from the server
-    $.getJSON('/details.php', function(resp) {
-        $.each(resp, function(k, v) {
-            console.log(k + ' : ' + v);
-        });
-    });
-</div>
+<javascript caption="Using jQuery's Ajax convenience methods">
+// get plain text or html
+$.get('/users.php', { userId : 1234 }, function(resp) {
+  console.log(resp);
+});
+
+// add a script to the page, then run a function defined in it
+$.getScript('/static/js/myScript.js', function() {
+  functionFromMyScript();
+});
+
+// get JSON-formatted data from the server
+$.getJSON('/details.php', function(resp) {
+  $.each(resp, function(k, v) {
+    console.log(k + ' : ' + v);
+  });
+});
+</javascript>
 
 ### `$.fn.load`
 
@@ -249,16 +243,12 @@ uses the returned HTML to populate the selected element(s).  In addition to
 providing a URL to the method, you can optionally provide a selector; jQuery
 will fetch only the matching content from the returned HTML.
 
-<div class="example" markdown="1">
-Using `$.fn.load` to populate an element
+<javascript caption="Using `$.fn.load` to populate an element">
+$('#newContent').load('/foo.html');
+</javascript>
 
-    $('#newContent').load('/foo.html');
-</div>
-
-<div class="example" markdown="1">
-Using `$.fn.load` to populate an element based on a selector
-
-    $('#newContent').load('/foo.html #myDiv h1:first', function(html) {
-      alert('Content updated!');
-    });
-</div>
+<javascript caption="Using `$.fn.load` to populate an element based on a selector">
+$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
+  alert('Content updated!');
+});
+</javascript>

content/ajax/key-concepts.md

@@ -4,8 +4,6 @@ section : 2
 title   : Key Concepts
 attribution:  jQuery Fundamentals
 ---
-## Key Concepts
-
 Proper use of Ajax-related jQuery methods requires understanding some key
 concepts first.
 
@@ -78,19 +76,19 @@ Ajax calls are asynchronous by default, the response is not immediately
 available.  Responses can only be handled using a callback.  So, for example,
 the following code will not work:
 
-<div class="example" markdown="1">
+<javascript>
     var response;
     $.get('foo.php', function(r) { response = r; });
     console.log(response); // undefined!
-</div>
+</javascript>
 
 Instead, we need to pass a callback function to our request; this callback will
 run when the request succeeds, at which point we can access the data that it
 returned, if any.
 
-<div class="example" markdown="1">
+<javascript>
     $.get('foo.php', function(response) { console.log(response); });
-</div>
+</javascript>
 
 ### Same-Origin Policy and JSONP
 

content/ajax/working-with-jsonp.md

@@ -4,40 +4,36 @@ section : 5
 title   : Working with JSONP
 attribution:  jQuery Fundamentals
 ---
-## Working with JSONP
-
 The advent of JSONP — essentially a consensual cross-site scripting hack — has
 opened the door to powerful mashups of content.  Many prominent sites provide
 JSONP services, allowing you access to their content via a predefined API.  A
 particularly great source of JSONP-formatted data is the [Yahoo! Query
 Language](http://developer.yahoo.com/yql/console/), which we'll use in the
 following example to fetch news about cats.
 
-<div class="example" markdown="1">
-Using YQL and JSONP
-
-    $.ajax({
-        url : 'http://query.yahooapis.com/v1/public/yql',
-
-        // the name of the callback parameter,
-        // as specified by the YQL service
-        jsonp : 'callback',
-
-        // tell jQuery we're expecting JSONP
-        dataType : 'jsonp',
-
-        // tell YQL what we want and that we want JSON
-        data : {
-            q : 'select title,abstract,url from search.news where query="cat"',
-            format : 'json'
-        },
-
-        // work with the response
-        success : function(response) {
-            console.log(response);
-        }
-    });
-</div>
+<javscript caption="Using YQL and JSONP">
+$.ajax({
+  url : 'http://query.yahooapis.com/v1/public/yql',
+
+  // the name of the callback parameter,
+  // as specified by the YQL service
+  jsonp : 'callback',
+
+  // tell jQuery we're expecting JSONP
+  dataType : 'jsonp',
+
+  // tell YQL what we want and that we want JSON
+  data : {
+    q : 'select title,abstract,url from search.news where query="cat"',
+    format : 'json'
+  },
+
+  // work with the response
+  success : function(response) {
+    console.log(response);
+  }
+});
+</javscript>
 
 jQuery handles all the complex aspects of JSONP behind-the-scenes — all we have
 to do is tell jQuery the name of the JSONP callback parameter specified by YQL