add contact page and google_form plugin

Author: Ruoran Wang

Gemfile

@@ -13,6 +13,7 @@ group :development do
   gem 'rb-fsevent', '~> 0.9'
   gem 'stringex', '~> 1.4.0'
   gem 'liquid', '~> 2.3.0'
+  gem 'nokogiri', '~> 1.5.0'
 end
 
 gem 'sinatra', '~> 1.3.2'

Gemfile.lock

@@ -28,6 +28,7 @@ GEM
     liquid (2.3.0)
     maruku (0.6.0)
       syntax (>= 1.0.0)
+    nokogiri (1.5.4)
     posix-spawn (0.3.6)
     pygments.rb (0.2.12)
       rubypython (~> 0.5.3)
@@ -59,6 +60,7 @@ DEPENDENCIES
   haml (~> 3.1.6)
   jekyll (~> 0.11.2)
   liquid (~> 2.3.0)
+  nokogiri (~> 1.5.0)
   pygments.rb (~> 0.2.12)
   rack (~> 1.4.1)
   rake (~> 0.9.2)

plugins/google_form.rb

@@ -0,0 +1,51 @@
+# Title: Google Form
+# Authors: Arshad http://donothackcore.com
+# Description: A filter to embed Google Forms in Octopress
+#
+# Syntax {% google_form formkey [message] %}
+#
+# Examples:
+# {% google_form dGVfY3MwcklDcjVrZERGYlRoZWdJQnc6MQ Thank you. I'll get back to you shortly %}
+#
+require 'open-uri'
+require 'nokogiri'
+
+module Jekyll
+
+  class GoogleForm < Liquid::Tag
+    @url = ''
+    @formkey = ''
+    @message= ''
+    @formhtml = ''
+
+    def initialize(tag_name, markup, tokens)
+      if markup =~ /([a-zA-Z0-9]*)?\s(.+)/
+        @formkey = $1
+        @message = $2
+        
+        #url of the Google Form
+        @url = "https://docs.google.com/spreadsheet/embeddedform?formkey=#{@formkey}"
+        
+        #parse the HTML and get the form markup only
+        doc = Nokogiri::HTML(open(@url))
+        form = doc.xpath("//form").first.unlink
+        
+        @formhtml = form.to_html
+      end
+      super
+    end
+
+    def render(context)
+      if @formhtml
+        html = '<div class="google-form-wrapper">'
+        html += "<p class='success-msg'>#{@message}</p>"
+        html += @formhtml
+        html += '</div>'
+      else
+        "Error processing input, expected syntax: {% google_form formkey [message] %}"
+      end
+    end
+  end
+end
+
+Liquid::Template.register_tag('google_form', Jekyll::GoogleForm)

source/_includes/custom/head.html

@@ -1,3 +1,17 @@
 <!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
 <link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
 <link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
+
+<!-- Google Form for Contact Page -->
+<!-- jQuery -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script type="text/javascript">
+    // Avoid conflict with ender.js.
+jQuery.noConflict();
+</script>
+<!-- jQuery Form Plugin -->
+<script src="http://malsup.github.com/jquery.form.js"></script>
+<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
+<script src="{{ root_url }}/javascripts/google_form.js"></script>
+<!-- Google Form for Contact Page End here -->
+

source/_includes/custom/navigation.html

@@ -3,4 +3,5 @@
   <li><a href="{{ root_url }}/blog/our-team">Our Team</a></li>
   <li><a href="{{ root_url }}/blog/archives">Archives</a></li>
   <li><a href="{{ root_url }}/blog/about">About</a></li>
+  <li><a href="{{ root_url }}/blog/contact">Contact</a></li>
 </ul>

source/blog/contact/index.markdown

@@ -0,0 +1,11 @@
+---
+layout: page
+title: "contact"
+published: true
+sharing: false 
+date: '2010-06-21 15:11:20'
+footer: true
+---
+
+
+{% google_form dFFjMlBtZ3NqLXI0bVc4bWh1NVN6Qmc6MQ Thank you. We will get back to your shortly. %}

source/javascripts/google_form.js

@@ -0,0 +1,33 @@
+jQuery(document).ready(function() {
+  //clean up empty tags
+  jQuery('.google-form-wrapper p, .google-form-wrapper br')
+    .filter(function() {
+      return jQuery(this).html() == '';
+    })
+    .remove();
+  
+  //add required class to required elements
+  jQuery('.google-form-wrapper form')
+    .find('.ss-item-required input, .ss-item-required textarea')
+    .filter(function() {
+      return jQuery(this).attr('name').match(/entry\.\d\.single/);
+    })
+    .addClass('required');
+ 
+  //validate the form
+  jQuery('.google-form-wrapper form').validate({
+    submitHandler: function(form) {
+      jQuery(form)
+        .ajaxSubmit({
+          error : function (data) { //This is strangely working on error only
+            jQuery(form)
+              .hide(200, function() {
+                jQuery(this)
+                  .prev('.success-msg')
+                  .fadeIn('slow')
+              })
+          }
+        })
+    }
+  });
+});