index.haml

!!! 5
%html
  %head
    %meta{ charset: "UTF-8" }
      %title jQuery Age
      %link{ href:"https://fonts.googleapis.com/css?family=Lato", rel: "stylesheet", type: "text/css" }
      %link{ href:"stylesheets/sample.css", rel: "stylesheet", type: "text/css" }
      %script{ src:"javascripts/jquery.js", type: "text/javascript" }
      %script{ src:"javascripts/jquery.age.js", type: "text/javascript" }
      %script{ src:"javascripts/sample.js", type: "text/javascript" }
      %script{ src: "javascripts/rainbow.js", type: "text/javascript" }
      :javascript

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-31911059-1']);
        _gaq.push(['_trackPageview']);

        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

  %body
    .content
      %a{ href: "https://github.com/ksylvest/jquery-age"}
        %img.fork{ src: "images/fork.png", alt: "Fork" }
      %h1 jQuery Age
      %p Age is a jQuery plugin that formats and tracks dates and times as human readable text.
      %h2 Example
      %section.example
        %p
          Example #1:
          %time.default.age.now Now
        %p
          Example #2:
          %time.default.age{ datetime: "2010-01-01T12:00:00Z" } January 1, 2010 12:00
        %p
          Example #3:
          %time.default.age{ datetime: "2020-01-01T12:00:00Z" } January 1, 2020 12:00
        %p
          Example #4:
          %time.tiny.age.now Now
        %p
          Example #5:
          %time.tiny.age{ datetime: "2010-01-01T12:00:00Z" } January 1, 2010 12:00
        %p
          Example #6:
          %time.tiny.age{ datetime: "2020-01-01T12:00:00Z" } January 1, 2020 12:00
        %p
          Example #7:
          %time.pending.age{ datetime: "3000-01-01T12:00:00Z" } January 1, 3000 12:00
        %p
          Example #8:
          %time.expired.age{ datetime: "2000-01-01T12:00:00Z" } January 1, 2000 12:00
      %h2 Installation
      %p To install download one of these packages and include the jquery.age.js file in your head with the following:
      %section.formats
        .format
          %a.zip{ href: "packages/jquery.age.zip" }
        .format
          %a.tar{ href: "packages/jquery.age.tar" }
      %pre
        %code{ data: { language: "html" } }
          = preserve do
            :escaped
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
              <script src="javascript/jquery.age.js" type="text/javascript"></script>
      %h2 Example
      %p Setting up a date or time is easy. The following snippet is a good start:
      %pre
        %code{ data: { language: "html" } }
          = preserve do
            :escaped
              <time datetime="2010-01-01T12:00:00Z" class="age">January 1, 2010 12:00</time>
              <time datetime="2020-01-01T12:00:00Z" class="age">January 1, 2020 12:00</time>
              <script type="text/javascript">
                $('.age').age();
              </script>
      %p.copy
        Copyright (c) 2013 - 2015 
        %a{ href: "http://ksylvest.com/" } Kevin Sylvestre
      %p.links
        %a{ href: "https://github.com/ksylvest" } GitHub
        %a{ href: "https://plus.google.com/+KevinSylvestre?rel=author" } Google
        %a{ href: "https://twitter.com/ksylvest" } Twitter