index.haml

!!! 5
%html
  %head
    %meta{ charset: "UTF-8" }
      %title jQuery Growl
      %link{ href:"https://fonts.googleapis.com/css?family=Lato", rel: "stylesheet", type: "text/css" }
      %link{ href:"stylesheets/jquery.growl.css", 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.growl.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-growl"}
        %img.fork{ src: "images/fork.png", alt: "Fork" }
      %h1 jQuery Growl
      %p Growl is a jQuery plugin designed to provide informative messages in the browser.
      %h2 Example
      %section.example
        %p
          %ul
            %li
              %a.error{ href: '#' } Error!
            %li
              %a.notice{ href: "#" } Notice!
            %li
              %a.warning{ href: "#" } Warning!
      %h2 Installation
      %p To install download one of these packages and include the jquery.growl.js and jquery.growl.css files in your head with the following:
      %section.formats
        .format
          %a.zip{ href: "packages/jquery.growl.zip" }
        .format
          %a.tar{ href: "packages/jquery.growl.tar" }
      %pre
        %code{ data: { language: "html" } }
          = preserve do
            :escaped
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
              <script src="javascript/jquery.growl.js" type="text/javascript"></script>
              <link href="stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />
      %h2 Example
      %p Growling is easy:
      %pre
        %code{ data: { language: "html" } }
          = preserve do
            :escaped
              <script type="text/javascript">
                $.growl({ title: "Growl", message: "The kitten is awake!" });
                $.growl.error({ message: "The kitten is attacking!" });
                $.growl.notice({ message: "The kitten is cute!" });
                $.growl.warning({ message: "The kitten is ugly!" });
              </script>
      %p.copy
        Copyright (c) 2010 - 2018
        %a{ href: "https://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