Beginning home page content and styled layout

controller.rb

@@ -5,6 +5,7 @@ class Controller < Sinatra::Base
   end
 
   get '/?' do
+    title "IndieAuth - Own your online identity"
     erb :index
   end
 
@@ -13,6 +14,7 @@ class Controller < Sinatra::Base
     session[:redirect_uri] = params[:redirect_uri]
 
     if params[:me].nil?
+      title "Error"
       @message = "Parameter 'me' should be set to your domain name"
       erb :error
     else
@@ -80,6 +82,7 @@ class Controller < Sinatra::Base
       end
 
       if !@link
+        title "Error"
         erb :error_no_links
       else
         puts "Provider: #{@provider}"
@@ -112,6 +115,7 @@ class Controller < Sinatra::Base
     if session[:attempted_username] != auth['info']['nickname']
       @attempted_username = session[:attempted_username]
       @actual_username = auth['info']['nickname']
+      title "Error"
       erb :error_bad_user
     else
       session[params[:name]] = auth['info']['nickname']
@@ -127,6 +131,7 @@ class Controller < Sinatra::Base
 
       if login.nil?
         @message = "Login attempt not found"
+        title "Error"
         erb :error
       else
         if session[:redirect_uri]
@@ -145,10 +150,12 @@ class Controller < Sinatra::Base
   get '/auth/failure' do
     @message = params['message']
     erb :error
+    title "Error"
   end
 
   get '/success' do
     @domain = session[:domain]
+    title "Error"
     erb :success
   end
 
@@ -172,6 +179,7 @@ class Controller < Sinatra::Base
   get '/test' do
     if params[:me].nil?
       @error = "Parameter 'me' is required"
+      title "Error"
       erb :error
     else
       # Parse the incoming "me" link looking for all rel=me URLs
@@ -182,18 +190,21 @@ class Controller < Sinatra::Base
       @links = parser.get_supported_links
       puts @links
 
+      title "Test"
       erb :results
     end
   end
 
   get '/reset' do
     session.clear
+    title "Session"
     erb :session
   end
 
   get '/session' do 
     @session = session
     puts session
+    title "Session"
     erb :session
   end
 

helpers/controller.rb

@@ -0,0 +1,36 @@
+class Controller < Sinatra::Base
+  helpers do 
+
+    def title(value=nil)
+      return @_title if value.nil?
+      # TODO: set wiki name in the config file
+      @_title = "#{value} - pkwiki"
+    end
+
+    def viewport
+      '<meta name="viewport" content="width=device-width,initial-scale=1">' if @_mobile
+    end
+
+    def partial(page, options={})
+      erubis page, options.merge!(:layout => false)
+    end
+
+    def partial(page, options={})
+      erb page, options.merge!(:layout => false)
+    end
+
+    def path_class
+      classes = request.path.split('/')
+      classes.push('home') if request.path == '/'
+
+      #if logged_in?
+      #  classes.push('logged-in')
+      #else
+      #  classes.push('logged-out')
+      #end
+
+      classes.join(" ")
+    end
+
+  end
+end

public/css/style.css

