Initial commit

.gitignore

@@ -0,0 +1 @@
+output/

Rakefile

@@ -0,0 +1 @@
+require 'nanoc3/tasks'

Rules

@@ -0,0 +1,105 @@
+#!/usr/bin/env ruby
+
+# A few helpful tips about the Rules file:
+#
+# * The order of rules is important: for each item, only the first matching
+#   rule is applied.
+#
+# * Item identifiers start and end with a slash (e.g. “/about/” for the file
+#   “content/about.html”). To select all children, grandchildren, … of an
+#   item, use the pattern “/about/*/”; “/about/*” will also select the parent,
+#   because “*” matches zero or more characters.
+
+require "cgi"
+
+class Nanoc3::Filter
+  class CodeBlocks < Nanoc3::Filter
+    LANGUAGES = { "ruby" => "ruby", "sql" => "sql", "javascript" => "javascript",
+                  "css" => "css", "plain" => "plain", "erb" => "ruby; html-script: true",
+                  "html" => "xml", "xml" => "xml", "shell" => "plain", "yaml" => "yaml" }
+
+    def run(content, params={})
+      @string = content.dup
+
+      @output = ""
+      @pending = ""
+
+      languages = LANGUAGES.keys.join("|")
+
+      until @string.empty?
+        match = scan_until /(\+(\S.*?\S?)\+|<(#{languages})(?: filename=["']([^"']*)["'])?>|\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]
+        end
+      end
+
+      flush
+
+      @output
+    end
+
+    def scan_until(regex)
+      match = @string.match(regex)
+      return unless match
+      @string = match.post_match
+      match
+    end
+
+    def generate_brushes(tag, replace, filename)
+      match = scan_until %r{</#{tag}>}
+      @output << %{<div class="code_container">\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>}
+    end
+
+    def flush
+      @output << @pending
+      @pending = ""
+    end
+  end
+end
+
+Nanoc3::Filter.register 'CodeBlocks',        :code_blocks
+
+
+
+compile '/assets/*' do
+  # don’t filter or layout
+end
+
+compile '/images/*' do
+end
+
+filters = {
+  :markdown => :kramdown,
+  :md => :kramdown,
+  :html => :erb
+}
+
+compile '*' do
+  filter :code_blocks
+  filter filters[item[:extension].to_sym] || item[:extension].to_sym
+  layout 'default'
+end
+
+route '*' do
+  p [item.identifier, item[:extension], item.binary?]
+  if item.binary? || item[:extension] == 'css' || item[:extension] =~ /\.js$/
+    # /foo/ -> /foo.ext
+    p item.identifier.chop + '.' + item[:extension]
+    item.identifier.chop + '.' + item[:extension]
+  else
+    # /foo/ -> /foo/index.html
+    item.identifier + 'index.html'
+  end
+end
+
+layout '*', :erb
+

config.yaml

@@ -0,0 +1,59 @@
+# A list of file extensions that nanoc will consider to be textual rather than
+# binary. If an item with an extension not in this list is found,  the file
+# will be considered as binary.
+text_extensions: [ 'css', 'erb', 'haml', 'htm', 'html', 'js', 'less', 'markdown', 'md', 'php', 'rb', 'sass', 'scss', 'txt', 'xhtml', 'xml' ]
+
+# The path to the directory where all generated files will be written to. This
+# can be an absolute path starting with a slash, but it can also be path
+# relative to the site directory.
+output_dir: output
+
+# A list of index filenames, i.e. names of files that will be served by a web
+# server when a directory is requested. Usually, index files are named
+# “index.hml”, but depending on the web server, this may be something else,
+# such as “default.htm”. This list is used by nanoc to generate pretty URLs.
+index_filenames: [ 'index.html' ]
+
+# Whether or not to generate a diff of the compiled content when compiling a
+# site. The diff will contain the differences between the compiled content
+# before and after the last site compilation.
+enable_output_diff: false
+
+# The data sources where nanoc loads its data from. This is an array of
+# hashes; each array element represents a single data source. By default,
+# there is only a single data source that reads data from the “content/” and
+# “layout/” directories in the site directory.
+data_sources:
+  -
+    # The type is the identifier of the data source. By default, this will be
+    # `filesystem_unified`.
+    type: filesystem_unified
+
+    # The path where items should be mounted (comparable to mount points in
+    # Unix-like systems). This is “/” by default, meaning that items will have
+    # “/” prefixed to their identifiers. If the items root were “/en/”
+    # instead, an item at content/about.html would have an identifier of
+    # “/en/about/” instead of just “/about/”.
+    items_root: /
+
+    # The path where layouts should be mounted. The layouts root behaves the
+    # same as the items root, but applies to layouts rather than items.
+    layouts_root: /
+
+# Configuration for the “watch” command, which watches a site for changes and
+# recompiles if necessary.
+watcher:
+  # A list of directories to watch for changes. When editing this, make sure
+  # that the “output/” and “tmp/” directories are _not_ included in this list,
+  # because recompiling the site will cause these directories to change, which
+  # will cause the site to be recompiled, which will cause these directories
+  # to change, which will cause the site to be recompiled again, and so on.
+  dirs_to_watch: [ 'content', 'layouts', 'lib' ]
+
+  # A list of single files to watch for changes. As mentioned above, don’t put
+  # any files from the “output/” or “tmp/” directories in here.
+  files_to_watch: [ 'config.yaml', 'Rules' ]
+
+  # When to send notifications (using Growl or notify-send).
+  notify_on_compilation_success: true
+  notify_on_compilation_failure: true

content/ajax/ajax-and-forms.md

@@ -0,0 +1,33 @@
+---
+chapter : ajax
+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
+handling forms with Ajax rather than trying to roll your own solution for
+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
+
+    $('#myForm').serializeArray();
+
+    // creates a structure like this:
+    [
+        { name : 'field1', value : 123 },
+        { name : 'field2', value : 'hello world' }
+    ]
+</div>

content/ajax/ajax-events.md

@@ -0,0 +1,22 @@
+---
+chapter : ajax
+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
+
+<javascript>
+$('#loading_indicator')
+    .ajaxStart(function() { $(this).show(); })
+    .ajaxStop(function() { $(this).hide(); });
+</javascript>

content/ajax/ajax-excercises.md

@@ -0,0 +1,60 @@
+---
+chapter : ajax
+section : 7
+title   : Exercises
+attribution:  jQuery Fundamentals
+---
+## Exercises
+
+### Load External Content
+
+Open the file `/exercises/index.html` in your browser. Use the file
+`/exercises/js/load.js`.  Your task is to load the content of a blog item when
+a user clicks on the title of the item.
+
+1. Create a target div after the headline for each blog post and store a
+   reference to it on the headline element using `$.fn.data`.
+
+2. Bind a click event to the headline that will use the $.fn.load method to
+   load the appropriate content from /exercises/data/blog.html into the target
+   div. Don't forget to prevent the default action of the click event.
+
+Note that each blog headline in index.html includes a link to the post.  You'll
+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>
+
+Remember to make liberal use of `console.log` to make sure you're on the right
+path!
+
+### Load Content Using JSON
+
+Open the file `/exercises/index.html` in your browser. Use the file
+`/exercises/js/specials.js`.  Your task is to show the user details about the
+special for a given day when the user selects a day from the select dropdown.
+
+1.	Append a target div after the form that's inside the #specials element;
+    this will be where you put information about the special once you receive
+    it.
+
+2.	Bind to the change event of the select element; when the user changes the
+    selection, send an Ajax request to `/exercises/data/specials.json`.
+
+3.	When the request returns a response, use the value the user selected in the
+    select (hint: `$.fn.val`) to look up information about the special in the
+    JSON response.
+
+4.	Add some HTML about the special to the target div you created.
+
+5.	Finally, because the form is now Ajax-enabled, remove the submit button
+    from the form.
+
+Note that we're loading the JSON every time the user changes their selection.
+How could we change the code so we only make the request once, and then use a
+cached response when the user changes their choice in the select?

content/ajax/ajax-overview.md

@@ -0,0 +1,31 @@
+---
+chapter : ajax
+section : 1
+title   : Overview
+attribution:  jQuery Fundamentals
+---
+## Overview
+
+The XMLHttpRequest method (XHR) allows browsers to communicate with the server
+without requiring a page reload.  This method, also known as Ajax (Asynchronous
+JavaScript and XML), allows for web pages that provide rich, interactive
+experiences.
+
+Ajax requests are triggered by JavaScript code; your code sends a request to a
+URL, and when it receives a response, a callback function can be triggered to
+handle the response.  Because the request is asynchronous, the rest of your
+code continues to execute while the request is being processed, so it’s
+imperative that a callback be used to handle the response.
+
+jQuery provides Ajax support that abstracts away painful browser differences.
+It offers both a full-featured $.ajax() method, and simple convenience methods
+such as `$.get()`, `$.getScript()`, `$.getJSON()`, `$.post()`, and
+`$().load()`.
+
+Most jQuery applications don’t in fact use XML, despite the name “Ajax”;
+instead, they transport data as plain HTML or JSON (JavaScript Object
+Notation).
+
+In general, Ajax does not work across domains.  Exceptions are services that
+provide JSONP (JSON with Padding) support, which allow limited cross-domain
+functionality.