feat(website): ensure the inputs are mandatory

Move the forms to a partial (had a hard time with HAML-based partials...)
Small box-shadow if not specified
Add a "I'm the owner of that website" checkbox

Author: redox

docs/Gemfile

@@ -5,7 +5,7 @@ source 'https://rubygems.org'
 
 group :development, :test do
   gem 'jekyll', '< 3'
-  gem 'haml'
+  gem 'jekyll-haml'
   gem 'rouge'
   gem 'sass'
   gem 'guard'

docs/Gemfile.lock

@@ -67,6 +67,9 @@ GEM
       jekyll
     jekyll-gist (1.4.0)
       octokit (~> 4.2)
+    jekyll-haml (0.1.3)
+      haml (>= 3.0.0)
+      jekyll (>= 0.10.0)
     jekyll-paginate (1.1.0)
     jekyll-sass-converter (1.3.0)
       sass (~> 3.2)
@@ -127,9 +130,9 @@ DEPENDENCIES
   guard-bundler
   guard-jekyll-plus
   guard-livereload
-  haml
   jekyll (< 3)
   jekyll-contentblocks
+  jekyll-haml
   nokogiri
   rouge
   sass

docs/_includes/join-form.haml

@@ -0,0 +1,22 @@
+%form.join-form{action: '#', method: 'POST'}
+  %h3 Get Started. It’s FREE!
+  .spacer20
+  .input-group
+    %span.input-group-addon
+      %i.fa.fa-fw.fa-globe
+    %input.form-control{type: 'text', placeholder: 'https://website.com/doc', name: 'url'}
+  %p.text-sm We’ll crawl the <u>documentation pages</u> of your website and index them on Algolia.
+  .spacer10
+  .input-group
+    %span.input-group-addon
+      %i.fa.fa-fw.fa-envelope-o
+    %input.form-control{type: 'email', placeholder: 'you@example.org', name: 'email'}
+  %p.text-sm We’ll email you the code you need to integrate the search into your documentation.
+  %p.checkbox.text-center
+    %label
+      %input{type: 'checkbox', name: 'owner'}
+      %span I'm the <u>owner</u> of that website
+  .spacer20
+  .text-center
+    %button.btn.btn-primary.btn-lg{type: 'submit'}
+      JOIN THE BETA!

docs/_plugins/haml.rb

@@ -1,28 +1,40 @@
+require 'jekyll-haml'
+
 module Jekyll
-  class HamlConverter < Converter
-    safe true
-
-    def setup
-      return if @setup
-      require 'haml'
-      @setup = true
-    rescue
-      STDERR.puts 'do `gem install haml`'
-      raise FatalException.new("Missing dependency: haml")
-    end
 
-    def matches(ext)
-      ext =~ /haml/i
+  class HamlPartialTag < Liquid::Tag
+    def initialize(tag_name, file, tokens)
+      super
+      @file = file.strip
     end
 
-    def output_ext(ext)
-      ".html"
-    end
+    def render(context)
+      includes_dir = File.join(context.registers[:site].source, '_includes')
+
+      if File.symlink?(includes_dir)
+        return "Includes directory '#{includes_dir}' cannot be a symlink"
+      end
 
-    def convert(content)
-      setup
-      engine = Haml::Engine.new(content)
-      engine.render
+      if @file !~ /^[a-zA-Z0-9_\/\.-]+$/ || @file =~ /\.\// || @file =~ /\/\./
+        return "Include file '#{@file}' contains invalid characters or sequences"
+      end
+
+      return "File must have \".haml\" extension" if @file !~ /\.haml$/
+
+      Dir.chdir(includes_dir) do
+        choices = Dir['**/*'].reject { |x| File.symlink?(x) }
+        if choices.include?(@file)
+          source     = File.read(@file)
+          conversion = ::Haml::Engine.new(source).render
+          partial    = Liquid::Template.parse(conversion)
+          return partial.render!(context).gsub(/\s+/, ' ')
+        else
+          "Included file '#{@file}' not found in _includes directory"
+        end
+      end
     end
   end
