From d4c4b13e8b975b441eb0ca80338c97547d87840e Mon Sep 17 00:00:00 2001
From: "Yann Esposito (Yogsototh)" <Yann.Esposito@gmail.com>
Date: Thu, 12 May 2011 22:20:57 +0200
Subject: [PATCH] Added support form

---
 .gems                              |   2 +
 config.ru                          |  32 +++++-
 content/html/en/support.md         |  19 +++-
 content/html/fr/support.md         |  19 +++-
 multi/support.md                   |  19 +++-
 site/Scratch/en/support/index.html |  14 ++-
 site/Scratch/fr/support/index.html |  14 ++-
 site/humans.txt                    |   3 -
 site/index.html                    |   2 +-
 site/mail_sent.html                | 165 +++++++++++++++++++++++++++++
 10 files changed, 264 insertions(+), 25 deletions(-)
 create mode 100644 site/mail_sent.html

diff --git a/.gems b/.gems
index 1564d76..30645e5 100644
--- a/.gems
+++ b/.gems
@@ -1,3 +1,5 @@
 rack
 rack-contrib
 rack-rewrite
+sinatra
+pony
diff --git a/config.ru b/config.ru
index 5509636..184ba61 100644
--- a/config.ru
+++ b/config.ru
@@ -3,20 +3,42 @@ require 'rack'
 require 'rack/contrib'
 require 'rack/trystatic'
 require 'mime/types'
+require 'pony'
 
 use Rack::Deflater
 use Rack::ETag
 
 $rootdir="site"
 
-use Rack::TryStatic, 
+$errorFile='site/404.html'
+$mailFile='site/mail_sent.html'
+
+class MyMain < Rack::TryStatic
+    def call(env) 
+        request = Rack::Request.new(env)
+        if request.path == "/contact" and request.post?
+            Pony.mail( :to => "yann.esposito@gmail.com",
+                        :from => request[:mail],
+                        :subject => 'YPassword support',
+                        :body => request[:body])
+            return [200, {
+                "Last-Modified"  => File.mtime($mailFile).httpdate,
+                "Content-Type"   => "text/html",
+                "Content-Length" => File.size($mailFile).to_s
+            }, File.read($mailFile)]
+        else
+            super
+        end
+    end
+end
+
+use MyMain,
     :root => $rootdir,                              # static files root dir
     :urls => %w[/],                                 # match all requests 
     :try => ['.html', 'index.html', '/index.html']  # try these postfixes sequentially
 
-errorFile='site/404.html'
 run lambda { [404, {
-                "Last-Modified"  => File.mtime(errorFile).httpdate,
+                "Last-Modified"  => File.mtime($errorFile).httpdate,
                 "Content-Type"   => "text/html",
-                "Content-Length" => File.size(errorFile).to_s
-            }, File.read(errorFile)] }
+                "Content-Length" => File.size($errorFile).to_s
+            }, File.read($errorFile)] }
diff --git a/content/html/en/support.md b/content/html/en/support.md
index 6b7ec23..dd921e9 100644
--- a/content/html/en/support.md
+++ b/content/html/en/support.md
@@ -13,9 +13,24 @@ menupriority: 4
     <span style="letter-spacing: 1em">Support</span>
 <% end %>
 
-A problem? A remark? Just send me a mail: 
+A problem? A remark? 
+
+<form name="email" id="email" action="/contact" method="post">
+<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
+<input type="text" name="mail" value="Your email"  onfocus="this.value=''" style="display: block; width=20em"/>
+<textarea name="body" id="bodytextarea" value=""  onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
+<input type="submit" value="Send"/>
+</form>
+
+<br/>
+
+By mail:
 
 <yann.esposito.help@gmail.com>
 {: .big} 
 