@@ -0,0 +1,101 @@
+body {
+  font: 13px Helvetica,arial,freesans,clean,sans-serif;
+  background: url(/img/noise.jpg);
+}
+
+.navbar {
+  position: relative;
+}
+
+
+.hero-unit {
+  background: url(/img/title-bkg.png) top center no-repeat;
+  height: 150px;
+  padding: 10px;
+  text-align: center;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
+.hero-unit h1 {
+  color: #eee;
+  margin-top: 20px;
+  font-size: 36pt;
+  border-bottom: none;
+  font-weight: normal;
+}
+
+.section {
+  background-color: #fff;
+  border: 1px #ddd solid;
+  margin: -20px -20px 35px -20px;
+  padding: 9px;
+}
+.section.row {
+  margin-left: -30px;
+}
+
+/**
+ * Headers
+ */
+h1 {
+  border-bottom: 2px #ccc solid;
+  margin-top: 0.8em;
+  margin-bottom: 0.2em;
+}
+
+h2 {
+  font-family: 'Lucida Grande', helvetica, verdana, sans-serif;
+  color: #555;
+  font-size: 22px;
+  font-weight: 300;
+  margin-bottom: 10px;
+  text-shadow: 0 1px -1px white;
+}
+
+hr {
+  margin: 18px 0;
+  border: 0;
+  border-top: 1px solid #D9D9D9;
+  border-bottom: 1px solid white;
+}
+
+/**
+ * Code/Syntax Highlighting 
+ */
+code, pre {
+  font: 12px Inconsolata,Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
+}
+
+pre {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+}
+
+pre code {
+  display: block;
+  margin: 1.25em 0;
+  padding: 0.75em 1.0em;
+  overflow: auto;
+  white-space: pre;
+  background-color: rgba(155, 155, 155, 0.1);
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -o-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: #ccc 1px 1px 3px 0 inset;
+  -webkit-box-shadow: #ccc 1px 1px 3px 0 inset;
+  -o-box-shadow: #ccc 1px 1px 3px 0 inset;
+  box-shadow: #ccc 1px 1px 3px 0 inset;
+}
+
+code {
+  color: #08C;
+  background: rgba(155, 155, 155, 0.1);
+  white-space: nowrap;
+}
+

views/index.erb

@@ -1 +1,83 @@
-Home
+<div class="hero-unit">
+  <h1>IndieAuth: Own your online identity</h1>
+  <p></p>
+  <p><a class="btn btn-primary btn-large">Web Sign-In &raquo;</a></p>
+</div>
+
+<div class="container">
+
+  <div class="row">
+    <div class="span6">
+
+      <img src="" width="570" height="300" />
+
+    </div>
+    <div class="span6">
+
+      <h2>What is IndieAuth?</h2>
+
+      <p>IndieAuth is lorem ipsum...</p>
+
+      <hr />
+
+      <h2>Why IndieAuth?</h2>
+
+      <p>Blah blah</p>
+
+    </div>
+  </div><!-- row -->
+
+  <div class="row section">
+    <div class="span4">
+      <h3>Documentation</h3>
+
+      <ul class="thumbnails">
+        <li>
+          <a class="thumbnail" href="/documentation">
+            <img src="/img/code-sample.png" width="370" height="154" />
+          </a>
+        </li>
+      </ul>
+
+      <h4>How to Use IndieAuth</h4>
+      <ul>
+        <li><a href="">One</a></li>
+      </ul>
+
+    </div><!-- span4 -->
+    <div class="span4">
+      <h3>Use Cases</h3>
+
+      <ul>  
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+      </ul>
+
+    </div><!-- span4 -->
+    <div class="span4">
+      <h3>Community</h3>
+
+      <ul class="thumbnails">
+        <li class="span1">
+          <a class="thumbnail" href="http://indiewebcamp.com/Main_Page"><img src="/img/wiki-button.png" width="114" height="114" /></a>
+        </li>
+        <li class="span1">
+          <a class="thumbnail" href="http://github.com/aaronpk/IndieAuth"><img src="/img/github-button.png" width="114" height="114" /></a>
+        </li>
+        <li class="span1">
+          <a class="thumbnail" href="http://twitter.com/indiewebcamp"><img src="/img/twitter-button.png" width="114" height="114" /></a>
+        </li>
+      </ul>
+
+      <h4>Join Us</h4>
+      <ul>
+        <li>Add yourself to the <a href="http://indiewebcamp.com/Guest_List">Guest List</a> after logging in with your own domain</li>
+        <li>Add your own IndieWeb projects to the <a href="http://indiewebcamp.com/Projects">Project List</a></li>
+        <li>Attend IndieWebCamp 2012 in Portland, Oregon from <a href="http://indiewebcamp.com/Main_Page">June 30 to July 1, 2012</a>.</li>
+      </ul>
+
+    </div><!-- span4 -->
+  </div><!-- row -->
+
+</div><!-- container -->

views/layout.erb

@@ -0,0 +1,53 @@
+<!doctype html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+
+  <head>
+    <meta charset="utf-8">    
+    <title><%= title %></title>
+    <% if @_meta_description %><meta name="description" content="<%= @_meta_description %>"><% end %>
+    <%= viewport %>
+    <link rel="author" href="/humans.txt">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css" />
+  </head>
+
+  <body class="<%= browser.body_class %> <%= path_class %>">
+
+    <div class="navbar navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
+          <a class="brand" href="/">IndieAuth</a>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li><a href="#howtouse">How to Use</a></li>
+              <li><a href="#usecases">Use Cases</a></li>
+              <li><a href="#community">Community</a></li>
+            </ul>
+            <ul class="nav pull-right">
+              <li><a href="/auth">Web Sign-In</a></li>
+            </ul>            
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+    </div>
+
+    <%= yield %>
+
+  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+  <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
+  <script src="/bootstrap/js/bootstrap.min.js"></script>
+
+  </body>
+</html>