+
 end
+
+Liquid::Template.register_tag('haml', Jekyll::HamlPartialTag)

docs/css/_home.scss

@@ -129,12 +129,19 @@ html, body {
     letter-spacing: 2px;
     font-weight: bold;
   }
+  .input-group, .checkbox input {
+    &.has-errors {
+      -webkit-box-shadow: 0px 0px 20px 0px #FF2E6C;
+      -moz-box-shadow: 0px 0px 20px 0px #FF2E6C;
+      box-shadow: 0px 0px 20px 0px #FF2E6C;
+    }
+  }
 }
 
 @media (min-width: 1200px) {
   .jumbotron .join-form {
     position: absolute;
-    top: 200px;
+    top: 170px;
     right: 120px;
     padding: 10px 40px 30px;
   }

docs/index.haml

@@ -16,24 +16,8 @@ layout: default
       .text-center
         %p We’ve created the fastest, easiest way to search within documentation.
         %p
 And best of all? It’s FREE.
-    %form.join-form{action: '#', method: 'POST'}
-      %h3 Get Started. It’s FREE!
-      .spacer20
-      .input-group
-        %span.input-group-addon
-          %i.fa.fa-fw.fa-envelope-o
-        %input.form-control{type: 'email', placeholder: 'you@example.org', name: 'email'}
-      %p.text-sm We’ll email you the code you need to integrate the search into your documentation.
-      .spacer20
-      .input-group
-        %span.input-group-addon
-          %i.fa.fa-fw.fa-globe
-        %input.form-control{type: 'text', placeholder: 'https://website.com/doc', name: 'url'}
-      %p.text-sm We’ll crawl the documentation pages of your website and index them on Algolia.
-      .spacer20
-      .text-center
-        %button.btn.btn-primary.btn-lg{type: 'submit'}
-          JOIN THE BETA!
+
+    {% haml join-form.haml %}
 #section_why.page-section
   .m800.m-l-r-auto
     %h2.page-section-title Why DocSearch?
@@ -128,22 +112,8 @@ layout: default
       %p We’ll get back to you within a few hours with everything you need to integrate your new search into your website.
       %p Oh, and did we mention it's FREE? No commitment. No subscription. Everything is on us!
     .spacer30
-    %form.join-form{action: '#', method: 'POST'}
-      .input-group
-        %span.input-group-addon
-          %i.fa.fa-fw.fa-envelope-o
-        %input.form-control{type: 'email', placeholder: 'you@example.org', name: 'email'}
-      %p.text-sm We’ll email you the code you need to integrate the search into your documentation.
-      .spacer20
-      .input-group
-        %span.input-group-addon
-          %i.fa.fa-fw.fa-globe
-        %input.form-control{type: 'text', placeholder: 'https://website.com/doc', name: 'url'}
-      %p.text-sm We’ll crawl the documentation pages of your website and index them on Algolia.
-      .spacer20
-      .text-center
-        %button.btn.btn-primary.btn-lg{type: 'submit'}
-          JOIN THE BETA!
+
+  {% haml join-form.haml %}
 
 {% contentfor site-footer %}
 <script src="{{ "/js/home.js" | prepend: site.baseurl }}"></script>

docs/js/home.js

@@ -3,6 +3,24 @@
     var $button = $(this).find('button');
     var $email = $(this).find('input[name="email"]');
     var $url = $(this).find('input[name="url"]');
+    var $owner = $(this).find('input[name="owner"]');
+    var error = false;
+    $(this).find('.has-errors').removeClass('has-errors');
+    if (!$email.val()) {
+      $email.closest('.input-group').addClass('has-errors');
+      error = true;
+    }
+    if (!$url.val()) {
+      $url.closest('.input-group').addClass('has-errors');
+      error = true;
+    }
+    if (!$owner.is(':checked')) {
+      $owner.addClass('has-errors');
+      error = true;
+    }
+    if (error) {
+      return false;
+    }
     $button.attr('disabled', true);
     $.ajax({
       url: 'https://www.algolia.com/docsearch/join',