-Tell me on twitter: [@yogsototh](http://twitter.com/yogsototh)
+
+Via twitter: 
+
+[@yogsototh](http://twitter.com/yogsototh)
+{: .big}
diff --git a/content/html/fr/support.md b/content/html/fr/support.md
index 63ad894..4dd0779 100644
--- a/content/html/fr/support.md
+++ b/content/html/fr/support.md
@@ -13,9 +13,24 @@ menupriority: 4
     <span style="letter-spacing: 1em">Support</span>
 <% end %>
 
-A problem? A remark? Just send me a mail: 
+A problem? A remark? 
+
+<form name="email" id="email" action="/contact" method="post">
+<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
+<input type="text" name="mail" value="Your email"  onfocus="this.value=''" style="display: block; width=20em"/>
+<textarea name="body" id="bodytextarea" value=""  onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
+<input type="submit" value="Send"/>
+</form>
+
+<br/>
+
+By mail:
 
 <yann.esposito.help@gmail.com>
 {: .big} 
 
-Tell me on twitter: [@yogsototh](http://twitter.com/yogsototh)
+
+Via twitter: 
+
+[@yogsototh](http://twitter.com/yogsototh)
+{: .big}
diff --git a/multi/support.md b/multi/support.md
index 2157b93..9b20fce 100644
--- a/multi/support.md
+++ b/multi/support.md
@@ -14,9 +14,24 @@ menupriority: 4
     <span style="letter-spacing: 1em">Support</span>
 <% end %>
 
-A problem? A remark? Just send me a mail: 
+A problem? A remark? 
+
+<form name="email" id="email" action="/contact" method="post">
+<input type="text" name="name" value="Your name" onfocus="this.value=''" style="display: block;width=20em"/>
+<input type="text" name="mail" value="Your email"  onfocus="this.value=''" style="display: block; width=20em"/>
+<textarea name="body" id="bodytextarea" value=""  onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
+<input type="submit" value="Send"/>
+</form>
+
+<br/>
+
+By mail:
 
 <yann.esposito.help@gmail.com>
 {: .big} 
 
-Tell me on twitter: [@yogsototh](http://twitter.com/yogsototh)
+
+Via twitter: 
+
+[@yogsototh](http://twitter.com/yogsototh)
+{: .big}
diff --git a/site/Scratch/en/support/index.html b/site/Scratch/en/support/index.html
index 0470073..7bda851 100644
--- a/site/Scratch/en/support/index.html
+++ b/site/Scratch/en/support/index.html
@@ -79,17 +79,21 @@
 <p>A problem? A remark? </p>
 
 <form name="email" id="email" action="/contact" method="post">
-<input type="text" name="name" value="name" />
-<input type="text" name="mail" value="Your email" />
-<input type="textarea" name="body" value="" />
+<input type="text" name="name" value="Your name" onfocus="this.value=<code>" style="display: block;width=20em" />
+<input type="text" name="mail" value="Your email" onfocus="this.value=</code>" style="display: block; width=20em" />
+<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
 <input type="submit" value="Send" />
 </form>
 
-<p>Or just send me a mail: </p>
+<p><br /></p>
+
+<p>By mail:</p>
 
 <p class="big"><a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#121;&#097;&#110;&#110;&#046;&#101;&#115;&#112;&#111;&#115;&#105;&#116;&#111;&#046;&#104;&#101;&#108;&#112;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;">&#121;&#097;&#110;&#110;&#046;&#101;&#115;&#112;&#111;&#115;&#105;&#116;&#111;&#046;&#104;&#101;&#108;&#112;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a></p>
 
-<p>Tell me on twitter: <a href="http://twitter.com/yogsototh">@yogsototh</a></p>
+<p>Via twitter: </p>
+
+<p class="big"><a href="http://twitter.com/yogsototh">@yogsototh</a></p>
 
             </div>
             <footer>
diff --git a/site/Scratch/fr/support/index.html b/site/Scratch/fr/support/index.html
index e56feca..e0625c6 100644
--- a/site/Scratch/fr/support/index.html
+++ b/site/Scratch/fr/support/index.html
@@ -79,17 +79,21 @@
 <p>A problem? A remark? </p>
 
 <form name="email" id="email" action="/contact" method="post">
-<input type="text" name="name" value="name" />
-<input type="text" name="mail" value="Your email" />
-<input type="textarea" name="body" value="" />
+<input type="text" name="name" value="Your name" onfocus="this.value=<code>" style="display: block;width=20em" />
+<input type="text" name="mail" value="Your email" onfocus="this.value=</code>" style="display: block; width=20em" />
+<textarea name="body" id="bodytextarea" value="" onfocus="this.value=''" style="display: block; height: 10em; width: 30em;">Enter your comment here</textarea>
 <input type="submit" value="Send" />
 </form>
 
-<p>Or just send me a mail: </p>
+<p><br /></p>
+
+<p>By mail:</p>
 
 <p class="big"><a href="&#109;&#097;&#105;&#108;&#116;&#111;:&#121;&#097;&#110;&#110;&#046;&#101;&#115;&#112;&#111;&#115;&#105;&#116;&#111;&#046;&#104;&#101;&#108;&#112;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;">&#121;&#097;&#110;&#110;&#046;&#101;&#115;&#112;&#111;&#115;&#105;&#116;&#111;&#046;&#104;&#101;&#108;&#112;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;</a></p>
 
-<p>Tell me on twitter: <a href="http://twitter.com/yogsototh">@yogsototh</a></p>
+<p>Via twitter: </p>
+
+<p class="big"><a href="http://twitter.com/yogsototh">@yogsototh</a></p>
 
             </div>
             <footer>
diff --git a/site/humans.txt b/site/humans.txt
index 6ebf77c..261c48d 100644
--- a/site/humans.txt
+++ b/site/humans.txt
@@ -8,9 +8,6 @@
   Twitter: yogsototh
   Location: France
 
-/* THANKS */
-  Names (& URL): 
-
 /* SITE */
   Standards: HTML5, CSS3
   Components: Modernizr, jQuery
diff --git a/site/index.html b/site/index.html
index 9a5938f..96a56fc 100644
--- a/site/index.html
+++ b/site/index.html
@@ -50,7 +50,7 @@
     <div id="choixlang"><a href="/Scratch/fr/" onclick="setLanguage('fr')">en Français</a></div>
     <nav id="mainnav">
         <ul>
-            <ul><li><span class="active" title="You're here.">YPassword</span></li><li><a href="/Scratch/en/blog/">Blog</a></li><li><a href="/Scratch/en/about/">About</a></li></ul>
+            <ul><li><span class="active" title="You're here.">YPassword</span></li><li><a href="/Scratch/en/blog/">Blog</a></li><li><a href="/Scratch/en/support/">Support</a></li></ul>
         </ul>
     </nav>
   </header>
diff --git a/site/mail_sent.html b/site/mail_sent.html
new file mode 100644
index 0000000..462d04c
--- /dev/null
+++ b/site/mail_sent.html
@@ -0,0 +1,165 @@
+<!doctype html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+  <!-- 
+    Copyright ©Yann Esposito 2011
+    Extended from HTML5boilerplate
+  -->
+  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+       Remove this if you use the .htaccess -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+  <title>YPassword - Message sent</title>
+
+  <meta http-equiv="REFRESH" content="4;url=/">
+
+  <meta name="description" content="">
+  <meta name="author" content="">
+  
+
+
+  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+
+  <!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
+  <link rel="shortcut icon" href="/Scratch/img/favicon.ico" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+
+  <!-- CSS: implied media="all" -->
+  <link rel="stylesheet" href="/css/less.css"/>
+  <link href='http://fonts.googleapis.com/css?family=Expletus+Sans:bold' rel='stylesheet' type='text/css'>
+  <link href='http://fonts.googleapis.com/css?family=Kreon:regular,bold' rel='stylesheet' type='text/css'>
+  <link rel="stylesheet" href="/css/main.css">
+
+  <!-- Uncomment if you are specifically targeting less enabled mobile browsers
+  <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">  -->
+
+  <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
+  <script src="/js/libs/modernizr-1.7.min.js"></script>
+
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocomen"/>
+
+</head>
+
+<body lang="en">
+  <header>
+    <div id="choixrss"><a id="rss" href="http://feeds.feedburner.com/yannespositocomen">Subscribe</a></div>
+    <div id="choixlang"><a href="/Scratch/fr/" onclick="setLanguage('fr')">en Français</a></div>
+    <nav id="mainnav">
+        <ul>
+            <ul><li><a href="/">YPassword</a></li><li><a href="/Scratch/en/blog/">Blog</a></li><li><a href="/Scratch/en/about/">About</a></li></ul>
+        </ul>
+    </nav>
+  </header>
+  <div id="metacontainer">
+    <div id="container">
+
+      <div id="main" role="main">
+        <hgroup>
+          <h1>Message sent.</h1>
+          
+        </hgroup>
+        
+        <article>
+            <div class="content">
+                <p>Thanks for your message.</p>
+                <p>I will personally reply as soon as possible.</p>
+                <p>You should be automatically redirected in few seconds.</p>
+            </div>
+            <footer>
+                <ul class="article_metadata">
+                    <li>Modified: <time> 05/05/2011</time></li>
+                    <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a></li>
+                </ul>
+            </footer>
+        </article>
+
+      </div>
+    </div> <!--! end of #container -->
+  </div> <!--! end of #metacontainer -->
+  <footer>
+    <div id="webpageinfo">
+        <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Copyright ©, Yann Esposito</a>
+        <div>
+            Entirely done with
+            <a href="http://www.vim.org">Vim</a>
+            and 
+            <a href="http://nanoc.stoneship.org">nanoc</a>
+        </div>
+    </div>
+  </footer>
+
+
+  <!-- JavaScript at the bottom for fast page loading -->
+
+  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
+  <script>window.jQuery || document.write("<script src='/js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
+
+
+  <!-- scripts concatenated and minified via ant build script-->
+  <script src="/js/plugins.js"></script>
+  <script src="/js/script.js"></script>
+  
+<script>
+var blocks=["secure","easy","portable"];
+function show(name) {
+    for ( var i in blocks ) {
+        el=blocks[i];
+        if (el == name) { continue; }
+        // console.log('HIDE: #'+el+'content');
+        $('#'+el+'content').hide();
+    }
+    $('#'+name+'content').show();
+    // console.log('SHOW: #'+name+'content');
+}
+
+$('document').ready(function() {
+    $('.secure').click(function() {show("secure")});
+    $('.easy').click(function() {show("easy")});
+    $('.portable').click(function() {show("portable")});
+    for (var i in blocks) {
+        el=blocks[i];
+        $('#'+el+'content').hide();
+    }
+});
+</script>
+
+  <!-- end scripts-->
+
+
+  <!--[if lt IE 7 ]>
+    <script src="/js/libs/dd_belatedpng.js"></script>
+    <script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
+  <![endif]-->
+
+
+  <!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
+  <script>
+    var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
+    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
+    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
+    s.parentNode.insertBefore(g,s)}(document,"script"));
+  </script>
+
+  <script type="text/javascript">
+        var clicky = { log: function(){ return; }, goal: function(){ return; }};
+        var clicky_site_id = 66374971;
+        (function() {
+              var s = document.createElement('script');
+              s.type = 'text/javascript';
+              s.async = true;
+              s.src = ( document.location.protocol == 'https:' ? 'https://static.getclicky.com/js' : 'http://static.getclicky.com/js' );
+              ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
+        })();
+</script>
+<noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66374971ns.gif" /></p></noscript>
+    
+</body>
+</html>